/*
  Agenda — agenda-item tiles in two tabs ("Binnenkort" per month, "Vaste
  activiteiten"). Tiles are white cards with a hairline border (the meta box
  inside is cream). Width is set by the page-builder row; the grid auto-fills.
  Tabs + the per-tile "Lees meer" disclosure are progressively enhanced by
  assets/js/activities.js — without JS both panels show and tiles stay collapsed.
*/

.agenda {
  --tile-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* ---- Tabs ---- */
.agenda__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.agenda__tab {
  padding: var(--space-2xs) var(--space-m);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-green-pale);
  color: var(--color-text);
  font-family: var(--font-sans-serif);
  font-weight: 700;
  cursor: pointer;
}

.agenda__tab[aria-selected="true"] {
  background-color: var(--color-green-strong);
  color: var(--color-white);
}

/* ---- Panels & month groups ---- */
.agenda__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.agenda__month {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* "MEI 2026" — small bold uppercase label with a rule filling the row. */
.agenda__month-title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-sans-serif);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agenda__month-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* ---- Grid ---- */
.agenda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-width)), 1fr));
  align-items: stretch;          /* tiles in a row match each other's height */
  gap: var(--space-m);
}

/* ---- Date badge (overlaid on the .tile--agenda media; the card itself is the
   shared .tile, see components/tile.css) ---- */
.agenda__badge {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-green-strong);
  font-family: var(--font-sans-serif);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.agenda__badge-prefix,
.agenda__badge-month {
  font-size: 0.9375rem;
}

.agenda__badge-day {
  font-size: 1.875rem;
}

/* The tile card, body, title, excerpt and "Lees meer" disclosure are the shared
   .tile / .tile--agenda — see components/tile.css. */