/* ASPIRIN UI V216 — PINCH ZOOM FOR INSPECTION AND MEDIA */

.a215-map-stage {
    position: relative;
    justify-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
}

.a215-map-stage-left,
.a215-map-stage-right {
    display: grid !important;
    overflow: hidden !important;
    padding: 3px 0 6px;
    scroll-behavior: auto;
}

.a215-map-stage .a215-map,
.a21441-body .a21441-photo,
.a21441-body .a21441-video {
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform 180ms ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

.a215-map-stage.a216-zoom-moving .a215-map,
.a21441-body.a216-zoom-moving .a21441-photo,
.a21441-body.a216-zoom-moving .a21441-video {
    transition: none;
}

.a215-map-stage.a216-zoomed,
.a21441-body.a216-zoomed {
    cursor: grab;
    touch-action: none !important;
}

.a215-map-stage.a216-zoomed:active,
.a21441-body.a216-zoomed:active {
    cursor: grabbing;
}

.a215-map-stage .a215-map,
.a215-map-stage .a146-zone,
.a215-map-stage .a215-map-side {
    touch-action: inherit !important;
}

.a216-zoom-controls {
    position: absolute;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(217,255,67,.42);
    border-radius: 999px;
    background: rgba(12,15,12,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    touch-action: none !important;
    user-select: none;
}

.a216-zoom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: transparent;
    color: #f5f5f5;
    font: 850 20px/1 system-ui, sans-serif;
    cursor: pointer;
    touch-action: none !important;
}

.a216-zoom-button:last-child {
    border-right: 0;
}

.a216-zoom-button.a216-zoom-reset {
    min-width: 58px;
    color: #d9ff43;
    font-size: 11px;
}

.a216-zoom-button:disabled {
    opacity: .32;
}

.a216-map-controls {
    position: relative;
    left: 50%;
    margin: 6px auto 2px;
    transform: translateX(-50%);
}

.a216-media-controls {
    left: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
}

.a21441-body {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
}

.a21441-viewer.a216-zoomed .a21441-nav {
    opacity: .28;
    pointer-events: none;
}

.a21441-viewer.a216-zoomed .a21441-counter {
    opacity: .72;
}

@media (max-width: 600px) {
    .a215-map-stage-left,
    .a215-map-stage-right {
        min-height: clamp(220px, 58vw, 320px) !important;
    }

    .a215-map-side {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 540px !important;
        height: auto;
    }

    .a216-zoom-button {
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        font-size: 19px;
    }

    .a216-zoom-button.a216-zoom-reset {
        min-width: 54px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a215-map-stage .a215-map,
    .a21441-body .a21441-photo,
    .a21441-body .a21441-video {
        transition: none;
    }
}