/* ============================================================
   Production single-page styles
   來源：_design/production-page.css
   ※ body.skin-* token-swap 已合入主題 style.css，這份只留版面。
   ============================================================ */

/* ============================================================
   Hero — based on V2 (asymmetric editorial)
   ============================================================ */
.prod-hero {
  padding-block: var(--s-5) var(--s-8);
}

/* ===== Banner（橫式-1 · Hero 規格 1980×744 · 2.66:1，對齊 _design 設計系統 §06）===== */
.prod-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1980 / 744;
  background: var(--paper-2);
  overflow: hidden;
  margin-bottom: var(--s-7);
}
.prod-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 填滿框架、置中；海報為 2.8:1 ≈ 框 2.66:1，僅裁左右約 5% */
  object-position: center;
}
.prod-banner .ph {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* 舊：badge/opus 疊在 banner 上 — 已移到下方 eyebrow / 標題後方
   保留 :is(.prod-banner) :is(.badge,.opus) display:none 防殘留覆寫 */
.prod-banner .badge, .prod-banner .opus { display: none; }

/* 統一 eyebrow rules 在 style.css，全站可用 */
/* hero 區 prod-eyebrow 第一段（系列名）強調為 brand 色 */
.prod-eyebrow .it:first-of-type { color: var(--brand); }

/* ===== Hero body（banner 之下單欄：eyebrow → 標題 → 副標 → tagline → 場次）===== */
.prod-hero__body {
  display: grid;
  gap: var(--s-6);
}
.prod-hero__body-l {
  display: grid;
  gap: var(--s-4);
}
/* 場次列表在 tagline 下方，左右張開到整欄寬 */
.prod-hero__body .prod-sessions { margin-top: var(--s-3); }
/* 舊 .prod-series 被 .prod-eyebrow 取代 — 保留以防其他頁面殘留 */
.prod-series {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.prod-title {
  font-family: var(--font-serif-tc);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: pretty;
}
/* 標題後方 metadata row：英文副標 + opus
   英文副標用 Fraunces italic（真 italic glyph，不是 fake-slant 中文） */
.prod-title-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6em;
  margin-top: var(--s-3);
  line-height: 1.3;
}
.prod-title-meta .en {
  font-family: var(--font-serif-en, "Fraunces", "Iowan Old Style", "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.01em;
  color: var(--muted-2);
}
.prod-title-meta .dot { color: var(--muted); opacity: .5; }
.prod-title-meta .opus {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.prod-tagline {
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--muted-2);
  text-wrap: pretty;
}

/* Multi-session list inside hero */
.prod-sessions {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.prod-session {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  transition: background 240ms var(--ease-out);
}
.prod-session:hover {
  background: color-mix(in oklab, var(--brand) 6%, transparent);
}
.prod-session .meta { display: grid; gap: 4px; }
.prod-session .date {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.prod-session .date em {
  font-style: normal;
  color: var(--muted);
  margin-left: 6px;
}
.prod-session .venue {
  font-size: 13px;
  color: var(--muted-2);
}
.prod-session .cta {
  font-family: var(--font-sans-tc);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--brand);
  transition: padding 240ms var(--ease-out);
  white-space: nowrap;
}
.prod-session:hover .cta { padding-right: 4px; }
.prod-session .soon {
  color: var(--muted);
  border-bottom-color: var(--rule-strong);
}

/* 購票・優惠方案（hero 場次下方；資料同步 /tickets/ 總覽） */
.prod-plans { margin-top: var(--s-4); }
.prod-plans__label { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 0.14em; color: var(--muted); margin-bottom: var(--s-2); }
.prod-plans__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prod-plan {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); align-items: center;
  padding: var(--s-3) 0; border-top: 1px solid var(--rule);
}
.prod-plan:first-child { border-top: 0; }
.prod-plan__name { font-family: var(--font-sans-tc); font-weight: 500; color: var(--ink); }
.prod-plan__summary { color: var(--brand); margin-left: 8px; }
.prod-plan__deadline { display: block; font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }
.prod-plan__cta {
  white-space: nowrap; font-family: var(--font-sans-tc); font-size: var(--t-meta); font-weight: 500;
  color: var(--brand); border: 1px solid var(--brand); padding: 8px 14px; text-decoration: none;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.prod-plan__cta:hover { background: var(--brand); color: var(--paper); }
.prod-plans__more {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--font-sans-tc); font-size: var(--t-meta); color: var(--ink);
  border-bottom: 1px solid var(--rule-strong); text-decoration: none;
}
.prod-plans__more:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* 相關連結（報導等，製作頁下方） */
.prod-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prod-links li { border-bottom: 1px solid var(--rule); }
.prod-links a {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: var(--s-3) 0; font-family: var(--font-sans-tc); font-size: var(--t-body);
  color: var(--ink); text-decoration: none;
}
.prod-links a:hover { color: var(--brand); }
.prod-links__ext { font-size: 0.85em; color: var(--muted); }

/* ============================================================
   Section heads
   ============================================================ */
.prod-section {
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .prod-section { padding-block: var(--s-9); }
}
.prod-section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.prod-section-head .marker {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: nowrap;
}
.prod-section-head .num {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--brand);
  white-space: nowrap;
}
.prod-section-head .lbl {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.prod-section-head h2 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: pretty;
}
.prod-section-head .sub {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 4px;
}

/* ============================================================
   About — prose left, program list right (sticky-ish)
   ============================================================ */
.prod-about {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 1000px) {
  .prod-about {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
}
.prod-prose {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted-2);
  max-width: 62ch;
}
/* .prod-prose p 不用 text-wrap:pretty：長 CJK 正文會被 WebKit 提前斷行造成右側留白 */
.prod-prose p + p { margin-top: var(--s-4); }

/* Handbook download button — sits inside the prose column */
.prod-handbook {
  margin-top: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: 16px 18px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
  max-width: 480px;
}
.prod-handbook:hover {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 6%, var(--paper));
}
.prod-handbook-ic {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.prod-handbook-body { display: grid; gap: 4px; flex: 1 1 auto; }
.prod-handbook-t {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}
.prod-handbook-s {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.prod-handbook-arr {
  font-family: var(--font-mono);
  color: var(--brand);
  transition: transform 240ms var(--ease-out);
}
.prod-handbook:hover .prod-handbook-arr { transform: translateX(3px); }

/* ============================================================
   Program — plain text list (no borders, no grid)
   ============================================================ */
/* 舊 .prod-prog__* 表格樣式 — 已改 .prod-list 純文字，dormant 保留防殘 */
.prod-prog, .prod-prog__section-h, .prod-prog__list, .prod-prog__row,
.prod-prog__intermission, .prod-prog__actions { /* deprecated */ }

/* 舊 .prod-prog-plain 側欄 — 不再使用 */
.prod-prog-plain { padding-left: 0; }
@media (min-width: 1000px) {
  .prod-prog-plain {
    position: sticky;
    top: calc(64px + 16px);
    padding-left: var(--s-5);
    border-left: 1px solid var(--rule);
  }
}
.prod-prog-plain-h {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.prog-plain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.prog-plain-row {
  display: grid;
  gap: 2px;
}
.prog-plain-row .t {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body-lg);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-wrap: pretty;
}
.prog-plain-row .c {
  font-size: 13px;
  color: var(--muted-2);
  line-height: 1.4;
}
.prog-plain-int {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: var(--s-2);
}

/* ============================================================
   Program — simple list (compact variant used in About aside)
   ============================================================ */
.prog-list {
  display: grid;
  gap: 0;
}
.prog-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.prog-list > .prog-row:last-child { border-bottom: 0; }
.prog-row .n {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--brand);
}
.prog-row .body { min-width: 0; }
.prog-row .title {
  font-family: var(--font-serif-tc);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.prog-row .composer {
  font-size: var(--t-meta);
  color: var(--muted-2);
  margin-top: 2px;
}
.prog-row .composer .yr {
  font-family: var(--font-mono);
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.prog-row .dur {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.prog-divider {
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ============================================================
   Media + Photos combined post-concert section
   ============================================================ */
.prod-media-grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
.prod-media-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-self: start;
}
.prod-media-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.prod-media-h .lbl {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.prod-media-h .more {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.04em;
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
  transition: padding 240ms var(--ease-out);
}
.prod-media-h .more:hover { padding-right: 4px; }

/* YouTube 全寬縮圖網格（點縮圖 → 站內燈箱內嵌播放） */
.prod-yt-block { display: flex; flex-direction: column; gap: var(--s-4); }
.prod-yt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}
@media (min-width: 700px)  { .prod-yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .prod-yt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.prod-yt-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.prod-yt-card .thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 6px,
      color-mix(in oklab, var(--ink) 12%, transparent) 6px 12px),
    var(--paper-2);
}
.prod-yt-card .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease-out);
}
.prod-yt-card:hover .thumb img,
.prod-yt-card:focus-visible .thumb img { transform: scale(1.04); }
.prod-yt-card .thumb .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-yt-card .thumb .play svg {
  width: 44px; height: 44px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px;
  border-radius: 50%;
  opacity: 0.92;
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.prod-yt-card:hover .thumb .play svg,
.prod-yt-card:focus-visible .thumb .play svg { transform: scale(1.08); background: var(--brand); }
.prod-yt-card .ttl {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

/* 影片燈箱：沿用 .lightbox，把圖換成 16/9 的 nocookie iframe */
.lightbox--video .lightbox-frame { aspect-ratio: 16 / 9; background: #0f0c0a; }
.lightbox-video { position: absolute; inset: 0; }
.lightbox-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Photo wall: compact 3x2 inside the right column */
.photo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.photo-wall.compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.photo-tile {
  aspect-ratio: 1/1;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 6px,
      color-mix(in oklab, var(--ink) 12%, transparent) 6px 12px),
    var(--paper-2);
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 240ms var(--ease-out);
  border: 0;
  padding: 0;
}
.photo-tile.tall { aspect-ratio: 1 / 1; grid-row: auto; }
.photo-tile:hover { transform: scale(1.02); }
.photo-tile::after {
  content: none;
}
.photo-wall-meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.photo-wall-meta.compact { margin-top: var(--s-3); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(135deg, rgba(244,239,228,0.08) 0 10px, rgba(244,239,228,0.14) 10px 20px),
    #2a241d;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
}
.lightbox-frame .label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.65);
  background: rgba(33, 28, 23, 0.7);
  padding: 6px 10px;
}
.lightbox-x {
  position: absolute;
  top: -44px;
  right: 0;
  color: rgba(244, 239, 228, 0.7);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lightbox-x:hover { color: rgba(244, 239, 228, 1); }
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 239, 228, 0.1);
  color: rgba(244, 239, 228, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid rgba(244, 239, 228, 0.2);
  transition: background 200ms ease;
}
.lightbox-arrow:hover { background: rgba(244, 239, 228, 0.25); }
.lightbox-arrow.prev { left: -60px; }
.lightbox-arrow.next { right: -60px; }
.lightbox-counter {
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  color: rgba(244, 239, 228, 0.6);
}
@media (max-width: 700px) {
  .lightbox-arrow.prev { left: 8px; top: auto; bottom: -56px; transform: none; }
  .lightbox-arrow.next { right: 8px; top: auto; bottom: -56px; transform: none; }
  .lightbox-counter { bottom: -42px; }
}

/* ============================================================
   Related productions grid
   ============================================================ */
.related-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}
.related-card {
  display: grid;
  gap: var(--s-3);
  transition: transform var(--dur) var(--ease-out);
}
.related-card:hover { transform: translateY(-3px); }
.related-card .img {
  aspect-ratio: 750 / 580;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 8px,
      color-mix(in oklab, var(--ink) 12%, transparent) 8px 16px),
    var(--paper-2);
  position: relative;
}
.related-card .img .tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 3px 7px;
}
.related-card .series {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.related-card h4 {
  font-family: var(--font-serif-tc);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.related-card .date {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================
   演出陣容（production_credits → 人物頁）
   ============================================================ */
/* ===== .prod-list — 全頁通用「純文字列表」（演出團隊／演出曲目／合作藝術家共用）
        無 grid 表格、無 row border、單純項目文字
   ===== */
.prod-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--s-2);
  max-width: 680px;
}
.prod-list li {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink);
}
.prod-list .role {
  display: inline-block;
  min-width: 4.5em;
  margin-right: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  color: var(--muted);
  vertical-align: baseline;
}
.prod-list .name,
.prod-list .title {
  color: inherit;
  text-decoration: none;
}
.prod-list a.name {
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  transition: border-color var(--dur, 240ms) var(--ease-out, ease);
  padding-bottom: 1px;
}
.prod-list a.name:hover { border-bottom-color: currentColor; }

