/*
 * 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: flex-start;
  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. De container heeft `align-items: flex-start`, dus 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; }

/* "Cover op desktop" (media_full): het beeld vult de kolom en mag bijsnijden, zodat het even
   hoog wordt als de kolom ernaast. Alleen boven het kolom-breekpunt — daaronder stapelen de
   kolommen en is er geen buurhoogte om naar toe te croppen, dus blijft het beeld heel. */
@media (min-width: 761px) {
  .layer--columns .layer__columns:has(.module-col__media[data-cover="1"]) { align-items: stretch }
  .layer--columns .layer__col:has(.module-col__media[data-cover="1"]),
  .layer--columns .layer__col:has(.module-col__media[data-cover="1"]) .module-col,
  .layer--columns .layer__col:has(.module-col__media[data-cover="1"]) .layer__sc,
  .module-col__media[data-cover="1"] { height: 100% }
  .module-col__media[data-cover="1"] img { height: 100%; object-fit: cover }
}