/* =====================================================================
   資訊頁 · css/info.css（關於基金會、解憂雜貨店、聯絡我們、使用條款；2026-10-13 IRON 新增 Wireframe 11708:41828）
   ▸ 只寫這四頁專用的 class（.info-／.about-／.hope-／.contact／.terms）；KV、錨點列、卡片、按鈕、內文沿用 components.css／base.css
   ▸ 內容寬：2026-10-13 IRON 改滿版，同主題專頁寬度規則（左右 --wl-margin 40／24／18、不設最大寬）；文字欄仍限 760 閱讀寬；圓角 12、不幫卡片加外框與色邊（手冊 7.x）
   ===================================================================== */

/* ---------- 0. 錨點列下緣進度條（同關注領域內頁 .area-nav__bar） ---------- */
.info-subnav{position:sticky}
.info-subnav__bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none}
.info-subnav__bar i{display:block;height:100%;background:var(--wl-text);transform:scaleX(0);transform-origin:left center}

/* ---------- 1. 關於基金會：區塊共用 ---------- */
.about-sec{scroll-margin-top:calc(var(--wl-nav-h) + var(--wl-subnav-h))}
.about-sec__inner{max-width:none}
.about-sec__head{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--wl-space-10)}
.about-sec .wl-body-l + .wl-body-l{margin-top:var(--wl-space-5)}

/* 裝飾（2026-10-13 IRON：畫面過度簡約，加強設計但不花俏）：董事長信件引號、照片署名（Lexend Exa 細節）。
   ▸ 光球、各區塊英文大字 .about-sec__word 已依 IRON 第三、四輪移除 */
.about-sec{position:relative;isolation:isolate;overflow:hidden}
.about-sec__inner{position:relative}

/* 願景與使命（2026-10-13 IRON 第四輪：照原站版型）：左欄 5 標題＋引言兩段，右欄 7 淺底大卡（alt 底、圓角 12、上緣往上錯位 40）
   卡內：accent 引號 → 兩組（H4 組名＋每則「粗體標題：內文」段落），組間 40 */
.about-vision__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--wl-space-16);align-items:start}
.about-vision__lead{max-width:560px}
.about-vision__card{display:flex;flex-direction:column;gap:var(--wl-space-10);margin-top:calc(var(--wl-space-10) * -1);padding:var(--wl-space-12) var(--wl-space-12) var(--wl-space-14,56px);border-radius:var(--wl-radius-lg);background:var(--wl-surface-alt)}
.about-vision__quote{display:block;width:40px;height:40px;margin:0 0 calc(var(--wl-space-6) * -1) -4px;color:var(--wl-accent)}
.about-group__title{margin:0 0 var(--wl-space-4);color:var(--wl-text)}
.about-group__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--wl-space-4)}
.about-point{font:400 var(--wl-fs-body)/var(--wl-lh-body) var(--wl-font-tc);color:var(--wl-text-body)}
.about-point__title{font-weight:600;color:var(--wl-text)}

/* 董事長的話：左信件、右照片（750×980 直式） */
.about-chair__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--wl-space-16);align-items:start}
.about-chair__letter{position:relative;max-width:640px}
.about-chair__quote{display:block;width:40px;height:40px;margin:0 0 var(--wl-space-4) -4px;color:var(--wl-accent)}
.about-chair__sign{margin:var(--wl-space-8) 0 0;max-width:640px;display:flex;justify-content:flex-end}
.about-chair__sign img{width:186px;height:auto}
.about-chair__figure{margin:0}
.about-chair__cap{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--wl-space-3);margin-top:var(--wl-space-4);font:400 var(--wl-fs-small)/1.6 var(--wl-font-tc);color:var(--wl-text-secondary)}
.about-chair__cap b{font:500 var(--wl-fs-h6)/1.4 var(--wl-font-tc);color:var(--wl-text)}
.about-chair__photo{margin:0;overflow:hidden;border-radius:var(--wl-radius-lg);aspect-ratio:750 / 980;background:var(--wl-surface-sunken)}
.about-chair__photo img{width:100%;height:100%;object-fit:cover}

