/* theme-b.css — 方向 B「影音前沿」語義層 + 組件（依 DESIGN.md §4.2 B 欄 / §8.2）
   深底 #1B1827 · 青主強調 · 粗黑 display（Sora + Noto Sans TC 900）· 首屏焦點=大播放器
   禁：白底、襯線主標題、欄線/首字下沉、編輯式長文樣式 */

.t-b {
  --color-bg: #1B1827;
  --color-surface: #2A2537;
  --color-surface-2: #232030;
  --color-text: #ECEAF2;
  --color-muted: #9A93AA;
  --color-accent: var(--cyan);
  --color-accent-2: var(--mint);
  --color-highlight: var(--gold);
  --color-line: rgba(236, 234, 242, .14);
  --color-footer: #14111D;
  --focus: var(--cyan);

  --font-display: "Sora", "Noto Sans TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── 頂欄（深底半透明 + 細亮邊） ───────────────────── */
.t-b .bh {
  position: sticky; top: 0; z-index: 20;
  background: rgba(27, 24, 39, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.t-b .bh-in { display: flex; align-items: center; gap: var(--s6); padding-block: var(--s2); }
.t-b .bh-brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--color-text); }
.t-b .bh-brand img { height: 44px; width: auto; background: #fff; border-radius: var(--r-btn); padding: 3px; display: block; }
.t-b .bh-txt { display: flex; flex-direction: column; line-height: 1.25; font-weight: 900; font-size: 16px; }
.t-b .bh-txt small { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: .25em; color: var(--color-accent); }
.t-b .bh-nav { display: flex; gap: var(--s4); overflow-x: auto; }
.t-b .bh-nav a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--color-muted); padding: var(--s2) 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.t-b .bh-nav a:hover { color: var(--color-text); }
.t-b .bh-nav a.on { color: var(--color-text); border-bottom-color: var(--color-accent); }
.t-b .bh-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s4); font-size: 12px; }
.t-b .bh-ask { color: var(--color-accent); text-decoration: none; border: 1px solid var(--color-accent); border-radius: 999px; padding: 4px 14px; font-weight: 500; }
.t-b .bh-ask:hover { background: var(--color-accent); color: #06232B; }
.t-b .bh-lang { color: var(--color-muted); }

/* ── 角標（欄目） ──────────────────────────────────── */
.t-b .bbadge {
  display: inline-block; background: rgba(44, 165, 196, .18); color: var(--color-accent);
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  border-radius: 999px; padding: 3px 10px;
}
.t-b .bbadge.dim { background: rgba(154, 147, 170, .16); color: var(--color-muted); }
.t-b .bbadge.big { font-size: 12px; }

/* ── 首屏 hero：大播放器 = 焦點 ────────────────────── */
.t-b .bhero { background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-bg) 100%); }
.t-b .bhero-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s6); padding-block: var(--s7); align-items: center; }
.t-b .player { position: relative; cursor: pointer; border-radius: var(--s3); overflow: hidden; }
.t-b .player img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.t-b .player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.t-b .play-btn { position: absolute; inset: 0; display: grid; place-items: center; }
.t-b .play-btn svg { width: 88px; height: auto; transition: transform var(--dur) var(--ease); }
.t-b .player:hover .play-btn svg { transform: scale(1.08); }
.t-b .bhero-info h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; margin: var(--s3) 0;
}
.t-b .bhero-meta { color: var(--color-muted); font-size: 12px; margin-bottom: var(--s4); }
.t-b .bhero-cta { display: flex; gap: var(--s3); }
.t-b .btn-primary {
  background: var(--color-accent); color: #06232B; font-weight: 700; text-decoration: none;
  border-radius: var(--r-btn); padding: 10px 22px; font-size: 15px;
}
.t-b .btn-primary:hover { background: #3DB6D6; }
.t-b .btn-ghost {
  border: 1px solid var(--color-line); color: var(--color-text); text-decoration: none;
  border-radius: var(--r-btn); padding: 10px 22px; font-size: 15px;
}
.t-b .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── 橫向 carousel 分欄（B 的導航主軸） ─────────────── */
.t-b .brow { padding-block: var(--s5) var(--s3); }
.t-b .brow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.t-b .brow-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0; display: flex; align-items: baseline; gap: var(--s3); }
.t-b .brow-c { font-size: 11px; color: var(--color-muted); }
.t-b .brow-arrows { display: flex; gap: var(--s2); }
.t-b .barr {
  appearance: none; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: 999px;
  width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer;
}
.t-b .barr:hover { border-color: var(--color-accent); color: var(--color-accent); }
.t-b .btrack {
  display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s3);
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-surface) transparent;
}
.t-b .btrack .bcard { scroll-snap-align: start; }

