/* ═══════════════════════════════════════════════════════════════
   媒體與獎項 /media/ — 頁面專屬樣式
   只用 site.css 的代幣；.yt-* 影片嵌入的樣式與 about.css 同一套（複製一份，避免兩頁互相牽動）。
   ═══════════════════════════════════════════════════════════════ */
.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.in{ opacity:1; transform:none; }
.js .aw-grid > .reveal:nth-child(3n+2), .js .vd-grid > .reveal:nth-child(3n+2){ transition-delay:.08s; }
.js .aw-grid > .reveal:nth-child(3n), .js .vd-grid > .reveal:nth-child(3n){ transition-delay:.16s; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ── 1. 開場 ── */
.md-hero{ padding-top:clamp(28px,5vw,64px); padding-bottom:clamp(20px,3vw,40px); overflow:hidden; }
.md-hero-in{ position:relative; z-index:1; display:grid; gap:32px; align-items:center; }
@media (min-width:900px){ .md-hero-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; } }
.md-h1{ font-size:var(--fs-h1); font-weight:900; margin:4px 0 18px; }
.md-h1 b{ color:var(--blue); font-weight:900; }
.md-stats{ list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:520px; }
@media (min-width:640px){ .md-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.md-stats li{ background:var(--card); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:12px 14px; display:grid; gap:2px; }
.md-stats b{ font-size:clamp(22px,2.6vw,28px); font-weight:900; color:var(--blue); line-height:1.1; letter-spacing:-.01em; }
.md-stats span{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-dim); }
.md-stats small{ margin-left:3px; font-weight:400; }
.md-hero-fig{ margin:0; max-width:520px; }
.md-hero-fig picture{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--card); transform:rotate(1.5deg); }
.md-hero-fig figcaption{ margin-top:14px; font-size:var(--fs-xs); color:var(--ink-dim); line-height:1.7; }
@media (min-width:900px){ .md-hero-fig{ justify-self:end; width:100%; } }

