/* 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_columns — geometrie-laag (#179 stap 2).
 *
 * Consumeert de CSS-custom-props die LayerColumns per laag/kolom emit:
 *   container: --cols-mw (max-width), --cols-gx/--cols-gy (gap mobiel),
 *              --cols-gx-d/--cols-gy-d (gap desktop);
 *   per kolom: --col-flex-d (flex desktop), --col-w-m (breedte mobiel),
 *              --col-order/--col-order-d (order mobiel/desktop), --col-pad (padding).
 *
 * Elke prop heeft een fallback (gap 2rem, gelijke kolommen). De
 * selectoren zijn bewust één niveau specifieker (.layer--columns .layer__columns /
 * .layer--columns .layer__col) dan de base-regels in page.php, zodat ze de cascade
 * winnen ongeacht de laad-volgorde van de inline-base-CSS.
 */
.layer--columns .layer__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-inline: auto;
  max-width: var(--cols-mw, none);
  column-gap: var(--cols-gx, 0);
  row-gap: var(--cols-gy, 0);
}

.layer--columns[data-flow="nowrap"] .layer__columns { flex-wrap: nowrap; }
.layer--columns[data-flow="wrap-reverse"] .layer__columns { flex-wrap: wrap-reverse; }

/* Default: gelijke kolommen — elke kolom krijgt 100%/aantal, gaps eraf. `flex-basis: 0`
   deelt de rij op de flex-groei i.p.v. op de inhoud; met een basis in pixels (dit stond op
   `260px`) hangt de breedte af van hoeveel er toevallig in past en zijn drie kolommen dus
   niet drie gelijke derdes. Een per-kolom `width` uit het CMS overschrijft dit via
   `--col-flex-d`. */
.layer--columns .layer__col {
  flex: 1 1 0;
  min-width: 0;
  order: var(--col-order, 0);
  padding: var(--col-pad, 0);
}

/* De container zit op een WIKKEL binnen de kolom, niet op de kolom zelf (punt 782).
   `.layer__col` is tegelijk een flexcel (`flex: 1 1 0`, dus met basis 0 door de flex-grow
   bepaald) én — vóór deze wijziging — een size-container. Die combinatie liet de kolom bij
   `flex-wrap: nowrap` naar 0px klappen (gemeten op svs.nl, elke flex-basis): een
   size-container communiceert zijn eigen intrinsieke maat niet meer omhoog, en zonder die
   maat had de nowrap-verdeling niets om op te groeien. Bij `wrap` ontstond het probleem niet,
   want daar bepaalt de rij-breedte de kolom sowieso al buiten de content om.

   De wikkel lost dat op door de twee rollen te scheiden: `.layer__col` blijft de flexcel
   (kent alleen zijn flex-grow/-basis, geen container), `.layer__col-inner` is een gewone
   blok-box die de opgeloste breedte van zijn ouder erft en DAAROP pas een size-container
   wordt. Er is dan niets meer dat circulair naar zichzelf kan verwijzen. */
.layer--columns .layer__col-inner {
  /* Zelfde reden als voorheen op `.layer__col`: `.layer__inner` zit met 1152px te hoog om een
     component van 536px (de kolombreedte) goed te meten (gemeten op demo 1's catalogus, zie
     de git-historie van deze regel voor de volledige meting). Eigen naam (`column`), zodat een
     regel die het expliciet over de LAAG heeft (`@container layer (...)`) niet stilletjes de
     kolom te pakken krijgt. (support, gemeten op demo 1, 03-09-2026; wikkel: punt 782) */
  container: column / inline-size;
}

/* Een kaartkolom kan optioneel de hoogte van de naastliggende inhoud volgen. `:has()` zonder
   `>` matcht op elke diepte, dus deze regel blijft werken ongeacht de wikkel ertussen. */
.layer--columns .layer__col:has([data-map][data-map-full-height]) {
  display: flex;
  flex-direction: column;
}

.layer--columns .layer__col:has([data-map][data-map-full-height]) > .layer__col-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.layer--columns .layer__col [data-map][data-map-full-height] {
  flex: 1 1 auto;
}

