/* 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, 2rem);
  row-gap: var(--cols-gy, 2rem);
}

.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);
}

/* 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, 2rem));
    row-gap: var(--cols-gy-d, var(--cols-gy, 2rem));
  }
  .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; }

/* 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;
  }

  .layer--columns .layer__col:has(> .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;
  }
}
}