/* ── 視頻卡（縮略圖為主角 + hover 內聯預覽） ────────── */
.t-b .bcard { width: 288px; flex: none; text-decoration: none; color: inherit; display: block; }
.t-b .bc-poster { position: relative; border-radius: 10px; overflow: hidden; background: var(--color-surface); }
.t-b .bc-poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity var(--dur) var(--ease); }
.t-b .bc-poster .bbadge { position: absolute; top: var(--s2); left: var(--s2); }
.t-b .bc-poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.t-b .bc-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur) var(--ease); }
.t-b .bc-play svg { width: 56px; height: auto; }
.t-b .bcard:hover .bc-play, .t-b .bcard:focus-visible .bc-play { opacity: 1; }
.t-b .bcard:hover .bc-poster img { opacity: .8; }
.t-b .bcard h3 { font-weight: 700; font-size: 15.5px; line-height: 1.5; margin: var(--s2) 0 2px; }
.t-b .bc-meta { font-size: 11px; color: var(--color-muted); }
.t-b .bcard:hover h3 { color: var(--color-accent); }
.t-b .bcard.hidden { display: none; }

/* ── 文章帶（高對比粗字列表） ──────────────────────── */
.t-b .barts { padding-block: var(--s6); }
.t-b .barow { display: grid; grid-template-columns: 110px 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit; align-items: baseline; }
.t-b .ba-date { color: var(--color-muted); font-size: 12px; }
.t-b .barow h3 { font-weight: 700; font-size: 17px; margin: 0 0 2px; line-height: 1.5; }
.t-b .ba-tags { font-size: 11px; color: var(--color-muted); }
.t-b .barow:hover h3 { color: var(--color-accent); }
.t-b .barts-more { padding-top: var(--s4); }
.t-b .barts-more a { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.t-b .barow.hidden { display: none; }

/* ── 列表頁 ────────────────────────────────────────── */
.t-b .bpage { padding-block: var(--s7) var(--s8); }
.t-b .bpage-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); margin: 0 0 var(--s2); }
.t-b .bpage-sub { font-size: 12px; color: var(--color-muted); margin-bottom: var(--s5); }
.t-b .bpage-sub a { color: var(--color-accent); }
.t-b .pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); font-size: 12px; }
.t-b .pills button {
  appearance: none; background: none; border: 1px solid var(--color-line);
  border-radius: 999px; padding: 6px 14px; font: inherit; color: var(--color-muted); cursor: pointer;
}
.t-b .pills button:hover { color: var(--color-text); border-color: var(--color-muted); }
.t-b .pills button.on { background: var(--color-accent); border-color: var(--color-accent); color: #06232B; font-weight: 500; }
.t-b .bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--s5) var(--s4); }
.t-b .bgrid .bcard { width: auto; }

