@charset "UTF-8";
/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/*
 * layer_text — geometrie van de tekstkolom.
 *
 * Consumeert wat {@see Framework\Layer\Renderer\LayerText} per laag emit:
 *   --text-col-w  breedte van de tekstkolom (CMS-veld `column_text_width`)
 *
 * De renderer haalt dit bestand zelf binnen via de StyleRegistry, precies zoals
 * `layer-columns.css`. Dat is bewust géén regel in `assets/css/base.css`: lang niet elke
 * site laadt die stylesheet, en dan zou het CMS-veld op precies die sites weer stil
 * wegvallen — dezelfde klasse fout als de melding die dit oploste (framework#262).
 *
 * De wrapper verschijnt alléén als er een breedte is ingesteld; zonder instelling is er
 * geen element en doet dit bestand niets.
 */

/* Mobiel is een tekstkolom altijd vol: een "50%" uit het CMS is een desktop-verhouding.
   Zonder deze grens werd de tekst op een telefoon een halve-schermbreedte kolom. Het
   breekpunt is hetzelfde als in layer-columns.css, zodat kolommen en tekstkolommen op
   dezelfde breedte omklappen. */
.layer__text-col {
  max-width: 100%;
}

@media (min-width: 761px) {
  .layer__text-col {
    max-width: var(--text-col-w, 100%);
  }
}

/* Gecentreerde tekstlaag → de beperkte kolom staat ook gecentreerd. */
.layer--text--centered .layer__text-col {
  margin-inline: auto;
}

/* Tekstvarianten met media delen een tweekolomsraster. De CMS-breedte reist mee als
   --ti-cols; zonder waarde blijven de tekst- en mediakolom gelijk. */
.text-image__grid {
  display: grid;
  grid-template-columns: var(--ti-cols, minmax(0, 1fr) minmax(0, 1fr));
  gap: var(--design-gap, clamp(2rem, 5vw, 4.5rem));
  align-items: start;
}

.text-images__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--design-gap, var(--ti-gap, 1rem));
}

/* Eén foto vult z'n mediakolom. Het tweekolomsraster hierboven gold ongeacht het aantal
   foto's, dus een laag met precies één beeld zette dat op halve kolombreedte met dode ruimte
   ernaast — precies het formaat dat een redacteur niet kan bijstellen, want er is geen
   CMS-veld voor. De renderer gaf het aantal al mee als `data-count`; alleen las niemand het
   uit. Vanaf twee foto's blijft het raster ongewijzigd. (SVS 466, laag 119.) */
.text-images__photos[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.text-images__photo {
  margin: 0;
}

.text-images__photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .text-image__grid {
    grid-template-columns: 1fr;
  }

  .text-images__photos {
    grid-template-columns: 1fr;
  }

  /* CMS-veld `btt` ("Mobiel"): de tweede kolom boven de eerste zodra ze gestapeld staan.

     Over de KOLOMVOLGORDE, niet over media. Het heette `data-mobile-media-first` en gold
     alleen voor `text_image`, terwijl `text_text`, `text_form` en `text_images` net zo goed
     twee kolommen bouwen -- bij een formulier-laag is die tweede kolom een formulier
     (punt 633). Vandaar `> :nth-child(2)`: wát er in die kolom staat doet niet ter zake.

     `order` en niet `flex-direction`: dit is een grid-container, en `flex-direction` heeft
     daar geen enkel effect. Dat is precies de vorm waarin de fout op een site opdook
     (punt 625) -- ze compileert, ze staat er geldig bij, en ze doet niets.

     Alleen hier, binnen de gestapelde breakpoint: op de tweekoloms-weergave gaat de
     links/rechts-volgorde over `reverse_columns`, en die twee horen elkaar niet te
     overschrijven. */
  [data-stack-order="reverse"] .text-image__grid > :nth-child(2) {
    order: -1;
  }
}

