/* 09-門診資訊 — Figma 7900:9510
   由 functions.php 2b 段依模板 page-clinic-info.php 自動 enqueue，排在 style.css 之後。
   共用 token / 共用樣式請留在 style.css，不要複製到這裡。

   本頁區塊對照（詳見 page-clinic-info.php 頂端 docblock）：
   1. 門診時刻表  → 直接沿用首頁已有的 .gaia-clinic 樣式系統（style.css §12），
                    這裡完全沒有新增 CSS，只留一句註記提醒別重複定義。
   2. 交通資訊    → .gaia-transport（新）
   3. 就診流程 5 步驟 → .gaia-flow5（新，本檔最大一塊）
   4. 環境照片 grid ×2 → .gaia-envgrid（新，兩區共用同一組 class）
   5. 常見問題 3 群 → .gaia-clinic-qa（新外殼）+ 沿用 .gaia-faq__item/__q/__a（style.css §16）
*/

/* ============================================================
   1) 門診時刻表 —— 刻意不寫新 CSS
   Figma node 8057:16105「門診資訊」與首頁 .gaia-clinic pattern
  （patterns/clinic-info.php）視覺與結構幾乎完全相同：滿版米白徑向漸層、
   左照片／右資訊四行、虛線、四步看診流程、CTA。
   本頁與首頁差異只有一點：只有一顆「立即諮詢」按鈕（沒有「關於初診流程」線框鈕）；
   「全預約制」提示行（.gaia-clinic__note）本頁一樣要輸出，不是差異項——第一版
   漏放過，已在 page-clinic-info.php 補回，不用改這支 CSS。
   這點只是「markup 少放一個元素」，不影響既有 CSS 選擇器，所以直接沿用
   .gaia-clinic / .gaia-clinic__* / .gaia-clinic-flow* / .gaia-clinic-step* 即可。
   ============================================================ */

/* ============================================================
   2) 交通資訊 · Transportation — Figma node 8406:8586
   標題 + 左地圖圖／右地址-自行開車-大眾運輸 + 右下雙按鈕。
   開版 994（與門診時刻表、常見問題同寬）。
   ============================================================ */
/* section 垂直節奏：全站一律 --space-24（96px 對稱），見 design-system.md
   §「區塊之間的垂直節奏」——2026-08-04 從原本這裡（與 flow5/envgrid/clinic-qa）
   各自寫的 var(--space-16) var(--space-8) 改回來，理由與 Figma 量測依據見該節。 */
.site-main .gaia-transport{padding-block:var(--space-24)}
.site-main .gaia-transport .gaia-wrap{--container:994px}

.site-main .gaia-transport__main{
  display:grid;gap:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  align-items:start;
}
.site-main .gaia-transport__map{margin:0}
.site-main .gaia-transport__map img{width:100%;height:auto;display:block;border-radius:10px}

.site-main .gaia-transport__info{display:flex;flex-direction:column}
.site-main .gaia-transport__addr{
  margin:0 0 20px;font-family:var(--font-sans);font-weight:700;font-size:1.25rem;
  color:var(--main-02);letter-spacing:.1em;line-height:1.4;
}
/* 分隔線：設計稿此區是安靜的單一實線，不是門診時刻表那條兩端圓點虛線，純 CSS 畫 */
.site-main .gaia-transport__rule{
  height:0;margin:20px 0;border:0;border-top:1px solid var(--main-01);opacity:.6;
}
.site-main .gaia-transport__block{display:flex;flex-direction:column;gap:10px}
.site-main .gaia-transport__label{
  margin:0;font-family:var(--font-sans);font-weight:700;font-size:1.125rem;
  color:var(--main-02);letter-spacing:.1em;line-height:1.4;
}
.site-main .gaia-transport__lead{
  margin:0;padding-inline-start:10px;font-family:var(--font-sans);font-size:1rem;
  color:var(--main-02);letter-spacing:.1em;line-height:1.85;
}
.site-main .gaia-transport__list{
  margin:0;padding:0 10px;list-style:none;
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);letter-spacing:.1em;line-height:1.25;
  counter-reset:transport-item;
}
.site-main .gaia-transport__list li{counter-increment:transport-item}
.site-main .gaia-transport__list li::before{content:counter(transport-item) ". "}
/* 大眾運輸清單：設計稿 2026-09-08 版全棕（--main-02），紅線標色已取消 */
.site-main .gaia-transport__list--transit{color:var(--main-02)}
.site-main .gaia-transport__addr a,
.site-main .gaia-transport__list a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.site-main .gaia-transport__addr a:hover,
.site-main .gaia-transport__list a:hover{opacity:.75}
.site-main .gaia-transport__cta{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:30px;margin:30px 0 0;
}

