/* ============================================================
   JR TECHNIEK — 2. BASIS
   Reset, typografie en layout-primitieven.
   De primitieven passen zich aan zonder breekpunten: ze
   gebruiken auto-fit, zodat een blok op elk scherm klopt.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--ruimte-small); }
body { margin: 0; background: var(--neutraal-100); color: var(--tekst-primair);
       font: var(--gewicht-normaal) var(--tekst-regular)/1.6 var(--familie-body);
       -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-vlak); outline-offset: 3px; border-radius: 2px; }

/* ---------- Typografie: tag zet semantiek, klasse zet vorm ---------- */
h1, h2, h3, h4, h5, h6,
.kop-h1, .kop-h2, .kop-h3, .kop-h4, .kop-h5, .kop-h6 {
  margin: 0; font-family: var(--familie-kop); font-weight: var(--gewicht-bold);
  letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.kop-h1, .kop-h2, .kop-h3, .kop-h4, .kop-h5, .kop-h6 { display: block; }
h1, .kop-h1 { font-size: var(--kop-h1); }
h2, .kop-h2 { font-size: var(--kop-h2); }
h3, .kop-h3 { font-size: var(--kop-h3); }
h4, .kop-h4 { font-size: var(--kop-h4); }
h5, .kop-h5 { font-size: var(--kop-h5); line-height: 1.2; }
h6, .kop-h6 { font-size: var(--kop-h6); line-height: 1.3; }

.tekst-tiny { font-size: var(--tekst-tiny); }
.tekst-small { font-size: var(--tekst-small); }
.tekst-regular { font-size: var(--tekst-regular); }
.tekst-medium { font-size: var(--tekst-medium); }
.tekst-large { font-size: var(--tekst-large); }

.gewicht-light { font-weight: var(--gewicht-light); }
.gewicht-normaal { font-weight: var(--gewicht-normaal); }
.gewicht-medium { font-weight: var(--gewicht-medium); }
.gewicht-semibold { font-weight: var(--gewicht-semibold); }
.gewicht-bold { font-weight: var(--gewicht-bold); }
.gewicht-xbold { font-weight: var(--gewicht-xbold); }

.kleur-primair { color: var(--tekst-primair); }
.kleur-secundair { color: var(--tekst-secundair); }
.kleur-tertiair { color: var(--tekst-tertiair); }
.kleur-accent { color: var(--accent-tekst); }
.tekst-links { text-align: left; } .tekst-midden { text-align: center; } .tekst-rechts { text-align: right; }

/* Kortere formulering op een telefoon. Gebruik ze als paar: de lange
   variant krijgt op-breed, de korte op-smal. */
.op-smal { display: none; }
@media (max-width: 900px) {
  .op-breed { display: none; }
  .op-smal { display: inline; }
}

/* Label: het kapitaalstijltje voor kickers, kolomkoppen en knoptekst */
.label { font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-tiny);
         letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.label.is-groot { font-size: var(--tekst-small); letter-spacing: 0.08em; }

.kicker { display: inline-block; position: relative; padding-left: 26px; color: var(--accent-tekst);
          font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-tiny);
          letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--ruimte-small); }
.kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; background: var(--accent-vlak); }
.kicker.is-kaal { padding-left: 0; }
.kicker.is-kaal::before { display: none; }

/* ============================================================
   LAYOUT-PRIMITIEVEN
   Vijf patronen waarmee elk blok gebouwd wordt. Ze regelen
   alleen plaatsing, nooit kleur of typografie.
   ============================================================ */

/* Paneel: de afgeronde plaat waar een blok in zit */
.paneel { position: relative; margin: var(--paneel-marge); border-radius: var(--radius-xl);
          background: var(--vlak); overflow: hidden; }
.paneel.is-vol { margin: 0; border-radius: 0; }
  /* Vaste stapelvolgorde binnen een paneel:
     0 achtergrondbeeld · 1 arcering · 2 donkere waas · 3 inhoud */
.paneel.op-donker::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px); }
.paneel.op-donker > *:not(.beeld):not(.sluier) { position: relative; z-index: 3; }

/* Omhulsel: centreert de inhoud en zet de sectiehoogte */
.omhulsel { width: 100%; max-width: var(--breed-xxlarge); margin-inline: auto;
            padding: var(--sectie-large) var(--rand-globaal); }
