/* Beeldviewer (js/zoom.js, STIJLGIDS §23). Het vlak is in beide thema's donker (een foto kijk je op zwart, zoals Foto's
   op iPad/iPhone); tekst en knoppen wit op ≥ 85% zwart, contrast > 12:1 in licht en donker. Knoppen 48 px, safe-area
   rondom (iPad/iPhone met viewport-fit=cover). touch-action: none: de pagina zoomt of scrolt niet mee. */
:root{--oh-zoom-knop:rgba(0,0,0,.55);--oh-zoom-knop-hover:rgba(255,255,255,.16);--oh-zoom-tekst:#FFFFFF;
  --oh-zoom-tekst2:rgba(255,255,255,.82);--oh-zoom-focus:#7FB3E5}

/* Trigger: een knop rond het beeld, zonder eigen opmaak; de vorm komt van de plek waar hij staat (:where = specificiteit 0,
   dus de class van de tegel of kaart wint altijd; alleen de cursor en de focusrand zijn van de viewer). */
:where(.oh-zoom-trigger){display:block;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;max-width:100%;
  text-align:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(.oh-zoom-trigger) > img{display:block;max-width:100%}
button.oh-zoom-trigger{cursor:zoom-in}
button.oh-zoom-trigger:focus-visible{outline:2px solid var(--mud-palette-primary,#1E4E79);outline-offset:2px}

html.oh-zoom-open,html.oh-zoom-open body{overflow:hidden;overscroll-behavior:none}

.oh-zoom{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,calc(.94 * var(--oh-zoom-fade,1)));color:var(--oh-zoom-tekst);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;overscroll-behavior:contain}
.oh-zoom[hidden]{display:none}
.oh-zoom-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.oh-zoom-zoomed .oh-zoom-stage{cursor:grab}
/* Geen will-change: dan tekent de browser het beeld bij elke schaal opnieuw scherp. Wit vlak achter een doorzichtige
   tekening (svg/png van de plattegrond), zoals in de galerij. */
.oh-zoom-img{position:absolute;max-width:none;max-height:none;transform-origin:50% 50%;-webkit-user-drag:none;pointer-events:none;background:#FFFFFF}
.oh-zoom-img.oh-zoom-anim{transition:transform .2s ease-out}
.oh-zoom-loading .oh-zoom-img{opacity:0}
.oh-zoom-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--oh-zoom-tekst2);font-size:.875rem}
.oh-zoom-status:empty{display:none}

.oh-zoom-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:4px;
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 8px calc(16px + env(safe-area-inset-left,0px));
  background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.oh-zoom-bar > *{pointer-events:auto}
.oh-zoom-count{font-size:.875rem;min-width:3ch;color:var(--oh-zoom-tekst)}
.oh-zoom-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;color:var(--oh-zoom-tekst2)}

.oh-zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--oh-zoom-knop);color:var(--oh-zoom-tekst);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.oh-zoom-btn svg{width:24px;height:24px;fill:currentColor}
.oh-zoom-btn:hover{background:var(--oh-zoom-knop-hover)}
.oh-zoom-btn:focus-visible{outline:2px solid var(--oh-zoom-focus);outline-offset:2px}
.oh-zoom-btn:disabled{opacity:.38;cursor:default}
.oh-zoom-btn[hidden]{display:none}
.oh-zoom-prev,.oh-zoom-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.oh-zoom-bar{z-index:2}
.oh-zoom-prev{left:calc(8px + env(safe-area-inset-left,0px))}
.oh-zoom-next{right:calc(8px + env(safe-area-inset-right,0px))}

.oh-zoom-caption{position:absolute;left:0;right:0;bottom:0;max-height:30vh;overflow:auto;font-size:.875rem;line-height:1.4;
  padding:24px calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78) 24px);color:var(--oh-zoom-tekst)}
.oh-zoom-caption[hidden]{display:none}

/* Eén tik met een vinger: balken weg voor de volle foto; nog een tik: terug. */
.oh-zoom-bare .oh-zoom-bar,.oh-zoom-bare .oh-zoom-caption,.oh-zoom-bare .oh-zoom-prev,.oh-zoom-bare .oh-zoom-next{opacity:0;pointer-events:none}
.oh-zoom-bar,.oh-zoom-caption,.oh-zoom-prev,.oh-zoom-next{transition:opacity .15s}

/* Telefoon (< 600 px): vorige/volgende als vegen; de knoppen blijven (toegankelijk), kleiner in de hoek onderaan. */
@media (max-width:599.98px){
  .oh-zoom-prev,.oh-zoom-next{top:auto;transform:none;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .oh-zoom-caption{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.oh-zoom-img.oh-zoom-anim,.oh-zoom-bar,.oh-zoom-caption{transition:none}}
@media print{.oh-zoom{display:none}}