/**
 * ZONE slideshow — brede afbeelding of slider onder de menubalk.
 * Template: templates/layout/regions/_slideshow.html.twig
 * De slider zelf komt van de module tiny_slider; hier alleen de maatvoering.
 */
.zone-slideshow {
  margin-block-end: 0;
}

/* Volle breedte in de eigen verhouding van de afbeelding (zoals het origineel).
   De width/height-attributen die Drupal meegeeft, houden ruimte vrij terwijl
   het beeld laadt, zodat de pagina niet verspringt. */
.zone-slideshow img {
  width: 100%;
  height: auto;
}

/* Bijschriften van afbeeldingen (bijv. "Over ons") */
.zone-slideshow figcaption,
.zone-slideshow .caption {
  font-size: var(--fs-klein);
  padding-block: var(--s-1);
}

/* Navigatieknoppen van tiny-slider groot genoeg voor touch. */
.zone-slideshow .tns-nav button {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  background: transparent;
}

.zone-slideshow .tns-nav button::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin: auto;
  border: 2px solid var(--c-wit);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
}

.zone-slideshow .tns-nav .tns-nav-active::before {
  background: var(--c-wit);
}