/* 02-關於蕙林 — Figma 7689:3583
   由 functions.php 2b 段依模板 page-about.php 自動 enqueue，排在 style.css 之後。
   共用 token / 共用元件請留在 style.css，不要複製到這裡。

   本頁重用的共用元件（未在此新增對應 CSS，直接沿用 style.css 既有 class，見 page-about.php docblock）：
   - .gaia-page-banner / .gaia-page-banner__title
   - .gaia-sec-head / __title / __divider / __sub
   - .gaia-why / .gaia-why__grid / .gaia-why-card* / .gaia-why__cta / .gaia-cta
   - .gaia-postlist / .gaia-postcards / .gaia-greviews（透過 include patterns/case-study.php、
     patterns/google-reviews.php 取得，本檔不重複定義）
   - .gaia-story / .gaia-story-section*（2026-08-05 晉升，結構在 style.css。
     本頁沿用結構，只在這裡補下面 5 張圖各自的 aspect-ratio）

   本頁新增（只在這頁使用）：
   1) .gaia-about-intro*   — 「來蕙林，來Healing」引言 + 3 步驟 + 三圖拼貼
   2) .gaia-story__img--pills|capsule|yoga|runner|triangle
                            — Painkillers / No-operation / Healing to Freely
                              三區沿用共用 .gaia-story，這裡只補單張圖長寬比
   ============================================================ */

/* ============================================================
   1) 引言：來蕙林，來Healing（Figma Group 1177，node 7768:5362）
   左：大標 + 引言 + 3 步驟；右：三圖拼貼（大圖在上、兩張小圖並排在下）。
   不滿版，開版寬走 .gaia-wrap（全站公式，見 style.css §2）。
   ============================================================ */
.site-main .gaia-about-intro{padding-block:var(--space-24)}

.site-main .gaia-about-intro__inner{
  display:grid;
  /* ⚠️ 320px 下限要包進 min()，否則容器只有 280 時 minmax 仍解析成固定 320，
     被 .site-main{overflow-x:clip} 悄悄吃掉溢出、量測工具測不到（同 style.css
     .gaia-story 的注解，兩處是同一個 bug，該處另有完整說明）。 */
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(24px,6vw,64px);
  align-items:center;
}

.site-main .gaia-about-intro__title{
  font-family:var(--font-jinxuan);font-weight:700;
  font-size:clamp(1.6rem,4vw,2.25rem);
  color:var(--main-02);letter-spacing:.2em;line-height:1.5;
  margin:0 0 var(--space-4);
}
.site-main .gaia-about-intro__tagline{
  font-family:var(--font-sans);font-size:1.125rem;color:var(--main-01);
  letter-spacing:.1em;line-height:1.5;margin:0 0 var(--space-8);
}

/* 3 步驟：圓形編號 + 標題 + 內文 */
.site-main .gaia-about-steps{
  display:flex;flex-direction:column;gap:var(--space-6);
}
.site-main .gaia-about-step{display:flex;gap:var(--space-4);align-items:flex-start}
/* 圓形編號徽章：結構性宣告（flex/圓形/置中/底色/字體）已收斂進 style.css 的
   .gaia-step-num（2026-08-04，見該處註解）——markup 要同時掛 .gaia-about-step__num
   與 .gaia-step-num 兩個 class。這裡只留跟大小一起變的字級/行高，
   --step-num-size 用預設值（22px，剛好等於這裡原本的寫死值）不必覆寫。 */
.site-main .gaia-about-step__num{font-size:1rem;line-height:1}
.site-main .gaia-about-step__content{display:flex;flex-direction:column;gap:var(--space-2)}
.site-main .gaia-about-step__title{
  font-family:var(--font-sans);font-weight:700;font-size:1.125rem;
  color:var(--main-01);letter-spacing:.1em;line-height:1.85;margin:0;
}
.site-main .gaia-about-step__body{
  font-family:var(--font-sans);font-size:1rem;color:var(--gray-01);
  letter-spacing:.1em;line-height:1.65;text-align:justify;margin:0;
}

/* 引言區照片：單張 477×481（Figma 8631:4461）。
   2026-08-25 前是「大圖跨兩欄＋兩張小圖並排」的三圖拼貼（__gallery/__hero/__sub--a/__sub--b），
   新設計稿改為單張，那組 grid 與三條 aspect-ratio 一併移除，素材 about-intro-1/2/3.webp 也已刪。
   ⚠️ 圓角 10px 不是共用的 5px——設計稿這張與 .gaia-story__img 系列不同，別順手改成 var(--radius)。 */
.site-main .gaia-about-intro__photo{
  display:block;width:100%;height:auto;aspect-ratio:477 / 481;
  object-fit:cover;border-radius:10px;
}

/* ============================================================
   2) Painkillers / No-operation / Healing to Freely 共用：
      「圖文交錯列」（Figma Group 1178 / 1179 / 1180）
   結構（grid／reverse／collage／字體）已於 2026-08-05 晉升為共用元件
   .gaia-story（見 style.css）。這裡只留 02 專屬的單張圖長寬比。
   ============================================================ */
/* 02 專屬：單張圖的長寬比。結構在 style.css 的 .gaia-story，
   這裡只補這一頁各張圖的實際比例。 */
.site-main .gaia-story__img--pills{aspect-ratio:580 / 434}
.site-main .gaia-story__img--capsule{aspect-ratio:477 / 334}
.site-main .gaia-story__img--yoga{aspect-ratio:476 / 380}
.site-main .gaia-story__img--runner{aspect-ratio:507 / 407}

/* ── 「從現在開始，找回健康自己」的文字排版（2026-08-25，Figma 7899:7045）──────
   逐項量到的差異（左：共用元件現況／右：設計稿）：
     內文行高   1.85（29.6px）  →  1.65（26.4px）   ← 最明顯，現況比設計稿鬆
     內文顏色   --gray-01 #60535d → --text-black #3e3e3e  ← 現況偏紫灰
     區塊間距   gap 16px        →  31px（標題與內文、各段之間同值）
   字級 16px、字距 1.6px、text-justify、標題 24px/1.85/#dc7d28 都已相符，不動。
   ⚠️ 只套在本區，共用的 .gaia-story__body / __content 不動（沿用 2026-08-25
   「只改指定區塊」的裁定），其他頁維持現狀。 */
.site-main .gaia-about-healing .gaia-story__content{gap:31px}
.site-main .gaia-about-healing .gaia-story__body{line-height:1.65;color:var(--text-black)}
/* 三角圖是帶文字標籤的靜態示意圖（PRP / 羊膜 / 幹細胞衍生物），
   用 contain 完整顯示、不裁切標籤文字；圖片本身已是白底，補一致的容器背景。 */
.site-main .gaia-story__img--triangle{
  aspect-ratio:476 / 380;object-fit:contain;background:#fff;
}

/* 拼貼裡三張圖的比例也是本頁的內容尺寸（307/204 就是那張照片 614×408 的一半），
   格線結構在 style.css，這裡只給比例。 */
.site-main .gaia-story__img--tall{aspect-ratio:256 / 418}
.site-main .gaia-story__img--top,
.site-main .gaia-story__img--bottom{aspect-ratio:307 / 204}