/* 節目列表.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;
  --title-size:clamp(24px,2.4vw,34px);
}
/* 本頁底色：純白（Gathering 與 Stories 系列統一白底，首頁維持米白） */
body{background:var(--white)}
:root{--veil:var(--white)}   /* 轉場幕跟著頁面底色，避免進場閃一下 */

/* ============ 頁面標題 + 分類 tab ============ */
.plist{padding:56px 0 104px}
.page-tabs{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.page-tab{
  position:relative;background:none;border:0;cursor:pointer;padding:0 0 10px;
  font-size:var(--title-size);font-weight:600;letter-spacing:.14em;word-spacing:.2em;
  color:var(--ink-38);transition:color .25s;
}
.page-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.33,.1,.25,1);
}
.page-tab:hover{color:var(--ink)}
.page-tab.on{color:var(--ink)}
.page-tab.on::after{transform:scaleX(1)}
.tab-sep{width:1px;height:28px;background:var(--ink-24);margin-bottom:10px}

.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ============ 區塊標題 ============ */
.grp{margin-top:64px}
.grp-head{display:flex;align-items:baseline;gap:16px}
.grp-head h2{font-size:21px;font-weight:700;letter-spacing:.12em;color:var(--ink)}
.grp-head .n{font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--gray-2)}
.grp-rule{height:1px;background:var(--ink-16);margin-top:18px}

/* ============ 卡片網格 ============ */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(20px,2.8vw,40px);row-gap:clamp(36px,3.4vw,52px);
  margin-top:clamp(32px,3vw,44px);
}
.card{display:block;position:relative}
.card .img{position:relative;aspect-ratio:3/2;background:var(--ink-08);overflow:hidden}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.33,.1,.25,1)}
.card:hover .img img{transform:scale(1.05)}
.card .img::after{
  content:"";position:absolute;inset:0;background:var(--ink-16);opacity:0;transition:opacity .4s;
}
.card:hover .img::after{opacity:1}
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px;flex-wrap:wrap}
.card .cat{color:var(--gold);font-size:14px;font-weight:600;letter-spacing:.06em}
.card .date{color:var(--ink-38);font-size:13px;font-weight:500;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.card .date i{display:block;width:8px;height:1px;background:var(--ink-38)}
.card .title{
  font-size:16px;font-weight:600;line-height:1.6;letter-spacing:.03em;color:var(--ink);
  transition:color .25s;
}
.card:hover .title{color:var(--red)}
/* 過往活動：稍降彩度，維持層次 */
.grid.past .card .img img{filter:saturate(.72) brightness(.96)}
.grid.past .card:hover .img img{filter:saturate(1) brightness(1)}

.empty{
  grid-column:1/-1;padding:64px 0;text-align:center;
  font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--gray-2);
}

/* ============ 分頁 ============ */

/* ============ RWD ============ */
@media (max-width:1400px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1200px){
  .nav-links a{font-size:16px}
  .f-col{width:200px}
}
@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}
  .grid{grid-template-columns:repeat(2,1fr)}
  .plist{padding:40px 0 80px}
  .grp{margin-top:48px}
}
@media (max-width:820px){
  .footer-main{flex-direction:column}
  .f-links{gap:32px}
}
@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}
  .band-glyph{display:none}
  .page-tab{font-size:22px;letter-spacing:.1em}
  .tab-sep{height:22px}
  .grid{grid-template-columns:1fr;row-gap:32px}
  .card .title{font-size:15px}
    .f-col{width:100%}
}