/* Podcast component primitives.
   Loaded only by the podcast app and articles that link to a published episode. */

/* ---------- Audio stories ----------
   This is an enhancement of an article, not a second article template. The component exists
   only when post.njk receives a real source plus chapter data. Its palette is derived from the
   site's existing ink, paper and accent tokens; the controls remain native HTML controls. */
.story-listen {
  margin: 0 0 2.25rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  color: var(--header-text, #f6f2ed);
  background: var(--header, #14100e);
  border-top: 3px solid var(--accent);
}
.story-listen-heading { max-width: 36rem; }
.story-listen-heading h2 {
  margin: 0.15rem 0 0.45rem;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  line-height: 1.05;
}
.story-listen-heading > p:last-child { margin: 0; color: #c8c0b7; }
.story-kicker {
  margin: 0;
  color: var(--accent-on-dark, #e8553c);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.story-listen > audio { display: block; width: 100%; margin-top: 1.25rem; }
.story-listen:not([data-story-enhanced]) .story-controls,
.story-listen:not([data-story-enhanced]) .story-chapters { display: none; }
.story-listen[data-story-enhanced] > audio { display: none; }
.story-controls,
.story-dock-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.story-controls { margin-top: 1.35rem; }
.story-round-button,
.story-speed {
  flex: 0 0 auto;
  border: 1px solid #6c6259;
  color: #f6f2ed;
  background: transparent;
  cursor: pointer;
  font: 700 0.82rem/1 var(--sans);
}
.story-round-button {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
}
.story-round-button span { grid-area: 1 / 1; }
.story-back { position: relative; font-size: 1.25rem; }
.story-back span { padding-top: 0.15rem; font-size: 0.68rem; }
.story-play {
  width: 4rem;
  height: 4rem;
  border-color: var(--accent-on-dark, #e8553c);
  color: #fff;
  background: var(--accent);
  font-size: 1rem;
}
.story-speed { min-width: 2.8rem; padding: 0.65rem 0.5rem; }
.story-timeline { flex: 1 1 auto; min-width: 0; }
.story-timeline input[type="range"] {
  --story-progress: 0%;
  width: 100%;
  height: 0.28rem;
  margin: 0;
  appearance: none;
  background: linear-gradient(to right, var(--accent-on-dark, #e8553c) var(--story-progress), #554d47 var(--story-progress));
  cursor: pointer;
}
.story-timeline input[type="range"]::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  appearance: none;
  background: #f6f2ed;
  border: 0;
  border-radius: 50%;
}
.story-timeline input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: #f6f2ed;
  border: 0;
  border-radius: 50%;
}
.story-now {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.35rem 0 0;
  color: #aaa097;
  font: 0.76rem/1.35 var(--sans);
}
.story-now strong {
  overflow: hidden;
  color: #f6f2ed;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-now > span { flex: 0 0 auto; }
.story-chapters {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  border-top: 1px solid #554d47;
}
.story-chapters li { margin: 0; border-bottom: 1px solid #3c3733; }
.story-chapters button {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0;
  border: 0;
  color: #c8c0b7;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.story-chapters button > span,
.story-chapters time { color: #8e857d; font: 0.72rem/1 var(--sans); }
.story-chapters button strong { font-family: var(--serif); font-size: 1.05rem; }
.story-chapters button.is-active strong,
.story-chapters button:hover strong { color: var(--accent-on-dark, #e8553c); }
.story-dock {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.65rem max(1rem, env(safe-area-inset-right)) calc(0.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  color: #f6f2ed;
  background: rgb(20 16 14 / 0.96);
  background: color-mix(in srgb, var(--header, #14100e) 96%, transparent);
  border-top: 1px solid #6c6259;
  box-shadow: 0 -0.35rem 1.5rem rgb(0 0 0 / 0.2);
  backdrop-filter: blur(12px);
}
.story-dock[hidden] { display: none; }
.story-dock-inner { max-width: 46rem; margin: 0 auto; }
.story-dock .story-round-button { width: 2.85rem; height: 2.85rem; }
.story-dock .story-play { width: 3.35rem; height: 3.35rem; }

.podcast-cta,
.listen-source-link {
  margin: 0 0 2.25rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--card);
}
.podcast-cta h2,
.listen-source-link h2 { margin: 0.25rem 0 0.5rem; }
.podcast-cta .btn,
.listen-source-link .btn { display: inline-block; margin-top: 0.75rem; }
.podcast-cta-actions { display: flex; flex-wrap: wrap; gap: 0 0.75rem; margin: 0; }
.podcast-cta .podcast-cta-spotify,
.podcast-cta .podcast-cta-platform {
  background: transparent;
  color: var(--ink, inherit);
  border: 1px solid currentColor;
  padding: calc(0.85rem - 1px) calc(1.7rem - 1px);
}
.podcast-cta .podcast-cta-spotify:hover,
.podcast-cta .podcast-cta-platform:hover { background: var(--ink, #14100e); color: #fff; }
.podcast-cta-inline {
  margin: 2.25rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-style: italic;
}

.listen-app-shell {
  min-height: 100vh;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  color: #f6f2ed;
  background: #14100e;
}
.listen-app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
  background: rgb(20 16 14 / 0.96);
  border-bottom: 1px solid #554d47;
  backdrop-filter: blur(12px);
}
.listen-app-header a { color: #f6f2ed; text-decoration: none; }
.listen-app-brand { font: 700 1.05rem/1 var(--serif); }
.listen-app-brand span { color: var(--accent-on-dark, #e8553c); font-style: italic; }
.listen-app-brand small { display: block; margin-top: 0.3rem; color: #aaa097; font: 0.62rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.listen-app-main { width: min(100% - 2rem, 52rem); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0; }
.listen-app-intro { max-width: 42rem; margin-bottom: 3rem; }
.listen-app-intro h1 { margin: 0.35rem 0 0.8rem; color: #f6f2ed; font-size: clamp(2.5rem, 9vw, 5rem); line-height: 0.98; }
.listen-app-intro p:last-child { color: #c8c0b7; font-size: 1.12rem; }
.listen-app-main > section > h2 { color: #f6f2ed; }
.listen-card-grid { display: grid; gap: 1rem; }
.listen-card {
  overflow: hidden;
  padding: 1.25rem;
  color: #d8d0c8;
  background: #202b32;
  border: 1px solid #43505a;
}
.listen-card img { width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 1.25rem; aspect-ratio: 16 / 9; object-fit: cover; }
.listen-card h3 { margin: 0.4rem 0 0.65rem; font-size: clamp(1.55rem, 5vw, 2.2rem); }
.listen-card h3 a { color: #f6f2ed; text-decoration: none; }
.listen-card-meta { color: #aaa097; font: 0.78rem/1.4 var(--sans); }
.listen-empty { padding: 1.25rem; color: #c8c0b7; border: 1px solid #554d47; }
.listen-app-nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  background: rgb(10 9 8 / 0.97);
  border-top: 1px solid #554d47;
}
.listen-app-nav a { color: #aaa097; font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.listen-app-nav a[aria-current="page"] { color: var(--accent-on-dark, #e8553c); }
.listen-source-link { margin-top: 2rem; color: #22272c; }

@media (max-width: 640px) {
  .story-listen { margin-right: -1rem; margin-left: -1rem; }
  .story-controls { gap: 0.55rem; }
  .story-controls .story-back { display: none; }
  .story-speed { min-width: 2.4rem; padding-right: 0.3rem; padding-left: 0.3rem; }
  .story-now { display: block; }
  .story-now > span { display: block; margin-top: 0.15rem; }
  .story-dock .story-back { display: none; }
  .story-dock-inner { gap: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-listen *, .story-dock * { scroll-behavior: auto; transition: none !important; }
}


/* HET MERKTEKEN VOOR DE PLATFORMNAAM. Eén kleur (currentColor), zodat het teken de knop volgt
   in licht en donker en er geen tweede kleurenset te onderhouden valt. `flex: none` houdt het
   op maat in een flexknop; de vertical-align doet hetzelfde in een inline knop. */
.platform-mark { flex: none; margin-right: 0.45rem; vertical-align: -0.16em; }