/* anti-aging — Figma 7605:8723（1440 × 7680）
   本檔由 functions.php 2b 段依模板檔名自動 enqueue，排在 style.css 之後。
   共用 token 與共用元件請留在 style.css，不要複製到這裡。
   圖文交錯列用共用的 .gaia-story（style.css），本檔只補本頁專屬的圖片長寬比與顏色覆寫。

   本頁未動 style.css。與 style.css 的關係：
   - .gaia-story / .gaia-story-section / --reverse／.gaia-sec-head／.gaia-cta／
     .gaia-why(-card)*：全部是既有共用元件，本檔只做「差異覆寫」，不重寫結構。
   - .gaia-aa-plan*：本頁唯一全新的版面元件（三級對照），style.css 沒有對應物。 */

/* ============================================================
   0) 頁面區域 token（--anti-01 / --anti-02）
   Figma 變數 anti-01 #adb65d／anti-02 #596b30，design-system.md 顏色表早就
   備註過「Figma 另有 anti-01/02，尚未用到，需要時再加」——本頁正是那個
   「需要時」。依任務限制不可寫 style.css 的 :root，故在此以頁面選擇器範圍宣告；
   待主 session 決定是否晉升進 style.css 的全站 :root（用法與既有 token 完全一致，
   晉升時只需搬一行 + 這裡的宣告可以刪除）。
   ============================================================ */
.gaia-anti-aging{
  --anti-01:#adb65d;
  --anti-02:#596b30;
}

/* ============================================================
   0b) 區塊標題 .gaia-sec-head 全頁改綠（2026-08-06 使用者指示）
   本頁 4 組 sec-head 在 Figma 都是綠字，不是全站預設的棕／金：
     中文大標 --main-02 #83522b → --anti-02 #596b30
     英文副標 --main-01 #ba8242 → --anti-01 #adb65d
   逐個 node 核對過（都回同一組變數 anti-02／anti-01）：
     7951:44691 服務項目 Service      7951:46624 蕙林如何幫助抗衰老 Service
     7951:44721 抗衰老方案 Project    7979:16885 案例心得 Case Study
   最後一組在 patterns/case-study.php 裡（本頁 include + do_blocks 重用），
   pattern 檔本身不能改（首頁等處仍要棕字），所以用頁面選擇器覆寫。

   特異性：style.css 的 `.site-main .gaia-sec-head__title` 是 (0,2,0)；
   這裡多一層 .gaia-anti-aging 成 (0,3,0)，不靠載入順序取勝。

   ⚠️ 分隔線（__divider）刻意不動：Figma 那條是 func-02 #d2b32a，
   但主題全站用 --main-01 #ba8242——06 功能醫學的 sec-head（7911:14750）
   同樣是「棕標題 + #d2b32a 分隔線」，可見這是全站層級的既有落差，
   不是本頁的差異。要改是改 style.css 的全站規則，不該只在這頁偷改一半。
   ============================================================ */
.site-main .gaia-anti-aging .gaia-sec-head__title{color:var(--anti-02)}
.site-main .gaia-anti-aging .gaia-sec-head__sub{color:var(--anti-01)}

/* ============================================================
   1) Banner「抗衰再生」— 沿用 .gaia-page-banner 結構（style.css §17），
   覆寫背景圖與標題色。Figma 這裡是綠金直紋紋理 + 白字，
   跟既有 page-banner.webp（米金曲線 + 棕字）視覺上是兩回事，
   兩頁分別維護各自的背景圖，結構（高度/置中）不變。
   ============================================================ */
.gaia-anti-aging .gaia-page-banner{
  background-image:url("../../img/aa-banner.webp");
}
.gaia-anti-aging .gaia-page-banner__title{
  color:#fff;
}

/* ============================================================
   2) 抗衰老是什麼？/ What is anti-aging?（.gaia-aa-intro，沿用 .gaia-story）
   ============================================================ */
/* 單張圖 aspect-ratio 是內容尺寸，不是結構，留在頁面 CSS（沿用 about.css 的慣例） */
.site-main .gaia-story__img--aa-intro{aspect-ratio:517 / 596}

/* 標題色：Figma 這裡與「為什麼需要抗衰老」都是 --anti-02 綠字，
   不是 .gaia-story__title 預設的 --pain-main-01 橘字（5 個療程項目沿用預設橘字，
   已個別核對過 Figma 變數，兩者刻意不同，不是漏改）。 */
