/* lijst.css: Home, sectie "lijst" (effect 11, hover-preview).
   Eindstaat eerst: een gewone lijst van links, elke rij met nummer, naam, categorie, pijl en de korte omschrijving eronder. Zo blijft
   hij zonder JS, bij reduce, bij "Beweging uit", op aanraking en na een fout. Alleen met een fijne aanwijzer en beweging aan zet
   lijst.js de klasse .is-preview: de omschrijvingen verdwijnen, de namen worden gedempt en het voorbeeldkaartje volgt de aanwijzer.
   De duren hieronder (250, 300 en 180 ms) zijn de afgesproken waarden van dit effect; de curves zijn de tokens. */

.lijst {
  --lijst-kleur: 250ms;                        /* naam van gedempt naar inkt, alleen kleur */
  --lijst-kaart: 300ms;                        /* kaartje verschijnt: schaal 0,92 naar 1 */
  --lijst-weg: 180ms;                          /* kaartje verdwijnt: sneller dan het verschijnt */
  --lijst-wissel: 200ms;                       /* crossfade tussen twee tegels */
  --lijst-naam: clamp(2rem, 0.9rem + 4.4vw, 5.25rem);
  --lijst-kaartbreed: clamp(15rem, 20vw, 24rem);
  /* Een eigen papieren eiland: de sectie zet de semantische laag zelf op papier, ook als een sectie erboven de pagina donker liet */
  --bg: var(--papier);
  --bg-2: var(--papier-2);
  --fg: var(--inkt);
  --fg-dim: var(--gedempt);
  --lijn-fg: var(--lijn);
  --accent-lees: var(--accent-tekst);
  position: relative;
  isolation: isolate;
  padding-block: var(--sectie);
  background-color: var(--bg);
  color: var(--fg);
}
.lijst__kop {
  --stack: var(--s-16);
  max-width: 40rem;
  margin-bottom: var(--s-64);
}
.lijst__kop .lead { max-width: 32ch; }

/* ---------- Rijen ---------- */
.lijst__rijen {
  border-bottom: var(--haar) solid var(--lijn-fg);
}
.lijst__item { position: relative; }
.lijst__item::before {                           /* haarlijn boven elke rij: een lijn per rij, geen dubbele */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--haar);
  background: var(--lijn-fg);
  transform-origin: 0 50%;
  pointer-events: none;
}
.lijst__rij {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;     /* mobiel: nummer en categorie boven, naam eronder over de volle breedte */
  grid-template-areas:
    "nr cat pijl"
    "naam naam naam"
    "omschr omschr omschr";
  align-items: baseline;
  column-gap: var(--s-16);
  padding-block: var(--s-16) var(--s-24);
  color: var(--fg);
  text-decoration: none;
  outline-offset: -3px;                          /* de focusring blijft binnen de rij: de rijen sluiten op elkaar aan */
}
.lijst__nr,
.lijst__cat { color: var(--fg-dim); }
.lijst__nr { grid-area: nr; }
.lijst__cat { grid-area: cat; }
.lijst__pijl {
  grid-area: pijl;
  align-self: center;
  justify-self: end;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fg-dim);
}
.lijst__naam {
  grid-area: naam;
  justify-self: start;
  max-width: 100%;
  margin-top: var(--s-4);
  overflow: clip;                                /* masker voor de onthulling; de marge laat uitlopers en accenten staan */
  overflow-clip-margin: var(--masker-marge);
  color: var(--fg);
  font-family: var(--f-display);
  font-size: var(--lijst-naam);
  font-weight: 800;
  letter-spacing: -0.014em;                      /* als h2; het paar lf raakt in dit lettertype altijd (gemeten tot +0,02 em), de tracking lost dat niet op */
  line-height: 1;
  hyphens: manual;
  overflow-wrap: break-word;                     /* "Paginaovergang" op 320 px bij 200 procent tekst: afbreken, nooit afknippen */
}
.lijst__naam-t { display: block; }
.lijst__omschr {
  grid-area: omschr;
  max-width: 46ch;
  margin-top: var(--s-12);
  color: var(--fg-dim);
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .lijst__rij {
    grid-template-columns: 4.5rem minmax(0, 1fr) 9rem 2rem;
    grid-template-areas:
      "nr naam cat pijl"
      ". omschr . .";
    padding-block: clamp(0.75rem, 1.4vw, 1.25rem);
  }
  .lijst__naam { margin-top: 0; }
  .lijst__cat { text-align: right; }
  .lijst__omschr { margin-top: var(--s-4); }
}

/* Gewone lijst met een muis (bij "Beweging uit"): kleur op hover en focus, geen beweging */
@media (hover: hover) and (pointer: fine) {
  .lijst:not(.is-preview) .lijst__rij:hover .lijst__naam { color: var(--accent-lees); }
  .lijst:not(.is-preview) .lijst__rij:hover .lijst__pijl { color: var(--accent-lees); }
}
.lijst:not(.is-preview) .lijst__rij:focus-visible .lijst__naam,
.lijst:not(.is-preview) .lijst__rij:focus-visible .lijst__pijl,
.lijst:not(.is-preview) .lijst__rij:active .lijst__naam,
.lijst:not(.is-preview) .lijst__rij:active .lijst__pijl { color: var(--accent-lees); }       /* ook de aanraking krijgt antwoord: de naam kleurt zolang je drukt */
.lijst__naam { transition: color var(--lijst-kleur) ease, opacity var(--lijst-kleur) ease; }
.lijst__pijl {
  transition:
    color var(--lijst-kleur) ease,
    translate calc(var(--t-middel) * var(--m)) var(--ease-out);
}

