/* ── ervaringen: de reviewstrook ───────────────────────────────────────────
   Eén brede redactionele strook op papier, geen losse kaarten: foto en tekst
   naast elkaar, gescheiden door een haarlijn, zoals kolommen in een tijdschrift.
   Geen schaduw, geen kader, geen gradiënt. Scrollt native met scroll-snap;
   de pijlen schuiven één review op. Inhoud en poort: assets/ervaringen.js. */

.ervaringen{background:var(--papier);border-block:1px solid var(--lijn);
  padding:clamp(64px,8vw,112px) 0 clamp(56px,6.5vw,92px)}
.ervaringen-inner{max-width:1600px;margin:0 auto;padding-inline:22px;text-align:center}

/* kop en voet: de bladspiegel van de kaft — een dunne gouden lijn met het
   ⌖-anker in het midden, boven en onder, zoals op het gebonden boek zelf. */
.ervaringen-sier{display:flex;align-items:center;justify-content:center;gap:16px;
  color:var(--goud);margin:0 auto 20px;max-width:340px;line-height:1}
.ervaringen-sier::before,.ervaringen-sier::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--goud) 60%);opacity:.75}
.ervaringen-sier::after{background:linear-gradient(270deg,transparent,var(--goud) 60%)}
.ervaringen-sier span{font-size:15px}
.ervaringen-sier.onder{margin:clamp(40px,4.4vw,60px) auto 16px}
.ervaringen-eyebrow{color:var(--goud-d);margin-bottom:12px}
.ervaringen-verder{margin:0}
.ervaringen-verder a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--rood);text-decoration:none;border-bottom:1px solid rgba(158,59,49,.35);padding-bottom:2px}
.ervaringen-verder a:hover{border-bottom-color:var(--rood)}
.ervaringen h2{font-family:var(--display);font-weight:440;
  font-size:clamp(34px,3.9vw,54px);line-height:1.06;letter-spacing:-.025em;
  color:var(--nacht);text-wrap:balance}
.ervaringen-inleiding{max-width:650px;margin:18px auto 0;font-size:18px;line-height:1.5;
  color:var(--inkt-zacht);text-wrap:pretty}
/* Eén waardering voor de hele strook, geteld uit de getoonde reviews. */
.ervaringen-waardering{display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--inkt-licht)}
.ervaringen-sterren{color:var(--goud);font-size:14px;letter-spacing:.16em;font-family:var(--serif)}

/* strook met pijlen */
.ervaringen-rij{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:clamp(10px,1vw,24px);
  align-items:center;margin-top:clamp(40px,4.4vw,60px);text-align:left}
.ervaringen-pijl{width:46px;height:46px;border-radius:50%;border:1px solid var(--nacht);
  background:transparent;color:var(--nacht);cursor:pointer;display:grid;place-items:center;
  font-family:var(--serif);font-size:26px;line-height:1;padding:0 0 3px;
  transition:background .15s,color .15s,opacity .15s}
.ervaringen-pijl:hover:not(:disabled){background:var(--nacht);color:var(--papier)}
.ervaringen-pijl:disabled{opacity:.28;cursor:default}

