/* ═══════════════════════════════════════════════════════════════
   順發公益網 — 首頁專屬樣式（pages/home.py）
   只用 site.css 的代幣，不重定義。手機優先：375 → 640 → 900 → 1024 → 1200。
   ═══════════════════════════════════════════════════════════════ */

/* ── 進場：site.js 進入視窗時加 .in；reduced-motion 直接顯示 ── */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── 區塊內共用小件 ── */
.sec-link{ font-weight:700; white-space:nowrap; }
.sec-more{ margin-top:22px; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sec-sub .tag{ vertical-align:middle; margin-left:2px; }

/* ═══ 1. Hero ═══ */
.hero{ overflow:hidden; padding-top:clamp(26px,4.5vw,60px); padding-bottom:clamp(20px,3vw,36px); }   /* 下方接數字區，留白收窄 */
.impact{ padding-top:clamp(28px,4vw,48px); }
.hero-in{ position:relative; display:grid; gap:34px; align-items:center; }
.hero-copy{ position:relative; z-index:1; max-width:60ch; }
.hero-title{ font-size:var(--fs-display); font-weight:900; color:var(--blue); line-height:1.15; letter-spacing:-.02em; margin:4px 0 16px; }
.hero-lede{ color:var(--ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-visual{ position:relative; z-index:1; margin:6px auto 0; width:min(100%,300px); }
.hero-stage{ position:relative; }
.hero-card{ transform:rotate(-2deg); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--card); }
.hero-sym{ position:absolute; width:68px; height:68px; mix-blend-mode:multiply; pointer-events:none; }
.hero-sym-a{ left:-20px; bottom:-18px; }
.hero-sym-b{ right:-16px; top:-20px; width:56px; height:56px; }
.hero-cap{ margin-top:16px; text-align:center; font-size:var(--fs-xs); color:var(--ink-dim); }
@media (min-width:900px){
  .hero-in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; }
  .hero-visual{ width:min(100%,520px); margin:0 0 0 auto; }
  .hero-sym{ width:96px; height:96px; }
  .hero-sym-a{ left:-36px; bottom:-26px; }
  .hero-sym-b{ right:-30px; top:-30px; width:84px; height:84px; }
  .hero-cap{ text-align:right; padding-right:8px; }
}

/* ═══ 2. 數字帶：4 張藍色累積卡 + 1 張橘色即時卡 ═══ */
.impact-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.impact-grid .kpi{ padding:16px; }
.impact-grid .kpi-wide{ grid-column:1 / -1; }
.impact-grid .kpi-num{ font-size:clamp(24px,2.5vw,32px); }
/* 進場略微錯開 */
.impact-grid .kpi:nth-child(2){ transition-delay:.06s; }
.impact-grid .kpi:nth-child(3){ transition-delay:.12s; }
.impact-grid .kpi:nth-child(4){ transition-delay:.18s; }
.impact-grid .kpi:nth-child(5){ transition-delay:.24s; }
@media (min-width:640px){
  .impact-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
  .impact-grid .kpi{ padding:18px 20px; grid-column:span 2; }
  .impact-grid .kpi:nth-child(n+4){ grid-column:span 3; }
}
@media (min-width:1024px){
  .impact-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr); }
  .impact-grid .kpi, .impact-grid .kpi:nth-child(n+4){ grid-column:auto; }
}

/* ═══ 3. 公益共創響應牆（精選）═══ */
.wall{ overflow:hidden; background:linear-gradient(145deg,var(--blue-deep),#0032B8 58%,var(--blue)); }
.wall::before{
  content:""; position:absolute; width:420px; height:420px; right:-160px; top:-180px;
  border:70px solid rgba(105,210,255,.12); border-radius:50%; pointer-events:none;
}
.wall .wrap{ position:relative; z-index:1; }
.wall .sec-title b{ color:var(--sky); }
.wall-head{ display:grid; gap:24px; margin-bottom:clamp(24px,3vw,36px); }
.wall-copy{ max-width:58ch; }
.wall .sec-sub{ color:rgba(255,255,255,.78); }
.wall-live{
  width:100%; padding:18px 20px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 16px;
  background:rgba(2,22,91,.62); border:1px solid rgba(255,255,255,.22); border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.wall-live-label{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.84); }
.wall-live-label i{ width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,125,25,.18); }
.wall-live-num{ grid-row:2; font-size:clamp(34px,5vw,52px); line-height:1.05; font-weight:900; color:#fff; letter-spacing:-.03em; }
.wall-live-num small{ font-size:.38em; margin-left:.1em; letter-spacing:.02em; }
.wall-live-meta{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:var(--fs-small); font-weight:700; color:var(--sky); white-space:nowrap; }
.wall-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.wall-tile{ position:relative; margin:0; aspect-ratio:4 / 5; border-radius:var(--r); overflow:hidden; background:rgba(0,20,90,.5); border:1px solid rgba(255,255,255,.2); }
.wall-tile picture{ position:absolute; inset:0; }
.wall-tile picture img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.wall-tile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.wall-tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 12px 11px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  font-size:var(--fs-xs); font-weight:700; color:#fff; letter-spacing:.04em;
  background:linear-gradient(to top, rgba(2,18,70,.92), rgba(2,18,70,0));
}
.wall-tile figcaption time{ color:rgba(255,255,255,.7); font-weight:500; white-space:nowrap; }
.wall-foot{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; }
.wall-note{ display:grid; gap:2px; color:rgba(255,255,255,.72); font-size:var(--fs-xs); }
.wall-status{ color:var(--sky); font-weight:900; }
.wall-status::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:currentColor; vertical-align:1px; }
@media (min-width:640px){
  .wall-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
  .wall-tile{ aspect-ratio:4 / 5; }
}
@media (min-width:900px){
  .wall-head{ grid-template-columns:minmax(0,1fr) minmax(340px,.7fr); align-items:end; }
}

