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

   本頁重用 / 新增總覽見 page-pain.php 檔頭 docblock，這裡只放 CSS 本身。 */

/* ── banner 背景圖覆寫 ────────────────────────────────────────
   .gaia-page-banner 的結構／字級／置中方式全部沿用 style.css 共用規則，
   這裡只覆寫 background-image（本頁是暖橘漸層拱形紋理，不是共用的米金曲線）。
   用雙 class 選擇器（.gaia-page-banner.gaia-pain-banner）保證優先權，
   不依賴「pain.css 排在 style.css 之後」這件事本身。
   ⚠️ 底圖必須是**不含頁名文字**的版本（Figma 7663:3788 那顆 Rectangle 單獨匯出）——
   2026-08-19 曾因匯出整個 Frame（連文字一起烤進圖）造成標題與 h1 重複，重抓修正。 */
.site-main .gaia-page-banner.gaia-pain-banner{
  background-image:url("../../img/pain-page-banner.webp");
}

/* ── 各張 .gaia-story__img 的長寬比（內容尺寸，不是結構，留在頁面 CSS） ── */
.site-main .gaia-story__img--intro{aspect-ratio:826/1220}   /* 2026-08-20 換照，413×610 @2x */
.site-main .gaia-story__img--choice{aspect-ratio:1106/800}
.site-main .gaia-story__img--healing{aspect-ratio:954/1110}

/* ── 「來蕙林，來Healing」的文字節奏（2026-08-25，Figma 7952:49751）──────────
   設計稿的層級是巢狀的：外層 gap 207px（文字群組 ↔ CTA）、內層 gap 60px
   （標題 ↔ 內文），而內文那兩段之間是 0（第一段 mb-0，靠 <br> 自己換行）。
   本頁 markup 是扁平的（標題／兩段內文／CTA 都是 __content 的直接子元素），
   單一 gap 表達不出這三種間距，所以 gap 歸零、改用各自的 margin：
     標題 → 內文     60px
     內文兩段之間     0（設計稿就是連續的，不空行）
   內文行高 1.85、顏色 --gray-01、字距 1.6px 都已與設計稿相符，不動。

   CTA 不硬寫 207px：那個數字是設計稿為了讓按鈕對齊圖片底緣而算出來的一次性
   結果，照抄會在文字長度或視窗寬度一變就失準。改成讓文字欄撐滿列高、
   __content 用 space-between 把 CTA 推到底，達成同樣的「對齊圖片底」意圖
   且隨版面自適應。⚠️ align-items:stretch 只覆寫在本區，共用 .gaia-story
   的 center 對齊不動（其他頁靠它垂直置中）。 */
.site-main .gaia-pain-healing .gaia-story{align-items:stretch}
.site-main .gaia-pain-healing .gaia-story__content{gap:0}
.site-main .gaia-pain-healing .gaia-story__title{margin-bottom:60px}
.site-main .gaia-pain-healing .gaia-story__body{margin:0}
/* ⚠️ 用 margin-top:auto 讓 CTA 獨自吃掉剩餘高度，**不要用 justify-content:space-between**：
   space-between 會把剩餘空間平均分給「標題↔內文」和「內文↔CTA」兩個間隙，
   標題那 60px 會被一起撐開（實測 1440 寬撐成 215px）。auto margin 只作用在 CTA 上，
   標題的節奏才保得住。做法與本頁導言區的 .gaia-pain-intro__cta 一致。
   padding-top 是單欄堆疊時的保底：那時沒有剩餘高度、auto 會歸零，
   沒有它 CTA 會黏在內文上。 */
.site-main .gaia-pain-healing .gaia-story__cta{margin:auto 0 0;padding-top:60px}

