/* ============================================================
   page-examinations.php — 檢驗檢查、治療技術（總覽頁）
   Figma node 7689:9543（YMOQylTWDWP1skxVO8WJUh）
   只在指派本模板的頁面載入（functions.php §2b）。

   ⚠️ 全站硬規則：這裡 @media 應為 0——所有響應式行為都靠 clamp() /
   auto-fit + minmax(min(Xpx,100%),1fr) 做，不開新斷點。
   ============================================================ */

/* ── 1) 導言：全面檢視 · Holistic（大象插畫 + 說明卡） ──────────────
   .gaia-sec-head 沿用共用元件（零覆寫）。本節新增兩欄框架、卡片樣式，
   以及卡片相對圖片的水平位移（疊圖效果，最終有做出來，見下方說明）。

   與設計稿的差異：get_design_context 量到卡片其實疊在圖片右下角、
   跟圖片有 ~140px 的水平重疊（不是單純並排）。第一版曾以「疊圖量只能用
   固定 px 表達，縮到 320px 畫布時固定 px 的疊圖量會把卡片推出容器」為由，
   整個放棄疊圖、退回純並排——2026-08-07 code review 指出這個推論不成立：
   位移量可以用相對 vw 的公式表達（跟這支檔案本來就在用的
   clamp(24px,6vw,70px) 是同一類技巧），會隨畫布等比例縮小，不會被推出容器。

   最終做法：兩欄框架仍是 auto-fit/minmax(min(320px,100%),1fr)（320px 之下
   照樣自然堆疊成單欄）；疊圖位移改用 clamp() 包住的 vw 公式實作在
   .gaia-exam-intro__card 的 transform 上，完整算式、臨界寬度推導與六寬度
   重測記錄見該處註解，另見 task-6-report.md「修正報告」。 */
.site-main .gaia-exam-intro{padding-block:var(--space-24)}

.site-main .gaia-exam-intro__row{
  display:grid;
  /* 下限包 min()：見硬規則 6，避免 320 畫布下解析成固定寬度軌道而溢出。 */
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(24px,6vw,70px);
  align-items:center;
}

.site-main .gaia-exam-intro__img{
  display:block;width:100%;height:auto;object-fit:cover;border-radius:5px;
  aspect-ratio:763/511;   /* 設計稿容器比例（763×511）；實際供圖是 1024×547，用 cover 裁切 */
}

.site-main .gaia-exam-intro__card{
  background:#fff;border:1px solid var(--sub-02);border-radius:5px;
  padding:clamp(20px,4vw,40px);
  display:flex;flex-direction:column;gap:var(--space-6);
  /* 2026-08-07 code review 修正：設計稿卡片其實疊在圖片右下角，跟圖片有 140px
     水平重疊（以 1200 開版基準，140/1200 ≈ 11.67% 容器寬）。第一版用「疊圖只能
     用固定 px 表達」為由整個放棄疊圖、退回並排——審查指出這個推論不成立：位移量
     可以用相對於 vw 的公式表達，跟本檔案原本就在用的 clamp(24px,6vw,70px) 是
     同一類技巧，位移量會隨畫布等比例縮小，不會被推出容器。

     用 transform（不是 margin）：純視覺位移，不佔版面、不影響 grid 欄寬計算，
     也不會被算進版面捲動寬度以外的地方造成連帶位移。

     算式來源：.gaia-exam-intro__row 用跟 .gaia-story 相同的
     auto-fit + minmax(min(320px,100%),1fr) 兩欄網格，兩欄各自最小寬 320px、
     間距 clamp(24px,6vw,70px)——理論算出「還撐得住、沒有塌成單欄」的臨界點在
     視窗寬 ≈723px（見下方算式）。

     2026-08-17 code review 修正（Minor）：上一版把位移歸零點設在 700px，
     比理論臨界點 723px 早——結果在 700~723px 這段「版面實際仍是單欄」的區間，
     transform 已經開始把單欄卡片往左推，卡片左緣被 .gaia-exam-intro 的
     overflow-x:clip 靜默切掉 1~6px。用 headless Chrome 實測（getComputedStyle
     讀 grid-template-columns）逐 px 確認真正的切換點：723px 仍是單欄
     （gridTemplateColumns 回傳單一軌道），724px 才變兩欄（回傳兩個軌道），與
     理論值 723.4px 幾乎精確吻合。歸零點改設在 728px——比實測切換點 724px
     再晚 4px，留一點跨瀏覽器 subpixel 差異的安全餘裕，確保位移只在「已確定
     是雙欄」之後才開始，不會再咬到單欄區間：
       slope = 140px / (1200-728) = 140/472 ≈ 0.2966
       位移(vw) = -0.2966 * (100vw - 728px)，再用 clamp 夾在 [-140px, 0px] 之間
     （vw ≤728px 時 clamp 的上界 0px 會把公式算出的正值鎖回 0，不需要另外判斷）
     六寬度＋700–720px 區間重測結果見 task-9-fix-report.md。 */
  transform:translateX(clamp(-140px, calc((100vw - 728px) * -0.2966), 0px));
}
.site-main .gaia-exam-intro__title{
  font-family:var(--font-serif);font-weight:700;font-size:1.5rem;
  color:var(--pain-main-01);letter-spacing:.1em;line-height:1.85;margin:0;
}
.site-main .gaia-exam-intro__body{
  font-family:var(--font-sans);font-size:1rem;color:var(--sub-gray-01);
  letter-spacing:.1em;line-height:1.85;text-align:justify;margin:0;
}

