/* 順發公益網 — 採訪故事內頁 */
.story-hero{ padding-top:clamp(28px,4.5vw,56px); padding-bottom:clamp(28px,4vw,48px); overflow:hidden; }
.story-hero-in{ max-width:1180px; }
.story-back{ min-height:44px; display:inline-flex; align-items:center; color:var(--ink-dim); font-size:var(--fs-small); font-weight:900; }
.story-back:hover{ color:var(--blue); }
.story-meta{ margin-top:clamp(20px,3vw,34px); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.story-meta time{ color:var(--ink-dim); font-size:var(--fs-small); font-weight:700; }
.story-hero h1{ max-width:20ch; margin:16px 0 18px; font-size:clamp(32px,5vw,52px); line-height:1.22; letter-spacing:-.025em; font-weight:900; color:var(--ink); text-wrap:balance; }
.story-deck{ max-width:66ch; color:var(--ink-dim); font-size:clamp(17px,1.5vw,20px); line-height:1.85; }
.story-cover{ margin:clamp(28px,4vw,46px) 0 0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--blue-tint); }
.story-cover picture,.story-cover img{ width:100%; }
.story-cover img{ aspect-ratio:16 / 9; object-fit:cover; object-position:var(--pos,50% 50%); }

.story-main{ background:var(--card); }
.story-layout{ display:grid; gap:32px; align-items:start; max-width:1080px; }
.story-key-card{ padding:22px; border-radius:var(--r); background:linear-gradient(145deg,var(--blue-deep),var(--blue)); color:#fff; }
.story-key-card .eyebrow{ color:var(--sky); }
.story-key-card h2{ margin-bottom:14px; font-size:var(--fs-h3); font-weight:900; }
.story-key-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.story-key-card li{ position:relative; padding-left:20px; font-size:var(--fs-small); line-height:1.7; color:rgba(255,255,255,.86); }
.story-key-card li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:8px; border-radius:2px; background:var(--orange); }
.story-key-card a{ min-height:44px; margin-top:18px; display:flex; align-items:center; color:var(--sky); font-size:var(--fs-small); font-weight:900; }
.story-content{ min-width:0; max-width:720px; font-size:17px; line-height:2; color:var(--ink); }
.story-content > p{ margin:0 0 1.45em; }
.story-content h2{ margin:2.2em 0 .75em; font-size:clamp(23px,3vw,30px); line-height:1.4; font-weight:900; color:var(--blue); text-wrap:balance; }
.story-content strong{ font-weight:900; }
.story-photo-row{ margin:clamp(28px,5vw,48px) 0; display:grid; gap:12px; }
.story-photo{ margin:0; overflow:hidden; border-radius:var(--r); background:var(--blue-tint); }
.story-photo picture,.story-photo img{ width:100%; height:100%; }
.story-photo img{ max-height:620px; object-fit:cover; }
.story-source-note{ margin-top:clamp(28px,4vw,40px); padding:18px 20px; border-left:4px solid var(--sky); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--page); }
.story-source-note b{ color:var(--blue); font-weight:900; }
.story-source-note p{ margin-top:4px; color:var(--ink-dim); font-size:var(--fs-small); line-height:1.75; }
.story-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
@media (min-width:720px){
  .story-photo-row.story-photo-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-photo-row.story-photo-2 .story-photo img{ aspect-ratio:4 / 3; }
}
@media (min-width:960px){
  .story-layout{ grid-template-columns:260px minmax(0,720px); gap:64px; }
  .story-aside{ position:sticky; top:96px; }
}

.story-related .sec-head{ max-width:none; }
.story-related-grid{ display:grid; gap:16px; }
.story-related-card{ overflow:hidden; display:grid; }
.story-related-card > a{ overflow:hidden; }
.story-related-card picture,.story-related-card img{ width:100%; }
.story-related-card img{ aspect-ratio:16 / 10; object-fit:cover; transition:transform .35s ease; }
.story-related-card:hover img{ transform:scale(1.025); }
.story-related-card > div{ padding:18px 20px 20px; }
.story-related-card .eyebrow{ margin-bottom:8px; }
.story-related-card h3{ font-size:var(--fs-h3); line-height:1.5; font-weight:900; }
.story-related-card h3 a{ color:var(--ink); }
.story-related-card span{ margin-top:10px; display:block; color:var(--ink-dim); font-size:var(--fs-xs); }
@media (min-width:720px){
  .story-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}