/* 演出陣容最上方：演出團體（合唱團／學苑團隊）＝領銜，比個別 credit 略大、角色當 eyebrow 在上 */
.prod-ensembles { gap: var(--s-4); margin-bottom: var(--s-6); }
.prod-ensembles li { display: grid; gap: 3px; line-height: 1.3; }
.prod-ensembles .role {
  display: block; min-width: 0; margin: 0;
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.prod-ensembles .name { font-family: var(--font-serif-tc); font-size: var(--t-h4); font-weight: 500; }
.prod-ensembles a.name {
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  padding-bottom: 2px; width: fit-content;
}
.prod-ensembles a.name:hover { border-bottom-color: currentColor; }

/* 曲目 list：曲名與作曲家之間留間距，作曲家小灰字 */
.prod-list--pieces li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6em 1em;
}
.prod-list--pieces .title {
  font-weight: 500;
}
.prod-list--pieces .comp {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* 自動互聯（任何欄位文字中的 person 姓名）：細底線 brand-tint */
.auto-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--dur, 240ms) var(--ease-out, ease), color var(--dur, 240ms) var(--ease-out, ease);
}
.auto-link:hover { color: var(--brand); border-bottom-color: currentColor; }

/* 區塊底下的「查看完整節目手冊」純文字連結 */
.prod-list__links {
  margin-top: var(--s-5);
  display: grid; gap: var(--s-2);
  max-width: 680px;
}
.prod-list__links a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  padding-bottom: 1px;
  width: fit-content;
  transition: border-color var(--dur, 240ms) var(--ease-out, ease);
}
.prod-list__links a:hover { border-bottom-color: currentColor; }