/* ══ 導言區（Figma 7689:6522）═══════════════════════════════════════
   設計稿 1440 畫布上量到的骨架：
     照片   x=223  y=399  w=414  h=610          （7605:8596）
     文字欄 x=778         w=439                 （標題 y399／副標 y532／內文 y736）
     CTA    x=1053 y=959  w=151 h=50            → 底端 1009 = 照片底端
     簽名   x=121  y=694  w≈180 h≈105           → 往左突出到照片外 102px
   → 兩欄間距 141、開版 414+141+439 = 994、文字欄頂端與照片頂端切齊。

   共用 .gaia-story 給的是「等寬兩欄 + align-items:center」，這三件事都對不上，
   所以本區用 .gaia-pain-intro__row 覆寫版面，但**照片／文字／CTA 的字體與顏色
   仍走共用元件**，只改版面，不重做一份 .gaia-story。 */

/* 收窄開版：照 design-system.md 硬規則 4，覆寫 --container，不另寫 max-width。 */
.site-main .gaia-pain-intro .gaia-wrap{--container:994px}

/* 不等寬兩欄。用 flex 而不是 grid：grid 的 auto-fit 只能給等寬軌道，
   而設計稿是 414 / 439。flex-basis 直接吃設計稿欄寬，剩餘空間兩欄均分；
   容器不夠時靠 min-width 讓它自然換行堆疊，不另開斷點（硬規則 5）。
   min-width 包 min(Xpx,100%) 的理由同硬規則 6：寫死 414 會在窄畫布變成
   固定軌道、溢出又被 .site-main{overflow-x:clip} 吃掉、量不出來。 */
/* 雙 class（.gaia-story.gaia-pain-intro__row）是為了贏過 style.css 的 .gaia-story，
   不依賴「pain.css 排在 style.css 之後」這件事本身——同 banner 覆寫的既有做法。 */
.site-main .gaia-story.gaia-pain-intro__row{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:clamp(24px,10vw,141px);
}
/* ⚠️ align-self:flex-start 不可省：照片欄若跟著 stretch，它的高度會變成
   「兩欄較高者」而不是照片本身的高度，簽名用的百分比（下方 top/width）
   就會錨到一個比照片高的框上，文字一多簽名就往下飄。實測過一次：文字欄
   638.8 高、照片 609.8 高，簽名因此掉到 308.9（設計稿 295）。 */
.site-main .gaia-pain-intro__row .gaia-story__media{
  position:relative;align-self:flex-start;
  flex:1 1 414px;min-width:min(414px,100%);
}
.site-main .gaia-pain-intro__row .gaia-story__content{
  flex:1 1 439px;min-width:min(439px,100%);
  gap:0;   /* 共用元件的等距 gap 在本區歸零，改用各自 margin 給不等距節奏（見下） */
}

/* 垂直節奏＝設計稿相鄰兩塊的間距：
   標題底 492 → 副標頂 532 = 40；副標底 602 → 內文頂 736 = 134。 */
/* ⚠️ 寫成 shorthand 不是只寫 margin-top：<p> 的 UA 預設 margin-block 是 1em，
   而 .gaia-story__content 是 flex 容器、子項之間**不會** margin collapse，
   只設 margin-top 的話下緣那 1em 會實打實加在下一段的 134px 上。 */
.site-main .gaia-pain-intro__tagline{margin:40px 0 0}
.site-main .gaia-pain-intro__tagline + .gaia-pain-intro__body{margin-top:134px}
/* 兩段內文之間，設計稿是空一行（16px × 行高 1.85 ≈ 29.6）。 */
.site-main .gaia-pain-intro__body + .gaia-pain-intro__body{margin-top:1.85em}

/* CTA 貼齊照片底端、靠右（設計稿 CTA 底端 1009 = 照片底端 1009）。
   margin-top:auto 吃掉文字欄被 align-items:stretch 撐出來的剩餘高度。
   ⚠️ padding-top 不能省：堆疊成單欄之後文字欄高度是 auto、沒有剩餘高度，
   auto margin 會歸零、CTA 會黏在內文上；73px ＝ 設計稿內文底 886 → CTA 頂 959。 */
.site-main .gaia-story__cta.gaia-pain-intro__cta{
  margin:auto 0 0;padding-top:73px;text-align:right;
}

