/* effecten.css: de pagina Effecten (kop, filterbalk, raster, slot).
   Eigen variabelen staan op de eigen klassen (.e-kop, .e-raster__lijst), niet in tokens.css.
   Eindstaat eerst: alle twaalf kaarten staan zonder JS, bij een fout, bij reduce en bij "Beweging uit" gewoon in beeld.
   De filterbalk is bediening die alleen met JS werkt (data-js-only). Beginstaten staan onder
   .js:not(.motion-failed):not(.motion-off) en binnen prefers-reduced-motion: no-preference. */

/* ---------- Kop ---------- */
.e-kop {
  /* Kopmaat: een kleine rem-component plus vw, zodat hij meegroeit met de tekstgrootte (F94) en nooit boven 12 rem komt. "effecten" is
     3,9 em breed (gemeten, tracking 0): op 320 px is dat 229 px in 273 px ruimte, ook met 15 px scrollbalk. */
  --e-kop-fs: min(calc(0.1rem + 18vw), 12rem);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3.5vw, 3rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.e-kop__titel {
  max-inline-size: 5.4em;                                              /* twee regels: Twaalf / effecten, op elke breedte */
  margin-inline-start: -0.035em;                                       /* optische uitlijning van de T op de zijrand */
  font-size: var(--e-kop-fs);
  letter-spacing: 0;                                                   /* gemeten op 192 px: bij -0,012 em raken l en f elkaar, bij 0 blijft er lucht (de balken van ff raken elkaar in dit lettertype altijd) */
}
.e-kop__intro {
  max-inline-size: 38em;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--fg);
}

/* ---------- Filterbalk ---------- */
.e-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12) var(--s-32);
  padding-block: var(--s-16);
  border-top: 1px solid var(--lijn-fg);
  border-bottom: 1px solid var(--lijn-fg);
}
/* Met JS staat de balk vanaf de eerste paint goed (geen verspringing); core.js haalt hidden weg zodra alles draait, bij een fout blijft hij weg */
.js:not(.motion-failed) .e-filter[data-js-only][hidden] { display: flex !important; }
.e-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}
.e-chip {
  gap: 0.5rem;
  min-height: 44px;                                                    /* tikdoel in px: groeit niet mee met de tekstgrootte */
  min-width: 44px;
  justify-content: center;
}
.e-chip__n {
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.e-chip[aria-pressed="true"] .e-chip__n { color: var(--gedempt-inkt); }
.e-filter__status {
  min-height: 1.4em;
  color: var(--fg-dim);
}

/* ---------- Raster ---------- */
.e-raster { padding-bottom: clamp(4rem, 9vw, 8rem); }
.e-raster__lijst {
  --rij: clamp(2.5rem, 5vw, 4.5rem);
  /* Tegelhoogte per rij: alle tegels in een rij zijn even hoog, ook als hun breedte verschilt. 1,7778 is 16:9 voor de breedste plek. */
  --c: calc((100cqw - 11 * var(--goot)) / 12);                         /* een kolom van het raster van 12 */
  --hoogte-3: calc((5 * var(--c) + 4 * var(--goot)) / 1.7778);         /* rij van drie: 5, 4 en 3 kolommen worden 16:9, circa 4:3 en 1:1 */
  --hoogte-2: calc((7 * var(--c) + 6 * var(--goot)) / 1.7778);         /* rij van twee (of een): 7 en 5 kolommen */
  position: relative;                                                   /* de weggaande kaarten staan tijdens Flip absoluut in dit vlak */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--rij) var(--goot);
  align-items: start;
  align-content: start;
  container-type: inline-size;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Het vak om de lijst: tijdens Flip krijgt het een hoogte die van oud naar nieuw loopt (inhoud eronder springt niet). De lijst zelf houdt zijn
   natuurlijke hoogte, zodat de rijen niet krimpen. Alleen tijdens de overgang knipt het vak; daarna staat alles weer vrij (focusringen). */
.e-raster__vak { margin-top: var(--s-48); }
.kaart {
  grid-column: 1 / -1;
  min-width: 0;
}
.kaart.is-weg { display: none; }
.kaart .tegel {
  width: 100%;                                                         /* zonder breedte rekent de browser die uit hoogte en verhouding: dan is de tegel smaller dan de kaart */
  height: var(--h, auto);                                              /* zonder slotcode (een kolom, of zonder JS onder 1100 px) geldt de eigen verhouding van de tegel */
}
.kaart__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: 6px;
}
.kaart__tekst {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);                               /* een lang woord (Paginaovergang bij 200 procent tekst) breekt in plaats van de kaart te rekken */
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding-top: var(--s-12);
}
.kaart__tekst::before,
.kaart__tekst::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.kaart__tekst::before {                                              /* haarlijn: de vaste rand van het blad */
  height: 1px;
  background: var(--lijn-fg);
}
.kaart__tekst::after {                                               /* inktlijn: trekt bij hover of focus van links naar rechts */
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}
.kaart__meta {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.kaart__nr { transition: color var(--t-snel) ease; }
.kaart__cat { color: var(--fg-dim); }
.kaart__pijl {
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  transition: transform calc(var(--t-snel) * var(--m)) var(--ease-out), color var(--t-snel) ease;
}
.kaart__naam {
  margin-top: var(--s-4);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem);
  text-wrap: balance;
}
.kaart__zin {
  max-inline-size: 38ch;
  color: var(--fg-dim);
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .kaart__link:hover .kaart__tekst::after { transform: scaleX(1); }
  .kaart__link:hover .kaart__pijl { transform: translate(3px, -3px); color: var(--accent-lees); }
  .kaart__link:hover .kaart__nr { color: var(--accent-lees); }
}
.kaart__link:focus-visible .kaart__tekst::after { transform: scaleX(1); }
.kaart__link:focus-visible .kaart__pijl { transform: translate(3px, -3px); color: var(--accent-lees); }
.kaart__link:focus-visible .kaart__nr { color: var(--accent-lees); }

