/* =====================================================================
   關注領域 · CARES · css/cares.css（IRON Figma 版 10759:14536）
   ▸ 所有選擇器以 #cares 開頭，避免污染其他區塊
   ▸ 桌機（>1100px）：5×100vh 軌道＋sticky 100vh 舞台
     米白底／照片帶 top 406 高 494（五張交叉淡化）／左 520 玻璃面板／右 420 手風琴（只高亮）
   ▸ ≤1100px：取消釘住，每個領域照片在上、面板在下
   ▸ 領域色：面板 pill 用 --care-c（cares.js 切換）；手風琴每列帶自己的 --c50
   ===================================================================== */

#cares{
  --cares-bg:#FBF9F5;
  --cares-en:"Lexend Exa","Noto Sans TC",system-ui,sans-serif;
  --cares-go:#CFE6A6;
  --care-c:#A6E6C1;
  padding:0;background:var(--cares-bg);color:var(--ink);
}

/* ---------- 桌機：軌道與舞台 ---------- */
#cares .cares__track{position:relative;height:500vh}
#cares .cares__sticky{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:var(--cares-bg)}
#cares .cares__stack{display:none}

/* 照片帶：1440×900 畫框中 top 406、高 494 → 以舞台高度比例換算 */
#cares .cares__band{position:absolute;left:0;right:0;top:45.111%;bottom:0;z-index:0;overflow:hidden;background:var(--cares-bg)}
#cares .cares__slide{position:absolute;inset:0;margin:0;opacity:0}
#cares .cares__slide.is-active{opacity:1}
/* 照片框相對照片帶的 left/top/width/height 寫在 inline style（Figma 偏移換成 %）；框內 cover 置中，任何比例都不露白 */
#cares .cares__slide img{position:absolute;max-width:none;object-fit:cover;object-position:50% 50%}
/* AI 情境圖揭露：照片帶右下角低調小字 */
#cares .cares__note{position:absolute;z-index:2;right:40px;bottom:14px;padding:3px 6px;
  font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:0;color:rgba(21,37,26,.62);
  background:rgba(251,249,245,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}

/* ---------- 左側玻璃面板（left 40／top 138／寬 520／padding 20／直角） ---------- */
#cares .cares__card{
  position:absolute;z-index:3;left:40px;top:138px;width:520px;padding:20px;
  background:rgba(251,249,245,.75);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
#cares .cares__top{display:flex;align-items:center;gap:16px;height:24px}
#cares .cares__pill{display:inline-flex;align-items:center;gap:4.5px;height:24px;padding:0 8px;
  background:var(--care-c);color:var(--ink);transition:background-color var(--dur-1) var(--ease-out)}
#cares .cares__pill-tc{font-family:var(--font-tc);font-size:14px;line-height:14px;font-weight:500;letter-spacing:.28px}
#cares .cares__pill-dot{font-family:var(--mono);font-style:normal;font-size:14px;line-height:14px;font-weight:500;opacity:.55}
#cares .cares__pill-en{font-family:var(--cares-en);font-size:14px;line-height:14px;font-weight:500;letter-spacing:.28px}
#cares .cares__count{font-family:var(--cares-en);font-size:12px;line-height:20.64px;font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:pre}
#cares .cares__count b{font-weight:500;color:var(--ink)}

/* 內容：五組疊放，容器高度由 cares.js 依目前領域設定（切換時補間） */
#cares .cares__panels{position:relative;margin-top:34px}
#cares .cares__panel{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none}
#cares .cares__panel.is-active{visibility:visible;pointer-events:auto}
#cares.is-tl .cares__panel{visibility:visible}

#cares .cares__eyebrow{display:flex;align-items:center;gap:10px;height:16.8px;
  font-family:var(--cares-en);font-size:12px;line-height:16.8px;font-weight:400;letter-spacing:0;text-transform:uppercase;color:var(--ink-2)}
#cares .cares__eyebrow i{display:block;width:28px;height:1px;background:currentColor;opacity:.6}
#cares .cares__text{width:425px;max-width:100%;margin-top:24px}
#cares .cares__name{font-family:var(--font-tc);font-size:48px;line-height:54.72px;font-weight:500;letter-spacing:0}
#cares .cares__body{margin-top:18px;font-family:var(--font-tc);font-size:17px;line-height:29.24px;font-weight:400;color:var(--ink-body)}
#cares .cares__body p + p{margin-top:29.24px}

/* 數據列 gap 32；數字 Lexend Exa 600 28／單位 12 底部對齊／說明 14/20.3 */
#cares .cares__stats{display:flex;gap:32px;margin:40px 0 0;padding:0}
#cares .cares__stat{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;max-width:260px;min-width:0}
#cares .cares__stat dd{margin:0}
#cares .cares__stat-v{display:flex;align-items:flex-end;gap:5px;white-space:nowrap}
#cares .cares__num{font-family:var(--cares-en);font-size:28px;line-height:28px;font-weight:600;letter-spacing:-.56px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* CountUp 會把最終寬度寫進 min-width 防抖；數到一半位數較少時文字靠右貼齊單位，不在數字與單位之間留空 */
#cares .cares__num[data-count]{text-align:right}
#cares .cares__unit{font-family:var(--font-tc);font-size:12px;line-height:20.64px;font-weight:500;color:var(--ink)}
#cares .cares__stat-l{font-family:var(--font-tc);font-size:14px;line-height:20.3px;font-weight:400;color:var(--ink-body);text-wrap:pretty}