/* CMS-veld `reverse_columns` (oude naam `rtl`, "Tekst rechts, media links"): op de
   tweekoloms-weergave staat de mediakolom links en de tekst rechts.

   Dit ontbrak, terwijl de rest van de keten er al was en er zelfs op rekende. De renderer zet
   `is-reversed` op de sectie ({@see LayerText}, `LayerTextTest` bewaakt het) én draait de
   kolombreedtes om in `--ti-cols`. Alleen de regel die de kolommen daadwerkelijk verwisselt
   bestond niet -- nul treffers op `is-reversed` in de CSS. De redacteur koos dus iets, zag
   niets gebeuren, en had geen enkele weg om het alsnog voor elkaar te krijgen.

   Erger dan "het draait niet om": de breedtes draaiden wél mee. Op SVS (466, laag 242,
   /over-ons) stond de tekst met `column_text_width: 80%` gemeten op 212px in de smalle kolom
   terwijl het beeld er 848px naast kreeg. Met deze regel: beeld 212px links, tekst 848px
   rechts. Gemeten op 1440px breed, 03-09-2026.

   `order` en niet `direction` of een omgekeerde DOM: de leesvolgorde in de HTML blijft
   tekst-dan-beeld, wat voor een schermlezer en voor de zoekmachine de goede volgorde is.

   Alleen boven de stapelgrens. Daaronder is er maar één kolom en gaat de volgorde over het
   veld `btt` (zie `data-stack-order` hierboven); die twee horen elkaar niet te overschrijven.
   Vandaar dezelfde 761px die dit bestand ook voor `right_vertical_alignment` gebruikt.

   Op `.layer-text__grid` en niet op de drie varianten apart. `text_image`, `text_text` en
   `text_form` dragen die klasse allemaal, dus één selector volstaat en een vierde variant
   krijgt het gratis. Op de variantklassen zou het drie regels zijn die uit elkaar lopen --
   en precies dat was de fout: `is-reversed` stond alleen op `.text-image__grid`, waardoor
   omkeren bij tekst+tekst en tekst+formulier niets deed terwijl het veld er in het CMS wel
   gewoon bij stond. (infra, 03-09-2026)

   Twee dingen die hier bewust NIET in zitten:

   - Tussen 641 en 760px staan `text_text` en `text_form` al in twee kolommen (shell.css
     stapelt die pas bij 640px) terwijl deze query pas bij 761px begint. In die band blijft de
     omkering dus uit. Dat volgt uit het breakpoint-verschil tussen de rasters, niet uit deze
     regel; die twee gelijktrekken is een eigen afweging omdat het zichtbaar stapelgedrag op
     alle sites verandert.
   - `right_vertical_alignment=content` plaatst de cellen expliciet in kolom 1 en 2, en dan
     doet `order` niets. Voor `text_image` wordt dat hieronder rechtgezet; voor de andere twee
     varianten nog niet, want daar heet elke cel anders en zou het juist weer een rij lange
     selectors worden. */
@media (min-width: 761px) {
  .is-reversed .layer-text__grid > :nth-child(2) {
    order: -1;
  }

  /* `right_vertical_alignment=content` plaatst de cellen expliciet in kolom 1 en 2 (verderop in
     dit bestand), en op expliciet geplaatste items doet `order` niets. Die combinatie moet dus
     apart omgedraaid worden, anders is dit een halve fix die alleen bij de default-uitlijning
     werkt. */
  .is-reversed .text-image__grid[data-right-vertical-alignment="content"] .text-image__heading,
  .is-reversed .text-image__grid[data-right-vertical-alignment="content"] .text-image__content {
    grid-column: 2;
  }

  .is-reversed .text-image__grid[data-right-vertical-alignment="content"] .text-image__media {
    grid-column: 1;
  }
}

