/*
  De verhaalpagina's en hun overzicht.

  Staat los van landing.css omdat dat bestand door élke pagina wordt geladen en
  al 2400 regels telt; deze regels gelden alleen op /verhalen en /en/stories.
  De tokens komen uit landing.css (--purple, --beige, --title, --page, …), dus
  dit bestand definieert geen enkele eigen kleur — dezelfde afspraak als in de
  app: schermen consumeren tokens, ze verzinnen er geen.

  Wordt naast landing.css geladen, dus de schil (site-header, site-menu,
  doc-footer, doc-main, doc-hero) hoeft hier niet herhaald te worden.
*/

/* De leeskolom is breder dan `.doc-main` toestaat: een verhaal van 3.700 tekens
   in 820px leest prettig, maar de omslag ernaast heeft ruimte nodig. */
.story-main {
  width: min(940px, calc(100% - 2 * var(--page)));
}

.story-crumbs {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
}

.story-crumbs a {
  color: var(--purple);
  text-decoration: none;
}

.story-crumbs a:hover {
  text-decoration: underline;
}

.story-crumbs span[aria-hidden] {
  margin: 0 6px;
  color: var(--low);
}

/* ── Kop van een verhaal ─────────────────────────────────────────────── */

.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  margin-bottom: clamp(36px, 6vw, 60px);
}

.story-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--beige);
  box-shadow: var(--shadow-soft);
}

.story-intro .eyebrow {
  color: var(--purple);
}

.story-intro h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.02;
  color: var(--title);
  hyphens: manual;
}

.story-intro .doc-lead {
  max-width: 46ch;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
}

.story-meta {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
}

/* ── De knop naar de recorder ────────────────────────────────────────── */

.story-cta-button {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--button-radius);
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.story-cta-button:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
}

.story-cta-button:focus-visible {
  outline: 3px solid var(--title);
  outline-offset: 3px;
}

/* ── De voorleestekst ────────────────────────────────────────────────── */

.story-text h2,
.story-cta h2,
.story-source h2,
.story-more h2,
.story-age h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1;
  color: var(--title);
}

/* Regellengte is hier het hele punt: dit is bedoeld om hardop van voor te
   lezen, en dan moet je oog de volgende regel zonder zoeken terugvinden.
   ⚠️ `ch` is de breedte van een NUL, en die is in SF Pro veel breder dan een
   gemiddelde letter: 62ch mat 82 tekens per regel, ruim boven het comfortabele
   venster van 50-75. Nagemeten met een Range over de tekstknopen, niet geschat
   — 46ch komt uit op ~62 tekens. Bij het wijzigen van deze waarde opnieuw
   meten; schatten gaat hier aantoonbaar mis. (Het opnamescherm van de recorder
   maakte dezelfde fout de andere kant op: 30-38 tekens.) */
.story-text p {
  max-width: 46ch;
  margin: 0 0 1.15em;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.7;
  color: var(--ebony);
}

.story-text p:first-of-type::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  color: var(--purple);
}

/* ── Oproep onderaan ─────────────────────────────────────────────────── */

.story-cta {
  margin: clamp(44px, 7vw, 72px) 0;
  padding: clamp(28px, 5vw, 44px);
  border-radius: var(--card-radius);
  background: var(--beige);
}

.story-cta p {
  max-width: 52ch;
  margin: 0 0 24px;
  color: var(--ebony);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

/* ── Herkomst en licentie ────────────────────────────────────────────── */

/* Klein en gedempt, maar aanwezig: bij een CC BY-verhaal is de naamsvermelding
   een voorwaarde van de licentie, geen voetnoot die weggelaten mag worden. */
.story-source {
  margin: clamp(36px, 6vw, 56px) 0;
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--low);
}

.story-source p {
  max-width: 62ch;
  margin: 0 0 0.7em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.story-source a {
  color: var(--purple);
}

/* ── Verhalenrooster (hub én "meer verhalen") ────────────────────────── */

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

.story-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--card-radius);
  background: var(--beige);
  color: var(--title);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.story-card:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.story-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  background: var(--room);
}

.story-card strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.15;
}

.story-card span {
  color: var(--muted);
  font-size: 13px;
}

.story-more {
  margin-top: clamp(36px, 6vw, 56px);
}

.story-all {
  display: inline-block;
  margin-top: 20px;
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
}

.story-all:hover {
  text-decoration: underline;
}

.story-age {
  margin-bottom: clamp(36px, 6vw, 56px);
}

/* ── Smal scherm ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* De omslag boven de tekst in plaats van ernaast, en kleiner: op een telefoon
     duwt een vierkante omslag op volle breedte de titel onder de vouw. */
  .story-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .story-cover {
    width: min(200px, 55%);
  }

  /* De sierkapitaal vervalt op een telefoon. Nagemeten op 375px: hij duwt de
     eerste drie regels van 41 naar 27 tekens — een derde smaller, precies waar
     de lezer begint. Op een breed scherm kost hij niets. */
  .story-text p:first-of-type::first-letter {
    float: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }
}