/* Maps open in full view (static/js/map_zoom.js). */
img.mz-zoomable { cursor: zoom-in; }
img.mz-zoomable:focus-visible { outline: 3px solid #f1c40f; outline-offset: 3px; }
html.mz-lock { overflow: hidden; }
.mz-box { position: fixed; inset: 0; z-index: 300000; display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px;
    background: rgba(4, 20, 14, 0.9); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.mz-box.open { opacity: 1; visibility: visible; }
.mz-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mz-figure img { width: min(1600px, calc(100vw - 48px)); height: calc(100vh - 130px); object-fit: contain; border-radius: 10px; background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); cursor: zoom-in; transform-origin: 0 0; transform: translate(2%, 2%) scale(.96);
    transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.mz-box.open .mz-figure img { transform: none; }
/* clicked: the picture zooms into that spot and pans with the pointer (js/map_zoom.js sets the transform);
   the figure clips it so it never spills over the close button or the caption */
.mz-figure { border-radius: 10px; }
.mz-box.mz-zoomed .mz-figure { overflow: hidden; }
.mz-box.mz-zoomed .mz-figure img { cursor: zoom-out; box-shadow: none; }
.mz-box.mz-panning .mz-figure img { transition: none; }
.mz-box.mz-zoomed .mz-figure figcaption { display: none; }
.mz-figure figcaption { color: #e6f2ec; font: 600 15px/1.4 'Plus Jakarta Sans', sans-serif; text-align: center; }
.mz-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.mz-close:hover, .mz-close:focus-visible { background: rgba(255, 255, 255, 0.28); outline: none; }
html[data-opera-dark="true"] .mz-box { filter: invert(1) hue-rotate(180deg); }

/* the magnifying lens over map pictures (js/map_zoom.js): one fixed circle that follows the pointer */
.mz-lens { position: fixed; left: 0; top: 0; z-index: 9000; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-color: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(26, 71, 42, .35), 0 16px 32px -12px rgba(10, 46, 26, .45); opacity: 0; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1); }
.mz-lens.on { opacity: 1; }
img.mz-zoomable { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .mz-lens, .mz-figure img { transition: none; } }