/* Twee kolommen vanaf 640 px, drie vanaf 1100 px: standaard even breed. Met een slotcode krijgt elke rij een ritme en een gelijke tegelhoogte;
   de volgende rij is gespiegeld. data-q hoort bij 2 kolommen (7 en 5), data-p bij 3 kolommen (5, 4 en 3, en een staart van 2 of 1).
   JS zet beide codes bij elke filterwissel; de build zet ze voor de stand met alle effecten. */
@media (min-width: 640px) {
  .kaart { grid-column: span 6; }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
  .kaart[data-q^="2"],
  .kaart[data-q^="1"] { --h: var(--hoogte-2); }
  .kaart[data-q="20"],
  .kaart[data-q="2m1"],
  .kaart[data-q="10"] { grid-column: span 7; }
  .kaart[data-q="21"],
  .kaart[data-q="2m0"] { grid-column: span 5; }
  .kaart[data-q="1m0"] { grid-column: 6 / span 7; }
}
@media (min-width: 1100px) {
  .kaart { grid-column: span 4; }
  .kaart[data-p^="3"] { --h: var(--hoogte-3); }
  .kaart[data-p^="2"],
  .kaart[data-p^="1"] { --h: var(--hoogte-2); }
  .kaart[data-p="30"],
  .kaart[data-p="3m2"] { grid-column: span 5; }
  .kaart[data-p="31"],
  .kaart[data-p="3m1"] { grid-column: span 4; }
  .kaart[data-p="32"],
  .kaart[data-p="3m0"] { grid-column: span 3; }
  .kaart[data-p="20"],
  .kaart[data-p="2m1"],
  .kaart[data-p="10"] { grid-column: span 7; }
  .kaart[data-p="21"],
  .kaart[data-p="2m0"] { grid-column: span 5; }
  .kaart[data-p="1m0"] { grid-column: 6 / span 7; }
}

/* Beginstaat van de reveals op deze pagina (alleen met JS, beweging aan en zonder reduce): de inleiding en de filterbalk komen na de kop,
   de kaarten daarna. De kaartlink zelf verbergt zich met opacity; Flip beweegt de li eromheen, dus beide bewegingen botsen niet.
   js/pages/effecten.js zet de opacity op 1 (en bij een fout ook). */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .e-kop__intro,
  .js:not(.motion-failed):not(.motion-off) .e-filter,
  .js:not(.motion-failed):not(.motion-off) .kaart__link { opacity: 0; }
}

/* ---------- Slot ---------- */
.e-slot {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(5rem, 11vw, 9rem);
}
.e-slot__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-32);
}
.e-slot__kop {
  max-inline-size: 11em;
  font-size: var(--fs-h2);
}
.e-slot__tekst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-32);
  max-inline-size: 34em;
}
.e-slot__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-32);
}
/* Vanaf 900 px staat de tekst een halve breedte verder, onder de kop: een trap in plaats van een stapel */
@media (min-width: 900px) {
  .e-slot__tekst { margin-inline-start: calc(50% - var(--goot) / 2); }
}

/* Windows-hoog-contrast: kleuren van achtergronden verdwijnen daar. De actieve chip en de lijnen van de kaart staan dan in systeemkleuren. */
@media (forced-colors: active) {
  .e-chip[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
  .e-chip[aria-pressed="true"] .e-chip__n { color: HighlightText; }
  .kaart__tekst::before,
  .kaart__tekst::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}