/* 節目內容.html 的頁面樣式（自切版抽出，僅改素材路徑） */
/* ============ 基本設定（沿用首頁 design token） ============ */
:root{
  /* 舊變數名 → 新 token 的對照（避免大量改寫既有規則） */
  --gray:var(--slate);
  --gray-2:var(--ink-38);
  --brown:var(--slate);
  --beige-2:var(--beige);
  --cream-2:var(--cream);
  --line:var(--beige);
  --red-acc:var(--red);
  --body-size:var(--fs-body);
  --body-weight:500;
  --body-line:1.75;
  --body-track:.03em;
}
/* 本頁底色：純白（Gathering 與 Stories 系列統一白底，首頁維持米白） */
body{background:var(--white)}
:root{--veil:var(--white)}   /* 轉場幕跟著頁面底色，避免進場閃一下 */

/* ============ 版面 ============ */
.detail{padding:48px 0 104px}
.detail-grid{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  column-gap:clamp(36px,5vw,72px);align-items:start;
}
.side{grid-column:1;grid-row:1 / span 2}
.main-col{grid-column:2;grid-row:1}
.tail{grid-column:2;grid-row:2}

/* ---- 左側資訊欄 ---- */
.side{position:sticky;top:calc(var(--header-h) + 28px)}
.info-row{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;
  padding:16px 0;border-top:1px solid var(--ink-16);align-items:start;
}
.info-row:first-child{border-top:0;padding-top:0}
.info-row dt{
  font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--ink);
  line-height:1.9;white-space:nowrap;
}
.info-row dd{font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.9;color:var(--gray)}
.info-row dd.stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* ---- 主內容 ---- */
.hero-img{position:relative;aspect-ratio:16/9;background:var(--ink-08);overflow:hidden}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-head{padding:34px 0 0}
/* 發表時間｜日期　＋　分類小標籤（同首頁月曆小標籤語彙） */
.art-sub{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.art-sub .pub{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em}
.art-sub .pub .lb{font-weight:600;color:var(--red)}
.art-sub .pub i{display:block;width:1px;height:12px;background:var(--ink-24)}
.art-sub .pub b{font-weight:500;color:var(--ink-88);letter-spacing:.02em}
.art-rule{height:1px;background:var(--ink-16);margin:28px 0 0}


/* ---- 其它活動 ---- */
.rel{margin-top:76px}
.rel h2{font-size:21px;font-weight:700;letter-spacing:.12em;color:var(--ink)}
.rel-list{margin-top:22px}
.rel-item{
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,2.2vw,32px);padding:22px 0;border-bottom:1px solid var(--ink-16);
}
.rel-item:first-child{border-top:1px solid var(--ink-16)}
.rel-item .th{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-08)}
.rel-item .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.33,.1,.25,1)}
.rel-item:hover .th img{transform:scale(1.06)}
.rel-item .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rel-item .cat{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gold)}
.rel-item .go{width:80px;height:var(--btn-lg)}
.rel-item .date{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-38);display:flex;align-items:center;gap:6px}
.rel-item .date i{display:block;width:8px;height:1px;background:var(--ink-38)}
.rel-item .tt{margin-top:8px;font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.03em;color:var(--ink);transition:color .25s}
.rel-item:hover .tt{color:var(--red)}

/* ============ RWD ============ */
@media (max-width:1200px){
  .nav-links a{font-size:16px}
  .f-col{width:200px}
  .detail-grid{grid-template-columns:230px minmax(0,1fr)}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .nav-links,.main-nav .nav-divider{display:none}
  .menu-toggle{display:flex}
  .main-nav{gap:12px}
  .mobile-nav{
    position:fixed;top:72px;left:0;right:0;background:var(--white);z-index:49;
    flex-direction:column;padding:12px 24px 24px;box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:14px 0;font-size:17px;font-weight:600;color:var(--gray);border-bottom:1px solid var(--ink-08);text-transform:uppercase}
  /* 資訊欄改置於文章內容之後、上／下一篇之前，並改為橫向排列 */
  .detail-grid{grid-template-columns:1fr;row-gap:0}
  .side,.main-col,.tail{grid-column:auto;grid-row:auto}
  .main-col{order:1}
  .side{position:static;order:2;margin-top:40px;padding-top:32px;border-top:1px solid var(--ink-16)}
  .tail{order:3}
  .info-row{grid-template-columns:64px minmax(0,1fr)}
  .info-row dd.stack{flex-direction:row;flex-wrap:wrap}
  .detail{padding:32px 0 80px}
}
@media (max-width:820px){
  .footer-main{flex-direction:column}
  .f-links{gap:32px}
  .pn{grid-template-columns:1fr}
  .pn a.next{border-left:0;border-top:1px solid var(--on-dark-18)}
  .rel{margin-top:56px}
}
@media (max-width:600px){
  .site-header{padding:0 16px}
  .logo img.logo-full{width:103px;height:34px}
  .icon-btns{display:none}
  .btn-giving{min-width:auto;height:32px;font-size:15px;padding:4px 14px}
  .crumb-band{height:52px}
  .crumb a,.crumb span{font-size:12px;letter-spacing:.04em}
  .crumb .sep-md,.crumb .mid{display:none}
  .band-glyph{display:none}
  .hero-img{aspect-ratio:4/3}
  .art-head h1{font-size:20px;line-height:1.6}
  .rel-item{grid-template-columns:110px minmax(0,1fr);row-gap:14px}
  .rel-item .go{grid-column:2;justify-self:start;width:64px;height:34px}
  .f-col{width:100%}
}

/* 上／下一篇：本頁的外距 */
.pn{margin-top:56px}