/* ---------- Hoverlijst (alleen met .is-preview: fijne aanwijzer en beweging aan) ---------- */
.lijst.is-preview .lijst__omschr { display: none; }      /* de omschrijving blijft de beschrijving van de link (aria-describedby) */
.lijst.is-preview .lijst__naam { color: var(--fg-dim); }
.lijst.is-preview .lijst__rij.is-actief .lijst__naam { color: var(--fg); }     /* gedempt naar inkt: 0,25 s, alleen kleur */
.lijst.is-preview .lijst__rij.is-actief .lijst__pijl {
  color: var(--accent-lees);
  translate: 0.25rem -0.25rem;
}
/* De andere rijen dimmen licht. Alleen de grote naam en de pijl (3:1 volstaat; 0,7 geeft 3,17): de kleine labels blijven op volle sterkte (6,08). */
.lijst.is-preview .has-actief .lijst__rij:not(.is-actief) .lijst__naam { opacity: 0.7; }
.lijst.is-preview .has-actief .lijst__rij:not(.is-actief) .lijst__pijl { color: color-mix(in srgb, var(--fg-dim) 70%, transparent); }   /* kleur, geen dekking: dekking is van de onthulling */

/* Voorbeeldkaartje: vast in het venster, lijst.js verplaatst het met quickTo. Het kader met schaduw is de enige schaduw van de site. */
.lijst__preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--lijst-kaartbreed);
  pointer-events: none;
}
.lijst.is-preview .lijst__preview {
  display: block;
  will-change: transform;                       /* verplaatst en kantelt continu zolang de aanwijzer erover beweegt */
}
.lijst__doos {
  opacity: 0;
  scale: 0.92;
  transition:
    opacity var(--lijst-weg) ease,
    scale calc(var(--lijst-weg) * var(--m)) var(--ease-out);
}
.lijst__preview.is-zichtbaar .lijst__doos {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--lijst-wissel) ease,
    scale calc(var(--lijst-kaart) * var(--m)) var(--ease-out);
}
.lijst__kaarten {
  display: grid;
  padding: 0.375rem;
  border: var(--haar) solid var(--lijn);
  border-radius: var(--r-vlak);
  background: var(--papier);
  box-shadow:
    0 1.75rem 3rem -1.25rem rgb(21 19 15 / 0.45),    /* geen zwarte schaduw: inkt, op het papier afgestemd */
    0 0.25rem 0.75rem rgb(21 19 15 / 0.12);
}
.lijst__kaart {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--lijst-wissel) ease;
}
.lijst__kaart.is-aan { opacity: 1; }
.lijst__kaart .tegel { border-radius: calc(var(--r-vlak) - 0.25rem); }   /* kader en tegel hebben dezelfde ronding rond hetzelfde middelpunt */

/* ---------- Onthulling (alleen met beweging aan): naam in zijn masker omhoog, lijn van links, meta met een fade ----------
   De beginstaat staat hier en vervalt bij "Beweging uit", reduce en een fout. lijst.js zet .is-in per rij (met --d voor de stagger). */
@media (prefers-reduced-motion: no-preference) {
  .lijst__item::before {
    transition: scale calc(var(--t-traag) * var(--m)) var(--ease-reveal) var(--d, 0s);
  }
  .lijst__naam-t {
    transition: translate calc(var(--t-traag) * var(--m)) var(--ease-reveal) var(--d, 0s);
  }
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in)::before { scale: 0 1; }
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in) .lijst__naam-t { translate: 0 calc(var(--split-hide) * 1%); }
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in) .lijst__nr,
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in) .lijst__cat,
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in) .lijst__pijl,
  .js:not(.motion-failed):not(.motion-off) .lijst__item:not(.is-in) .lijst__omschr { opacity: 0; }
  .lijst__nr,
  .lijst__cat,
  .lijst__omschr { transition: opacity var(--t-middel) ease calc(var(--d, 0s) + 0.2s); }
  .lijst__pijl {
    transition:
      color var(--lijst-kleur) ease,
      translate calc(var(--t-middel) * var(--m)) var(--ease-out),
      opacity var(--t-middel) ease calc(var(--d, 0s) + 0.2s);
  }
  /* Rijen die bij een live herbouw al in beeld zijn: meteen goed, zonder te herhalen */
  .lijst__item.is-nu::before,
  .lijst__item.is-nu .lijst__naam-t,
  .lijst__item.is-nu .lijst__nr,
  .lijst__item.is-nu .lijst__cat,
  .lijst__item.is-nu .lijst__pijl,
  .lijst__item.is-nu .lijst__omschr { transition: none; }
}