/* ── 分頁 ──────────────────────────────────────────── */
.t-b .pager { display: flex; gap: var(--s2); padding-top: var(--s5); font-size: 12px; }
.t-b .pager button { appearance: none; background: none; border: 1px solid var(--color-line); border-radius: var(--r-btn); padding: 4px 10px; font: inherit; color: var(--color-muted); cursor: pointer; }
.t-b .pager button:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); }
.t-b .pager button:disabled { opacity: .4; cursor: default; }
.t-b .pager .cur { color: #06232B; background: var(--color-accent); border-color: var(--color-accent); }

/* ── 文章頁（無襯線高對比 · 無欄線無首字下沉） ─────── */
.t-b .bpost { max-width: 760px; padding-block: var(--s6) var(--s8); }
.t-b .bart-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.4; margin: 0 0 var(--s2); }
.t-b .bcrumb { font-size: 11px; letter-spacing: .15em; color: var(--color-muted); margin-bottom: var(--s4); }
.t-b .bcrumb a { color: var(--color-muted); text-decoration: none; }
.t-b .bcrumb a:hover { color: var(--color-accent); }
.t-b .bbody { font-size: 17px; line-height: 1.95; }
.t-b .bbody p { margin: 0 0 1.35em; }
.t-b .bbody a { color: var(--color-accent); }
.t-b .bbody h2, .t-b .bbody h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.45; margin: 1.7em 0 .6em; }
.t-b .bbody h2 { font-size: 23px; } .t-b .bbody h3 { font-size: 19px; }
.t-b .bbody blockquote { margin: 1.6em 0; padding: var(--s3) var(--s4); background: var(--color-surface); border-left: 3px solid var(--color-accent); border-radius: 0 10px 10px 0; }
.t-b .bbody img { display: block; margin: 1.6em auto; border-radius: 10px; }
.t-b .bpn { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s7); font-size: 13px; }
.t-b .bpn a { color: var(--color-accent); text-decoration: none; }
.t-b .bpn a:hover { text-decoration: underline; text-underline-offset: 3px; }
.t-b .bask { margin-top: var(--s7); background: var(--color-surface); border-radius: 10px; padding: var(--s4); }
.t-b .bask-k { color: var(--color-accent); font-size: 11px; letter-spacing: .25em; margin-bottom: var(--s2); }
.t-b .bask p { margin: 0; color: var(--color-muted); font-size: 14px; }

/* ── 播放頁 ────────────────────────────────────────── */
.t-b .bwatch { max-width: 980px; padding-block: var(--s6) var(--s8); }
.t-b .bwatch .player { border-radius: 12px; }
.t-b .bwatch-info { padding-top: var(--s4); }
.t-b .bwatch-info .bbadge { margin-bottom: var(--s2); }
.t-b .bnote { margin-top: var(--s4); background: var(--color-surface); border-radius: 10px; padding: var(--s3) var(--s4); }
.t-b .bnote p { margin: 0; font-size: 14px; color: var(--color-muted); }

/* ── 頁腳 ──────────────────────────────────────────── */
.t-b .bft { background: var(--color-footer); }
.t-b .bft-in { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-block: var(--s6); flex-wrap: wrap; }
.t-b .bft-brand strong { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #F5F3FA; }
.t-b .bft-brand span { margin-left: var(--s4); font-size: 12px; color: var(--color-muted); }
.t-b .bft-note { font-size: 11px; color: var(--color-muted); }
.t-b .bft-note a { color: var(--color-muted); }
.t-b .bft-note a:hover { color: var(--color-text); }

/* ── 動效層（DESIGN.md D-P1-3：B 簽名=卡片橫向級聯 data-rv="x"；閱讀/播放頁零 data-rv） ── */
html.js .t-b [data-rv] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.js .t-b [data-rv="x"] { transform: translateX(-24px); }  /* 從左滑入，不撐大橫向滾動區 */
html.js .t-b [data-rv].rv-in { opacity: 1; transform: none; transition-delay: var(--rvd, 0s); }
html.js .t-b [data-rv].rv-done { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  html.js .t-b [data-rv] { opacity: 1; transform: none; transition: none; }
}

/* ── 響應式 ────────────────────────────────────────── */
@media (max-width: 980px) {
  .t-b .bhero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .t-b .bcard { width: 240px; }
}
@media (max-width: 640px) {
  .t-b .bh-in { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .t-b .bh-nav { order: 3; width: 100%; }
  .t-b .bh-lang { display: none; }
  .t-b .barow { grid-template-columns: 1fr; gap: 2px; }
  .t-b .ba-date { grid-row: 1; }
  .t-b .ba-main { grid-row: 2; }
  .t-b .bhero-cta { flex-wrap: wrap; }
}