/* Reference treatment stays scoped to the "關於南嶼" page only.
   服務項目頁已依使用者指示改回原始卡片網格版本，不再套用本檔案樣式。
   以下數值忠實對照使用者提供的 v3 示意稿（軌道環／照片座標、字級、動畫節奏）。
   燈箱：.planet-photo 內的 img 才是實際可點擊／可聚焦的目標（點擊放大交給
   index.html 既有的 .env-lightbox，見 reference-pages.js 開頭註解），
   所以 focus 樣式要落在 img 上，而不是外層圓形相框。 */
.planet-photo img:focus-visible{outline:3px solid #a8663f;outline-offset:4px}

/* 關於南嶼頁原本的 .view-wrap 沒有 wide 修飾（上限 880px），對雙欄行星相簿版型太窄，
   會把文字與照片一起擠壓變形；比照示意稿最大寬度放寬到 1320px。 */
#view-about .view-wrap.planet-about{width:min(100%,1320px)}
/* 拿掉 OUR STORY 後，Nanyu LAW／關於南嶼上方仍嫌空 —— 把整頁上邊距收窄約一半。 */
#view-about.view{padding-top:clamp(26px,3.5vw,48px)}
/* 左右兩欄：文字欄（.planet-copy）與行星相簿欄（.planet-visual）為同一個 grid 的
   兩個直接子元素，避免像先前一樣把子元素個別指定 grid-row 造成欄位被拉伸，
   這正是先前背景軌道環與照片對不齊的原因。 */
#view-about .planet-about{display:grid;grid-template-columns:.9fr 1.1fr;column-gap:clamp(28px,5vw,72px);align-items:start;max-width:1320px}
#view-about .planet-about .planet-copy{min-width:0}
/* 拿掉 OUR STORY 小標後，上方留白改由這裡直接控制，比原本再收窄約一半。 */
#view-about .planet-title{color:#d4a07c;font:400 clamp(44px,4.6vw,68px)/1.08 Georgia,serif;margin:0 0 20px}
#view-about .planet-zh-title{margin:0 0 20px;color:#16283f;font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:.11em;font-family:var(--serif,"Noto Serif TC",serif)}
/* 拿掉 OUR STORY 後補回其他頁面都有的底線繪製動畫（比照 .hero-rule 的 nyLine）。 */
#view-about .planet-rule{width:88px;height:1px;background:#a8663f;margin-bottom:24px;transform-origin:left;animation:nyLine .9s .25s var(--ease) both}
#view-about .planet-about .about-copy{max-width:560px;gap:16px}
/* 內文字級比照首頁「關於南嶼」段落（16px/2.2），比先前為了塞版面縮小的 14.5px 更大。 */
#view-about .planet-about .about-copy p{font-size:16px;line-height:2.2;letter-spacing:.045em;text-align:justify}
#view-about .about-copy-end-ornament{display:none}

/* 容器的寬高比直接比照示意稿實際算出來的比例（示意稿右欄約 665×690px，
   約 0.96:1），不要再用 vh 夾高度──先前用 58vh 夾住會在一般視窗高度下
   把容器壓得比示意稿矮了快 25%（例如 900px 高視窗只有 522px，示意稿是
   690px），這正是照片看起來「擠、沒有呼吸感」的主因：寬度（跟著容器寬度算
   的照片尺寸）沒錯，但高度被壓縮，照片之間上下的留白比例就整個跑掉。
   改用 aspect-ratio 讓高度跟著實際寬度走，min/max-height 只作為極端視窗的
   保險，不再是主要決定高度的依據。 */
.planet-visual{position:relative;min-width:0;aspect-ratio:665/690;min-height:480px;max-height:690px}
.planet-orbit{position:absolute;left:7%;top:4%;width:78%;aspect-ratio:1;border:1px solid rgba(168,102,63,.28);border-radius:50%;pointer-events:none}
.planet-orbit:after{content:'';position:absolute;inset:-18px;border:1px dashed rgba(212,160,124,.35);border-radius:50%}
.planet-orbit-runner{position:absolute;inset:-11px;border-radius:50%;animation:planet-orbit-spin 11s linear infinite}
.planet-orbit-dot{position:absolute;left:50%;top:0;width:21px;height:21px;border-radius:50%;background:#a8663f;box-shadow:0 0 0 7px rgba(168,102,63,.14);transform:translate(-50%,-50%)}

/* 相簿與軌道環共用同一個座標系（都相對 .planet-visual 定位），照片本身就是「一顆行星」
   的比例，而不是縮小塞進格線裡；持續以 planet-float 微幅漂浮，不提供暫停按鈕。
   .planet-photo 本身不再吃 padding：示意稿的 8px padding 是為了讓「圓形卡片邊框」跟
   「照片」之間留一圈米色間隔，但拿真實環境照片套上去，那圈間隔看起來就像「方形照片被
   縮小塞進圓圈、四周留白」，這正是使用者回報的問題。改成 padding:0，照片直接透過
   overflow:hidden + border-radius:50% 貼齊圓形外框，讓照片本身就是「圓的」。 */
#view-about .about-strip.planet-gallery{position:absolute;inset:0;margin:0;padding:0;overflow:visible;opacity:1;transform:none;animation:none!important}
.planet-photo{--drift:7px;position:absolute;display:block;aspect-ratio:1;padding:0;margin:0;border:1px solid rgba(168,102,63,.4);border-radius:50%;background:rgba(251,249,245,.94);box-shadow:0 18px 42px rgba(22,40,63,.2);cursor:zoom-in;overflow:hidden;animation:planet-float 6.4s cubic-bezier(.22,.78,.22,1) infinite;transition:box-shadow .35s ease,filter .35s ease}
.planet-photo:hover,.planet-photo:has(img:focus-visible){z-index:9;box-shadow:0 28px 58px rgba(22,40,63,.28);animation-play-state:paused}
.planet-gallery:has(.planet-photo:hover) .planet-photo:not(:hover){filter:opacity(.72)}
#view-about .planet-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:1;transform:none;filter:saturate(.82) contrast(1.04);max-width:none}
.planet-photo:nth-child(1){width:55%;right:5%;top:8%;--drift:6px;animation-delay:-1.2s}
.planet-photo:nth-child(2){width:26%;left:0;top:8%;--drift:8px;animation-delay:-3.5s}
.planet-photo:nth-child(3){width:24%;left:4%;top:39%;--drift:5px;animation-delay:-.8s}
.planet-photo:nth-child(4){width:27%;left:18%;bottom:0;--drift:9px;animation-delay:-4.4s}
.planet-photo:nth-child(5){width:22%;right:3%;bottom:3%;--drift:6px;animation-delay:-2.2s}
.planet-photo:nth-child(6){width:19%;right:0;top:45%;--drift:7px;animation-delay:-5.1s}
.planet-photo:nth-child(n+7){position:relative;display:inline-block;width:18%;margin:600px 1% 0;vertical-align:top;animation:none}
@keyframes planet-float{0%,100%{translate:0 0;rotate:0deg}45%{translate:calc(var(--drift)*-.35) calc(var(--drift)*-1);rotate:-.35deg}72%{translate:calc(var(--drift)*.45) calc(var(--drift)*-.25);rotate:.25deg}}
@keyframes planet-orbit-spin{to{transform:rotate(360deg)}}

/* 手機版：文字仍沿用新版排序／字重，但相簿改回原本（行星效果之前）的方形卡片
   小圖網格，不再套用圓形行星／軌道環，因為手機上的行星效果體驗很差。 */
@media(max-width:800px){
  #view-about .planet-about{display:block}
  .planet-visual{height:auto;aspect-ratio:auto;min-height:0;max-height:none;margin-top:35px}
  .planet-orbit{display:none}
  #view-about .about-strip.planet-gallery{position:relative;inset:auto;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:12px;height:auto}
  .planet-photo,.planet-photo:nth-child(n){position:relative;inset:auto;width:auto;aspect-ratio:auto;padding:0;margin:0;border:1px solid var(--border-2,rgba(168,102,63,.4));border-radius:18px;background:var(--cream-2,#fbf9f5);box-shadow:none;animation:none;--drift:0px}
  .planet-photo:hover,.planet-photo:has(img:focus-visible){box-shadow:none}
  #view-about .planet-photo img{border-radius:0!important;height:200px!important}
  .planet-photo:nth-child(1){grid-column:span 7}
  .planet-photo:nth-child(2){grid-column:span 5}
  .planet-photo:nth-child(3),.planet-photo:nth-child(4),.planet-photo:nth-child(5),.planet-photo:nth-child(6){grid-column:span 4}
  .planet-photo:nth-child(n+7){margin:0;width:auto;grid-column:span 4}
}
@media(max-width:520px){
  #view-about .about-strip.planet-gallery{grid-template-columns:1fr}
  .planet-photo,.planet-photo:nth-child(n){grid-column:1!important}
  #view-about .planet-photo img{height:230px!important}
}
@media(prefers-reduced-motion:reduce){.planet-photo,.planet-orbit-runner{animation:none!important}}

@media(min-width:801px){#view-about .planet-gallery.has-many-photos{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;height:auto;padding-top:40px}#view-about .has-many-photos .planet-photo:nth-child(n){position:relative;inset:auto;width:100%;margin:0;animation:none}#view-about .has-many-photos .planet-photo:first-child{grid-column:span 2;grid-row:span 2}}