/**
 * Component beeldvak (banner en fotoblok).
 * De kleuren komen uit de tokens van het thema, met een terugval als het
 * thema ze niet levert.
 */
.beeldvak {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--beeldvak-verhouding, 3 / 1);
  background: var(--c-antraciet, #414041);
}

/* Specifieker dan de algemene img-regels van het thema. */
.beeldvak .beeldvak__beeld {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Slider ──────────────────────────────────────────── */
.beeldvak__baan {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.beeldvak__baan::-webkit-scrollbar {
  display: none;
}

.beeldvak__baan:focus-visible {
  outline: 3px solid var(--c-goud, #e2b14a);
  outline-offset: -3px;
}

.beeldvak__dia {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* ── Bediening (pauze + bolletjes) ───────────────────── */
.beeldvak__bediening {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-end: 0.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  background: rgb(0 0 0 / 0.5);
  border-radius: 999px;
}

.beeldvak__bediening[hidden] {
  display: none;
}

/* De bediening is onzichtbaar en verschijnt pas bij aanwijzen met de muis,
   bij toetsenbordfocus (Tab) of na een tik op het beeld. Ze blijft wel
   bereikbaar: zo is de slider rustig én altijd te pauzeren (WCAG 2.2.2). */
.beeldvak__bediening {
  opacity: 0;
  transition: opacity 200ms ease;
}

.beeldvak:hover .beeldvak__bediening,
.beeldvak:focus-within .beeldvak__bediening,
.beeldvak.is-aangeraakt .beeldvak__bediening {
  opacity: 1;
}

.beeldvak .beeldvak__pauze,
.beeldvak .beeldvak__stip {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.beeldvak .beeldvak__pauze {
  width: var(--touch, 2.75rem);
  height: var(--touch, 2.75rem);
}

/* Pauze-icoon (twee streepjes); als gepauzeerd: afspeel-driehoek. */
.beeldvak__pauze::before {
  content: "";
  width: 0.75rem;
  height: 0.875rem;
  border-inline: 0.25rem solid currentColor;
}

.beeldvak__pauze[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-block: 0.5rem solid transparent;
  border-inline-start: 0.8rem solid currentColor;
  border-inline-end: 0;
  margin-inline-start: 0.2rem;
}

.beeldvak .beeldvak__stip {
  width: 1.75rem;
  height: var(--touch, 2.75rem);
}

/* Telefoon/touchscreen: elk bolletje een vol klikvlak (48px), zodat de
   knoppen niet te dicht op elkaar staan (Lighthouse "tap targets"). */
@media (pointer: coarse), (max-width: 37.49em) {
  .beeldvak .beeldvak__stip {
    width: var(--touch, 3rem);
  }
}

.beeldvak__stip::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.beeldvak__stip[aria-current="true"]::before {
  background: currentColor;
}

.beeldvak .beeldvak__pauze:focus-visible,
.beeldvak .beeldvak__stip:focus-visible {
  outline: 3px solid var(--c-goud, #e2b14a);
  outline-offset: -3px;
}

/* Smalle banner op de telefoon (± 110px hoog): bediening dichter in de hoek. */
@media (max-width: 37.49em) {
  .beeldvak--banner .beeldvak__bediening {
    inset-inline-end: 0.25rem;
    inset-block-end: 0.25rem;
  }
}

.beeldvak .beeldvak__pauze:hover,
.beeldvak .beeldvak__stip:hover {
  color: var(--c-goud, #e2b14a);
  background: transparent;
}