/* ── 2) 檢驗檢查 · Inspection：8 組圖文交錯列 ─────────────────────
   結構完全沿用共用元件 .gaia-story / .gaia-story-section /
   .gaia-story--reverse（style.css §3）。這裡只放「這頁跟共用預設不同」
   的兩件事：內文顏色、內容區塊間距。 */

/* get_design_context 量到本頁 8 組內文顏色是 var(--text-3e,#3e3e3e)
   （對應本站 --text-black），不是 .gaia-story__body 預設的 --gray-01
   （#60535d，色相不同的灰紫）。與 page-pain.php 的
   .gaia-pain-choice__body 覆寫是同一件事、同樣理由。 */
.site-main .gaia-exam-items .gaia-story__body{color:var(--text-black)}

/* 2026-08-17 code review 修正（Minor）：內文是 wpautop($desc) 產生的，段落會被包成
   <p>，瀏覽器預設的 <p> margin 不會被 style.css 的 .gaia-story__body{margin:0}
   歸零（那條只歸零 .gaia-story__body 自己的外距，不影響它裡面 <p> 子元素各自
   的內距）。.gaia-story__content 是 flex 容器、每個子元素自成 BFC，<p> 的預設
   margin 不會被外層的 margin collapsing 吃掉，結果會疊加在 gap:var(--space-8)
   算好的節奏之上，讓標題/內文/按鈕的垂直間距比設計稿量到的還大。
   照抄 director.css:49-50（.gaia-director-hero__body 的 ACF 簡介欄位同樣是多段
   <p>，同一類問題）的寫法：段落間距自己控制（--space-4），最後一段的下緣
   margin 歸零，不留在 .gaia-story__body 的外距內、不跟 flex gap 疊加。 */
.site-main .gaia-exam-items .gaia-story__body p{margin:0 0 var(--space-4)}
.site-main .gaia-exam-items .gaia-story__body p:last-child{margin-bottom:0}

/* 設計稿量到標題／內文／按鈕三者垂直間距是 40px，比 .gaia-story__content
   預設的 --space-4(16px) 寬，改用 --space-8(32px)——沿用 8 倍數 token
   查表，不硬編 40。 */
.site-main .gaia-exam-item .gaia-story__content{gap:var(--space-8)}

/* 「了解更多」小按鈕：設計稿量到 120×40（padding 30/10），跟全站共用的
   .gaia-cta（151×50，另外還帶「｜→」分隔線偽元素）尺寸與語意都不同，
   所以不套 .gaia-cta，只在本頁新開一顆小按鈕。 */
.site-main .gaia-exam-items__more{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:10px 30px;box-sizing:border-box;
  background:var(--main-02);color:#fff;border-radius:var(--radius);
  font-family:var(--font-sans);font-size:1rem;text-decoration:none;
  transition:filter .2s ease;
}
.site-main .gaia-exam-items__more:hover{filter:brightness(1.08)}