/* ===== Masonry: container + items ===== */
.wow-gallery { position: relative; }
.wow-gallery .mz-item {
  position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 8px;
}
.wow-gallery .mz-item img {
  display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer;
  opacity: 0; transition: opacity .25s ease;
}
.wow-gallery.masonry-ready .mz-item img { opacity: 1; }

/* (optioneel) oude plugin-achtergronden uitschakelen */
.wow-gallery img, .wow-gallery .mz-item { background: none !important; background-image: none !important; }

/* Hover: vergrootglas-sprite (2 frames boven elkaar) */
.wow-gallery .mz-item::after{
  content:""; position:absolute; left:50%; top:50%;
  width:32px; height:32px; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .25s ease, background-position .2s ease;
  background-image:url('/extra/images/icon-zoom32.png');
  background-repeat:no-repeat; background-size:100% 200%; background-position:center top;
  pointer-events:none;
}
.wow-gallery .mz-item:hover::after{ opacity:.95; background-position:center bottom; }

/* Hover-caption (zwart) */
.wow-gallery .mz-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.55rem .8rem; font-size:.95rem; line-height:1.25;
  color:#fff; background:rgba(0,0,0,.85);
  opacity:0; transform:translateY(8px);
  transition:opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.wow-gallery .mz-item:hover .mz-caption{ opacity:1; transform:translateY(0); }

/* ===== Lightbox ===== */
.wow-lightbox.hidden{ display:none; }
.wow-lightbox{ position:fixed; inset:0; z-index:9999; }
.wow-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.92); backdrop-filter:saturate(80%) blur(2px); }

/* Stage: 1 kolom (caption boven, beeld eronder) */
.wow-stage{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr;
  align-items:center; justify-items:center;
  padding-left:max(8px, env(safe-area-inset-left,0px));
  padding-right:max(8px, env(safe-area-inset-right,0px));
  box-sizing:border-box; color:#f3f3f3;
}

/* Caption boven beeld, echt gecentreerd */
.wow-cap-top{
  grid-column:1; grid-row:1; justify-self:center; margin-inline:auto;
  max-width:min(92vw,1400px); margin-top:12px;
  background:rgba(0,0,0,.9); color:#fff; padding:.5rem .75rem;
  font-size:14px; line-height:1.3; border-radius:6px; text-align:center;
}

/* Beeld gecentreerd */
.wow-figure{
  grid-column:1; grid-row:2;
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; margin:0;
}
.wow-image{
  display:block; margin:0 auto;
  max-width:min(92vw,1400px);
  max-height:80vh;               /* jouw keuze */
  width:auto; height:auto; transition:transform .15s ease;
}

/* ===== Knoppen: overlay, vaste posities ===== */
.wow-btn, .wow-prev, .wow-next, .wow-close{
  position:absolute; z-index:10001;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; border-radius:9999px; cursor:pointer;
  width:60px; height:60px; font-size:48px;
  background:rgba(0,0,0,.35); color:#fff;
  border: none;
}
.wow-prev{ left:max(12px, env(safe-area-inset-left,0px));  top:50%; transform:translateY(-50%); }
.wow-next{ right:max(12px, env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); }
.wow-close{
  right:max(12px, env(safe-area-inset-right,0px));
  top:calc(max(12px, env(safe-area-inset-top,0px)) + 8px);
}

/* Hoverkleuren + stabiele pijl-translate */
.wow-btn:hover{ background:#fff; color:#000; }
.wow-prev:hover, .wow-next:hover{ transform:translateY(-50%) scale(1.06); }
.wow-close:hover{ transform:scale(1.06); }

/* ===== Mobiel ===== */
@media (max-width:900px){
  .wow-stage{ justify-items:stretch; }           /* figuur 100% breed */
  .wow-cap-top{
    max-width:92vw;
    margin-top:calc(max(8px, env(safe-area-inset-top,0px)) + 8px);
  }
  .wow-image{ max-width:100%; }                  /* nooit breder dan rij */
  .wow-btn{ width:72px; height:72px; font-size:40px; }
  .wow-close{ width:64px; height:64px; font-size:44px; }
}

/* Minder animatie voor wie dat wil */
@media (prefers-reduced-motion: reduce){
  .wow-btn, .mz-item img, .mz-caption{ transition:none; }
}