/* -----------------------------------------------------------------------------
   1. Terugkeerdatums in de hero van de activiteitpagina (.ev-reeks)
   -----------------------------------------------------------------------------
   De hero heeft weinig ruimte, dus geen tweede kaart maar een compacte regel
   onder de titel: het woordje "Ook op" met een herhaal-icoon, daarachter de
   eerstvolgende datums als chips in de stijl van de bestaande labels (wit vlak,
   zwarte rand, vierkant). Boven de vier datums klapt de rest uit met <details>,
   dus zonder JavaScript en zonder informatie die alleen bij hover verschijnt.
   -------------------------------------------------------------------------- */
.ev-reeks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 1.25rem;
}
.ev-reeks__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.025em;
  color: #000000;
}
.ev-reeks__label i {
  font-size: 12px;
  line-height: 1;
}
.ev-reeks__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ev-reeks__item {
  margin: 0;
  padding: 0;
}
.ev-reeks__chip, .ev-reeks__toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.025em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ev-reeks__chip time {
  display: block;
}
.ev-reeks__chip:hover, .ev-reeks__chip:focus-visible {
  background: #000000;
  color: #ffffff;
  text-decoration: none;
}
.ev-reeks__toggle {
  cursor: pointer;
  list-style: none;
}
.ev-reeks__toggle::-webkit-details-marker {
  display: none;
}
.ev-reeks__toggle::marker {
  content: "";
}
.ev-reeks__toggle:hover, .ev-reeks__toggle:focus-visible {
  background: #000000;
  color: #ffffff;
}
.ev-reeks__more[open] {
  flex: 1 0 100%;
}
.ev-reeks__list--rest {
  margin-top: 8px;
}

.bg-color-black .ev-reeks__label {
  color: #ffffff;
}
.bg-color-black .ev-reeks__chip, .bg-color-black .ev-reeks__toggle {
  border-color: #ffffff;
  background: transparent;
  color: #ffffff;
}
.bg-color-black .ev-reeks__chip:hover, .bg-color-black .ev-reeks__chip:focus-visible, .bg-color-black .ev-reeks__toggle:hover, .bg-color-black .ev-reeks__toggle:focus-visible {
  background: #ffffff;
  color: #000000;
}

@media (min-width: 768px) {
  .ev-reeks {
    gap: 10px;
  }
  .ev-reeks__label {
    font-size: 14px;
  }
  .ev-reeks__chip, .ev-reeks__toggle {
    padding: 4px 10px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-reeks__chip,
  .ev-reeks__toggle {
    transition: none;
  }
}
/* -----------------------------------------------------------------------------
   2. Meerdere categorieen in de metaregel van een agenda-rij (.agenda__type)
   -----------------------------------------------------------------------------
   De metaregel bestaat uit type, locatie en prijs, gescheiden door een punt.
   De categorieen vormen daarbinnen een groep achter een icoon en worden met
   een komma gescheiden, zodat het verschil tussen "een categorie erbij" en
   "een ander soort meta-item" ook zonder kleur te zien is.

   Belangrijk: .agenda__info is een grid-cel naast de foto (zie ronde 1/2). De
   regels hieronder blijven binnen .agenda__type en raken die opzet niet.
   -------------------------------------------------------------------------- */
.agenda__type {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  min-width: 0;
}
.agenda__type .ww-type-icoon {
  align-self: center;
  margin-right: 2px;
}
.agenda__type-sep {
  margin-left: -4px;
}
.agenda__type-more {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  cursor: help;
}

@media (min-width: 1280px) {
  .agenda__meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 6px;
    min-width: 0;
    overflow: hidden;
  }
  .agenda__meta .agenda__type {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .agenda__meta .agenda__location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .agenda__meta .agenda__meta-sep {
    flex: 0 0 auto;
  }
}