/*
 * 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 die het ongeconfigureerde framework-gedrag reproduceert
 * (gap 2rem, flex 1 1 260px) → een laag zónder CMS-instellingen verandert niet. 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; }

.layer--columns .layer__col {
  flex: 1 1 260px;
  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 (auto = volle breedte). */
@media (max-width: 760px) {
  .layer--columns .layer__columns { flex-direction: column; }
  .layer--columns .layer__col { width: var(--col-w-m, auto); }
}

/* 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 260px);
    order: var(--col-order-d, var(--col-order, 0));
  }
}