/* 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 {
@charset "UTF-8";
/*
 * 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: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

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

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

/* `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. */
@media (min-width: 761px) {
  .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;
  }
}

@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;
  }
}

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