/* Activiteitenpagina en activiteit-detail - Bewonersorganisatie Transvaal
   Selectors zijn expres element + klasse: de Elementor-kit overschrijft
   anders button en img binnen deze blokken. */

/* ---------- Filterknoppen op de activiteitenpagina ---------- */

.bot-agenda-filter {
  --bot-blauw: #23235B;
  --bot-oranje: #E8770D;
  --bot-lijn: #E4E4DE;
  --bot-kop: "Merriweather Sans", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
}

.bot-agenda-filter button.bot-agenda-filter__knop {
  font-family: var(--bot-kop);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bot-blauw);
  background: transparent;
  border: 1px solid var(--bot-lijn);
  border-radius: 100px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bot-agenda-filter button.bot-agenda-filter__knop:hover {
  color: var(--bot-oranje);
  background: transparent;
  border-color: var(--bot-oranje);
}

.bot-agenda-filter button.bot-agenda-filter__knop.is-actief {
  color: #fff;
  background: var(--bot-oranje);
  border-color: var(--bot-oranje);
}

.bot-agenda-filter button.bot-agenda-filter__knop:focus-visible {
  outline: 2px solid var(--bot-blauw);
  outline-offset: 2px;
}

/* De set die je niet bekijkt. Zonder JavaScript wordt deze klasse nooit gezet
   en blijven beide sets onder elkaar staan. */
.bot-agenda-set.is-verborgen {
  display: none !important;
}

/* ---------- Fotoblok in een verslag ---------- */

/* Twee of drie foto's naast elkaar in plaats van onder elkaar. auto-fit laat
   een rij van drie ook echt naast elkaar staan; op smalle schermen zakken ze
   vanzelf onder elkaar. */
.bot-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 26px 0;
}

.bot-fotos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
}

/* De video staat rechtop; niet oprekken, wel centreren. Het is een gewone
   HTML5-speler met de knoppen van de browser zelf, dus zonder MediaElement. */
.bot-video {
  margin: 26px 0;
}

.bot-video video {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 620px;
  height: auto;
  border-radius: 10px;
  background: #000;
}

@media (max-width: 600px) {
  .bot-fotos {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bot-fotos img {
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .bot-agenda-filter button.bot-agenda-filter__knop {
    font-size: 10.5px;
    padding: 12px 18px;
  }
}