.site-main .gaia-aa-intro .gaia-story__title,
.site-main .gaia-aa-why .gaia-story__title{
  color:var(--anti-02);
}

/* 「What is anti-aging?」英文小標：斜體、金色（--func-02），插在標題與內文之間 */
.site-main .gaia-aa-intro__eyebrow{
  margin:0;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1rem;
  letter-spacing:.05em;
  color:var(--func-02);
}

/* 引言結尾的顧客見證引句：粗體、綠字強調（Figma 同一段文字混排兩種顏色） */
.site-main .gaia-aa-intro__quote{
  color:var(--anti-02);
  font-weight:700;
}

/* ============================================================
   3) 服務項目 · Service — 完整沿用 .gaia-why / __grid / -card / __icon / __title
   （style.css §7），本節零新增 CSS。8 張圖已把「外框圓」烤進圖檔本身
   （aa-service-icon-*.svg，Figma 的金圈 Circle 元件 + 線稿合成的透明向量），
   所以套用既有 .gaia-why-card__icon{object-fit:contain} 就會是正確的視覺。

   ⚠️ 這 8 個檔 2026-08-06 前是同名 .webp（白底、無透明通道），疊在本區米金
   漸層上會露出 8 個白方框。素材必須有透明背景，換檔時要確認。
   ============================================================ */

/* ============================================================
   4) 蕙林如何幫助抗衰老 · Service（.gaia-aa-treatments，5 項圖文交錯）
   aspect-ratio 逐張寫在 markup 的 style 屬性（比例值已經隨資料陣列
   $modalities 走，兩處各自寫一次反而容易兜不起來）。

   2026-08-25：4/5 張（hbot/eecp/mcs/ilib）換成診所實拍照，新版 Figma 統一用
   575×340 的 cover 裁切框——沿用 `.gaia-story__img` 本來就有的
   object-fit:cover（style.css §7），這裡不用再覆寫。
   剩下 1 張（h2 氫氧機）是「照片＋機器去背」預組合情境圖、非單一可裁切的
   相片，cover 會裁掉疊圖角落，維持 object-fit:contain + 白底——用
   `$m['collage']=true` 標記，markup 對應加 --collage 修飾 class。
   2026-09-08：h2 換新素材（Figma 8943:10790），仍是同型預組合圖，
   比例改 575/376（與素材同比，contain 實際不會產生留白）；本規則沿用。
   ============================================================ */
.site-main .gaia-aa-treatments__img--collage{
  object-fit:contain;
  background:#fff;
}

/* ============================================================
   5) 抗衰老方案 · Project（.gaia-aa-plan）— 本頁唯一全新元件
   Figma 量到的實際版面是「2 欄 × 2 排」：
     row1 = [情境照片 | 輕保養卡]
     row2 = [進階保養卡 | vs（裝飾字，絕對定位置中）| 高階客製化卡]
   「三級」＝三張卡片，不是三欄並排。
   ============================================================ */
.site-main .gaia-aa-plan{
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);   /* 全寬（配 .site-main 的 overflow-x:clip） */
  padding-block:var(--space-24);
  /* Figma Rectangle 7951:44719：linear-gradient(180deg, transparent → rgba(230,217,169,.2) 中段 → transparent)，
     230,217,169 就是既有 --func-01(#e6d9a9) 的 RGB，這裡用 rgba 寫法是因為漸層每個
     色標的透明度不同、無法只靠 color-mix 一次表達，數值直接對應 Figma 匯出的漸層停駐點。 */
  background-image:linear-gradient(180deg,
    rgba(230,217,169,0) 0%,
    rgba(230,217,169,.1) 26%,
    rgba(230,217,169,.2) 48%,
    rgba(230,217,169,.2) 60%,
    rgba(230,217,169,.1) 85%,
    rgba(230,217,169,0) 100%);
}

.site-main .gaia-aa-plan__row{
  display:grid;
  /* 下限包 min()：硬規則 6。320 畫布下容器只有 280，裸 minmax 會解析成固定軌道溢出。 */
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:clamp(24px,4vw,48px);
  align-items:stretch;
}
.site-main .gaia-aa-plan__row + .gaia-aa-plan__row{margin-top:var(--space-16)}

