/*
  Fotogalerij (page-fotos.php).
  Mobile first: de basislaag hieronder is de mobiele weergave, breder wordt uitsluitend met
  min-width queries op 640, 768, 1024 en 1280 px opgebouwd.
*/

.kzd-fotos-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  box-sizing: border-box;
}

.kzd-fotos-page .entry-title {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.kzd-fotos-intro {
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.kzd-fotos-groep {
  margin-bottom: 2.5rem;
}

.kzd-fotos-groep.kzd-fotos-ouder {
  margin-bottom: 1.5rem;
}

.kzd-fotos-groep-titel {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid #a71e2b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kzd-fotos-groep-teller {
  font-size: 0.875rem;
  font-weight: normal;
  color: #666;
}

.kzd-fotos-meer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem 0 1.75rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: #a71e2b;
  border: 1.5px solid #a71e2b;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.kzd-fotos-meer-btn:hover {
  background: #a71e2b;
  color: #fff;
}

.kzd-fotos-meer-btn:focus-visible {
  outline: 2px solid #a71e2b;
  outline-offset: 2px;
}

.kzd-fotos-meer-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.kzd-fotos-meer-btn[aria-expanded="true"] .kzd-fotos-meer-icon {
  transform: rotate(180deg);
}

.kzd-fotos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.kzd-fotos-item {
  margin: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.kzd-fotos-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kzd-fotos-item figcaption {
  padding: 0.375rem 0.5rem;
  text-align: center;
}

.kzd-fotos-download {
  font-size: 0.875rem;
  text-decoration: none;
  color: #a71e2b;
}

.kzd-fotos-download:hover,
.kzd-fotos-download:focus {
  text-decoration: underline;
}

.kzd-fotos-code {
  max-width: 420px;
}

.kzd-fotos-code-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.kzd-fotos-code-form input[type="text"] {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

.kzd-fotos-code-form button {
  margin-top: 0.75rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 6px;
  background: #a71e2b;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.kzd-fotos-code-fout {
  margin-top: 0.75rem;
  color: #b71c1c;
}

@media (min-width: 640px) {
  .kzd-fotos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .kzd-fotos-meer-btn {
    width: auto;
    min-width: 220px;
  }
}

@media (min-width: 768px) {
  .kzd-fotos-container {
    padding: 2rem 1.5rem 3.5rem;
  }
  .kzd-fotos-page .entry-title {
    font-size: 2rem;
  }
  .kzd-fotos-groep-titel {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .kzd-fotos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .kzd-fotos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.kzd-fotos-link {
  cursor: zoom-in;
}

body.kzd-lightbox-open {
  overflow: hidden;
}

/*
  Lightbox. De foto krijgt een vast kader per schermformaat (op groot scherm maximaal
  1100 bij 760 px) en vult dat kader zo goed mogelijk met behoud van verhouding. Alle
  bediening (kruisje, pijlen, titelbalk, teller en download) hangt met een kleine vaste
  marge NET BUITEN dat kader. Omdat het kader een vaste maat heeft, zitten de knoppen
  altijd op exact dezelfde plek, ongeacht het formaat van de individuele foto. De lege
  ruimte rond de foto wordt gevuld door een onscherpe gedimde kopie van diezelfde foto.
*/
.kzd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b0b0d;
  box-sizing: border-box;
  /* Vaste maten voor de bediening: ruimte tussen kader en knoppen, en de knopmaat. */
  --kzd-lb-rand: 0.375rem;
  --kzd-lb-knop: 2rem;
}

.kzd-lightbox-achtergrond {
  position: absolute;
  inset: -8%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(0.38) saturate(1.15);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.kzd-lightbox-achtergrond.is-zichtbaar {
  opacity: 1;
}

/*
  Het vaste kader. De breedte en hoogte reserveren aan alle kanten ruimte voor de knoppen
  en balken die er net buiten hangen, zodat niets ooit buiten het scherm valt.
*/
.kzd-lightbox-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 5.5rem);
  height: calc(100vh - 7rem);
  height: calc(100dvh - 7rem);
}

.kzd-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kzd-lightbox-img.is-geladen {
  opacity: 1;
}

/*
  De balken staan buiten het kader: de bovenbalk erboven, de onderbalk eronder. Geen
  gradientachtergrond meer nodig, want ze liggen niet meer over de foto heen.
*/
.kzd-lightbox-balk {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #fff;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.kzd-lightbox-balk-boven {
  bottom: 100%;
  margin-bottom: var(--kzd-lb-rand);
}

.kzd-lightbox-balk-onder {
  top: 100%;
  margin-top: var(--kzd-lb-rand);
}

.kzd-lightbox-editie,
.kzd-lightbox-tel {
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/*
  Alle bediening in één consistente stijl. De id in de selector is nodig omdat de
  themastijlen van Elementor anders hun eigen (roze) knopopmaak over deze knoppen heen
  leggen; met de id winnen deze regels altijd.
*/
#kzd-lightbox .kzd-lightbox-download {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 17, 20, 0.55);
  color: #fff;
  font-weight: 600;
  font-size: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#kzd-lightbox .kzd-lightbox-download:hover,
#kzd-lightbox .kzd-lightbox-download:focus {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  text-decoration: none;
}

#kzd-lightbox .kzd-lightbox-close,
#kzd-lightbox .kzd-lightbox-nav {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  width: var(--kzd-lb-knop);
  height: var(--kzd-lb-knop);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 17, 20, 0.55);
  color: #fff;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#kzd-lightbox .kzd-lightbox-close {
  flex-shrink: 0;
  margin-left: auto;
}

#kzd-lightbox .kzd-lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

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

#kzd-lightbox .kzd-lightbox-prev {
  right: 100%;
  margin-right: var(--kzd-lb-rand);
}

#kzd-lightbox .kzd-lightbox-next {
  left: 100%;
  margin-left: var(--kzd-lb-rand);
}

#kzd-lightbox .kzd-lightbox-close:hover,
#kzd-lightbox .kzd-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}

#kzd-lightbox .kzd-lightbox-close:focus-visible,
#kzd-lightbox .kzd-lightbox-nav:focus-visible,
#kzd-lightbox .kzd-lightbox-download:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kzd-lightbox-img,
  .kzd-lightbox-achtergrond {
    transition: none;
  }
}

@media (min-width: 640px) {
  .kzd-lightbox {
    --kzd-lb-rand: 0.5rem;
    --kzd-lb-knop: 2.5rem;
  }

  .kzd-lightbox-figure {
    width: calc(100vw - 8rem);
    height: calc(100vh - 8.5rem);
    height: calc(100dvh - 8.5rem);
  }

  .kzd-lightbox-balk {
    font-size: 0.85rem;
  }
}

@media (min-width: 1024px) {
  .kzd-lightbox-figure {
    width: min(calc(100vw - 10rem), 1100px);
    height: min(calc(100vh - 10rem), 760px);
    height: min(calc(100dvh - 10rem), 760px);
  }
}