/* galerij.css: Home, sectie "galerij" (effect 05, horizontaal pannen), hoofdmoment.
   Basis = eindstaat: een gewone horizontale scrollrij met scroll-snap (zonder JS, onder 900 px, bij reduce, bij "Beweging uit",
   na een fout, en als de stage niet in het scherm past). Alleen als js/sections/galerij.js [data-modus="pan"] zet (beweging aan,
   vanaf 900 px) wordt de wrapper hoog, de stage sticky (GEEN ScrollTrigger-pin) en schuift de track mee met de scroll.
   Nooit overflow hidden op een voorouder van de sticky stage: de stage zelf knipt met overflow: clip.
   Nieuwe variabelen staan hier, onder de eigen klasse. */

.galerij {
  --g-gap: var(--goot);
  --g-w: min(78vw, 22rem);                                              /* kaartbreedte op een smal scherm */
  --g-inset: max(var(--rand), calc((100cqw - var(--max)) / 2 + var(--rand)));  /* links en rechts gelijk aan de container (cqw: breedte van de sectie; procenten in padding geven hier een kringverwijzing) */
  container-type: inline-size;
  --g-versprong: clamp(1.25rem, 5svh, 3rem);                            /* om en om een kaart lager, alleen in de gepinde stand */
}
@media (min-width: 900px) {
  .galerij {
    /* de kaart schaalt mee met de breedte en met de hoogte, zodat kop, kaart en versprong altijd in de stage van 100svh passen */
    --g-w: clamp(15rem, min(34vw, calc((100svh - 31rem) * 1.3333)), 34rem);
  }
}

/* ---------- stage, kop en voortgang ---------- */
.galerij__stage { padding-block: var(--sectie); }
.galerij__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
  padding-inline: var(--g-inset);
}
.galerij__titel { min-width: 0; }
.galerij__voortgang {
  margin: 0;
  padding-bottom: 0.35em;
  color: var(--fg-dim);
  white-space: nowrap;
}
.galerij__lijn {
  position: relative;
  display: block;
  height: 2px;
  margin: var(--s-16) var(--g-inset) var(--s-24);
  background: var(--lijn-fg);
  overflow: clip;
}
.galerij__vul {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}

/* ---------- de rij: native scrollrij met scroll-snap ---------- */
.galerij__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--g-inset);
  padding-block: var(--s-24);                                           /* ruimte voor de focusring en de kanteling */
  scrollbar-width: thin;
  scrollbar-color: var(--fg) transparent;
}
.galerij__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--g-gap);
  width: max-content;
  margin: 0;
  padding-inline: var(--g-inset);
}
.galerij__item {
  display: flex;
  flex: none;
  width: var(--g-w);                                                    /* een vaste breedte telt ook voor de max-content-breedte van de track */
  min-width: 0;
  scroll-snap-align: start;
}
.galerij__item:last-child { scroll-snap-align: end; }                   /* de laatste kaart krijgt een snappunt aan het einde: hij blijft helemaal bereikbaar */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .galerij__item { perspective: 900px; }                                /* de kanteling bij hover (js, hooguit 5 graden) heeft diepte nodig */
}
@media (hover: hover) and (pointer: fine) {
  html.is-snel-scrollen .galerij__track { pointer-events: none; }       /* geen hover en kanteling terwijl de kaarten voorbij vliegen (D07, zie tegels.css) */
}

/* ---------- kaart: de hele kaart is een link ---------- */
.galerij__kaart {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-16);
  min-width: 0;
  padding-top: var(--s-12);
  border-top: 1px solid var(--fg);
  color: inherit;
  text-decoration: none;
  container-type: inline-size;                                          /* de lettergroottes in de kaart (cqw) volgen de breedte van de kaart */
  -webkit-tap-highlight-color: transparent;
}
.galerij__kaart:focus-visible { outline-offset: 6px; }
.galerij__beeld { display: block; }
.galerij__rest {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: first baseline;                                          /* het grote nummer staat op dezelfde basislijn als de naam */
  column-gap: var(--s-16);
}
.galerij__nr {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 13cqw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: var(--fg);
  transition: color var(--t-snel) ease;
}
.galerij__info { min-width: 0; }
.galerij__naam {
  font-size: clamp(1.375rem, 7.2cqw, 2.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.galerij__zin {
  margin-top: var(--s-8);
  max-width: 38ch;
  color: var(--fg-dim);
  font-size: var(--fs-klein);
  line-height: 1.5;
}
.galerij__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-12);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration-line: none;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.25em;
}
.galerij__cta .pijl { transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .galerij__kaart:hover .galerij__nr { color: var(--accent-lees); }
  .galerij__kaart:hover .galerij__cta { text-decoration-line: underline; }
  .galerij__kaart:hover .galerij__cta .pijl { transform: translateX(4px); }
}
.galerij__kaart:focus-visible .galerij__nr { color: var(--accent-lees); }
.galerij__kaart:focus-visible .galerij__cta { text-decoration-line: underline; }
.galerij__kaart:focus-visible .galerij__cta .pijl { transform: translateX(4px); }

/* de laatste kaart: een vlak in het accent met een groot getal; hover en focus keren hem om */
.galerij__kaart--alle {
  justify-content: space-between;
  padding: var(--s-24);
  border-top: 0;
  border-radius: var(--r-vlak);
  background: var(--accent);
  color: var(--inkt);
  transition: background-color var(--t-snel) ease, color var(--t-snel) ease;
}
.galerij__kaart--alle .galerij__nr--groot {
  font-size: clamp(5rem, 40cqw, 13rem);
  letter-spacing: -0.045em;
  line-height: 0.8;
  color: inherit;
}
.galerij__kaart--alle .galerij__zin { color: inherit; }
.galerij__kaart--alle:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .galerij__kaart--alle:hover { background: var(--inkt); color: var(--papier); }
  .galerij__kaart--alle:hover .galerij__nr { color: var(--accent); }
}
.galerij__kaart--alle:focus-visible { background: var(--inkt); color: var(--papier); }
.galerij__kaart--alle:focus-visible .galerij__nr { color: var(--accent); }

/* ---------- gepinde stand: sticky stage in een hoge wrapper, de track schuift met de scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .galerij[data-modus="pan"] .galerij__wrap { height: calc(100svh + var(--g-len, 0px)); }   /* scrolllengte = afstand, door JS gemeten */
  .galerij[data-modus="pan"] .galerij__stage {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);                               /* anders rekt de kolom mee met de breedte van de track */
    grid-template-rows: auto auto minmax(0, 1fr);
    height: 100svh;
    padding-block: calc(var(--header-h) + var(--s-16)) var(--s-24);
    overflow: clip;                                                      /* clip, niet hidden: de stage zelf is sticky, geen voorouder knipt */
  }
  .galerij[data-modus="pan"] .galerij__lijn { margin-block: var(--s-12) 0; }
  .galerij[data-modus="pan"] .galerij__vul { transition: none; }          /* de lijn volgt de scroll exact */
  .galerij[data-modus="pan"] .galerij__scroller {
    align-self: center;
    min-height: 0;
    padding-block: 0;
    overflow: visible;                                                   /* geen scrollcontainer: de stage knipt */
    scroll-snap-type: none;
  }
  .galerij[data-modus="pan"] .galerij__track {
    padding-bottom: var(--g-versprong);
    will-change: transform;
  }
  .galerij[data-modus="pan"] .galerij__item { scroll-snap-align: none; }
  .galerij[data-modus="pan"] .galerij__item:nth-child(even) { translate: 0 var(--g-versprong); }
}