/* ══ Scrollverhaal op de scanpagina ══════════════════════════════════
   Vier kaarten die onder het scrollen over elkaar heen schuiven. Puur
   CSS: position: sticky, een oplopende z-index en ruimte tussen de
   kaarten. Op een telefoon worden ze een stapel die je wegveegt naar
   rechts (site.js, sectie 7); zonder JavaScript staan ze daar gewoon
   onder elkaar. Bij prefers-reduced-motion vervalt beide. */

.verhaal__stapel {
  width: min(100% - 2 * var(--gutter), 1280px);
  margin: clamp(32px, 4vw, 56px) auto 0;
}

.verhaal {
  position: sticky;
  top: 96px;                       /* de zwevende header is 72px hoog */
  z-index: 1;
  min-height: 670px;               /* vaste kaarthoogte */
  margin-bottom: 18vh;
  /* Vaste maatvoering op 1280px kaartbreedte: 23px rondom, beeld 592x624
     dat op 665px vanaf de linkerrand begint. 670 - 2x23 = 624. */
  padding: 23px;
  border-radius: var(--radius-kaart-groot);
  box-shadow: var(--shadow-kaart);
  overflow: hidden;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .verhaal { grid-template-columns: 0.52fr 0.48fr; } }

/* elke volgende kaart schuift over de vorige heen */
.verhaal:nth-of-type(2) { z-index: 2; }
.verhaal:nth-of-type(3) { z-index: 3; }
.verhaal:nth-of-type(4) { z-index: 4; margin-bottom: 0; }
.verhaal__ruimte { height: 18vh; }

/* vier vlakken; tekst en knop blijven overal aubergine */
.verhaal--profiel { background: var(--kaart-profiel); }
.verhaal--maps    { background: var(--kaart-maps); }
.verhaal--reviews { background: var(--kaart-reviews); }
.verhaal--ai      { background: var(--kaart-ai); }

.verhaal__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 2.6vw, 38px) clamp(26px, 3.4vw, 50px) clamp(18px, 2vw, 28px) clamp(16px, 2vw, 30px);
}
.verhaal__stap {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--label-size); font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--text-heading);
}
.verhaal__stap span { width: 23px; height: 1px; background: currentColor; }
/* het icoon hoort bij het nummer van de kaart */
.verhaal__icoon { width: 44px; height: 44px; flex: none; margin-right: var(--s4); }
.verhaal h3 {
  margin: clamp(22px, 2.6vw, 38px) 0 var(--s20);
  max-width: 14ch;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  letter-spacing: -0.055em; line-height: 1.06;
}
.verhaal__tekst { max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.25rem); color: var(--text-body); }
/* de knop staat onderaan de kaart, op gelijke hoogte in alle vier */
.verhaal__knop {
  margin-top: auto;
  justify-content: space-between; gap: 28px;
  min-height: 52px; padding: 0 22px;
  font-size: 0.875rem; font-weight: 700;
}
.verhaal__knop svg { width: 15px; height: 15px; }
.verhaal__knop:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .verhaal__knop:hover { transform: none; } }

.verhaal__beeld {
  border-radius: var(--radius-kaart-beeld);
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}
.verhaal__beeld img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* de kaartafbeelding is breder dan vierkant en mag niet bijgesneden worden */
.verhaal--maps .verhaal__beeld img { object-fit: contain; }

@media (max-width: 899px) {
  /* gewoon onder elkaar: stapelen werkt niet op een klein scherm */
  .verhaal {
    position: static; min-height: 0;
    margin-bottom: var(--s20);
    border-radius: 24px;
  }
  .verhaal__beeld { border-radius: 18px; }
  .verhaal__icoon { width: 40px; height: 40px; }
  .verhaal:nth-of-type(4) { margin-bottom: 0; }
  /* het hele beeld in zijn eigen verhouding, niet ingezoomd: contain op de
     crème ondergrond waar de renders zelf ook op staan */
  .verhaal__beeld { order: -1; aspect-ratio: 16 / 11; }
  .verhaal__beeld img { object-fit: contain; }
  .verhaal__ruimte { display: none; }
  /* zonder vaste kaarthoogte is margin-top: auto op de knop nul; de ruimte
     boven de knop komt daarom van de paragraaf */
  .verhaal__tekst { margin-bottom: var(--s32); }

  /* Swipestapel (site.js zet .is-swipe): de kaarten liggen op één plek op
     elkaar, kaart 1 bovenop. Onder het scrollen wordt de bovenste naar
     rechts weggeveegd en zie je de volgende. Zonder JavaScript, bij
     reduced motion of als een kaart niet in het scherm past, blijft het
     een gewone lijst. */
  .verhaal__stapel.is-swipe {
    display: grid; grid-template: 1fr / minmax(0, 1fr);
    overflow-x: clip;               /* clip, geen hidden: sticky blijft werken */
  }
  .is-swipe .verhaal {
    grid-area: 1 / 1; align-self: start;
    position: sticky; top: 84px;    /* zwevende header (72px) plus lucht */
    margin: 0;
    /* site.js maakt alle kaarten even hoog; de extra ruimte gaat naar de
       tekstkolom, zodat de knop in elke kaart onderaan staat */
    grid-template-rows: auto 1fr;
    transform-origin: 50% 0;
    will-change: transform;
  }
  /* compacter, zodat een kaart ook met adresbalk in het scherm past */
  .is-swipe .verhaal { padding: 12px; }
  .is-swipe .verhaal__beeld { aspect-ratio: auto; height: clamp(120px, 100svh - 540px, 240px); }
  .is-swipe .verhaal__copy { padding: 18px 12px 8px; }
  .is-swipe .verhaal__icoon { width: 32px; height: 32px; }
  .is-swipe .verhaal h3 { margin: 14px 0 12px; font-size: 1.75rem; }
  .is-swipe .verhaal__tekst { font-size: 1rem; margin-bottom: var(--s24); }
  .is-swipe .verhaal:nth-of-type(1) { z-index: 4; }
  .is-swipe .verhaal:nth-of-type(2) { z-index: 3; }
  .is-swipe .verhaal:nth-of-type(3) { z-index: 2; }
  .is-swipe .verhaal:nth-of-type(4) { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .verhaal { position: static; margin-bottom: var(--s24); min-height: 0; }
  .verhaal__ruimte { display: none; }
}