/* Zelfde omkering voor de andere tweekoloms-varianten, maar op húń breakpoint: die grids
   worden in shell.css pas bij 640px gestapeld, terwijl de text-image-grid dat hierboven al
   bij 760px doet. Eén gedeelde query zou tussen 641 en 760 px een tweekoloms-raster omdraaien
   -- dan staat de tweede kolom niet bóven de eerste maar ernaast, links. Gemeten op 700 px
   voordat deze regel gesplitst werd. Dat de twee breakpoints uiteenlopen is op zichzelf iets
   om op te ruimen; tot die tijd volgt de omkering elk raster naar zijn eigen punt. */
@media (max-width: 640px) {
  [data-stack-order="reverse"] .layer-text-text__grid > :nth-child(2),
  [data-stack-order="reverse"] .layer-text-form__grid > :nth-child(2) {
    order: -1;
  }
}

/* `right_vertical_alignment=content`: laat de rechter kolom naast de tekstinhoud
   beginnen, onder de kop. Op een mobiel scherm wordt de laag weer één kolom.

   `row-gap: 0` hoort daarbij, en het ontbrak. Om het beeld op de hoogte van de tekst te
   krijgen worden de kop en de inhoud eigen grid-items in twee rijen -- en dan komt de
   raster-gap ertussen te staan in plaats van de eigen ondermarge van de kop. Gemeten op 466,
   laag 242: 64px tussen kop en tekst, waar de `h2` zelf 22.4px voorschrijft. Dat is drie keer
   zo veel lucht als het ontwerp zegt, en alleen bij deze ene uitlijning.

   Ronny (03-09-2026): "met de 'content' uitlijning zou alleen de afbeelding naar beneden
   moeten, verder niets. de eyebrow, titel en tekst zouden gelijk moeten blijven." Precies dat:
   de plaatsing verzet het beeld, de gap moet zich er niet mee bemoeien. De kolom-gap blijft
   staan, want die scheidt de twee kolommen en niet de kop van zijn tekst.

   Zelfde correctie voor tekst+tekst en tekst+formulier: dezelfde 2x2, dus dezelfde
   opgeblazen ruimte tussen kop en inhoud. */
@media (min-width: 761px) {
  .text-image__grid[data-right-vertical-alignment="content"],
  .layer-text-text__grid[data-right-vertical-alignment="content"],
  .layer-text-form__grid[data-right-vertical-alignment="content"] {
    row-gap: 0;
  }

  .text-image__grid[data-right-vertical-alignment="content"] .text-image__text {
    display: contents;
  }

  .text-image__grid[data-right-vertical-alignment="content"] .text-image__heading {
    grid-column: 1;
    grid-row: 1;
  }

  .text-image__grid[data-right-vertical-alignment="content"] .text-image__content {
    grid-column: 1;
    grid-row: 2;
  }

  .text-image__grid[data-right-vertical-alignment="content"] .text-image__media {
    grid-column: 2;
    grid-row: 2;
  }
}

/* CMS-veld `column_vertical_alignment` ("Verticale uitlijning kolommen"): de kortste kolom
   centreren i.p.v. bovenaan te laten hangen (de grid-brede default is `align-items:start`,
   zie boven in dit bestand).

   `align-self` en niet `align-items`: dit raakt alleen de rechterkolom (media/tweede tekst/
   formulier), nooit de linkerkolom zelf. En `align-self` werkt -- anders dan `order` -- ook
   op een grid-item met een EXPLICIETE plaatsing (`grid-column`/`grid-row`, zie hierboven bij
   `right_vertical_alignment=content`), dus deze ene regel dekt zowel de titel- als de
   tekst-ankerstand zonder aparte varianten per stand.

   Op alle drie de tweekoloms-lagen tegelijk (zelfde reden als de `is-reversed`-regel
   hierboven): één plek i.p.v. drie die uit elkaar kunnen lopen. */
