/* 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 {
/* FormRenderer — generieke formulierlayout.
 * Afstanden zijn variabelen zodat sites hun maatvoering kunnen aanpassen zonder
 * de markup of de frameworkstructuur te overschrijven. */

form[data-component="form"] {
  display: grid;
  gap: var(--form-row-gap, 1.1rem);
}

form[data-component="form"] > .form-field {
  margin-bottom: 0;
}

.form-row {
  display: grid;
  gap: var(--form-field-gap, 1rem);
  margin-bottom: 0;
}

.form-row > * { min-width: 0; }

@container form-col (max-width: 480px) {
  .form-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr !important; }
}

.form-row > .form-field { margin-bottom: 0; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap, .35rem);
  margin-bottom: 0;
}
}