/* ============================================================
   3) 就診流程 5 步驟 · Appointment — Figma node 7948:37793（本頁最大區塊）
   五步結構相同：左側「棕圓數字 + 兩行標題」+ 右側細項列（棕金漸層 pill 標籤 + 說明）。
   五個步驟用同一組 class 迴圈輸出（資料在 page-clinic-info.php 的 PHP 陣列），
   不是五份複製貼上。開版 1200（預設 --container，不覆寫）。
   ============================================================ */
/* section 垂直節奏：--space-24，見 design-system.md §「區塊之間的垂直節奏」 */
.site-main .gaia-flow5{padding-block:var(--space-24)}

.site-main .gaia-flow5__list{margin:0;padding:0;list-style:none}
/* ⚠️ 踩坑：這裡原本用 CSS Grid（grid-template-columns:260px 1fr）做左右兩欄，
   桌機好看，但 260px 是寫死的軌道寬，窄寬度（手機 280 開版）算出來右欄會變成
   負值——grid 不會像 flex 自動整行換行，右欄整組（pill＋說明）被擠到可視範圍
   外側，被全站 .site-main{overflow-x:clip} 悄悄裁掉、量寬工具也測不出來
  （scrollWidth 沒變，因為是被裁切不是被撐開），但視覺上內容直接消失。
   改用 flex-wrap：左側「圓數字＋標題」與右側內容區塊寬度不足並排時，
   flexbox 會自動整組換行變成上下堆疊，不必為此另開斷點（硬規則 5）。 */
/* 間距依 2026-08-27 改版後設計稿（Figma 7947:37504，五步規格統一）：
   左欄→右欄 60、圓號→標題 40、右欄列間 40、pill→說明 80、說明欄 510、
   步驟與虛線間各 40。 */
.site-main .gaia-flow5-step{
  display:flex;flex-wrap:wrap;gap:20px 60px;align-items:flex-start;   /* 左欄圓號貼齊步驟頂端（改版前是垂直置中） */
  padding-block:40px;
}
.site-main .gaia-flow5-step:not(:last-child){border-bottom:1px dashed var(--main-01)}

.site-main .gaia-flow5-step__head{
  flex:0 1 260px;
  display:flex;align-items:center;gap:40px;
}
/* 圓形編號徽章：結構性宣告（flex/圓形/置中/底色/字體）已收斂進 style.css 的
   .gaia-step-num（2026-08-04，見該處註解）——markup 要同時掛 .gaia-flow5-step__num
   與 .gaia-step-num 兩個 class。這裡只留跟大小一起變的尺寸（覆寫 --step-num-size）
   與字級/字重/字距。 */
.site-main .gaia-flow5-step__num{
  --step-num-size:50px;
  font-weight:700;font-size:1.5rem;letter-spacing:.1em;
}
.site-main .gaia-flow5-step__title{
  margin:0;font-family:var(--font-sans);font-weight:700;font-size:1.125rem;
  color:var(--text-black);letter-spacing:.1em;line-height:1.85;
}

/* 2026-08-27 設計稿調整：引言不再獨佔整行，改放進 __body 右欄第一列
  （與 pill 對齊），markup 已同步移位，這裡只剩文字樣式。 */
.site-main .gaia-flow5-step__intro{
  margin:0;
  font-family:var(--font-sans);font-weight:700;font-size:1rem;color:var(--main-02);letter-spacing:.1em;line-height:1.85;
}

.site-main .gaia-flow5-step__body{
  flex:1 1 560px;min-width:0;   /* min-width:0 讓內容（pill/說明）優先自己換行，不撐開整行 */
  display:flex;flex-direction:column;gap:40px;
}
.site-main .gaia-flow5-step__row{display:flex;flex-wrap:wrap;gap:20px 80px;align-items:flex-start}

/* 棕金漸層 pill 標籤：設計稿色票 func-01(#e6d9a9) → bg-color-01(#eee9e4)。
   --func-01 已於 2026-08-04 收編進 style.css 的 :root（與同族 --func-02 並列），
   這裡不再局部定義，直接吃全域 token。 */