/* 簽名：設計稿是疊在照片上、往左突出到照片外的獨立向量。
   三個數字都換算成照片的百分比，讓它跟著照片一起縮放：
     top   (694-399)/610 = 48.36%
     width  180.4/414    = 43.58%
     左突出 (223-121)/414 = 24.64%
   ⚠️ 左突出量夾在 min() 裡：視窗窄到「開版兩側留白」不夠時自動收回照片內。
   不夾的話會突出到視窗外，而 .site-main 的 overflow-x:clip 會把它無聲裁掉、
   document.scrollWidth 也量不出來（硬規則 7）。994 同上方 --container。 */
.site-main .gaia-pain-intro__sign{
  position:absolute;z-index:1;pointer-events:none;
  top:48.36%;width:43.58%;height:auto;
  left:calc(-1 * min(24.64%, max(0px, (100vw - 994px)/2 - var(--gutter))));
}

/* ── 導言區「詩句式」兩行排法（Figma 量測）──────────────────────────
   中文引言：兩行各自一行，第二行在 439 欄寬內**靠右**（不是縮排）。
   英文副標：第二行縮排（設計稿是行首多打幾個空白，量到 ≈33px ≈ 2.4em）。 */
.site-main .gaia-pain-title span,
.site-main .gaia-pain-intro__tagline span{display:block}
/* 設計稿上這兩行是兩個獨立 text node，行距 49（行高 1.85 給的是 44.4），
   差的 5px 補在第二行，整塊標題才會是設計稿的 93 高、下面的節奏才對得上。 */
.site-main .gaia-pain-title__line--end{text-align:right;margin-top:5px}
.site-main .gaia-pain-intro__line--indent{margin-left:2.4em}

/* 英文副標：Figma 用 Calligraffitti（手寫體），本站目前零 webfont，
   比照 Cinzel／金萱「掛字型前先用 fallback 頂著」的既有決定（見 design-system.md）。
   先用襯線 + 斜體近似，不新鑄 font-family token。

   ⚠️ 字距是 .06em 而不是設計稿的 .2em（14px × .2em = 2.8px）：設計稿那個數字是
   配 Calligraffitti 量的，換成襯線 fallback 之後同一句話變寬——實測第二行在
   .2em 要 485px，但扣掉 2.4em 縮排只剩 405px 可用，會折成三行，把整欄撐高 35px、
   CTA 因此掉出照片底端。.06em 量到 389px（留 16px 餘裕）。
   TODO：日後真的掛上 Calligraffitti 時，字距要**改回 .2em**，不要沿用這個補償值；
         字級 14px、行高 2.5 是照設計稿的，不必動。 */
.site-main .gaia-pain-intro__tagline{
  font-family:var(--font-serif);font-style:italic;
  font-size:.875rem;color:var(--func-02);letter-spacing:.06em;
  line-height:2.5;
}

