/* =========================================================================
   Topstukken — podcastpagina's: /afleveringen, /aflevering/<slug>, /over
   Bouwt voort op de tokens en componenten uit main.css.
   ========================================================================= */

/* ---------- /afleveringen: filter ---------- */
.pod-list-section { padding-top: 0; }
.pod-filter { gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); }
.pod-filter__top { display: grid; gap: var(--s-3); align-items: center; }
.pod-filter__top .search { max-width: 30rem; }
.pod-filter__top .input { width: 100%; }
.pod-filter__count { font-size: var(--fs-small); color: var(--subtle); font-variant-numeric: tabular-nums; }
.pod-filter__count span { color: var(--ink-strong); font-weight: 650; }
.pod-filter__group { display: grid; gap: var(--s-2); }
@media (min-width: 720px) {
  .pod-filter__top { grid-template-columns: minmax(0, 30rem) auto; justify-content: space-between; }
  .pod-filter__group { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--s-4); }
  .pod-filter__group .filter-bar__label { padding-top: .7em; }
}

/* RSS-paneel */
.rss-panel { display: grid; gap: var(--s-6); align-items: center; }
.rss-panel__icon { width: 52px; height: 52px; margin-bottom: var(--s-5); border-radius: 50%; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal-ink); }
.rss-panel__icon .i { width: 24px; height: 24px; }
.rss-panel__text p { margin-top: var(--s-4); font-family: var(--font-serif); font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 34rem; }
.rss-panel__box { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--bg); border-radius: var(--r-xs); min-width: 0; }
.rss-panel__label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s-2); }
.rss-panel__copy { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.rss-panel__copy .input { flex: 1 1 14rem; min-width: 0; font-size: var(--fs-small); background: var(--surface); }
.rss-panel__copy .btn { flex: none; }
ol.rss-panel__steps { margin-top: var(--s-5); padding-left: 1.3em; list-style: decimal; display: grid; gap: var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.rss-panel__steps li::marker { color: var(--teal-ink); font-weight: 650; }
@media (max-width: 479px) { .rss-panel__copy .btn { flex: 1 1 100%; } }
@media (min-width: 900px) { .rss-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- /aflevering/<slug>: kop ---------- */
.ep-head { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) var(--section); }
.ep-head .crumbs { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.ep-head__grid { display: grid; gap: var(--s-7); align-items: center; }
.ep-head__title { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -.026em; max-width: 15ch; }
.ep-head__ep { margin-top: var(--s-4); font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h4); color: var(--ink-strong); }
.ep-head__ep time { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small); color: var(--subtle); }
.ep-head__ep span { color: var(--line-strong); margin-inline: .15em; }
.ep-head__work { margin-top: var(--s-2); display: flex; align-items: flex-start; gap: .5em; font-size: var(--fs-small); color: var(--muted); hyphens: manual; }
.ep-head__work .i { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; color: var(--teal-ink); }
.ep-head__lead { margin-top: var(--s-5); max-width: 36rem; font-family: var(--font-serif); font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.ep-head__player { margin-top: var(--s-6); max-width: 40rem; }
.ep-head__note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--subtle); hyphens: manual; }
.ep-head__art { justify-self: center; width: 100%; max-width: min(540px, 100%); }
.ep-head__art img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: var(--line); box-shadow: var(--shadow-art); }
.ep-head__art figcaption { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--subtle); line-height: 1.45; }
.ep-head__art figcaption em { font-family: var(--font-serif); font-size: .95rem; color: var(--muted); }
@media (min-width: 900px) {
  .ep-head__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .ep-head__art { justify-self: end; }
  .ep-head__art img { width: auto; max-width: 100%; max-height: min(78vh, 680px); margin-left: auto; }
  .ep-head__art figcaption { text-align: right; }
}

/* ---------- verhaal + zijkolom ---------- */
.ep-layout { display: grid; gap: var(--s-8); }
.ep-prose > p:first-of-type::first-line { font-weight: 600; }
.ep-prose .pull { hyphens: manual; text-wrap: balance; }
.ep-sign { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--subtle); padding-top: var(--s-2); }
.ep-sign::before { content: "— "; }
.ep-aside { align-self: start; }
.ep-aside__title { font-size: var(--fs-h3); }
.ep-facts { width: 100%; margin-top: var(--s-5); border-collapse: collapse; font-size: var(--fs-small); }
.ep-facts th, .ep-facts td { padding: .7em 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ep-facts th { width: 8.5rem; padding-right: var(--s-4); font-weight: 500; color: var(--subtle); }
.ep-facts td { color: var(--ink-strong); font-weight: 550; }
.ep-facts tr:first-child th, .ep-facts tr:first-child td { border-top: 1px solid var(--line); }
.ep-credit { margin-top: var(--s-5); font-size: var(--fs-xs); line-height: 1.55; color: var(--muted); hyphens: manual; }
.ep-credit em { font-style: italic; }
.ep-aside__note { margin-top: var(--s-3); font-size: var(--fs-xs); line-height: 1.55; color: var(--subtle); hyphens: manual; }
.ep-aside__more { margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-small); }
@media (min-width: 1000px) {
  .ep-layout { grid-template-columns: minmax(0, 1fr) 19.5rem; gap: clamp(3rem, 6vw, 6rem); }
  .ep-aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* tekst van het fragment */
.transcript { margin-top: var(--s-7); max-width: var(--measure); border-block: 1px solid var(--line); }
.transcript summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--ink-strong); }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary > span { display: inline-flex; align-items: center; gap: .55em; }
.transcript summary > span .i { color: var(--teal-ink); width: 1.1em; height: 1.1em; }
.transcript summary > .i { flex: none; color: var(--teal-ink); transition: transform .25s var(--ease-out); }
.transcript[open] summary > .i { transform: rotate(180deg); }
.transcript summary:hover { color: var(--teal-ink); }
.transcript summary:focus-visible { outline: none; box-shadow: var(--focus); }
.transcript__body { padding-bottom: var(--s-6); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.transcript__note { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--subtle); margin-bottom: var(--s-3); }

