/* ============================================================
   episode.css, Afleveringspagina's van de videotheek.
   Zelfde ontwerptaal als videos.html (vt-*): podium met ambient
   gloed, daaronder een artikelgrid met hoofdstukken-kolom.
   Laadt bovenop videos.css (hergebruikt vt-card / vt-cta).
   ============================================================ */

/* ---------- speler: het podium ---------- */
/* De sectie loopt over de volle breedte, want hij draagt .hero__glow: dezelfde
   twee bollen als in .subhero op contact en in .vt-hero op de videotheek. De
   rechterbol steekt 8vw buiten de viewport, dus horizontaal wegknippen; clip
   (niet hidden) laat de y-as vrij, zodat de gloed onder de speler door blijft
   lopen richting het artikel. De speler zelf houdt zijn eigen maat. */
.ep-stage {
  position: relative;
  overflow-x: clip;
  padding: calc(84px + clamp(2rem, 5vh, 3.5rem)) var(--gutter) 0;
}
/* Geen eigen geblurde gloed meer achter de speler. Die stond hier als een
   ::before met drie mesh-verlopen en las als een gekleurde rechthoek om de
   video: de blur smeerde de verlopen uit tot de randen van het vlak en
   overflow-x: clip sneed dat links en rechts recht af. De sfeer komt nu uit
   .hero__glow, precies zoals op elke andere pagina. */
.ep-player {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  transform: translateZ(0);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  background: #04060a;
}
.ep-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* poster met play-knop, tot de bezoeker klikt */
.ep-player__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
}
.ep-player__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.ep-player__poster:hover img { transform: scale(1.02); }
.ep-player__poster::after {
  /* zachte vignet zodat de play-knop altijd draagvlak heeft */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(4, 6, 10, 0.22), transparent 72%);
}
.ep-player__poster .vt-play { z-index: 1; }
.ep-player__poster:hover .vt-play { transform: scale(1.07); }
.ep-player__poster:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: -4px;
  border-radius: var(--r-xl);
}
[data-motion="off"] .ep-player__poster:hover img { transform: none; }

/* ---------- artikel: inhoud + hoofdstukken ---------- */
.ep-article {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5.5rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.ep-article--solo { grid-template-columns: minmax(0, 1fr); }
.ep-body {
  max-width: 640px;
  /* meetlat voor .ep-eyebrow hieronder: 100cqw = de breedte van deze kolom */
  container-type: inline-size;
}

/* "Afl. 23 - Ai-tools - 26 augustus 2026" hoort op een regel te staan.
   Twee dingen braken dat. Op desktop kapte de globale p-regel
   (max-width: var(--measure), 40ch) hem af op 307px, waardoor het jaartal
   op een tweede regel viel. Op de telefoon is de kolom simpelweg smaller
   dan de zin: met 0.2em tracking is de langste eyebrow 29.6em breed, dus
   past hij pas onder 3.25% van de kolombreedte per em. Vandaar de cqw-cap:
   op desktop wint --fs-eyebrow (de kolom is daar ruim), op smalle
   telefoons zakt de tekengrootte precies genoeg mee. */
.ep-eyebrow {
  font-family: var(--font-mono);
  font-size: min(var(--fs-eyebrow), 3.25cqw);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1rem;
  max-width: none;
  white-space: nowrap;
}
.ep-body h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 1rem;
}
.ep-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  margin: 0 0 2rem;
}
.ep-body p.ep-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
/* hoogtepunten-lijst (uit de video-beschrijving) */
.ep-points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.ep-points li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.65rem;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-soft);
}
.ep-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--grad-accent-soft);
}

/* ---------- weggevers: gratis downloads bij deze aflevering ---------- */
.ep-gift { margin-top: 2.25rem; }
.ep-gift__head {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}
.ep-gift__card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.05rem 1.3rem;
  margin-bottom: 0.7rem;
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ep-gift__card:hover { transform: translateY(-2px); border-color: var(--accent-deep); }
.ep-gift__card:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}
.ep-gift__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 26px -12px var(--accent-glow);
}
.ep-gift__icon svg { width: 20px; height: 20px; }
.ep-gift__txt { flex: 1 1 auto; min-width: 0; }
.ep-gift__txt b {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ep-gift__txt i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}
.ep-gift__arrow {
  flex: 0 0 auto;
  color: var(--accent-deep);
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-out);
}
.ep-gift__card:hover .ep-gift__arrow { transform: translateX(4px); }

.ep-links {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.ep-links__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.ep-links .btn--ghost { margin-right: 0.6rem; margin-bottom: 0.6rem; }

/* hoofdstukken-kolom */
.ep-chapters {
  position: sticky;
  top: calc(84px + 1.5rem);
}
.ep-chapters__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
}
.ep-chapters ol {
  list-style: none;
  margin: 0;
  padding: 0 0.9rem 0 0;
  max-height: min(64vh, 620px);
  overflow-y: auto;
  /* zichtbare dunne scrollbalk, zodat lange lijsten leesbaar "verder gaan" */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.ep-chapters ol::-webkit-scrollbar { width: 6px; }
.ep-chapters ol::-webkit-scrollbar-track { background: transparent; }
.ep-chapters ol::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
.ep-chapters ol::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }
/* de lijst is zelf focusbaar (tabindex), zodat pijltjestoetsen ook scrollen */
.ep-chapters ol:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 4px;
  border-radius: 6px;
}
/* fade onderaan zolang er nog hoofdstukken buiten beeld zijn (episode.js
   zet .has-more); wijst de bezoeker op de rest zonder hard af te kappen */
.ep-chapters::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.9rem;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(180deg, transparent, var(--bg));
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
  pointer-events: none;
}
.ep-chapters.has-more::after { opacity: 1; }
.ep-chapters button {
  appearance: none;
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: 0.9em;
  width: 100%;
  padding: 0.42em 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  transition: color var(--dur-1) var(--ease-out);
}
.ep-chapters button:hover { color: var(--ink); }
.ep-chapters button:hover time { color: var(--accent-deep); }
.ep-chapters button:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
.ep-chapters time { color: var(--ink-faint); transition: color var(--dur-1) var(--ease-out); }

/* ---------- meer afleveringen ---------- */
.ep-more {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter) 0;
}
.ep-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.ep-more__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.ep-more__all {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
.ep-more__all:hover { border-color: var(--accent-deep); }

/* laatste blok voor de footer wat lucht geven */
.ep-more .vt-grid { padding-bottom: var(--section-pad); }

/* ---------- klein scherm ---------- */
@media (max-width: 900px) {
  .ep-article { grid-template-columns: minmax(0, 1fr); }
  .ep-chapters { position: static; }
  .ep-chapters ol { max-height: none; }
}
@media (max-width: 620px) {
  .ep-stage { padding-inline: var(--space-3); }
  .ep-player { border-radius: var(--r-lg); }
}

/* Telefoon: hoofdstukknoppen waren 30px hoog, te krap om te raken */
@media (max-width: 767px) {
  .ep-chapters button,
  .ep-chapters a {
    min-height: 44px;
  }
}