/* 節目篩選結果.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)}   /* 轉場幕跟著頁面底色，避免進場閃一下 */

/* ============ 結果標題區 ============ */
.res{padding:56px 0 104px}
.res-head{padding-bottom:26px;border-bottom:2px solid var(--ink)}
.res-kind{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--red);text-transform:uppercase;
}
.res-kind img{width:16px;height:16px;object-fit:contain}
.res-head h1{
  margin-top:14px;
  font-size:clamp(28px,3.2vw,44px);font-weight:600;line-height:1.25;letter-spacing:.06em;color:var(--ink);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.res-head h1 .plus{font-size:.5em;font-weight:500;color:var(--gold);letter-spacing:0}
/* 符合筆數：跟著標題的基線排，字級退一階、不搶標題 */
.res-head h1 .res-count{
  font-size:.42em;font-weight:600;letter-spacing:.06em;color:var(--gray-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- 已選條件 ---- */
.cond{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.cond-lb{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gray-2);margin-right:2px}
.cond-chip{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 14px;
  border-radius:99px;background:var(--ink);color:var(--cream);
  font-size:14px;font-weight:600;letter-spacing:.06em;
}
/* 小標籤圖標（深色底 → 染白）；關鍵字 chip 不加圖標 */
/* 切版的延伸探索 chip 是 button（JS 疊加條件），SSR 版是連結，兩種都要帶圖標 */
.cond-chip:not(.query)::before,.more-chips button::before,.more-chips a::before{
  content:"";width:16px;height:16px;flex:0 0 auto;
  background:url("/assets/front/images/icons/tag.svg") center/contain no-repeat;
}
.cond-chip:not(.query)::before{filter:brightness(0) invert(1);opacity:.8}
.cond-chip.person{background:var(--red)}
.cond-chip.query{background:var(--gold);color:var(--ink)}
.card .title mark,.res-head mark{background:rgba(212,172,90,.42);color:inherit;border-radius:2px;padding:0 1px}
.cond-chip .x{
  width:20px;height:20px;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.18);color:inherit;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;transition:.2s;
}
.cond-chip .x:hover{background:rgba(255,255,255,.42)}
.cond-clear{
  background:none;border:0;cursor:pointer;padding:0 4px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gray);
  text-decoration:underline;text-underline-offset:4px;
}
.cond-clear:hover{color:var(--red)}

/* ---- 工具列 ---- */
.tools{display:flex;align-items:center;gap:20px 28px;margin-top:34px;flex-wrap:wrap}
.tools #segSort{margin-left:auto}
.seg{display:inline-flex;align-items:center;gap:8px}
.seg-lb{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gray-2);margin-right:6px}

/* ============ 卡片網格 ============ */
.grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,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 .badge{
  position:absolute;left:0;top:0;z-index:2;height:26px;padding:0 12px;
  display:flex;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--white);background:var(--red);
}
.card .badge.past{background:rgba(17,17,17,.72)}
.card .badge.story{background:var(--gold);color:var(--ink)}
/* 故事封面是直式，放進 3:2 網格時往上取鏡 */
.card.is-story .img img{object-position:center 28%}
.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)}
/* 命中條件的標籤在卡片下方標出來 */
.card .hits{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.card .hits span{
  font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--gray);
  border:1px solid var(--ink-16);border-radius:99px;padding:3px 9px;
}
.card .hits span.on{background:var(--beige-2);border-color:transparent;color:var(--ink)}

/* ---- 空狀態 ---- */
.empty{
  margin-top:56px;padding:72px 32px;text-align:center;
  border:1px dashed var(--ink-24);background:rgba(255,255,255,.5);
}
.empty h3{font-size:19px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.empty p{margin-top:12px;font-size:14px;font-weight:500;line-height:1.9;letter-spacing:.04em;color:var(--gray)}
.empty .acts{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}

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

/* ============ 延伸探索 ============ */
.more{margin-top:96px;padding-top:44px;border-top:1px solid var(--ink-16)}
.more h2{font-size:19px;font-weight:700;letter-spacing:.12em;color:var(--ink)}
.more p.note{margin-top:10px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray-2)}
.more-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.more-group + .more-group{margin-top:36px}

/* ============ RWD ============ */
@media (max-width:1400px){ .grid{grid-template-columns:repeat(3,minmax(0,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,minmax(0,1fr))}
  .res{padding:40px 0 80px}
  .more{margin-top:72px}
}
@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}
  .crumb .mid{display:none}
  .band-glyph{display:none}
  .res-head h1{font-size:26px}
  .tools{gap:14px}
  .seg{flex-wrap:wrap}
  .grid{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .card .title{font-size:15px}
    .f-col{width:100%}
}