/* 董事會組織（深色區塊；2026-10-13 IRON 參考 Footer：暗場島嶼影像在右、分段遮罩、底部巨型字標 #D4EBAF 逐字升起） */
.about-board{padding-bottom:var(--wl-space-10)}
.about-board__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--wl-surface-inverse)}
.about-board__media img{position:absolute;right:-10%;top:0;width:min(110%,1760px);height:100%;object-fit:cover;object-position:78% 50%}
.about-board__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,31,16,.94) 0%,rgba(15,31,16,.82) 42%,rgba(15,31,16,.2) 72%,rgba(15,31,16,.1) 100%),linear-gradient(180deg,rgba(15,31,16,.9) 0%,rgba(15,31,16,0) 26%,rgba(15,31,16,0) 64%,rgba(15,31,16,.86) 100%)}
.about-board .about-sec__inner > *{max-width:700px}
.about-board__mark{margin:var(--wl-space-20) calc(var(--wl-margin) * -1) 0;padding:0 var(--wl-margin);container-type:inline-size}
.about-board__word{margin:0;overflow:hidden;padding:.06em 0 .06em;font:500 9vw/1.02 var(--wl-font-en);font-size:calc(100cqw / 11.9);letter-spacing:-.06em;color:var(--wl-accent-on-dark);white-space:nowrap;text-align:center;user-select:none}
.about-board__line,.about-board__char{display:inline-block;will-change:transform}
/* 董事會組織（深色區塊）：屆別＋任期 → 職稱／姓名／現職三欄清單，列與列 1px 分隔線 */
.about-board .wl-h2{color:var(--wl-text-on-dark-strong)}
.about-board .wl-overline{color:var(--wl-text-on-dark-subtle)}
.about-board__term{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--wl-space-3);margin:0 0 var(--wl-space-4);font:500 var(--wl-fs-h6)/var(--wl-lh-h6) var(--wl-font-tc)}
.about-board__term .wl-meta{color:var(--wl-text-on-dark-subtle)}
.about-board__list{list-style:none;margin:0;padding:0;box-shadow:inset 0 1px 0 var(--wl-border-on-dark)}
.about-board__row{display:grid;grid-template-columns:96px 120px minmax(0,1fr);gap:var(--wl-space-4);align-items:baseline;padding:var(--wl-space-5) 0;box-shadow:inset 0 -1px 0 var(--wl-border-on-dark)}
.about-board__role{font:400 var(--wl-fs-small)/1.6 var(--wl-font-tc);color:var(--wl-text-on-dark-subtle)}
.about-board__name{font:500 var(--wl-fs-h6)/1.6 var(--wl-font-tc);color:var(--wl-text-on-dark-strong)}
.about-board__title{font:400 var(--wl-fs-body)/1.6 var(--wl-font-tc);color:var(--wl-text-on-dark)}

/* 捐助章程：左說明＋下載鈕、右章程圖 */
.about-charter__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--wl-space-16);align-items:center}
.about-charter__dl{margin-top:var(--wl-space-8)}
.about-charter__img{margin:0;overflow:hidden;border-radius:var(--wl-radius-lg);aspect-ratio:1200 / 686;background:var(--wl-surface-sunken)}
.about-charter__img img{width:100%;height:100%;object-fit:cover}