.site-main .gaia-aa-plan__media{border-radius:5px;overflow:hidden;box-sizing:border-box}
.site-main .gaia-aa-plan__media img{display:block;width:100%;height:100%;object-fit:cover}

.site-main .gaia-aa-plan-card{
  box-sizing:border-box;
  border:1px solid var(--tier);
  border-radius:5px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* 三張卡的主色分別對應 Figma 變數：輕保養＝既有 --func-02；進階保養／高階客製化
   ＝本檔 §0 宣告的 --anti-01 / --anti-02（新 token，見檔頭說明）。 */
.site-main .gaia-aa-plan-card--light{--tier:var(--func-02)}
.site-main .gaia-aa-plan-card--mid{--tier:var(--anti-01)}
.site-main .gaia-aa-plan-card--high{--tier:var(--anti-02)}

.site-main .gaia-aa-plan-card__head{
  margin:0;
  padding:var(--space-4);
  background:var(--tier);
  color:#fff;
  text-align:center;
  font-family:var(--font-jinxuan);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.15em;
}
.site-main .gaia-aa-plan-card__body{
  padding:var(--space-6) var(--space-6) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4);
  flex:1;
}
.site-main .gaia-aa-plan-card__tagline{
  margin:0;
  text-align:center;
  font-family:var(--font-jinxuan);
  font-weight:700;
  font-size:1.125rem;
  color:var(--pain-main-01);
  letter-spacing:.1em;
}
.site-main .gaia-aa-plan-card__list{
  list-style:none;margin:0;padding:var(--space-4) 0 0;
  border-top:1px solid var(--tier);
  display:flex;flex-direction:column;gap:.4em;
}
.site-main .gaia-aa-plan-card__list li{
  position:relative;padding-left:1.1em;
  font-family:var(--font-sans);font-size:1rem;line-height:1.85;letter-spacing:.05em;
  color:var(--text-black);
}
.site-main .gaia-aa-plan-card__list li::before{content:"・";position:absolute;left:0}
.site-main .gaia-aa-plan-card__group{
  padding-top:var(--space-4);
  border-top:1px solid var(--tier);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.site-main .gaia-aa-plan-card__group-label{
  margin:0;font-weight:700;color:var(--main-01);
  font-family:var(--font-sans);letter-spacing:.05em;
}

/* vs：判斷為裝飾字（見 page-anti-aging.php docblock）。
   ⚠️ 第一版用 grid + position:absolute(top:50%) 置中在兩卡縫隙，桌機看起來沒問題，
   但窄寬度兩卡堆疊後，50% 是「整個 row 疊高後」的中點，不是「兩卡交界」，
   實測 320px 量到 vs 疊在「高階客製化」標題列上——six-width 工具量不到這種
   已被 .site-main{overflow-x:clip} 排除水平溢出之外的「內容互疊」問題，
   是另外用真實瀏覽器截圖比對 Figma 才抓到的。
   改法：row--vs 從 grid 換成 flex-wrap。markup 順序是 [卡片, vs, 卡片]，
   兩張卡的 flex-basis 用 min(380px,100%)（跟硬規則 6 的 min() 保護同精神）：
   桌機三者一行放得下，vs 自然卡在兩卡中間；窄寬度卡片各自 basis 撐滿一行、
   強制換行，vs 因為 basis 很小、單獨成行，於是「自己」落在兩卡之間，
   不必算任何座標、也不必開新斷點——純粹是 flex-wrap 換行順序的自然結果。 */
.site-main .gaia-aa-plan__row--vs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,32px);
}
.site-main .gaia-aa-plan__row--vs .gaia-aa-plan-card{
  flex:1 1 min(380px,100%);
  align-self:stretch;
}
.site-main .gaia-aa-plan__vs{
  flex:0 0 auto;
  margin:0;
  font-family:var(--font-serif);font-style:italic;font-weight:700;
  font-size:2.75rem;color:var(--func-01);
  text-shadow:0 0 14px #fff,0 0 14px #fff,0 0 14px #fff;
}

/* ============================================================
   6) 為什麼需要抗衰老？（.gaia-aa-why，沿用 .gaia-story）
   ============================================================ */
.site-main .gaia-story__img--aa-why{aspect-ratio:477 / 544}

.site-main .gaia-aa-why__highlight{
  color:var(--anti-02);
  font-weight:700;
}