/* 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. */

.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 {
  display: flex;
  gap: var(--events-gap);
  align-items: flex-start;
  padding-bottom: var(--events-gap);
  border-bottom: 1px solid var(--events-border);
}

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

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

.layer--events .events__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.layer--events .events__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 .events__when,
.layer--events .events__where {
  margin: 0 0 0.25em;
  color: var(--events-muted);
  font-size: 0.9em;
}

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

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

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

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

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