/* 舊 .prod-cast-list / .prod-cast-row — 不再使用，hidden 防殘留 */
.prod-cast-list, .prod-cast-row { /* deprecated */ }

/* ============================================================
   Sticky bottom CTA (mobile)
   ============================================================ */
.prod-sticky {
  position: sticky;
  bottom: 0;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  padding: 12px clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: flex-end;   /* 只剩購票按鈕，靠右 */
  z-index: 40;
}
.prod-sticky .btn { width: auto; }
@media (min-width: 1000px) {
  .prod-sticky { display: none; }
}

/* ============================================================
   Polish — lightbox img / focus-visible / motion preference
   ============================================================ */

/* 真的 Flickr 圖塞進 .lightbox-frame */
.lightbox-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0f0c0a;
}

/* 鍵盤聚焦時提供明顯的對比輪廓 */
.prod-session:focus-visible,
.prod-yt-card:focus-visible,
.related-card:focus-visible,
.prod-handbook:focus-visible,
.photo-tile:focus-visible,
.lightbox-x:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* 行動版的 sticky 不要擋住內容底邊（給最後一個 section 多一些底 padding） */
@media (max-width: 999px) {
  .prod-single > section:last-of-type { padding-bottom: calc(var(--s-9) + 56px); }
}

/* 尊重使用者降低動效的偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SoundCloud — 試聽區塊，放在 YouTube/Flickr grid 之前
   ============================================================ */
.prod-sc {
  margin-bottom: var(--s-6);
}
.prod-sc-list {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-3);
}
.prod-sc-track {
  border: 1px solid var(--rule);
  padding: var(--s-4);
  background: var(--paper);
}
.prod-sc-track__label {
  font-family: var(--font-serif-tc);
  font-size: var(--t-body);
  font-weight: 500;
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.prod-sc-track__embed iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}
.prod-sc-track__fallback {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
}