@media (min-width: 761px) {
  .text-image__grid[data-column-vertical-alignment="center"] > .text-image__media,
  .layer-text-text__grid[data-column-vertical-alignment="center"] > .layer-text-text__column,
  .layer-text-form__grid[data-column-vertical-alignment="center"] > .layer-text-form__form {
    align-self: center;
  }
}

@media (max-width: 760px) {
  .text-image__grid[data-right-vertical-alignment="content"] .text-image__media {
    grid-column: auto;
    grid-row: auto;
  }
}

/* De tweede tekstkolom kan naast de titel of naast de linker inhoud beginnen. */
@media (min-width: 761px) {
  .layer-text-text__grid[data-right-vertical-alignment="content"] .layer-text-text__left {
    display: contents;
  }

  .layer-text-text__grid[data-right-vertical-alignment="content"] .layer-text-text__heading {
    grid-column: 1;
    grid-row: 1;
  }

  .layer-text-text__grid[data-right-vertical-alignment="content"] .layer-text-text__content {
    grid-column: 1;
    grid-row: 2;
  }

.layer-text-text__grid[data-right-vertical-alignment="content"] .layer-text-text__column {
    grid-column: 2;
    grid-row: 2;
  }

  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__text {
    display: contents;
  }

  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__text .heading,
  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__text .ds-title {
    grid-column: 1;
    grid-row: 1;
  }

  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__text .prose,
  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__text .ds-text {
    grid-column: 1;
    grid-row: 2;
  }

  .layer-text-form__grid[data-right-vertical-alignment="content"] .layer-text-form__form {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .layer-text-text__grid[data-right-vertical-alignment="content"] .layer-text-text__column {
    grid-column: auto;
    grid-row: auto;
  }
}

/* `type_link=text`: native disclosure, zodat openen/sluiten ook zonder JavaScript werkt. */
.layer__readmore { margin-block: var(--space-4, 1rem); }
.layer__readmore > .layer__readmore-button { cursor: pointer; list-style: none; }
.layer__readmore > .layer__readmore-button::-webkit-details-marker { display: none; }
.layer__readmore > .layer__readmore-button::after {
  content: ""; display: inline-block; vertical-align: middle; width: 1.15em; height: 1.15em; margin-left: .4em;
  background: currentColor;
  /* Standaard pijl (schacht + punt), geen chevron -- Age vond de border-driehoek-truc geen
     nette pijl (F953). Zelfde mask-techniek als shell.css/downloads.css: percent-encoded SVG,
     zodat de rauwe <>/"" niet in een url()-string hoeven te escapen. Grootte op 1.15em gezet
     (was .8em) om in verhouding te ogen met de pijl van de Reserveren-knop (F988). */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v13M7 12l5 5 5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v13M7 12l5 5 5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease;
}
.layer__readmore[open] > .layer__readmore-button::after { transform: rotate(180deg); }
.layer__readmore-label--close { display: none; }
.layer__readmore[open] .layer__readmore-label--open { display: none; }
.layer__readmore[open] .layer__readmore-label--close { display: inline; }
.layer__readmore > .layer__readmore-content { margin-top: var(--space-4, 1rem); }
/* Geopend: de knop sluit de uitgeklapte tekst af i.p.v. erboven te blijven hangen (F988) --
   `<summary>` moet in de markup als eerste kind blijven staan (HTML-eis), dus de volgorde
   draait om via flex `order`, niet via een DOM-wijziging. `align-self: flex-start` op de knop
   is nodig omdat een flex-column-container zonder expliciete align-items standaard elk kind
   uitrekt tot de volle breedte (F994) -- de content mag dat wel (tekst hoort de kolom te vullen),
   de knop niet (moet z'n eigen inhoud-breedte houden, net als in dichte staat). */
.layer__readmore[open] { display: flex; flex-direction: column; }
.layer__readmore[open] > .layer__readmore-button { order: 2; margin-top: var(--space-4, 1rem); align-self: flex-start; }
.layer__readmore[open] > .layer__readmore-content { order: 1; margin-top: 0; }
}