/* 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%;
}

/* Ook carousel-kaarten vullen hun kaartcel volledig; de kaartopmaak staat op
   `.card__content`, niet op de structurele slide-wrapper. */
.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__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__media img` dekt beide vormen: de gedeelde mediapoort (die sinds punt 781 het
   kaartbeeld levert en geen `card__photo` meer zet) én de terugval zonder pijplijn. De losse
   `.card__photo` blijft staan voor LayerMediaAlbumModule, dat 'm nog wél zet. */
.card__media img,
.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;
  display: flex;
  flex-direction: column;
}

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

/* Een ingevulde CTA is de zichtbare uitnodiging om de hele kaart te openen.
   De basis blijft bewust een tekstlink; site- en CMS-opmaak kunnen er een knop van maken. */
.card__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* ── Weergave "tekst over de foto" (punt 820) ────────────────────────────────
   De badge en het bijschrift liggen absoluut over het beeld, dus de kaartschil is
   hier het positioneringsvlak. Het verloop hoort bij deze weergave en niet bij de
   site-CSS: witte tekst op een willekeurige foto is alleen leesbaar dankzij die
   donkere onderkant, dus wie de weergave kiest moet 'm krijgen. */
.card__link--overlay,
.card__inner--overlay { position: relative; display: block; height: 100%; }

/* Het beeld vult de hele kaart. `aspect-ratio: auto` is hier geen opsmuk: `.card__media`
   draagt standaard `aspect-ratio: 4/3`, en die vecht met `inset: 0` — het beeld stopt dan
   halverwege en het verloop ligt over de achtergrond in plaats van over de foto. Alleen
   zichtbaar in een render, niet in de markup. */
.card__link--overlay > .card__media,
.card__inner--overlay > .card__media {
  position: absolute; inset: 0; margin: 0; aspect-ratio: auto;
}

.card__link--overlay .card__label,
.card__inner--overlay .card__label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem .42rem .6rem;
  border-radius: var(--pill, 2rem);
  background: var(--accent, #1e2a3a); color: var(--on-accent, #fff);
  font-weight: 600; font-size: .92rem; line-height: 1.2;
}

.card__link--overlay .card__overlay,
.card__inner--overlay .card__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 60%,
    color-mix(in srgb, var(--overlay-ink, #0b302b) 50%, transparent) 78%,
    color-mix(in srgb, var(--overlay-ink, #0b302b) 93%, transparent) 100%);
}

.card__link--overlay .card__caption,
.card__inner--overlay .card__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.3rem 1.3rem 1.5rem; color: #fff;
}
.card__link--overlay .card__caption :where(.card__title, .card__subtitle, .card__text),
.card__inner--overlay .card__caption :where(.card__title, .card__subtitle, .card__text) {
  color: inherit; margin: 0;
}
.card__link--overlay .card__caption .card__text,
.card__inner--overlay .card__caption .card__text { margin-top: .25rem; opacity: .92; }

/* Zonder aspect-ratio heeft een absoluut gevulde kaart geen eigen hoogte; deze is
   te overschrijven per site of per laag via het opmaakslot. */
.card__link--overlay,
.card__inner--overlay { aspect-ratio: var(--card-overlay-ratio, 3 / 4); }

}