/* ---------- 2. 解憂雜貨店 ---------- */
/* 歡迎詞：照片底大卡片（圓角 12）＋深色漸層，文字置中白字；引號 48 上左／下右（原站同） */
.hope-welcome{padding-bottom:0}
/* 2026-10-20 IRON：歡迎詞改暖色淺底（背景牛奶箱 welcome_milkbox，文字靠左深色），理念／聯絡資訊在同一格切換（js/pages/hope.js） */
.hope-welcome__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--wl-space-4);border-radius:var(--wl-radius-lg);background:var(--wl-surface-raised);box-shadow:inset 0 0 0 1px var(--wl-border-subtle);color:var(--wl-text)}   /* 2026-10-27 IRON：白底圓角卡片，跟 KV 拉開分隔 */
.hope-welcome__media{grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:100%;border-radius:var(--wl-radius-md);background:var(--wl-surface-sunken)}
.hope-welcome__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;transform-origin:64% 50%;transform:scale(1.05);transition:transform 1.6s var(--wl-ease)}   /* 2026-10-27 IRON：圖片本身放大 5%，框不變 */
.hope-welcome__card[data-view="contact"] .hope-welcome__bg{transform:scale(1.113)}   /* 1.05 × 1.06 */
.hope-welcome__stack{grid-column:1;grid-row:1;display:grid;padding:var(--wl-space-16) var(--wl-space-12)}
.hope-welcome__panel{grid-area:1 / 1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--wl-space-4)}
.hope-welcome__card[data-view="about"] [data-panel="contact"],.hope-welcome__card[data-view="contact"] [data-panel="about"]{visibility:hidden;opacity:0}
.hope-welcome__title{color:var(--wl-text);margin-bottom:var(--wl-space-2);outline:none}
.hope-welcome__phr{display:inline-block}
.hope-welcome__phr:first-child{display:block}
.hope-welcome .wl-body{color:var(--wl-text-body)}
.hope-welcome .wl-overline{color:var(--wl-text-secondary)}
.hope-welcome__verse{margin:var(--wl-space-2) 0 0;font:500 var(--wl-fs-small)/1.8 var(--wl-font-tc);color:var(--wl-text-secondary)}
.hope-welcome__go{margin-top:var(--wl-space-4)}
.hope-welcome__quote{width:40px;height:40px;color:var(--wl-text-subtle)}
.hope-welcome__sub{margin:calc(var(--wl-space-2) * -1) 0 0;font:500 var(--wl-fs-body)/1.6 var(--wl-font-tc);color:var(--wl-text-secondary)}
.hope-welcome__dl{width:min(100%,440px);margin:var(--wl-space-6) 0 0}
.hope-welcome__dl > div{display:flex;justify-content:space-between;gap:var(--wl-space-4);padding:var(--wl-space-4) 0;box-shadow:inset 0 -1px 0 var(--wl-border)}
.hope-welcome__dl > div:first-child{box-shadow:inset 0 1px 0 var(--wl-border),inset 0 -1px 0 var(--wl-border)}
.hope-welcome__dl dt{font:500 var(--wl-fs-small)/1.6 var(--wl-font-tc);color:var(--wl-text-secondary)}
.hope-welcome__dl dd{margin:0;font:500 var(--wl-fs-body)/1.6 var(--wl-font-tc);color:var(--wl-text);text-align:right}
.hope-welcome__dl a{color:inherit;text-decoration:underline 1px var(--wl-border-strong);text-underline-offset:4px}

/* 解憂故事集：列表頁同款（.list），照片卡 3 欄 */
.hope-stories{min-height:0;scroll-margin-top:var(--wl-nav-h)}

/* 為每個困境找出路（原站版型）：中央聯絡資訊、左右人物拼貼（桌機 people_left／right，手機 people_top／bottom） */

/* ---------- 3. 聯絡我們 ---------- */
.contact__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wl-space-6);align-items:stretch}
.contact__info{display:flex;flex-direction:column;gap:var(--wl-space-8)}
.contact__lead{padding:0 var(--wl-space-6)}
.contact__cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--wl-space-5)}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:var(--wl-space-6);min-height:160px;padding:var(--wl-space-8);border-radius:var(--wl-radius-lg);background:var(--wl-surface-alt);color:var(--wl-text);text-decoration:none;transition:background-color var(--wl-dur-fast) var(--wl-ease)}
.contact-card__text{display:flex;flex-direction:column;gap:var(--wl-space-3);min-width:0}
.contact-card__label{display:inline-flex;align-items:center;gap:var(--wl-space-2);font:500 var(--wl-fs-small)/1 var(--wl-font-en);color:var(--wl-text-secondary)}
.contact-card__label svg{width:16px;height:16px}
.contact-card__value{font:500 var(--wl-fs-h5)/1.4 var(--wl-font-tc);overflow-wrap:break-word}
.contact-card__value[lang="en"]{font-family:var(--wl-font-en);font-size:18px;letter-spacing:0}
@media (hover:hover) and (pointer:fine){.contact-card:hover{background:var(--wl-surface-sunken)}}
.contact-card:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
.contact__photo{margin:0;overflow:hidden;border-radius:var(--wl-radius-lg);min-height:480px;background:var(--wl-surface-sunken)}
.contact__photo img{width:100%;height:100%;object-fit:cover}

/* ---------- 4. 使用條款（內容頁版型；條次 h2 用 H4 級、段落 body） ---------- */
.terms .wl-prose h2{scroll-margin-top:calc(var(--wl-nav-h) + 24px)}

