/* =========================================================
   Reviews

   Deze sectie staat direct onder het proces-blok. Dat is vlak en
   lijnvormig; dit blok is het tegenovergestelde:

   - kaarten met een rand, waar proces alleen een lijn heeft
   - een verspringend ritme in plaats van een strakke rij
   - een aanhalingsteken als grafisch anker
   - tekst op leesformaat in plaats van klein en compact

   KLEUR — belangrijk voor het ritme van de pagina:
   de sectie staat op het lichtere vlak (--color-surface) en de
   kaarten op het donkere canvas. Dat is omgekeerd ten opzichte
   van de rest van de site, en het is de reden dat deze sectie
   zich losmaakt van het proces-blok erboven. Stond alles op
   hetzelfde zwart, dan liepen de twee secties in elkaar over tot
   één lang donker vlak.

   Blijf bij aanpassingen weg van "vier gelijke kolommen met een
   streep op hetzelfde zwart" — dan verdwijnt het verschil weer.
========================================================= */

/* =========================================================
   Kop
========================================================= */

.ls-reviews__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.ls-reviews__head .kicker {
  margin-bottom: var(--space-lg);
}

.ls-reviews__title {
  font-size: var(--fs-h2);
  max-width: 14ch;
  margin: 0;
}

.ls-reviews__title em {
  font-style: normal;
  color: var(--color-accent);
}


/* =========================================================
   Score naast de titel
========================================================= */

.ls-reviews__score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  white-space: nowrap;
}

.ls-reviews__score-tekst {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

a.ls-reviews__score:hover .ls-reviews__score-tekst,
a.ls-reviews__score:focus-visible .ls-reviews__score-tekst {
  color: var(--color-text);
}

.ls-reviews__sterren {
  color: var(--color-accent);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  line-height: 1;
}


/* =========================================================
   Grid — verspringend

   De tweede kolom zakt een stukje. Dat haalt de strakke rij
   eruit zonder dat het rommelig wordt.
========================================================= */

.ls-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
  align-items: start;

  list-style: none;
  margin: 0;
  padding: 0;
}

.ls-reviews__grid > .ls-reviews__item:nth-child(3n + 2) {
  margin-top: var(--space-3xl);
}

@media (max-width: 900px) {
  .ls-reviews__grid {
    grid-template-columns: 1fr;
  }

  /* Onder elkaar heeft verspringen geen betekenis meer. */
  .ls-reviews__grid > .ls-reviews__item:nth-child(3n + 2) {
    margin-top: 0;
  }
}

.ls-reviews__item {
  margin: 0;
}


/* =========================================================
   De kaart
========================================================= */

.ls-reviews__card {
  position: relative;
  height: 100%;

  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border: 1px solid rgba(243, 239, 232, .16);
  border-radius: var(--radius-card);

  /* Dieper dan de sectie: omgekeerd contrast ten opzichte van de
     rest van de site. Het verschil in vlakken is klein (1.11:1) —
     de rand doet het meeste werk. Ga niet lichter dan dit, dan
     verdwijnt de kaartvorm helemaal. */
  background: var(--color-surface-darker);

  transition: border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .ls-reviews__card:hover {
    border-color: rgba(207, 181, 59, .35);
  }
}

/* Aanhalingsteken als watermerk rechtsboven */
.ls-reviews__mark {
  position: absolute;
  top: 10px;
  right: var(--space-lg);

  font-family: var(--font-heading);
  font-size: 88px;
  line-height: 1;
  color: var(--color-accent);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}


/* =========================================================
   Citaat

   Op leesformaat, niet op het kleine formaat van de proces-
   kolommen: dit is de tekst waar de sectie om draait.
========================================================= */

.ls-reviews__quote {
  margin: 0;
  flex: 1;
}

.ls-reviews__quote p {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  color: var(--color-text);
}


/* =========================================================
   Wie het zei
========================================================= */

.ls-reviews__wie {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.ls-reviews__initiaal {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;

  background: rgba(207, 181, 59, .16);
  color: var(--color-accent);

  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: 1;
}

.ls-reviews__wie-tekst {
  min-width: 0;
}

.ls-reviews__wie-tekst b {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.ls-reviews__wie-tekst span {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--color-muted);
}


/* =========================================================
   Alleen voor schermlezers
========================================================= */

.ls-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   Plakvariant — het blok erna schuift eroverheen

   Met top: 0, niet bottom: 0. Een bottom-sticky houdt een
   element vast terwijl je omhoog scrollt; voor "blijf staan
   terwijl het volgende eroverheen komt" moet het top zijn.

   Voorwaarde is dan wel dat de hele sectie in het scherm past
   op het moment dat ze vastzet — anders schuift het volgende
   blok over kaarten heen die je nog niet gezien hebt. Met de
   gewone sectie-padding is ze 785px bij een scherm van 768px
   en past dat net niet. In plakstand krijgt ze daarom een
   kleinere, hoogte-gebaseerde padding: de inhoud is 581px, en
   met deze padding blijft het geheel onder de schermhoogte.

   --kijktijd houdt haar daarna nog even vast voordat het
   volgende blok binnenkomt.
========================================================= */

.ls-reviews--sticky {
  position: sticky;
  top: 0;
  z-index: 0;

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Past zich aan de schermhoogte aan in plaats van aan de
     breedte, zodat de sectie op een laag scherm niet uitloopt. */
  padding-block: clamp(40px, 7vh, 96px);
}

/* Het blok erna schuift over de plakkende sectie heen. De marge
   is de kijktijd: zolang blijft alleen deze sectie in beeld. */
.ls-reviews--sticky + .ls-section {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--kijktijd, 70vh);
}

/* Te laag scherm: de sectie past er niet meer in, dus dan geen
   plakgedrag — anders verdwijnt de onderste rij kaarten onder
   het volgende blok. */
/* Geen plakgedrag als het niet kán of niet hoort:

   - smal scherm: de kaarten staan dan onder elkaar en de sectie is
     ruim hoger dan het scherm, dus de onderste zou wegvallen onder
     het volgende blok. Daar komt bij dat 100svh op een telefoon
     meebeweegt met de adresbalk die in- en uitschuift, wat het
     plakken onrustig maakt.
   - laag scherm: zelfde reden, de sectie past er niet in.
   - beperkte beweging: gewoon onder elkaar.
*/
@media (max-width: 900px), (max-height: 700px), (prefers-reduced-motion: reduce) {
  .ls-reviews--sticky {
    position: relative;
    min-height: 0;
    display: block;
    padding-block: var(--ls-section-md);
  }

  .ls-reviews--sticky + .ls-section {
    margin-top: calc(var(--space-4xl) * -1);
  }
}


/* =========================================================
   Mobiel
========================================================= */

@media (max-width: 600px) {
  .ls-reviews__card {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
  }

  .ls-reviews__mark {
    font-size: 64px;
  }
}