/* ============================================================
   Meneer van der Wafel: sfeergalerij
   Foto-raster met vergrootweergave. Geen externe bibliotheken.
   ============================================================ */

.mvdw-galerij {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .mvdw-galerij { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .mvdw-galerij { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.mvdw-foto {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #E6C99F;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  box-shadow: 0 6px 18px -8px rgba(45, 27, 16, 0.28);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.35s ease;
}
.mvdw-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.mvdw-foto:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -12px rgba(45, 27, 16, 0.4); }
.mvdw-foto:hover img { transform: scale(1.07); }
.mvdw-foto:focus-visible { outline: 3px solid #B86A1B; outline-offset: 3px; }

/* Enkele foto's mogen groter, dat geeft rust in het raster */
.mvdw-foto--breed { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 639px) { .mvdw-foto--breed { grid-column: span 2; aspect-ratio: 4 / 3; } }

.mvdw-foto__bijschrift {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(45,27,16,0.82), rgba(45,27,16,0));
  color: #F7EFE4;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mvdw-foto:hover .mvdw-foto__bijschrift,
.mvdw-foto:focus-visible .mvdw-foto__bijschrift { opacity: 1; transform: none; }

/* Op aanraakschermen geen bijschrift over de foto: dat leest slecht.
   De tekst staat wel in de vergrootweergave. */
@media (hover: none), (max-width: 639px) {
  .mvdw-foto__bijschrift { display: none; }
}

/* ---------- Vergrootweergave ---------- */
.mvdw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(28, 17, 10, 0.94);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.mvdw-lightbox.open { display: flex; animation: mvdw-fade 0.25s ease; }
@keyframes mvdw-fade { from { opacity: 0; } to { opacity: 1; } }

.mvdw-lightbox__figuur {
  max-width: min(1200px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mvdw-lightbox__figuur img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8);
  animation: mvdw-zoom 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes mvdw-zoom { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

.mvdw-lightbox__tekst {
  color: #E6C99F;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  text-align: center;
  max-width: 46ch;
}
.mvdw-lightbox__teller {
  color: rgba(247, 239, 228, 0.5);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-family: Inter, system-ui, sans-serif;
}

.mvdw-knop {
  position: absolute;
  background: rgba(247, 239, 228, 0.12);
  border: 1px solid rgba(230, 201, 159, 0.35);
  color: #F7EFE4;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.mvdw-knop:hover { background: #B86A1B; transform: scale(1.08); }
.mvdw-knop--sluit  { top: 18px; right: 18px; }
.mvdw-knop--vorige { left: 18px;  top: 50%; transform: translateY(-50%); }
.mvdw-knop--volgende { right: 18px; top: 50%; transform: translateY(-50%); }
.mvdw-knop--vorige:hover, .mvdw-knop--volgende:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) {
  .mvdw-knop--vorige  { left: 8px; }
  .mvdw-knop--volgende { right: 8px; }
}

/* ---------- Video ---------- */
.mvdw-videoblok {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #2D1B10;
  box-shadow: 0 14px 40px -16px rgba(45, 27, 16, 0.5);
}
.mvdw-videoblok video,
.mvdw-videoblok img.mvdw-video__poster { width: 100%; display: block; }
.mvdw-videoblok video { background: #2D1B10; }
.mvdw-video__start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(45, 27, 16, 0.35);
  border: 0;
  cursor: pointer;
  color: #F7EFE4;
  font-family: Inter, system-ui, sans-serif;
  transition: background 0.25s;
}
.mvdw-video__start:hover { background: rgba(45, 27, 16, 0.15); }
.mvdw-video__cirkel {
  width: 74px; height: 74px;
  border-radius: 999px;
  background: rgba(184, 106, 27, 0.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mvdw-video__start:hover .mvdw-video__cirkel { transform: scale(1.1); }
.mvdw-video__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }

@media (prefers-reduced-motion: reduce) {
  .mvdw-foto, .mvdw-foto img, .mvdw-lightbox__figuur img, .mvdw-video__cirkel { transition: none; animation: none; }
}