/* ============================================================================
   Dare Remachinda — EPISODES / VIDEO block.
   Linked from watch.html and index.html, AFTER style.css. Owns nothing else.

   Why a separate file: style.css carries the palette and is edited by another
   workstream — this file owns only the layout of the video/episode area and
   declares NO palette of its own. Every colour is a brand token from
   style.css (--navy, --navy-soft, --navy-deep, --gold, --white, --off-white,
   --muted-on-dark, --band, --ink, --body, --muted, --line, --radius,
   --radius-sm, --shadow, --serif).

   ── WHY THERE IS A LOCAL SURFACE RE-POINT BELOW ─────────────────────────
   style.css keeps ONE authoritative "SURFACE RE-POINT" list of every navy
   surface. This file must not edit style.css, so the navy surfaces it
   introduces re-declare their own on-navy values here, exactly as that list
   does. Without it the semantic aliases (--ink, --body, --muted, --line,
   --gold-text, --focus) would resolve to their WHITE-PAGE (dark) values
   inside a navy card and render navy-on-navy. Do not delete that block.
   Measured ratios on --navy #0B1B2B: --ink #FFF 17.4:1, --body #E4E9EF
   14.3:1, --muted #AFBACA 8.9:1, --gold-text #F7D774 12.4:1 — all AA/AAA.
   On the WHITE page: --body #22303F 13.4:1, --muted #4E5C6B 6.9:1,
   --gold-text #8A6A17 5.1:1 — all AA. Nothing here drops under 1rem.
   ========================================================================== */

.drm-episodes{display:block;min-width:0}

/* ── The navy surfaces on this block, carrying their on-navy values ─────── */
.drm-episodes .ep-card,
.drm-episodes .ep-lead,
.drm-episodes .ep-media,
.drm-episodes .ep-facade{
  color:var(--off-white);
  --ink:#FFFFFF;
  --body:#E4E9EF;
  --muted:#AFBACA;
  --line:#2A4462;
  --gold-text:#F7D774;
  --focus:#F7D774;
}

/* ── The media box: one radius per treatment, 16:9, holds facade or iframe ─ */
.ep-media{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.ep-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ── Click-to-load facade (a real <button>; youtube-nocookie, no autoplay) ─ */
.ep-facade{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;
  padding:0;border:0;background:linear-gradient(140deg,var(--navy),var(--navy-soft));
  color:var(--off-white);cursor:pointer;overflow:hidden;text-align:left}
.ep-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;
  transition:opacity .18s ease}
.ep-facade .ep-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;
  place-items:center;box-shadow:0 2px 14px rgba(6,16,28,.45)}
.ep-facade .ep-play svg{display:block}
.ep-facade .ep-play svg path{fill:var(--navy-deep)}
.ep-facade:hover img{opacity:.78}
.ep-facade:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:0}

/* ── The featured "latest episode" (asymmetric: wide player + copy) ─────── */
.ep-lead{background:var(--navy);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1fr;min-width:0}
@media(min-width:760px){
  .ep-lead{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);align-items:stretch}
}
.ep-body{padding:22px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ep-kicker{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--gold-text)}
.ep-lead h3{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.42rem;line-height:1.2;margin-top:8px;overflow-wrap:anywhere}
.ep-lead h3 a{color:var(--ink)}
.ep-lead h3 a:hover{color:var(--gold-text);text-decoration:none}
.ep-meta{font-size:1rem;color:var(--muted);margin-top:9px}
.ep-meta time{color:var(--off-white)}
.ep-note{font-size:1rem;color:var(--muted);margin-top:14px;overflow-wrap:anywhere}

/* ── The previous-episodes grid (real listing, so a grid is right here) ─── */
.drm-episodes.ep-grid{display:grid;grid-template-columns:1fr;gap:18px;min-width:0}
@media(min-width:640px){
  .drm-episodes.ep-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
.ep-card{background:var(--navy);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ep-card-body{padding:16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ep-card h3{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.08rem;line-height:1.25;overflow-wrap:anywhere}
.ep-card h3 a{color:var(--ink)}
.ep-card h3 a:hover{color:var(--gold-text);text-decoration:none}
.ep-card .ep-meta{margin-top:7px}

/* ── Homepage: one lead player beside a quiet list of earlier episodes ───── */
.ep-home{display:grid;grid-template-columns:1fr;gap:24px;min-width:0}
@media(min-width:880px){
  .ep-home{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:38px;align-items:start}
}
/* The homepage lead inherits the same navy card; the flex column lets the
   player keep its 16:9 and the copy sit under it on narrow screens. */
.ep-home .ep-lead{grid-template-columns:1fr;display:flex;flex-direction:column}
.ep-home .ep-body{padding:20px 22px}
.ep-home .ep-lead h3{font-size:1.34rem}
.ep-list-h{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.12rem;margin-bottom:6px}
/* A ruled index of rows, not a second grid — keeps the homepage's varied
   rhythm instead of adding a uniform card row. */
.ep-list{list-style:none;margin:0;padding:0;min-width:0}
.ep-list li{border-bottom:1px solid var(--line);min-width:0}
.ep-list li:first-child{border-top:1px solid var(--line)}
.ep-list a{display:block;padding:14px 4px;min-height:64px;color:var(--ink)}
.ep-list a:hover{text-decoration:none}
.ep-list a:hover .ep-ltitle{color:var(--gold-text)}
.ep-ltitle{display:block;font-family:var(--serif);font-size:1.06rem;line-height:1.25;
  color:var(--ink);overflow-wrap:anywhere}
.ep-list .ep-meta{margin-top:4px}
.ep-more{margin-top:16px}

/* ── Empty / not-yet-synced state: calm, factual, never a fake episode ──── */
.ep-empty{background:var(--band);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;min-width:0}
.ep-empty p{color:var(--body);font-size:1rem;overflow-wrap:anywhere}
.ep-empty p+p{margin-top:8px}
.ep-empty strong{color:var(--ink)}

/* ── Phone guards: the page has never scrolled sideways ─────────────────── */
.drm-episodes,.ep-grid,.ep-grid>*,.ep-card,.ep-card-body,.ep-home,.ep-home>*,
.ep-lead,.ep-body,.ep-list,.ep-list li,.ep-list a{min-width:0}
.ep-card h3,.ep-lead h3,.ep-ltitle,.ep-note,.ep-empty p{overflow-wrap:anywhere}

/* The "All episodes" control inherits .btn's 0.97rem from style.css; lift it to
   the 1rem floor so every piece of text inside the block clears it. */
.drm-episodes .btn{font-size:1rem}