/* 2026-10-27 IRON 關於基金會 KV 深色底版：圖本身已是深綠，遮罩只壓左側標題區與上緣 nav，不再整片加深（不要過度黑） */
.about-kv--dark .wl-kv__media::after{background:linear-gradient(90deg,rgba(15,31,16,.55) 0%,rgba(15,31,16,.25) 40%,rgba(15,31,16,0) 62%),linear-gradient(180deg,rgba(15,31,16,.5) 0%,rgba(15,31,16,0) 26%)}
@media (max-width:640px){.about-kv--dark .wl-kv__img{object-position:var(--wl-kv-pos-m,70% 50%)}.about-kv--dark .wl-kv__media::after{background:linear-gradient(90deg,rgba(15,31,16,.7) 0%,rgba(15,31,16,.45) 55%,rgba(15,31,16,.15) 100%),linear-gradient(180deg,rgba(15,31,16,.5) 0%,rgba(15,31,16,0) 30%)}}

/* ---------- 5. RWD ---------- */
@media (max-width:1100px){
  .hope-welcome__card{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hope-welcome__stack{padding:var(--wl-space-12) var(--wl-space-8)}
  .about-vision__grid{grid-template-columns:minmax(0,1fr);gap:var(--wl-space-10)}
  .about-vision__lead{max-width:760px}
  .about-vision__card{margin-top:0;padding:var(--wl-space-10) var(--wl-space-8)}
  .about-chair__grid,.about-charter__grid{grid-template-columns:minmax(0,1fr);gap:var(--wl-space-10)}
  .about-chair__figure{max-width:480px;order:-1}
  .about-chair__cap{justify-content:flex-start}
  .about-board__media img{width:100%;height:44%;object-position:72% 50%}
  .about-board__media::after{background:linear-gradient(180deg,rgba(15,31,16,.6) 0%,rgba(15,31,16,.8) 28%,rgba(15,31,16,.97) 44%,rgba(15,31,16,1) 100%)}
  .about-board .about-sec__inner > *{max-width:none}
  .about-board__mark{margin-top:var(--wl-space-16)}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .contact__photo{min-height:0;aspect-ratio:4 / 3}
}
@media (max-width:640px){
  .about-sec__head{margin-bottom:var(--wl-space-8)}
    .about-board__word{white-space:normal;font-size:calc(100cqw / 5.6);line-height:.96}
  .about-vision__card{padding:var(--wl-space-8) var(--wl-space-5)}
  .about-board__row{grid-template-columns:64px minmax(0,1fr);row-gap:2px;padding:var(--wl-space-4) 0}
  .about-board__title{grid-column:2}
  .hope-welcome__card{grid-template-columns:minmax(0,1fr);padding:var(--wl-space-3)}
  .hope-welcome__media{grid-column:1;grid-row:1;min-height:0;height:220px}
  .hope-welcome__bg{object-position:76% 50%;transform-origin:76% 50%}
  .hope-welcome__stack{grid-column:1;grid-row:2;padding:var(--wl-space-6) var(--wl-space-3) var(--wl-space-6)}
  .hope-welcome__card[data-view] .hope-welcome__bg{transform:scale(1.05)}
  .hope-welcome__panel{justify-content:flex-start}
  .hope-welcome__card[data-view="about"] [data-panel="contact"],.hope-welcome__card[data-view="contact"] [data-panel="about"]{display:none}
  .hope-welcome__stack{overflow:hidden}
  .hope-welcome__quote{width:32px;height:32px}
  .hope-kv .wl-kv__media::after{background:linear-gradient(90deg,rgba(251,249,245,.94) 0%,rgba(251,249,245,.86) 50%,rgba(251,249,245,.45) 72%,rgba(251,249,245,0) 92%),linear-gradient(180deg,rgba(251,249,245,.7) 0%,rgba(251,249,245,0) 30%)}   /* 2026-10-27 IRON：手機標題被店內暖燈與木門吃掉，左側壓成暖白 */
  .contact__lead{padding:0}
  .contact-card{min-height:0;padding:var(--wl-space-6)}
  .contact-card__value{font-size:var(--wl-fs-h6)}
  .contact-card__value[lang="en"]{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.contact-card,.hope-welcome__bg{transition:none}}