.ervaringen-strook{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ervaringen-strook::-webkit-scrollbar{display:none}
.ervaringen-strook:focus-visible{outline-offset:6px}
.ervaringen-lijst{list-style:none;display:flex}

/* één review: foto links, tekst rechts. Vier naast elkaar op een breed scherm.

   DRIE LIJNEN DIE DOOR DE HELE STROOK LOPEN (19 sep 2026, Toms leesronde).
   Eerst stonden de citaten in twee letterstijlen, vielen de namen op vier
   verschillende hoogtes en stonden de labels nu eens onder de foto, dan weer
   onder de naam. Dat las onrustig. Nu:
     1  de sterren en de eerste regel van elk citaat staan bovenaan gelijk;
     2  alle citaten hebben één letter, één grootte en één regelafstand;
     3  labels en naam vormen een voet onderaan, met de naam als laatste regel:
        alle namen vallen op één lijn (`margin-top:auto` in een kolom die de
        volle hoogte van de rij krijgt).
   En één tekstbreedte voor iedereen. Met een vaste kolom per review had een
   citaat naast een foto de halve breedte van een citaat zonder, en werd dus
   twee keer zo lang. Nu is een review met foto precies de foto plus de
   tussenruimte breder (--foto-extra); de tekstmaat is overal gelijk. De
   rekensom gaat uit van de volgorde tekst–foto–tekst–foto in de lijst. */
.ervaringen-lijst{--foto:124px;--foto-extra:140px}
.ervaring{flex:0 0 calc((100% - 2 * var(--foto-extra)) / 4);min-width:0;
  scroll-snap-align:start;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:stretch;padding-inline:clamp(18px,1.5vw,28px)}
.ervaring:has(.ervaring-beeld){flex-basis:calc((100% - 2 * var(--foto-extra)) / 4 + var(--foto-extra));
  grid-template-columns:var(--foto) minmax(0,1fr);column-gap:calc(var(--foto-extra) - var(--foto))}
.ervaring + .ervaring::before{content:"";position:absolute;left:0;top:4px;bottom:4px;
  width:1px;background:var(--lijn)}

.ervaring-beeld{min-width:0;align-self:start}
.ervaring-beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;
  background:var(--perkament)}

.ervaring-tekst{min-width:0;display:flex;flex-direction:column}
.ervaring-tekst blockquote p{font-family:var(--serif);font-size:clamp(15.5px,1.1vw,16.5px);
  line-height:1.6;color:var(--nacht);text-wrap:pretty}

.ervaring-voet{margin-top:auto;padding-top:18px}
.ervaring-tekst figcaption{font-size:14.5px;line-height:1.3;color:var(--inkt-zacht)}
.ervaring-tekst figcaption b{font-weight:600;color:var(--nacht)}
.ervaring-tekst figcaption span{white-space:nowrap}
/* De kenmerken: de kopregel van de review, in de mono van de bijschriften.
   Geen pillen (te veel knop) en geen cursieve regel onderaan (te veel
   onderkant): bovenaan zeggen ze in één blik waar de review over gaat. */
.ervaring-kenmerken{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;color:var(--potlood);margin-bottom:13px;
  text-wrap:pretty;min-height:3em}
/* min-height van twee regels: een kopregel die op één regel past zou anders
   zijn citaat hoger laten beginnen dan de buren. */

/* smaller bureauscherm: drie (tekst–foto–tekst) */
@media(max-width:1359px){
  .ervaring{flex-basis:calc((100% - var(--foto-extra)) / 3)}
  .ervaring:has(.ervaring-beeld){flex-basis:calc((100% - var(--foto-extra)) / 3 + var(--foto-extra))}
}
/* tablet: twee (tekst–foto) */
@media(max-width:1100px){
  .ervaring{flex-basis:calc((100% - var(--foto-extra)) / 2)}
  .ervaring:has(.ervaring-beeld){flex-basis:calc((100% - var(--foto-extra)) / 2 + var(--foto-extra))}
}
/* telefoon: één review en een stukje van de volgende, vegen in plaats van pijlen */
@media(max-width:700px){
  .ervaringen-rij{grid-template-columns:minmax(0,1fr);margin-inline:-22px}
  .ervaringen-pijl{display:none}
  .ervaringen-strook{scroll-padding-inline:22px;padding-inline:22px}
  /* telefoon: elke review even breed, de foto neemt hier wél tekstbreedte */
  .ervaringen-lijst{--foto:112px;--foto-extra:126px}
  .ervaring,.ervaring:has(.ervaring-beeld){flex-basis:88%;padding-inline:16px}
  .ervaring:first-child{padding-left:0}
  .ervaring:last-child{flex-basis:calc(88% + 22px);padding-right:22px}
  /* Eén review tegelijk in beeld: niets om mee uit te lijnen, dus de voet
     volgt direct op het citaat in plaats van onderaan een gat te laten. */
  .ervaring-voet{margin-top:0}
  .ervaringen-inleiding{font-size:17px}
}