/* Mobiel: de rij stapelt verticaal → flex-basis stuurt de hoogte; de breedte komt van de
   cross-as, dus zetten we 'm expliciet uit --col-w-m.

   `align-self: stretch` erbij, want `auto` is hier géén volle breedte — dat stond hier wel,
   en het klopte niet. Een kolom zonder
   ingestelde mobiele breedte krimpt tot z'n inhoud. Draagt die inhoud geen eigen breedte —
   een foto op `width: 100%`, een SVG met alleen een viewBox, een kaart die pas in JS z'n maat
   krijgt — dan is de breedte van de kolom afhankelijk van het beeld en het beeld van de kolom.
   Die kringloop eindigt op nul en de foto is onzichtbaar (portaal P16).

   Stretch en niet `width: 100%`: stretch werkt alleen als de cross-maat `auto` is, dus een
   kolom die uit het CMS wél een breedte meekrijgt houdt die gewoon. */
@media (max-width: 760px) {
  .layer--columns .layer__columns { flex-direction: column; }
  .layer--columns .layer__col { width: var(--col-w-m, auto); align-self: stretch; }
}

/* Desktop: flex-basis/breedte en gap-desktop nemen het over (val terug op de mobiele
   waarde, dan op de code-default). */
@media (min-width: 761px) {
  .layer--columns .layer__columns {
    column-gap: var(--cols-gx-d, var(--cols-gx, 0));
    row-gap: var(--cols-gy-d, var(--cols-gy, 0));
  }
  .layer--columns .layer__col {
    flex: var(--col-flex-d, 1 1 0);
    order: var(--col-order-d, var(--col-order, 0));
  }
}

/* Kolomtype "Media" (module_column, type=media): de kolom bepaalt de breedte, de hoogte
   volgt het beeld. Geen vaste ratio — een staande foto mag staand blijven. */
.module-col__media { margin: 0; }
.module-col__media img { display: block; width: 100%; height: auto; }
.module-col__media[data-cover="1"] { overflow: hidden; }

/* `column_rows` emit per CMS-rij een eigen wrapper, zodat de ingestelde
   verticale afstand alleen tussen de rijen geldt. */
.module-col__rows {
  display: flex;
  flex-direction: column;
  row-gap: var(--rows-gap, 0);
}

@media (min-width: 761px) {
  .module-col__rows { row-gap: var(--rows-gap-d, var(--rows-gap, 0)); }
}

/* Is het beeld via het CMS-veld "Link" klikbaar gemaakt, dan zit er een anchor tussen de
   figure en de img. Die moet blok-niveau zijn, anders houdt de inline-regel eronder ruimte
   vrij voor de tekstregel en krijgt de kolom een streepje wit onder de foto. */
.module-col__media-link { display: block; }

/* CMS-optie `media_full`: op desktop vult het beeld de hoogte van de rij en
   mag het bijsnijden. Op mobiel blijven kolommen stapelen en blijft de
   natuurlijke beeldverhouding leidend. */
@media (min-width: 761px) {
  .layer--columns .layer__columns:has(> .layer__col .module-col__media[data-cover="1"]) {
    align-items: stretch;
  }

  /* Sinds punt 782 zit `.layer__col-inner` tussen de flexcel en de inhoud, dus de figure is
     geen direct kind meer van de kolom. Met een `>` ervoor viel deze regel daardoor stil: de
     kolom werd geen containing block, en het absolute beeld ging positioneren tegen de LAAG
     — het vulde de volledige breedte en schilderde over de tekstkolom heen (gemeten op 463,
     /theorie, laag 580). Beide vormen staan er expliciet in: zo kan een cover-beeld in een
     geneste laag dieper in de kolom deze regel niet per ongeluk activeren. */
  .layer--columns .layer__col:has(> .module-col__media[data-cover="1"]),
  .layer--columns .layer__col:has(> .layer__col-inner > .module-col__media[data-cover="1"]) {
    position: relative;
    min-height: 220px;
  }

  .module-col__media[data-cover="1"] {
    position: absolute;
    inset: 0;
  }

  /* Bij "Cover op desktop" staat de figure absoluut en rekt de img mee op `height:100%`.
     Zit er een link tussen, dan rekent die 100% tegen de anchor af in plaats van tegen de
     figure — dus de anchor krijgt hier zelf de volle hoogte. */
  .module-col__media[data-cover="1"] .module-col__media-link {
    height: 100%;
  }

  .module-col__media[data-cover="1"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
}