/* =====================================================================
   Podcast (2026-11-06): overzicht + afleveringpagina's. Bovenop /paginas.css, /pagina-systeem.css, /sjabloon.css, /blokken.css en /ev.css-vormen.
   ===================================================================== */
/* ---------- kop links + rechts (zelfde raster als de eventpagina's) ---------- */
.ev-w{display:grid;grid-template-columns:4fr 8fr;column-gap:4vw;align-items:start}
.ev-w .ev-w__p{margin-top:var(--s-groep);max-width:29vw;text-align:left;text-wrap:pretty}
.ev-w__l{padding-top:.3vw}
/* ---------- alle afleveringen: rijen links (nummer | naam + onderwerp | duur), cover rechts blijft staan en volgt de muis ---------- */
.pd__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4vw;margin-top:5vw;align-items:start}
.pd__l{list-style:none;margin:0;padding:0;display:block}
.pd__l > li{display:block;width:100%}
.pd__r{width:100%}
.pd__l > li + li{border-top:1px solid var(--ln)}
.pd__r{display:grid;grid-template-columns:3vw minmax(0,1fr) auto;column-gap:2vw;align-items:baseline;padding:1.5vw 0;color:inherit;text-decoration:none}
.pd__r .pd__n{text-box:trim-both cap alphabetic}
.pd__t{display:block}
.pd__t .lst{display:block;margin:0;transition:transform .4s var(--ease)}
.pd__t .bdy{display:block;margin-top:.5vw;text-wrap:pretty}
.pd__du{white-space:nowrap}
.pd__r:hover .lst{transform:translateX(.6vw)}
.pd__s{position:sticky;top:calc(var(--navh,96px) + 3vw)}
/* één scherm voor alle afleveringen (Laura 2026-11-06): het blok is precies een schermhoogte, de lijst scrolt erbinnen, de cover blijft staan */
@media (min-width:1025px){
  html:not(#a) body:not(#z) .pde2{height:100vh;min-height:0;box-sizing:border-box;display:flex;flex-direction:column}
  .pde2 .pd__grid{flex:1 1 auto;min-height:0;margin-top:3.5vw;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .pde2 .pd__lc{min-height:0}
  .pde2 .pd__l{min-height:0}
  /* cover exact even hoog als de lijst die scrolt, en groter (Laura 2026-11-06): de hint staat boven de lijst, rechts, zodat lijst en cover tot onderaan kunnen */
  .pde2 .pd__grid{position:relative}
  .pde2 .pd__lc{display:contents}
  .pde2 .pd__l{grid-column:1;grid-row:1}
  .pde2 .pd__s{grid-column:2;grid-row:1}
  html:not(#a) body:not(#z) .pde2{padding-bottom:var(--gutter)}
  .pde2 .pd__l{height:100%;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:var(--ln) transparent;padding-right:2vw}
  .pde2 .pd__l{mask-image:linear-gradient(to bottom,#000 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent)}
  html:not(#a) body:not(#z) .pd__hint{position:absolute;right:42.2vw;top:0;transform:translateY(-100%);margin:-1.2vw 0 0}
  .pde2 .pd__s{position:static;height:100%;display:flex;justify-content:flex-end;align-items:flex-start}
  .pde2 .pd__c{height:100%;width:auto;max-width:100%;aspect-ratio:1/1}
}
.pd__c{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--brand-brown)}
.pd__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.2,.7,.1,1)}
.pd__c img.on{opacity:1}
/* ---------- abonneer / luister: één onderlijnde knop onder de tekst, speler rechts ---------- */
.pd__k{display:inline-block;margin-top:var(--s-groep) !important;white-space:nowrap}
.pd__emb iframe{display:block;width:100%;height:352px;border:0;border-radius:12px}
.ep-l .pd__emb iframe{height:232px}
.ep-l__b{margin-top:var(--s-groep)}
.lv-meer{margin-top:8vw}
.lv-sig{margin-top:var(--s-kop)}
.lv-werk .vk-grid{margin-top:4vw}
/* ---------- aflevering: hero = cover rechts, tekst links ---------- */
.ep-h .ft__r .lead{margin-top:var(--s-kop)}
.ep-h .ft__r .ep-h__p{margin-top:var(--s-kop);max-width:36vw}
/* ---------- shownotes: brede uitgevulde alinea's onder de kop ---------- */
.ep-n{margin-top:var(--s-groep);max-width:58vw}
.ep-n .txt + .txt{margin-top:1em}
.ep-n a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* ---------- meer gesprekken: vierkante covers ---------- */
.tg__pic--sq{aspect-ratio:1/1}
.ep-m .tg__g{margin-top:5vw}
@media (min-width:1025px){.ep-m .tg__n{display:block;min-height:2.2em}}   /* namen op één of twee regels: de uitleg eronder start overal even hoog */

/* =====================================================================
   gsm (≤767px)
   ===================================================================== */
@media (max-width:767px){
  .md .pdh .hr__b{justify-content:flex-start;gap:3vw}   /* de twee knoppen passen niet op één regel: ze vallen onder elkaar */
  .md .pdh .cz__k{padding:8vw 5vw 6vw}
  .md .pdh .cz__k .lst{font-size:5.75vw;letter-spacing:-.015em;white-space:nowrap}
  .md .pdh .cz__k .bdy{margin-top:3vw}
  .ev-w{display:block}
  .ev-w .ev-w__p{max-width:none;margin-top:var(--r2);text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
  .ev-w__l{margin-top:var(--r3);padding-top:0}
  .pd__grid{display:block;margin-top:var(--r3)}
  .pde2 .pd__l{max-height:68vh;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;mask-image:linear-gradient(to bottom,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent)}
  html:not(#a) body:not(#z) .pd__hint{margin:4vw 0 0}
  .pd__s{display:none}
  .pd__r{grid-template-columns:9vw minmax(0,1fr);column-gap:3vw;padding:5vw 0;align-items:start}
  .pd__r .pd__n{padding-top:1.2vw}
  .pd__du{grid-column:2;margin-top:2vw}
  .pd__t .bdy{margin-top:1.5vw}
  .pd__k{margin-top:var(--r3) !important}
  .pd__emb iframe,.ep-l .pd__emb iframe{height:232px}
  .ep-l__b{margin-top:var(--r2);flex-wrap:wrap;gap:4vw}
  .ep-h .ft__r .ep-h__p{max-width:none}
  .ep-h .ft__pic{margin-top:8vw}
  .ep-n{max-width:none;margin-top:var(--r2)}
}