/* ── 「Choice」區條列（為無法開刀者解套 / 為治療無效者尋路 / 啟動身體修復力）── */
.site-main .gaia-pain-choice__list{
  list-style:none;margin:var(--space-2) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.site-main .gaia-pain-choice__list li{
  position:relative;padding-left:1.2em;
  font-family:var(--font-sans);font-weight:700;font-size:1rem;
  color:var(--gray-01);letter-spacing:.1em;line-height:1.85;
}
.site-main .gaia-pain-choice__list li::before{
  content:"・";position:absolute;left:0;
}

/* 「Choice」區內文段落：疊在共用 .gaia-story__body 上，只覆寫顏色。
   實測（PIL 取樣多行、多次核對）這一段是 --text-black(#3e3e3e)，
   不是 .gaia-story__body 預設的 --gray-01(#60535d)——同頁其餘 .gaia-story__body
   （導言、來蕙林兩區）取樣都對得上 --gray-01，只有這一段不同，是內容本身的差異，
   不是量測誤差，因此在頁面 CSS 加一個顏色覆寫，不動共用元件。 */
.site-main .gaia-pain-choice__body{color:var(--text-black)}

/* ══ 「適合誰？· Who」5 張圓形圖示卡（Figma 7899:7047）════════════════
   設計稿（1440 畫布）：
     底色    x120 y2892 w1200 h1037（＝開版寬，不是滿版），橢圓放射漸層
     header  y2915（底色頂端 +23）
     第一排  3 張，x120 / 560 / 1000，卡寬 320，欄距 120（3×320+2×120=1200 剛好滿版）
     第二排  2 張，y3455（第一排底 3405 +50），置中
     卡內    圓形圖示 150 → gap 40 → 標題 → gap 20 → 內文
   卡片的文字排版（icon/title/body）沿用 style.css 的 .gaia-why-card，
   外層版面、間距、標題顏色是本頁專屬——**不改共用元件**，首頁 WHY 區也在用它。

   為什麼外層不是 .gaia-why__grid：那支是 CSS Grid + auto-fit，在 1200 開版下
   會算出 4 欄（4×270+3×40=1200 剛好整除），5 張卡變成「4＋1」而不是設計稿的
   「3＋2」。改用 flexbox（flex-wrap + justify-content:center）讓不滿的最後一排
   自然置中，才重現得出 3+2。 */
.site-main .gaia-pain-who{padding-block:var(--space-24)}

/* 區塊底色。設計稿的 radialGradient 是 r=10、gradientTransform 把 x 放大 60 倍、
   y 放大 51.85 倍 → rx=600=1200/2、ry=518.5=1037/2，也就是「剛好內接於底色框的
   橢圓」＝ CSS 的 `ellipse closest-side at 50% 50%`。
   掛在 .gaia-wrap 上而不是 section 上：設計稿底色寬度就是開版寬 1200，不是滿版
   （硬規則 2 的反面案例——這塊底色本來就不該滿版）。
   ⚠️ padding-block 是為了補出設計稿「底色比內容多出來的上下緣」（上 23、下 18），
   不是留白手段，跟硬規則 3 講的 padding-inline 是兩回事。
   color-mix 用來取 --pain-main-01 的 20% alpha，不硬編 rgba(220,125,40,.2)；
   萬一瀏覽器不支援就只是沒有底色，版面不受影響。 */
.site-main .gaia-pain-who > .gaia-wrap{
  padding-block:23px 18px;
  background:radial-gradient(ellipse closest-side at 50% 50%,
    color-mix(in srgb, var(--pain-main-01) 20%, transparent) 28.85%,
    transparent 100%);
}

/* 欄距：設計稿 120，但那是「三張 320 卡在 1200 開版下剛好把剩餘空間均分」的結果。
   寫成 calc((100% - 960px)/2) 讓它跟著開版走，開版縮到 1008 之前都還維持 3 欄；
   寫死 120px 的話開版一低於 1200 就直接掉成 2 欄（3+2 會變成 2+2+1）。
   夾在 clamp 裡設下限 24、上限 120（設計稿值），不另開斷點（硬規則 5）。
   列距設計稿 50，取 8 倍數表最近的 --space-12（48）。 */
.site-main .gaia-pain-who__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-12) clamp(24px, calc((100% - 960px) / 2), 120px);
}

/* 卡寬 320（設計稿）。min() 保護：320 畫布下開版只有 280，寫死 320 會爆版（硬規則 6）。
   卡內 gap：設計稿圖示→標題是 40、標題→內文是 20，一個 gap 給不了兩個值，
   所以 gap 設 20、標題再補 20px margin-top。 */
.site-main .gaia-why-card.gaia-pain-who-card{width:min(320px,100%);gap:20px}
.site-main .gaia-pain-who-card .gaia-why-card__title{
  margin-top:20px;
  /* 共用 .gaia-why-card__title 是 --gray-01 + .2em；設計稿這區是 --sub-gray-01 + 1.8px
     （＝.1em）。只在本區覆寫，不動首頁 WHY 也在用的共用元件。 */
  color:var(--sub-gray-01);letter-spacing:.1em;
}