/* 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 {
/* Agenda: activiteiten op datum, elk met beeld, tijdstip en plaats.
   Terughoudend en volledig op variabelen met een neutrale fallback, zodat een site 'm
   bijkleurt in plaats van overschrijft. Zonder site-CSS moet dit nog steeds een leesbare
   agenda zijn en geen stapel losse regels.

   Sinds 07-08-2026 bouwt de laag z'n kaarten met het gedeelde card-component, dus de
   binnenkant heet `card__*` en niet meer `events__*`. Wat een site aan `.card` heeft
   gehangen werkt daarmee ook hier; dit bestand doet alleen nog wat een agenda anders maakt
   dan een raster: een lijst met scheidingslijnen en beeld naast de tekst. */

.layer--events {
  --events-gap: var(--space-4, 1.5rem);
  --events-border: var(--color-border, #e5e5e5);
  --events-muted: var(--color-muted, #6b7280);
  --events-radius: var(--radius-2, 8px);
}

.layer--events .events {
  list-style: none;
  margin: var(--events-gap) 0 0;
  padding: 0;
  display: grid;
  gap: var(--events-gap);
}

.layer--events .events__item {
  padding-bottom: var(--events-gap);
  border-bottom: 1px solid var(--events-border);
}

/* De kaart is hier een rij: beeld naast de tekst. Dat is het enige wat een agenda-kaart
   anders maakt dan een raster-kaart; de rest komt van de gedeelde card-opmaak.

   `:not([data-view="column"])` en niet `[data-view="row"]`: een laag die het veld nog niet
   heeft ingevuld (of nog de oude waarde draagt) rendert dan precies zoals hiervoor. Zo kan de
   inhoud in eigen tempo mee en verandert er onderweg niets. */
.layer--events:not([data-view="column"]) .card__inner {
  display: flex;
  /* Expliciet, en niet op de beginwaarde vertrouwen: `cards.css` zet de basis van een kaart
     sinds 13-08-2026 op `column` (beeld boven tekst), en dat is voor een raster-kaart ook de
     juiste stand. Een agenda-kaart is juist een rij. Zonder deze regel viel de agenda op demo
     terug naar gestapelde kaarten en werd de pagina anderhalf keer zo lang. */
  flex-direction: row;
  gap: var(--events-gap);
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
}

.layer--events .events__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.layer--events .card__media {
  flex: 0 0 auto;
  width: 200px;
  border-radius: var(--events-radius);
  overflow: hidden;
}

/* De agenda-kaart gaat sinds punt 781 door de gedeelde mediapoort, en die zet geen
   `card__photo` meer op de <img>. `.card__media img` is de vorm die de vloot al gebruikt en
   raakt zowel de poort-markup (met .media__viewport ertussen) als de terugval zonder
   pijplijn. */
.layer--events .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.layer--events .card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.layer--events .card__title {
  margin: 0 0 0.35em;
}

/* Datum en plaats staan vóór de omschrijving: bij een agenda is "wanneer en waar" de
   eerste vraag, en zo blijven ze naast elkaar leesbaar op een brede kaart. */
.layer--events .card__eyebrow,
.layer--events .card__subtitle {
  display: block;
  margin: 0 0 0.25em;
  color: var(--events-muted);
  font-size: 0.9em;
}

.layer--events .events__intro {
  margin: 0.5em 0 0;
}

.layer--events .card__text > :first-child {
  margin-top: 0;
}

.layer--events .card__text > :last-child {
  margin-bottom: 0;
}

/* ── Weergave "kolommen" (CMS-veld `view`) ─────────────────────────────────────
   Kaarten naast elkaar in een raster, beeld boven de tekst -- de gewone kaartvorm dus, in
   plaats van de rij-lijst hierboven.

   Dit stond tot 03-09-2026 op elke site die het wilde in eigen CSS. Op 461 was dat een blok
   van twaalf regels dat de framework-opmaak met een specifiekere selector overschreef, mét een
   comment waarom dat nodig was. Een weergave-keuze hoort een CMS-instelling te zijn, niet een
   stylesheet per site: dan kan een redacteur het zelf, en hoeft niemand de framework-CSS te
   verslaan om iets te krijgen wat het framework gewoon kan.

   Alleen de STRUCTUUR staat hier. Kleuren, hover-effecten en lettergroottes blijven van de
   site -- dat is precies het onderscheid dat de site-CSS van 461 ook maakt. */
.layer--events[data-view="column"] .events {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.layer--events[data-view="column"] .card__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.layer--events[data-view="column"] .card__media {
  width: 100%;
  flex: 0 0 auto;
}

/* De scheidingslijn hoort bij een lijst, niet bij losse kaarten naast elkaar. */
.layer--events[data-view="column"] .events__item {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 40rem) {
  .layer--events .card__inner {
    flex-direction: column;
  }

  .layer--events .card__media {
    width: 100%;
    max-height: 200px;
  }
}
}