/* =========================================================================
   關於基金會 · ABOUT US · css/about.css
   IRON Figma 10769:16387（2026-09-13 改版）：暗底＋背景兩層遮罩、兩欄 grid 540.66／756.95、欄距 86.4
   2026-09-14 背景換成苔原地平線（assets/img/about/about_bg_moss_horizon.webp，1:1），底部漸層放寬
   左欄 About US＋56px 標題＋兩段內文＋瞭解更多；右欄兩欄工整瀑布牆（間距 16、radius 12）
   所有 selector 以 #about 開頭
   Lexend Exa 500 已由 index.html head 載入（About US 只用 500），不需另外 @import
   ========================================================================= */
#about{
  --wall-gap:16px;
  --wall-offset:8px;           /* 第二欄只下移半個間距（spec），上下緣維持工整 */
  --about-ink:#15251A;
  --about-accent:#CFE6A6;
  /* R3 B10：overflow:hidden 會讓 #about 變成捲動容器，左欄 sticky 黏不住；clip 只裁切（hidden 留作 fallback） */
  overflow:hidden;
  overflow:clip;
  padding-block:183px 140px;
  padding-inline:40px 16px;    /* Figma Container x40 w1384 → 1440 下兩欄正好 540.66／756.95 */
  background:#0F1F10;
  isolation:isolate;
}

/* ---------- 背景 ---------- */
#about .about__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#about .about__bg-img{
  position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;object-position:50% 80%;   /* 1:1 圖在寬螢幕會被上下裁，往下對齊保住底部苔蘚帶 */
  will-change:transform;
}
#about .about__bg-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(15,31,16,.92) 0%,rgba(15,31,16,.62) 42%,rgba(15,31,16,.18) 100%),
    linear-gradient(180deg,#0F1F10 0%,rgba(15,31,16,0) 18%,rgba(15,31,16,0) 88%,rgba(15,31,16,.72) 100%);   /* 底部不壓到純色，苔蘚帶才看得到 */
}
#about .about__fx{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- 版面：540.66 ＋ 756.95、欄距 86.4（依寬度等比縮） ---------- */
#about .about__inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,540.66fr) minmax(0,756.95fr);
  column-gap:clamp(40px,6vw,86.4px);
  max-width:1384px;
}
#about .about__text,#about .about__wall{min-width:0}
/* sticky 欄垂直置中；--sticky-h 由 about.js 量測，欄高於視窗時 max() 退回貼 nav 下方 */
/* min(183px,…)：首屏起點不低於 Figma 的 183，矮視窗仍退回貼 nav 下方 */
#about .about__sticky{position:sticky;top:max(calc(var(--nav-h) + 40px),min(183px,calc(50vh - var(--sticky-h,480px) / 2)));max-width:560px}

#about .about__eyebrow{
  margin:0;font-family:"Lexend Exa",var(--font);font-size:14px;line-height:32px;font-weight:500;letter-spacing:0;
  color:rgba(255,255,255,.5);   /* 用色彩透明度，revealScrub 把 opacity 補到 1 也不會蓋掉 */
}
#about .about__title{
  margin:0;font-family:var(--font-tc);font-size:56px;line-height:normal;font-weight:500;
  letter-spacing:-1.44px;color:#fff;
}
#about .about__body{
  max-width:541px;padding-top:36px;
  font-family:var(--font-tc);font-size:17px;line-height:29.24px;font-weight:400;color:rgba(244,239,230,.78);
}
#about .about__body p{margin:0}
#about .about__body p + p{margin-top:29.24px}   /* 兩段中間空一行 */
#about .about__cta{margin-top:24px}

/* ---------- 瞭解更多（base.css .btn 的 #about 範圍覆寫；之後主 agent 統一到 base.css） ---------- */
#about .about__more{
  --btn-fg:#fff;--btn-bd:rgba(255,255,255,.32);--btn-ico-bg:var(--about-accent);--btn-ico-fg:var(--about-ink);--btn-hover-bg:rgba(244,239,230,.08);
  gap:14px;padding:16px 18px;border-radius:12px;
  font-family:var(--font-tc);font-size:15px;line-height:18px;font-weight:700;text-transform:none;letter-spacing:0;
}
#about .about__more .btn__ico{width:24px;height:24px;flex:0 0 24px;border-radius:50%}
#about .about__more .btn__ico svg{width:14px;height:14px}
#about .btn:focus-visible{outline:var(--focus-ring-on-dark);outline-offset:3px}

/* ---------- 瀑布牆：兩欄等寬、間距一致 ---------- */
#about .about__wall{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--wall-gap);
  align-items:start;
}
#about .about__col{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--wall-gap);
  will-change:transform;
}
#about .about__col--b{margin-top:var(--wall-offset)}
#about figure{margin:0}
#about .about__frame{
  position:relative;border-radius:12px;overflow:hidden;
  background:rgba(244,239,230,.06);
}
/* 兩欄都是 8:9＋16:9＋4:3，欄總高相同、接縫錯開；1440 下牆高約 1021（Figma 容器 1017） */
#about .about__frame--portrait{aspect-ratio:8 / 9}
#about .about__frame--wide{aspect-ratio:16 / 9}
#about .about__frame--square{aspect-ratio:4 / 3}
#about .about__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.84) brightness(.92)}
/* 內框細光邊＋底部沉色，讓活動照融進暗底（不加單邊色條） */
#about .about__frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.10);
  background:linear-gradient(180deg,rgba(15,31,16,0) 62%,rgba(15,31,16,.28));
}
/* 自動相機畫面：底部有 CAMNAME／溫度浮水印，拉高由頂部對齊裁掉 */
#about .about__frame--crop img{height:118%;bottom:auto}
#about figcaption{
  margin-top:8px;font-family:var(--font-tc);font-size:12px;line-height:18px;font-weight:400;letter-spacing:0;
  color:rgba(244,239,230,.5);
}

/* ---------- ≤1100：單欄、瀑布牆在內文下方兩欄、無視差 ---------- */
@media (max-width:1100px){
  #about{--wall-offset:8px;padding-block:120px 96px;padding-inline:var(--gutter)}
  #about .about__inner{grid-template-columns:minmax(0,1fr);row-gap:64px}
  #about .about__sticky{position:static;max-width:680px}
  #about .about__bg-img{top:0;height:100%}
  #about .about__bg-shade{background:linear-gradient(180deg,#0F1F10 0%,rgba(15,31,16,.72) 30%,rgba(15,31,16,.62) 75%,rgba(15,31,16,.5) 100%)}
  #about .about__col{transform:none!important}
  #about .about__wall{max-width:760px}   /* 牆寬上限，避免 ≤1100 時整段過長 */
}
/* ---------- ≤640：瀑布牆兩欄小圖 ---------- */
@media (max-width:640px){
  #about{--wall-gap:12px;--wall-offset:6px;padding-block:96px 80px}
  #about .about__title{font-size:40px;letter-spacing:-1px}
  #about .about__body{padding-top:28px;font-size:16px;line-height:1.72}
  #about .about__body p + p{margin-top:1.72em}
  #about .about__inner{row-gap:48px}
  #about figcaption{margin-top:6px;font-size:11px;line-height:16px}
}