.site-main .gaia-flow5-step__pill{
  /* ⚠️ 原本 flex:0 0 240px 在 320 開版下只剩約 40px 餘裕（280 − 240），
     跟就診流程本體踩過的那種「固定寬不能縮」是同一類風險，改用 min() 讓它
     在極窄寬度也能自己收，不必為它另開斷點。 */
  flex:0 1 min(240px,100%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:50px;padding:10px;box-sizing:border-box;border-radius:5px;
  background:linear-gradient(to top,var(--func-01) 0%,var(--bg-color-01) 100%);
  font-family:var(--font-sans);font-weight:700;font-size:1rem;color:var(--main-02);letter-spacing:.1em;line-height:1.4;
}
.site-main .gaia-flow5-step__desc{
  flex:1 1 300px;min-width:0;max-width:510px;   /* 設計稿說明欄固定 510，不吃滿右側剩餘空間 */
  font-family:var(--font-sans);font-size:1rem;color:var(--text-black);letter-spacing:.1em;line-height:1.85;
  text-align:justify;
}
/* 段落間不留空隙：設計稿全區說明文字都是連續行（1.85 行高本身已足夠透氣），
   2026-08-27 依改版後設計稿把原本的 .6em 段距歸零。 */
.site-main .gaia-flow5-step__desc p{margin:0}
.site-main .gaia-flow5-step__desc strong,
.site-main .gaia-flow5-subhead{color:var(--main-02);font-weight:700}
.site-main .gaia-flow5-bullets{margin:.2em 0 .7em;padding:0;list-style:none}
.site-main .gaia-flow5-bullets li{padding-left:1.1em;position:relative}
.site-main .gaia-flow5-bullets li::before{content:"・";position:absolute;left:0}
.site-main .gaia-flow5-step__warn{margin:.6em 0 0;color:var(--pain-main-01);font-weight:700}

/* 步驟 3 內嵌的「損傷分級」手風琴：沿用常見問題手風琴視覺
  （style.css §16 .gaia-faq__item/__q/__a），不另外定義框線與 ± 樣式。
   ⚠️ .gaia-faq__list{display:flex;flex-direction:column} 已是 style.css 裡
   .gaia-faq__list 的全域規則，這裡不重複宣告（review 抓到的 Minor：原本多寫一次
   是無作用的重複）。 */
.site-main .gaia-flow5-step__accordion{width:100%}

.site-main .gaia-flow5__cta{margin:var(--space-12) 0 0;text-align:center}

/* ============================================================
   4) 環境照片 grid ×2 · Clinic Space / Equipment
   Figma node 7948:37820（診所環境 9 張）、8636:15975（診療設備 6 張）。
   兩區共用同一組 class：3 欄 grid，2026-08-27 改版稿後全部橫幅（3:2）——
   原「最後一排直幅」與 --tall 修飾已移除。欄數變化交給 auto-fit，不開新斷點。
   照片改由 ACF gallery 維護（後台「門診資訊頁 → 環境照片」），版面不感知來源。
   開版 1200（預設 --container，不覆寫）。
   ============================================================ */
/* section 垂直節奏：--space-24，見 design-system.md §「區塊之間的垂直節奏」 */
.site-main .gaia-envgrid{padding-block:var(--space-24)}
.site-main .gaia-envgrid__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:30px;
}
.site-main .gaia-envgrid__item{
  margin:0;border-radius:5px;overflow:hidden;background:var(--sub-beige-01);
  aspect-ratio:380 / 253;   /* 全部橫幅（2026-08-27 改版稿移除直幅列，--tall 修飾已一併退場） */
}
.site-main .gaia-envgrid__item img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   5) 常見問題 · Q&A（本頁專屬 3 群手風琴）— Figma node 7948:37850
   跟 404 頁用的 gaia/faq（單一手風琴列表）是不同元件：這裡是 3 個各有 icon／標題的
   獨立手風琴群組，資料是本頁專屬的臨床衛教問答，不是 ACF「常見問題」設定頁的內容，
   所以外殼另開 .gaia-clinic-qa，但手風琴本身仍 100% 沿用
   .gaia-faq__item/__q/__a（style.css §16），不重寫框線與 ± 樣式。
   開版 994（與門診時刻表、交通資訊同寬，對齊設計稿）。
   ============================================================ */
/* section 垂直節奏：--space-24，見 design-system.md §「區塊之間的垂直節奏」
   （這裡原本是 var(--space-16) var(--space-24)，跟另外三個新 section 用的
   var(--space-16) var(--space-8) 還不一樣——同一頁內部就已經不一致，一併修正） */
.site-main .gaia-clinic-qa{padding-block:var(--space-24)}
.site-main .gaia-clinic-qa .gaia-wrap{--container:994px}

.site-main .gaia-clinic-qa__groups{display:flex;flex-direction:column;gap:var(--space-16)}
.site-main .gaia-clinic-qa__group-head{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;
}
.site-main .gaia-clinic-qa__group-icon{flex:0 0 auto;display:block}
.site-main .gaia-clinic-qa__group-title{
  margin:0;font-family:var(--font-sans);font-weight:700;font-size:1.5rem;
  color:var(--main-01);letter-spacing:.1em;line-height:1.85;
}
/* 答案裡的條列（FAQ 定稿有 4 題用清單）。style.css §16 的 .gaia-faq__a 只定義了 p 的
   間距，ul 會落到瀏覽器預設（1em 上下距＋40px 縮排），跟 p 的 10px 節奏對不上，
   這裡對齊之；只 scope 在本頁外殼底下，不動 404 頁共用的 .gaia-faq__a。 */
.site-main .gaia-clinic-qa .gaia-faq__a ul{margin:0 0 10px;padding-left:1.5em}
.site-main .gaia-clinic-qa .gaia-faq__a ul:last-child{margin-bottom:0}
.site-main .gaia-clinic-qa .gaia-faq__a li{margin:0}