/*
* director.css — 04-關於院長（page-director.php）
* Figma node 7901:10629「醫師個人頁-經歷 + 理念」（檔案 YMOQylTWDWP1skxVO8WJUh）
*
* 由 functions.php 2b 段依模板檔名自動 enqueue（page-director.php → director.css）。
* 命名規則：頁面新增的 class 一律 .gaia-director-<元件>（design-system.md
* 「頁面 CSS 的命名與晉升規則」），只有這一頁用到、未晉升進 style.css。
*
* 這頁七個小節（邱院長的無痛哲學／學術演講／臨床教學／院長經歷專長／專業證書／
* 公益與進修／從 Healing 到 Freely 的自在人生）逐節點量測都落在 994px 寬
* （(1440-994)/2=223，與頁面上每個區塊的內距吻合），跟全站既有 .gaia-postlist /
* .gaia-thanks / .gaia-clinic 用的 --container:994px 是同一個開版寬——這裡整頁
* 覆寫一次，而不是每個 section 各自覆寫。
*
* ⚠️ 修正輪第 1 輪補上「從 Healing 到 Freely 的自在人生」（.gaia-director-vision*，
* 見檔案最後一段）：原本整段漏切，由審查用 get_screenshot 對 Figma 全圖逐段核對
* 才抓到，詳細原因記在 page-director.php 的 docblock。
*/
.site-main .gaia-director .gaia-wrap{--container:994px}
/* ============================================================
邱院長的無痛哲學（Figma node 7901:12524）
結構沿用全站共用元件 .gaia-story-section / .gaia-story（style.css §3），
這裡只加：滿版漸層底、圖片比例、內文顏色覆寫、右下角簽名定位。
⚠️ 修正輪第 2 輪：設計稿定稿後改為靜態內容（原本 ACF 可編），
標語不再需要 white-space:pre-line 容錯 ACF 換行輸入，但保留這條規則
（寫死的
也吃得到，拿掉沒有實益、留著也不影響其他元素）。
============================================================ */
/* 滿版漸層底（Figma：linear-gradient 上下白、中段 50.481% 是 rgba(238,233,228,.6)）。
跟 .gaia-page-banner／.gaia-clinic 一樣用 100vw + overflow-x:clip（.site-main 已有）。 */
.site-main .gaia-director-hero{
width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
background:linear-gradient(to bottom,#fff 0%,rgba(238,233,228,.6) 50.481%,#fff 100%);
}
/* 圖片比例：Figma 414×742（直式全身/半身照）。
硬規則 9：aspect-ratio 生效必須同時有 height:auto，否則被原生 height 屬性卡死。 */
.site-main .gaia-director-hero__img{aspect-ratio:414/742;height:auto}
/* 標語（.gaia-story__title 的字級/顏色/字重跟 Figma 這裡的 24px 橘色粗體完全一致，
直接沿用，只加 white-space 讓 ACF Textarea 打的換行生效）。 */
.site-main .gaia-director-hero__headline{white-space:pre-line}
/* 內文顏色覆寫：Figma 這段文字容器預設是 --gray-01，但幾乎每一句都被內層 span
蓋成 --text-black（#3e3e3e），只有重點句用 --pain-main-01 橘色粗體。
內文寫死在 page-director.php，強調句與結尾引言都直接用 包住，
沿用這裡既有的自動套色規則，沒有另外發明新的強調樣式。 */
.site-main .gaia-director-hero__body{color:var(--text-black)}
/* 區塊垂直節奏：設計稿 8633:5156 的文字欄 flex column gap 45px
（標題／內文／CTA 之間），共用元件預設 16px。段落之間另由下方的
p{margin:0 0 1.85em} 管（設計稿用
空行），兩者不同層級。 */
.site-main .gaia-director-hero .gaia-story__content{gap:45px}
/* 同上：共用 __cta 的 margin-top 8px 會疊在 gap 45 上，歸零讓 gap 說了算。 */
.site-main .gaia-director-hero .gaia-story__cta{margin-top:0}
.site-main .gaia-director-hero__body strong,
.site-main .gaia-director-hero__body b{color:var(--pain-main-01)}
/* 段落間距＝一整行（2026-08-25，Figma 8633:5156）：設計稿段與段之間空一行
（＝一個 line-height），原本 var(--space-4)＝16px 比設計稿窄約 13.6px。 */
.site-main .gaia-director-hero__body p{margin:0 0 1.85em}
.site-main .gaia-director-hero__body p:last-child{margin-bottom:0}
/* 人像照右下角手寫簽名（Figma 素材 dir-signature.svg，邱柏鈞醫師簽名）。
Figma 8633:5163 相對照片（414×742）的實測值：left 340／top 492／177.302×103.389
→ width 42.83%、top 66.31%，**右緣往照片外探出 24.96%**（≈115px @462 照片寬）。
⚠️ 沿革（2026-08-25 改）：先前刻意把簽名內縮在照片內（right:4%／bottom:6%／
width:36%），理由是當時版面是「左圖右文」，往右溢出會蓋到右側文字欄。
本次依 Figma 7901:12524 改成「左文右圖」後，照片右邊已是頁面留白、不再有文字，
那個顧慮消失，因此還原設計稿的探出效果。**若日後又把這區改回左圖右文，
這段溢出必須一併收回**，否則會壓到文字。
溢出量不能寫死：照片右緣貼齊開版右緣，可用空間＝(100vw − 開版寬)/2，
視窗一窄就不夠，硬寫 24.96% 會被 .site-main{overflow-x:clip} 靜默裁掉半個簽名
（量測工具也測不出來，見硬規則 7）。故取「設計稿比例」與「實際可用空間」的較小者，
再用 max(0px, …) 兜底：空間不足時退回貼齊照片右緣（0 溢出），不會反向被推進照片裡。
實測：1280 → 完整探出 115px；1024 以下 → 自動收斂為 0，兩者都不裁切、不壓字。 */
.site-main .gaia-director-hero .gaia-story__media{position:relative}
.site-main .gaia-director-hero__signature{
position:absolute;
top:66.31%; /* Figma 492/742 */
width:42.83%; /* Figma 177.302/414 */
height:auto;
right:calc(-1 * max(0px, min(24.96%, (100vw - var(--container)) / 2 - 16px)));
pointer-events:none;
}
/* ============================================================
卡片列共用：學術演講／臨床教學／公益與進修
（Task 3 逐節點核對：三處欄數、卡寬 300px、位移 0/347/694px、圖高 200px、
caption 字級全部一致，這裡共用一組選擇器，不要各寫三份——見 design-system.md
「第三波元件晉升判定」一節。三處內容一律 ACF Repeater，見 page-director.php
docblock 的內容發現：Figma 三處的圖與文字目前是同一組佔位資料）。
============================================================ */
.site-main .gaia-director-cardrow3{padding-block:var(--space-24)}
.site-main .gaia-director-cardrow3__grid{
display:grid;
gap:var(--space-8) 47px;
/* auto-fill 不是 auto-fit：張數由 ACF Repeater 決定，auto-fit 在只有 1~2 張時
會把卡片撐滿整列、尺寸跟設計稿的固定 300px 不符（同 .gaia-postcards 的理由）。
下限包 min()：見硬規則 6，避免 320 畫布下裸 minmax(300px,...) 撐出隱形溢出。 */
grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.site-main .gaia-director-cardrow3__item{display:flex;flex-direction:column;gap:10px}
.site-main .gaia-director-cardrow3__img{
display:block;width:100%;aspect-ratio:300/200;height:auto;object-fit:cover;border-radius:5px;
}
.site-main .gaia-director-cardrow3__caption{
margin:0;font-family:var(--font-sans);font-weight:700;font-size:.875rem;
color:var(--text-black);line-height:1.85;text-align:justify;
}
/* ============================================================
院長經歷專長（Figma node 7901:12523，帶漸層底，結構與上面漸層規則相同）
============================================================ */
.site-main .gaia-director-profile{
width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
background:linear-gradient(to bottom,#fff 0%,rgba(238,233,228,.6) 50.481%,#fff 100%);
}
.site-main .gaia-director-profile__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
gap:clamp(24px,6vw,70px);
align-items:start;
}
.site-main .gaia-director-profile__name{
display:flex;flex-wrap:wrap;align-items:baseline;gap:17px;
font-family:var(--font-sans);color:var(--gray-01);
}
.site-main .gaia-director-profile__name-text{font-weight:700;font-size:2rem}
.site-main .gaia-director-profile__position{font-weight:700;font-size:1.125rem}
.site-main .gaia-director-profile__specialty{
margin:var(--space-4) 0 0;font-family:var(--font-sans);font-weight:700;
font-size:1.125rem;color:var(--gray-01);
padding-top:var(--space-4);border-top:1px solid rgba(96,83,93,.25);
}
.site-main .gaia-director-profile__group{
margin-top:var(--space-4);padding-top:var(--space-4);
border-top:1px solid rgba(96,83,93,.25);
}
.site-main .gaia-director-profile__group-title{
margin:0 0 var(--space-2);font-family:var(--font-sans);font-weight:700;
font-size:1.125rem;color:var(--gray-01);
}
.site-main .gaia-director-profile__list{
margin:0;padding-left:1.4em;color:var(--gray-01);font-size:1rem;line-height:1.85;
}
.site-main .gaia-director-profile__list li + li{margin-top:4px}
.site-main .gaia-director-profile__aside{
display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center;
}
/* Figma：rounded-[100000px] ≈ 完全圓形；371×374 幾乎是 1:1，用 1/1 而非量到的小數值。 */
.site-main .gaia-director-profile__photo{
width:100%;max-width:374px;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:50%;
}
.site-main .gaia-director-profile__quote{
margin:0;padding:var(--space-4) 0;font-family:var(--font-serif);font-weight:600;
font-size:1.125rem;color:var(--main-02);letter-spacing:.1em;line-height:1.85;
border-block:1px solid rgba(186,130,66,.4); /* 對應 Figma 引號上下各一條 1px 細線 */
}
.site-main .gaia-director-profile__actions{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-6);
}
.site-main .gaia-director-profile__social{display:flex;align-items:center;gap:7px}
.site-main .gaia-director-profile__social img{display:block}
/* ============================================================
專業證書（Figma node 7904:1744）
Task 3 已核對：這是「看起來像 cardrow3 但結構不同」的第 4 塊——三張圖比例不一
（其中一張是 aspect-[1054/745]，另兩張固定 212px 高），字級也混雜 14/16px。
證書／證照是掃描文件，裁切會切掉邊緣文字，這裡故意不比照 cardrow3 用固定
300×200 + cover 裁切，改成每張圖用自己的原生比例（ACF 圖片欄位帶的
width/height）+ object-fit:contain，避免裁掉證書內容。
============================================================ */
.site-main .gaia-director-certs{padding-block:var(--space-24)}
.site-main .gaia-director-certs__grid{
display:grid;gap:var(--space-6) 47px;
grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.site-main .gaia-director-certs__item{display:flex;flex-direction:column;gap:var(--space-4)}
.site-main .gaia-director-certs__img{
display:block;width:100%;height:auto;object-fit:contain;border-radius:5px;
background:var(--sub-beige-01); /* 證書多半留白邊，contain 不裁切時給個底色墊著 */
}
/* Figma 這裡的說明文字是 Tailwind 字面 text-black（純黑 #000），
跟全站 token --text-black（#3e3e3e）是兩個不同的顏色，Task 4 逐節點核對後
確認 Figma 原稿在這三張卡片就是用純黑，跟旁邊三個卡片列的 #3e3e3e 不同，
刻意不套用同一個 token。 */
.site-main .gaia-director-certs__caption{
margin:0;font-family:var(--font-sans);font-weight:700;font-size:.875rem;
color:#000;line-height:1.85;
}
/* ============================================================
從 Healing 到 Freely 的自在人生 · Vision（修正輪第 1 輪補上）
外層沿用全站共用 .gaia-story-section（只借它的 padding-block 節奏），
但**不用** .gaia-story 的雙欄 grid——get_screenshot 全圖核對後，這裡實際是
「置中 sec-head → 置中兩行標語 → 滿版寬情境圖 → 虛線分隔」單欄堆疊，
跟 page-about.php／page-pain.php 同名區塊的圖文雙欄排法不同（見
page-director.php docblock「派工單與 Figma 實測的落差」第 3 點），
所以另外寫一組單欄用的選擇器，不要勉強塞進 .gaia-story。
============================================================ */
.site-main .gaia-director-vision__tagline{
margin:0 0 var(--space-8);text-align:center;
font-family:var(--font-serif);font-weight:700;font-size:1.125rem;
color:var(--pain-main-01);letter-spacing:.1em;line-height:1.85;
}
.site-main .gaia-director-vision__media{
max-width:994px;margin-inline:auto;
}
/* 修正輪第 2 輪換圖：院長與兩位患者諮詢的實照（取代舊的截圖裁切版本），
新素材 dir-healing-consult.webp 原生 1800×1146，實測 Figma 顯示比例 994:633
（994 正好等於本頁容器寬，代表設計稿幾乎是滿版寬鋪這張圖），與素材原生比例
（1800:1146≈1.571）幾乎一致，這裡直接用素材原生尺寸當 aspect-ratio。 */
.site-main .gaia-director-vision__img{
display:block;width:100%;aspect-ratio:1800/1146;height:auto;object-fit:cover;
}
/* ─────────────────────────────────────────────────────────────
卡片列輪播（學術演講／臨床教學／公益與進修／專業證書 四區共用）
設計稿四區都是「3 張卡 + 左右箭頭 + 分頁圓點」。初版切版時判定圓點是元件庫
殘留、沒做輪播——當時三區用的是同一組重複佔位圖文、圓點數(4)也對不上卡片數(3)。
設計稿定稿後每區都有真實且多於一頁的內容，該判斷已推翻（使用者 2026-08-17 指定）。
⚠️ 這裡刻意不用 @media（全站硬規則：不為排版反應開新斷點）：
卡寬固定 min(300px,100%)，「一頁塞得下幾張」由 JS 量測得到（見 functions.php
的 initCarousel，cardrow 版的 perPage 是數有幾張卡的左緣還落在 viewport 內）。
1440 開版寬 994px 時剛好 3×300 + 2×47 = 994，與設計稿一致；
320 畫布時 min() 讓卡片收成 100%，自然變成一頁一張。
位移量也不寫死：JS 把「一頁的像素寬」寫進 --cardrow-step，這裡只做乘法。
───────────────────────────────────────────────────────────── */
.site-main .gaia-cardrow{position:relative}
/* viewport 藏住框外的卡片；框外那些會被逐元素溢出檢查列為候選，屬預期
（見 tools/measure-elements.mjs docblock 的「輪播軌道」那條）。 */
.site-main .gaia-cardrow__viewport{overflow:hidden}
.site-main .gaia-cardrow__track{
transform:translateX(calc(var(--cardrow-page,0) * var(--cardrow-step,0px) * -1));
transition:transform .4s ease;
}
/* 單行排列：auto-flow column 讓所有卡片排成一列，超出的交給 viewport 藏、靠翻頁看。
蓋掉原本 auto-fill 的換行網格（那是沒有輪播時的排法）。 */
.site-main .gaia-director-cardrow3__grid.gaia-cardrow__track,
.site-main .gaia-director-certs__grid.gaia-cardrow__track{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:min(300px,100%);
}
/* 箭頭：垂直置中在 viewport 兩側外緣，沿用全站的金棕色系 */
.site-main .gaia-cardrow__arrow{
position:absolute;top:calc(50% - 28px);transform:translateY(-50%);
width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;
color:var(--main-01);line-height:1;z-index:2;
}
.site-main .gaia-cardrow__arrow::before{
content:'';display:block;width:12px;height:12px;margin:0 auto;
border-top:2px solid currentColor;border-right:2px solid currentColor;
}
/* 箭頭擺在卡片外側的留白裡（設計稿如此）。但**留白會隨視窗變窄而消失**——
實測 1024px 時 left:-34px 會讓箭頭有一半被切在畫面外、看不到也點不到。
用 max() 夾住：空間夠就用 -34px，不夠就退到視窗內側。
緩衝取 18px 而非個位數：50vw **含捲軸寬**，可視區比 layout viewport 少一個捲軸
（實測 1024 → clientWidth 1009），緩衝沒蓋過捲軸的話箭頭仍會露出去 3.5px。
calc(50% - 50vw) 是本主題滿版區塊在用的同一個算式（見 style.css 的
margin-inline:calc(50% - 50vw)），意義是「從本元素左緣到視窗左緣的距離」。
不開 @media 就能自適應。 */
.site-main .gaia-cardrow__arrow--prev{left:max(-34px, calc(50% - 50vw + 18px))}
.site-main .gaia-cardrow__arrow--prev::before{transform:rotate(-135deg)}
.site-main .gaia-cardrow__arrow--next{right:max(-34px, calc(50% - 50vw + 18px))}
.site-main .gaia-cardrow__arrow--next::before{transform:rotate(45deg)}
.site-main .gaia-cardrow__arrow[disabled]{opacity:.25;cursor:default}
/* 圓點 */
.site-main .gaia-cardrow__dots{
display:flex;justify-content:center;gap:10px;margin-top:var(--space-6);
}
.site-main .gaia-cardrow__dot{
width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:var(--sub-02);
}
.site-main .gaia-cardrow__dot.is-active{background:var(--main-01)}