.omhulsel.is-small { max-width: var(--breed-large); }
.omhulsel.is-medium { max-width: var(--breed-xlarge); }
.omhulsel.is-krap { padding-block: var(--sectie-small); }
.omhulsel.is-ruim { padding-block: var(--sectie-large); }

/* Stapel: verticaal, met één gat */
.stapel { display: flex; flex-direction: column; gap: var(--gat, var(--ruimte-small)); }
.stapel.is-krap { --gat: var(--ruimte-xsmall); }
.stapel.is-ruim { --gat: var(--ruimte-medium); }

/* Cluster: horizontaal, breekt vanzelf af */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gat, var(--ruimte-xsmall)); }
.cluster.is-ruim { --gat: var(--ruimte-medium); }
.cluster.is-midden { justify-content: center; }
.cluster.is-uiteen { justify-content: space-between; }

/* Raster: vult zichzelf, geen breekpunten nodig */
.raster { display: grid; gap: var(--gat, var(--ruimte-medium));
          grid-template-columns: repeat(auto-fit, minmax(min(var(--kolom-min, 16rem), 100%), 1fr)); }
.raster.is-2 { --kolom-min: 22rem; }
.raster.is-3 { --kolom-min: 17rem; }
.raster.is-4 { --kolom-min: 13rem; }
.raster.is-vast-2 { grid-template-columns: 1fr 1fr; }

/* Duo: media naast tekst, omkeerbaar */
.duo { display: grid; gap: var(--gat, var(--ruimte-xlarge)); align-items: center;
       grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.duo.is-smal-links { grid-template-columns: minmax(min(20rem, 100%), 21rem) 1fr; }
@media (max-width: 900px) { .duo.is-smal-links { grid-template-columns: 1fr; } }
.duo.is-omgekeerd > :first-child { order: 2; }
@media (max-width: 900px) { .duo.is-omgekeerd > :first-child { order: 0; } }

/* Media: beeldkader met verhouding en een laag voor parallax */
.media { position: relative; overflow: hidden; border-radius: var(--radius-l);
         aspect-ratio: var(--verhouding, 5 / 4); background: var(--neutraal-200); }
.media.is-staand { --verhouding: 4 / 5; }
.media.is-breed { --verhouding: 16 / 9; }
.media.is-vierkant { --verhouding: 1 / 1; }
.media > .laag { position: absolute; inset: -10% 0; background-size: cover; background-position: center;
                 will-change: transform; }
.media > .laag img, .media > .laag video { position: absolute; inset: 0; width: 100%; height: 100%;
                                            object-fit: cover; display: block; }

/* Sectiekop: kicker, titel en eventueel een knop ernaast */
.sectiekop { display: flex; justify-content: space-between; align-items: flex-end;
             gap: var(--ruimte-medium); margin-bottom: var(--ruimte-custom3); flex-wrap: wrap; }
.sectiekop.is-midden { flex-direction: column; align-items: center; text-align: center; }
.sectiekop.is-midden .kicker { padding-left: 0; }
.sectiekop.is-midden .kicker::before { display: none; }

/* Onthullen bij scrollen */
.reveal { opacity: 0; transform: translateY(38px);
          transition: opacity var(--duur-onthul) var(--soepel-uit), transform var(--duur-onthul) var(--soepel-uit); }
.reveal.zichtbaar { opacity: 1; transform: none; }

/* Getrapt onthullen: de kinderen komen één voor één, in leesvolgorde.
   Zet deze klasse op een rij kaarten of op een sectiekop. */
.getrapt > * { opacity: 0; transform: translateY(30px);
               transition: opacity var(--duur-onthul) var(--soepel-uit), transform var(--duur-onthul) var(--soepel-uit); }
.getrapt.zichtbaar > * { opacity: 1; transform: none; }
.getrapt.zichtbaar > *:nth-child(1) { transition-delay: calc(var(--trap) * 0); }
.getrapt.zichtbaar > *:nth-child(2) { transition-delay: calc(var(--trap) * 1); }
.getrapt.zichtbaar > *:nth-child(3) { transition-delay: calc(var(--trap) * 2); }
.getrapt.zichtbaar > *:nth-child(4) { transition-delay: calc(var(--trap) * 3); }
.getrapt.zichtbaar > *:nth-child(5) { transition-delay: calc(var(--trap) * 4); }
.getrapt.zichtbaar > *:nth-child(6) { transition-delay: calc(var(--trap) * 5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal, .getrapt > * { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  [data-diepte] { transform: none !important; }
}