/* 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 {
/* De basis-opmaak van het gedeelde kaart-component (`Framework\Layer\Card\Card` +
   `CardCollectionRenderer`) — het raster en de binnenkant van één kaart.

   Waarom dit bestand er is (punt #284, 13-08-2026): het component wordt door zestien
   renderers gebruikt, maar had nergens een eigen stylesheet. De opmaak stond op twee
   verkeerde plekken:

     - het raster (`.layer__cards-grid` + de `data-cols`-kolommen) in `webshop.css`,
       dus alleen aanwezig als er toevallig een webshop-laag op de pagina stond;
     - de binnenkant (`.card__*`) in `events.css`, en daar bovendien gescoped onder
       `.layer--events`, dus buiten een agenda raakte geen enkele regel die klassen.

   Gevolg: een pagina met kaarten en zonder agenda of webshop kreeg van het framework
   niets, en elke site loste dat zelf op. Op 461 staan negen `.card__*`-onderdelen in
   `main.css`, op 463 nog een set. Dezelfde CSS, vier keer net iets anders.

   Terughoudend gehouden, met dezelfde afspraak als `events.css`: alleen structuur, alles
   op variabelen met een neutrale fallback. Geen randen, schaduwen of achtergronden — dat
   is smaak, en smaak hoort in de site of het CMS. Zonder site-CSS moet dit een leesbare
   kaart zijn; mét site-CSS moet het niet in de weg zitten. Omdat het geheel in
   `@layer framework` staat, wint elke site-regel er sowieso van. */

.layer__cards-grid {
  --cards-gap: var(--space-4, 1.5rem);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--cards-gap);
  align-items: stretch;
}

/* Het aantal kolommen komt uit het CMS en staat als `data-cols` op de wrapper. Een
   attribuut-selector, geen klasse-per-aantal: het aantal is content, geen ontwerpvariant. */
.layer__cards-grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.layer__cards-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layer__cards-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layer__cards-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layer__cards-grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.layer__cards-grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* `min-width: 0` omdat een grid-cel anders niet kleiner wil worden dan z'n langste woord;
   `height: 100%` zodat kaarten in een rij even hoog zijn, ook bij ongelijke tekstlengte. */
.layer__cards-grid > .card,
.layer__cards-grid > .card > .card__content {
  min-width: 0;
  height: 100%;
}

@media (max-width: 56rem) {
  .layer__cards-grid,
  .layer__cards-grid[data-cols] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 38rem) {
  .layer__cards-grid,
  .layer__cards-grid[data-cols] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Eén kaart ──────────────────────────────────────────────────────────────
   Structuur uit `Card::el()`:

     <a class="card__link"> | <div class="card__inner">     (+ `--no-media` zonder beeld)
       [beeld]                                              bv. .card__media > .card__photo
       <div class="card__body">
         <span class="card__eyebrow">  [titel]  [meta]
         <p class="card__tagline">  <p class="card__subtitle">  <p class="card__text">
         <span class="card__cta" aria-hidden>
       </div>
     </a>

   Kolom, niet rij: beeld boven, tekst eronder. Een agenda-kaart is wél een rij, en
   `events.css` zet dat om — die regels staan gescoped onder `.layer--events` en winnen
   hier dus van (0,2,0 tegen 0,1,0). Dat is de bedoeling: dit is de basis, niet de wet. */

.card__link,
.card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* De hele kaart is klikbaar; de tekst mag daar niet blauw-onderstreept van worden. Wel
   een zichtbare focus-ring, want dit is voor toetsenbordbediening één doel. */
.card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Het vangnet. De verhouding hoort van het BEELD te komen — `LayerCards` zet daarvoor een
   `data-ratio` op dit vak, met de maat uit `advanced_scale_size` als de redacteur die invulde
   en anders de eigen afmeting van de afbeelding. Kennen we geen van beide, dan 4:3: dat is wat
   de sites tot nu toe hardgecodeerd in hun eigen CSS hadden staan.
   Hier en niet in de meegestuurde CSS van de renderer, juist zodat een site 'm kan overrulen;
   de per-kaart `data-ratio` wint daar weer van, want dat is het CMS dat spreekt. */
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* `flex: 1` zodat de tekst de resterende hoogte vult en kaarten met minder tekst niet
   inzakken; de kaarten in een rij blijven zo even hoog. */
.card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.card__title {
  margin: 0 0 0.35em;
}

.card__eyebrow {
  display: block;
  margin: 0 0 0.25em;
  color: var(--color-muted, #6b7280);
  font-size: 0.9em;
}

.card__tagline,
.card__subtitle {
  margin: 0 0 0.35em;
  color: var(--color-muted, #6b7280);
}

/* Eerste en laatste alinea zonder buitenmarge, anders duwt de tekst de kaart uit elkaar
   op een plek waar de opmaak juist de ruimte bepaalt. */
.card__text {
  margin: 0;
}

.card__text > :first-child { margin-top: 0; }
.card__text > :last-child  { margin-bottom: 0; }
}