/* ---------- vorige / volgende ---------- */
.ep-pn { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .ep-pn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.ep-pn__item.ep-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
.ep-pn__item .ep-mini__media { position: relative; display: block; aspect-ratio: auto; min-height: 96px; }
.ep-pn__item .ep-mini__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ep-pn__item .ep-mini__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--s-4) var(--s-5); }
.ep-pn__item .ep-mini__title { margin-top: var(--s-1); }
.ep-pn__item:hover .ep-mini__title { color: var(--teal-ink); }
.ep-pn__dir { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); font-weight: 650; color: var(--teal-ink); }
.ep-pn__dir .i { width: 1em; height: 1em; transition: transform .2s var(--ease-out); }
.ep-pn__item--prev:hover .ep-pn__dir .i { transform: translateX(-3px); }
.ep-pn__item--next:hover .ep-pn__dir .i, .ep-pn__item--all:hover .ep-pn__dir .i { transform: translateX(3px); }
@media (min-width: 760px) {
  .ep-pn__item.ep-mini { grid-template-columns: 128px minmax(0, 1fr); }
  .ep-pn__item--next { grid-template-columns: minmax(0, 1fr) 128px !important; }
  .ep-pn__item--next .ep-mini__media { order: 2; }
  .ep-pn__item--next .ep-mini__body { text-align: right; align-items: flex-end; }
  .ep-pn__item--next .ep-pn__dir { justify-content: flex-end; }
}
.ep-pn__item--all { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: var(--s-5); border: 1px dashed var(--line-strong); color: inherit; text-decoration: none; min-height: 96px; }
.ep-pn__item--all:hover { border-color: var(--teal-ink); }
.ep-pn__all { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink-strong); }
.ep-pn__item:focus-visible { outline: none; box-shadow: var(--focus); }

/* zachte oproep */
.pod-cta h2 { font-size: var(--fs-h3); }
.ep-cta__text { margin-top: var(--s-3); max-width: 42rem; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
.pod-cta strong { font-weight: 650; color: var(--ink); }

/* ---------- /over ---------- */
.about-first { padding-top: 0; }
.about-split { display: grid; gap: var(--s-7); align-items: center; }
.about-split__text { min-width: 0; max-width: 38rem; }
.about-block { margin-top: var(--s-6); }
.about-block h3 { display: flex; align-items: center; gap: .5em; font-size: var(--fs-h4); }
.about-block h3 .i { color: var(--teal-ink); width: 1.2em; height: 1.2em; flex: none; }
.about-block p { margin-top: var(--s-2); font-family: var(--font-serif); font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); }
.about-split .btn-row { gap: var(--s-3) var(--s-6); }
.about-photo { width: 100%; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--r-xs); background: var(--line); }
.about-photo--square img { aspect-ratio: 1; }
.about-photo figcaption { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--subtle); }
.about-steps .step { padding: var(--s-5) 0 var(--s-5) 3.75rem; }
.about-steps .step::before { top: var(--s-4); font-size: 2.6rem; }
.about-steps .step h3 { font-size: 1.25rem; }
.about-steps .step p { max-width: 46ch; }
@media (min-width: 900px) {
  .about-steps { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .about-steps .step, .about-steps .step + .step { padding: var(--s-5) 0 var(--s-5) 3.75rem; border-left: 0; border-bottom: 1px solid var(--line); }
  .about-steps .step::before { position: absolute; margin: 0; }
}
@media (min-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .about-split--rev { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .about-split--rev .about-split__media { order: -1; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

.about-why { display: grid; gap: var(--s-7); align-items: center; }
.about-why .prose { max-width: 38rem; }
.about-why__quote { max-width: 34rem; }
@media (min-width: 900px) { .about-why { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(3rem, 6vw, 6rem); } }

.about-share { height: 18px; }
.about-kv .kv__label { display: flex; align-items: center; gap: .5em; font-weight: 600; }
.about-kv .kv__sub { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.5; }
.share-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.about-notes { max-width: 46rem; }

.not-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.not-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.not-item__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--teal-ink); box-shadow: var(--shadow-1); }
.not-item__icon .i { width: 22px; height: 22px; }
.not-item h3 { font-size: var(--fs-h4); }
.not-item p { margin-top: var(--s-2); color: var(--muted); max-width: 48ch; }
@media (min-width: 760px) {
  .not-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
  .not-item { padding: var(--s-6) 0; }
}