/* 故事列表.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)}   /* 轉場幕跟著頁面底色，避免進場閃一下 */

/* ============ 分類色塊（共用） ============ */

/* ============ 精選導讀（Figma：420 圖 + 64 gap + 660 文，垂直置中） ============ */
.stories{padding:56px 0 160px}
.pager{margin-top:clamp(72px,7.5vw,110px)}
.feat{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,660px);
  gap:clamp(28px,3.4vw,64px);align-items:center;
}
.feat .img{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-08)}
.feat .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.33,.1,.25,1)}
.feat:hover .img img{transform:scale(1.04)}
.feat .txt{display:block;min-width:0}
.feat .h2{
  display:block;
  font-size:clamp(23px,2.1vw,32px);font-weight:700;line-height:1.65;letter-spacing:.04em;color:var(--ink);
  transition:color .25s;
}
.feat:hover .h2{color:var(--red)}
/* 發表時間｜日期 ＋ 分類色塊（與節目詳情同一套語彙） */
.feat .meta{
  display:flex;align-items:center;gap:32px;margin-top:24px;flex-wrap:wrap;
  font-size:14px;letter-spacing:.06em;
}
.feat .meta .pub{display:inline-flex;align-items:center;gap:10px}
.feat .meta .pub .lb{font-weight:600;color:var(--red)}
.feat .meta .pub b{font-weight:500;color:var(--ink-88);letter-spacing:.02em}
.feat .lead{
  display:block;margin-top:24px;
  font-size:16px;font-weight:500;line-height:1.95;letter-spacing:.03em;color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============ 分類篩選 ============ */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(32px,3.4vw,46px)}

/* ============ 故事卡片網格 ============ */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:clamp(20px,2.8vw,40px);row-gap:clamp(40px,3.6vw,56px);
  margin-top:40px;
}
.card{display:block;position:relative}
.card .img{display:block;position:relative;aspect-ratio:4/5;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)}
/* hover 時蓋上該分類色的薄膜，把色票系統延伸到卡片上 */
.card .img::after{
  content:"";position:absolute;inset:0;background:var(--cc,rgba(17,17,17,1));
  opacity:0;transition:opacity .4s;mix-blend-mode:multiply;
}
.card:hover .img::after{opacity:.22}
/* Figma 的順序：圖片 → 分類色塊 → 標題 → 摘要 */
.card .cat-badge{margin-top:16px}
.card .title{
  display:-webkit-box;margin-top:6px;
  font-size:17px;font-weight:600;line-height:1.6;letter-spacing:.03em;color:var(--ink);
  transition:color .25s;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card:hover .title{color:var(--red)}
.card .lead{
  display:-webkit-box;margin-top:8px;
  font-size:14px;font-weight:500;line-height:1.8;letter-spacing:.03em;color:var(--ink-52);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.empty{
  grid-column:1/-1;padding:72px 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}
  .feat{grid-template-columns:minmax(0,340px) 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}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stories{padding:40px 0 80px}
  .feat{grid-template-columns:1fr;gap:26px}
  .feat .img{aspect-ratio:3/2;max-height:420px}
}
@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}
  .feat .h2{font-size:22px}
  .grid{grid-template-columns:1fr;row-gap:36px}
    .f-col{width:100%}
}