/* Popup voor de grote nieuwsfoto's (zie lightbox.js) */

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-figure {
  position: relative;
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: lightbox-in 0.2s ease-out;
}

.lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1400px);
  /* --lightbox-caption wordt door lightbox.js gezet, zodat foto + onderschrift samen in beeld passen;
     72px = padding + marge boven/onder, zodat het kruisje (14px boven de popup) ook in beeld blijft */
  max-height: min(80vh, calc(100vh - 72px - var(--lightbox-caption, 0px)));
  max-height: min(80dvh, calc(100dvh - 72px - var(--lightbox-caption, 0px)));
  border-radius: 6px;
  margin: 0 auto;
}

/* even breed als de foto, zodat de pijltjes op de foto staan ook als het onderschrift breder is */
.lightbox-stage {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 34px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.lightbox-nav:focus-visible {
  outline: 3px solid #478ac9;
}

.lightbox-nav[hidden] {
  display: none;
}

.lightbox-prev {
  left: 8px;
}

.lightbox-next {
  right: 8px;
}

.lightbox-caption {
  max-width: min(92vw, 1400px);
  padding: 10px 4px 2px;
  font-size: 0.95rem;
  text-align: center;
  color: #333;
}

.lightbox-caption strong {
  display: block;
  font-size: 1.1rem;
}

.lightbox-caption small {
  display: block;
  color: #888;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.lightbox-close:focus-visible {
  outline: 3px solid #478ac9;
}

/* op smalle en lage schermen (liggende telefoon) het kruisje binnen beeld houden */
@media (max-width: 575px), (max-height: 500px) {
  .lightbox-close {
    top: 4px;
    right: 4px;
  }
}

/* lage, liggende schermen (liggende telefoon): onderschrift naast de foto, zodat de foto de volle hoogte krijgt */
@media (max-height: 500px) and (orientation: landscape) {
  .lightbox-figure {
    --lightbox-side: min(220px, 34vw);
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .lightbox-stage {
    margin: 0;
  }

  .lightbox-img {
    max-width: calc(92vw - var(--lightbox-side) - 12px);
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
  }

  .lightbox-caption {
    flex: 0 0 var(--lightbox-side);
    max-width: var(--lightbox-side);
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    padding: 36px 4px 0 0; /* ruimte voor het kruisje rechtsboven */
    text-align: left;
  }
}

html.lightbox-open {
  overflow: hidden;
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-figure { animation: none; }
}