/* ── 2. 獎項 ── */
.aw-grid{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
@media (min-width:640px){ .aw-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .aw-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.aw{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.aw-img{ aspect-ratio:4/3; background:var(--page); overflow:hidden; }
.aw-img picture,.aw-img img{ width:100%; height:100%; display:block; }
.aw-img img{ object-fit:cover; }
.aw-noimg{ display:grid; place-items:center; font-size:40px; background:var(--blue-tint); }
.aw-body{ padding:16px 18px 18px; display:grid; gap:8px; align-content:start; flex:1; }
.aw-meta{ display:flex; align-items:center; gap:8px; }
.aw-meta time{ font-size:var(--fs-xs); font-weight:900; color:var(--ink-dim); letter-spacing:.04em; }
.aw-title{ font-size:var(--fs-body); font-weight:900; color:var(--ink); line-height:1.5; text-wrap:pretty; }
.aw-detail{ font-size:var(--fs-small); color:var(--ink-dim); line-height:1.7; }
.aw-link{ font-weight:900; font-size:var(--fs-xs); margin-top:auto; }

/* ── 3. Run for Future ── */
.rf-intro{ max-width:66ch; margin-bottom:20px; }
.rf-wrap{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.rf-tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-small); }
.rf-tbl th,.rf-tbl td{ padding:14px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--line); line-height:1.6; }
.rf-tbl thead th{ border-top:0; background:var(--blue-tint); color:var(--blue); font-size:var(--fs-xs); letter-spacing:.08em; font-weight:900; white-space:nowrap; }
.rf-tbl th[scope=row]{ white-space:nowrap; }
.rf-tbl th[scope=row] b{ display:block; font-weight:900; color:var(--ink); }
.rf-tbl th[scope=row] .tag{ margin-left:6px; vertical-align:middle; }
.rf-year{ display:block; font-size:var(--fs-xs); color:var(--ink-dim); font-weight:700; margin-top:2px; }
.rf-tbl td small{ display:block; color:var(--ink-dim); font-size:var(--fs-xs); margin-top:2px; }
.rf-num{ white-space:nowrap; font-weight:900; color:var(--blue); font-variant-numeric:tabular-nums; }
.rf-tbl td a{ font-weight:900; font-size:var(--fs-xs); white-space:nowrap; }
.rf-tbl tr.is-upcoming td{ color:var(--ink-dim); }
.rf-note{ margin-top:10px; font-size:var(--fs-xs); color:var(--ink-dim); line-height:1.7; }
@media (max-width:839px){   /* 窄版：每屆疊成一張卡 */
  .rf-tbl thead{ display:none; }
  .rf-tbl,.rf-tbl tbody,.rf-tbl tr,.rf-tbl th,.rf-tbl td{ display:block; }
  .rf-tbl tr{ padding:14px 16px; border-top:1px solid var(--line); }
  .rf-tbl tr:first-child{ border-top:0; }
  .rf-tbl th,.rf-tbl td{ padding:0; border:0; }
  .rf-tbl th[scope=row]{ margin-bottom:8px; }
  .rf-tbl td{ display:grid; grid-template-columns:5em minmax(0,1fr); gap:8px; font-size:var(--fs-small); margin-top:4px; }
  .rf-tbl td::before{ content:attr(data-l); color:var(--ink-dim); font-size:var(--fs-xs); font-weight:900; padding-top:2px; }
  .rf-tbl td small{ grid-column:2; }
}

/* ── 4. 媒體報導：年份手風琴 ── */
.pr{ display:grid; gap:10px; }
.pr-year{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.pr-year summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 18px; }
.pr-year summary::-webkit-details-marker{ display:none; }
.pr-y{ font-size:clamp(20px,2.4vw,24px); font-weight:900; color:var(--blue); letter-spacing:-.01em; }
.pr-year summary small{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-dim); }
.pr-ind{ margin-left:auto; position:relative; width:22px; height:22px; border-radius:50%; background:var(--blue-tint); flex:0 0 22px; }
.pr-ind::before,.pr-ind::after{ content:""; position:absolute; left:50%; top:50%; background:var(--blue); transform:translate(-50%,-50%); transition:transform .25s ease; }
.pr-ind::before{ width:10px; height:2px; } .pr-ind::after{ width:2px; height:10px; }
.pr-year[open] .pr-ind::after{ transform:translate(-50%,-50%) rotate(90deg); }
.pr-year summary:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; border-radius:var(--r); }
.pr-list{ list-style:none; margin:0; padding:0 18px 8px; }
.pr-list li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; padding:10px 0; border-top:1px solid var(--line); font-size:var(--fs-small); line-height:1.6; }
.pr-list time{ color:var(--ink-dim); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:1px; }
.pr-list a{ color:var(--ink); font-weight:700; text-decoration:none; }
.pr-list a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.pr-out{ grid-column:2; font-size:var(--fs-xs); color:var(--ink-dim); }
@media (min-width:720px){
  .pr-list li{ grid-template-columns:5.5em minmax(0,1fr) auto; align-items:baseline; }
  .pr-out{ grid-column:auto; white-space:nowrap; }
}

/* ── 5. 影音（與 about.css 的 .yt 同一套） ── */
.vd-grid{ gap:20px; }
.yt{ margin:0; }
.yt-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:var(--ink); box-shadow:var(--shadow-lg); }
.yt-btn{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block; color:inherit; }
.yt-btn picture{ height:100%; }
.yt-btn img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.yt-btn:hover img{ transform:scale(1.025); }
.yt-btn:focus-visible{ outline:3px solid var(--orange); outline-offset:-4px; }
.yt-play{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--blue); color:var(--card); display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .25s ease, background .25s ease; }
.yt-play svg{ margin-left:4px; }
.yt-btn:hover .yt-play{ transform:scale(1.06); background:var(--blue-ink); }
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-cap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px; font-size:var(--fs-small); color:var(--ink-dim); line-height:1.5; }
.yt-cap b{ color:var(--ink); }
.yt-sub{ flex-basis:100%; font-size:var(--fs-xs); }
.yt-ext{ margin-left:auto; font-weight:700; font-size:var(--fs-xs); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .yt-btn img,.yt-play,.pr-ind::before,.pr-ind::after{ transition:none; } }

/* ── 6. CTA ── */
.md-cta .sec-head{ margin-left:auto; margin-right:auto; text-align:center; max-width:40ch; }
.md-cta-actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; }
.md-cta-link{ color:var(--card); font-weight:900; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--sky); }
.md-cta-link:hover{ color:var(--sky); }
@media (max-width:639px){ .md-cta .deco{ display:none; } }