/* 前往鈕 40 圓 #CFE6A6 */
#cares .cares__go{display:grid;place-items:center;width:40px;height:40px;margin-top:40px;border-radius:50%;background:var(--cares-go);color:var(--ink);
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
#cares .cares__go svg{display:block;transition:transform var(--dur-1) var(--ease-out)}
#cares .cares__go:active{transform:scale(.94);transition-duration:.08s}
#cares .cares__go:focus-visible{outline:var(--focus-ring);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  #cares .cares__go:hover{background:#BFDD8C}
  #cares .cares__go:hover svg{transform:translateX(2px)}
}

/* ---------- 右側手風琴（left 980／top 138／寬 420；只高亮目前領域） ---------- */
#cares .cares__acc{position:absolute;z-index:3;right:40px;top:138px;width:min(420px,calc(100vw - 640px));display:flex;flex-direction:column}
#cares .cares__acc-item{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:14px 12px;border-radius:12px;text-align:left;cursor:pointer;
  color:var(--ink);background-color:transparent;transition:background-color var(--dur-1) var(--ease-out)}
#cares .cares__acc-item.is-on{background-color:var(--c50)}
@media (hover:hover) and (pointer:fine){
  #cares .cares__acc-item:not(.is-on):hover{background-color:rgba(21,37,26,.04)}
}
#cares .cares__acc-item:active{background-color:rgba(21,37,26,.07);transition-duration:.08s}
#cares .cares__acc-item:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
#cares .cares__acc-num{min-width:26px;font-family:var(--cares-en);font-size:12px;line-height:12px;font-weight:500;opacity:.5;font-variant-numeric:tabular-nums}
#cares .cares__acc-name{flex:1;font-family:var(--font-tc);font-size:16px;line-height:16px;font-weight:500;letter-spacing:0}
#cares .cares__plus{flex:none;display:block;width:14px;height:14px}
#cares .cares__plus :is(path,line){stroke-width:.875px}   /* Figma 0.875 */

/* ---------- 視窗較矮：面板收斂，避免超出舞台 ----------
   不用固定 max-height 門檻（1440×900 螢幕扣掉工具列約 780~800 高，會誤觸發）：
   cares.js 以 Figma 版面量「面板 top＋最高面板」是否超出視窗，超出才加 .is-compact */
@media (min-width:1101px){
  #cares.is-compact .cares__card,#cares.is-compact .cares__acc{top:112px}
  #cares.is-compact .cares__panels{margin-top:26px}
  #cares.is-compact .cares__text{margin-top:18px}
  #cares.is-compact .cares__name{font-size:42px;line-height:48px}
  #cares.is-compact .cares__body{margin-top:14px;font-size:16px;line-height:27px}
  #cares.is-compact .cares__body p + p{margin-top:14px}
  #cares.is-compact .cares__stats,#cares.is-compact .cares__go{margin-top:28px}
}
/* 更矮（≤700）：選擇器加 .cares 讓特異度與 .is-compact 同級、靠順序覆寫 */
@media (min-width:1101px) and (max-height:700px){
  #cares.cares .cares__card,#cares.cares .cares__acc{top:92px}
  #cares.cares .cares__card{padding:16px 20px}
  #cares.cares .cares__name{font-size:36px;line-height:42px}
  #cares.cares .cares__body{font-size:15px;line-height:24px}
  #cares.cares .cares__stats,#cares.cares .cares__go{margin-top:20px}
  #cares.cares .cares__acc-item{height:40px;padding:12px}
}
@media (min-width:1101px) and (max-width:1280px){
  #cares .cares__card{width:min(520px,46vw)}
  #cares .cares__acc{width:min(420px,calc(100vw - 46vw - 120px))}
}

/* ---------- ≤1100px：直向堆疊（照片在上、面板在下） ---------- */
@media (max-width:1100px){
  #cares{padding:var(--sec-pad) var(--gutter)}
  #cares .cares__track{display:none}
  #cares .cares__stack{display:flex;flex-direction:column;gap:56px}
  #cares .cares__pill{background:var(--care-c)}
  #cares .cares__block-img{position:relative;display:block;aspect-ratio:1440/560;max-width:100%;overflow:hidden;background:var(--paper-2)}
  #cares .cares__block-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #cares .cares__block-img .cares__note{right:10px;bottom:8px}
  #cares .cares__block-panel{padding-top:24px}
  #cares .cares__block-panel .cares__eyebrow{margin-top:24px}
  #cares .cares__text{width:auto;max-width:36em;margin-top:16px}
  #cares .cares__name{font-size:36px;line-height:1.2}
  #cares .cares__body{margin-top:14px;font-size:16px;line-height:1.75}
  #cares .cares__body p + p{margin-top:1em}
  #cares .cares__stats{margin-top:28px}
  #cares .cares__go{margin-top:28px}
}
@media (max-width:640px){
  #cares .cares__block-img{aspect-ratio:4/3}
  #cares .cares__name{font-size:30px}
  #cares .cares__body .nobr{white-space:normal}
  #cares{padding-top:calc(var(--sec-pad) / 2)}   /* 與共好行動 padding-bottom 28 合計約 56，避免兩段之間空太多 */
  /* 數字不斷字（「Fitwel 三星」）；放不下時整組換到下一列 */
  #cares .cares__stats{gap:20px 24px;flex-wrap:wrap}
  #cares .cares__stat{flex:1 1 140px;min-width:auto}
  #cares .cares__stat-v{flex-wrap:wrap}
  #cares .cares__num{white-space:nowrap}
}

/* ---------- reduced motion：直接切換 ---------- */
@media (prefers-reduced-motion: reduce){
  #cares .cares__pill,#cares .cares__acc-item,#cares .cares__go,#cares .cares__go svg{transition:none!important}
}