/* ═══ 4. 孩子的故事：一則主故事＋兩則次故事 ═══ */
.stories-layout{ display:grid; gap:16px; }
.stories-side{ display:grid; gap:16px; }
.story{ position:relative; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s; }
.story-media{ overflow:hidden; background:var(--blue-tint); }
.story-media picture, .story-media picture img{ width:100%; height:100%; }
.story-media picture img{ aspect-ratio:16 / 10; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform .35s ease; }
.story-body{ padding:18px 20px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:1; }
.story-title{ font-size:var(--fs-h3); font-weight:900; line-height:1.45; }
.story-title a{ color:var(--ink); }
.story-title a::after{ content:""; position:absolute; inset:0; } /* 整張卡可點 */
.story-ex{ font-size:var(--fs-small); color:var(--ink-dim); line-height:1.75; }
.story-foot{ margin-top:auto; padding-top:6px; width:100%; display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-xs); color:var(--ink-dim); }
.story-read{ font-weight:700; color:var(--blue); white-space:nowrap; }
.story:hover{ box-shadow:var(--shadow-lg); }
.story:hover .story-media img{ transform:scale(1.025); }
.story:hover .story-title a{ color:var(--blue); text-decoration:none; }
.stories-note{ margin-top:16px; color:var(--ink-dim); font-size:var(--fs-xs); }
.story-compact{ display:grid; grid-template-columns:112px minmax(0,1fr); min-height:190px; }
.story-compact .story-media picture img{ aspect-ratio:auto; }
.story-compact .story-body{ padding:14px 14px 15px; gap:6px; }
.story-compact .story-title{ font-size:16px; line-height:1.45; }
.story-compact .story-ex{ display:none; }
.story-compact .story-foot{ display:grid; gap:1px; padding-top:2px; }
.story-compact .story-read{ font-size:var(--fs-xs); }
@media (min-width:640px) and (max-width:959px){
  .stories-side{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-compact{ display:flex; min-height:0; }
  .story-compact .story-media picture img{ aspect-ratio:16 / 10; }
  .story-compact .story-body{ padding:16px 18px 18px; }
  .story-compact .story-title{ font-size:18px; }
  .story-compact .story-foot{ display:flex; }
}
@media (min-width:960px){
  .stories-layout{ grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); align-items:stretch; }
  .story-feature .story-media{ min-height:340px; flex:1 1 auto; }
  .story-feature .story-body{ flex:0 0 auto; }              /* 多出來的高度給圖片，不留在文字區 */
  .story-feature .story-media picture img{ aspect-ratio:auto; }
  .story-compact{ display:grid; grid-template-columns:160px minmax(0,1fr); }
  .story-compact .story-media picture img{ aspect-ratio:auto; }
  .story-compact .story-body{ padding:16px 18px; gap:7px; }
  .story-compact .story-title{ font-size:18px; }
  .story-compact .story-body{ justify-content:center; }
  .story-compact .story-foot{ margin-top:2px; }
  .story-compact .story-ex{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--fs-xs); }   /* 次故事補兩行摘要，卡片不空 */
  .story-compact .story-foot{ display:flex; }
}

/* ═══ 5. 三步機制：最後補上信任與運作方式 ═══ */
.how-steps{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.step{ position:relative; padding:22px 22px 24px; overflow:hidden; }
.step .tag{ position:relative; z-index:1; }
.step h3{ font-size:var(--fs-h3); font-weight:900; margin:12px 0 8px; }
.step p{ font-size:var(--fs-small); line-height:1.8; max-width:34ch; }
.step-sym{ position:absolute; right:14px; top:14px; width:56px; height:56px; mix-blend-mode:multiply; pointer-events:none; }
.how-arrow{ display:flex; align-items:center; justify-content:center; color:var(--sky); font-size:28px; font-weight:900; line-height:1; }
.how-arrow::before{ content:"↓"; }
.how-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-top:26px; }
@media (min-width:900px){
  .how-steps{ grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); gap:12px; align-items:stretch; }
  .how-arrow::before{ content:"→"; }
  .step p{ max-width:none; }
}

/* ═══ 6. 收尾 CTA（藍底）═══ */
.cta .wrap{ position:relative; }
.cta-in{ position:relative; z-index:1; max-width:62ch; margin:0 auto; text-align:center; display:grid; gap:14px; justify-items:center; }
.cta .sec-title{ text-wrap:balance; }
.cta .sec-sub{ margin-top:0; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }