/* SavvyGreat Snapic mobile viewer — full portrait viewport + vertical swipe.
   Loaded after the base gallery CSS so these rules only tighten mobile behavior. */

@media (max-width: 760px) {
    html.sgsnapic-viewer-open,
    html.sgsnapic-viewer-open body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .sgsnapic-photo-viewer,
    .sgsnapic-photo-viewer[open] {
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    @supports (height: 100svh) {
        .sgsnapic-photo-viewer,
        .sgsnapic-photo-viewer[open] {
            height: 100svh !important;
            min-height: 100svh !important;
            max-height: 100svh !important;
        }
    }

    @supports (height: 100dvh) {
        .sgsnapic-photo-viewer,
        .sgsnapic-photo-viewer[open] {
            height: 100dvh !important;
            min-height: 100dvh !important;
            max-height: 100dvh !important;
        }
    }

    .sgsnapic-photo-viewer-shell,
    .sgsnapic-photo-viewer-content,
    .sgsnapic-photo-stage {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
    }

    .sgsnapic-photo-viewer-shell,
    .sgsnapic-photo-viewer-content {
        position: absolute !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    .sgsnapic-photo-stage {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: #000 !important;
        touch-action: pan-x pinch-zoom;
        overscroll-behavior: contain;
        --sgsnapic-swipe-y: 0px;
        --sgsnapic-swipe-opacity: 1;
    }

    /* Mobile always uses one portrait-screen presentation. The source image is
       never rotated or stretched. Both landscape and portrait photos occupy the
       largest possible centered area while preserving their original pixels. */
    .sgsnapic-photo-stage > img,
    .sgsnapic-photo-stage[data-sgsnapic-orientation] > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: translate3d(0, var(--sgsnapic-swipe-y), 0) !important;
        opacity: var(--sgsnapic-swipe-opacity) !important;
        transition: transform 170ms cubic-bezier(.2, .8, .2, 1), opacity 170ms ease !important;
        will-change: transform, opacity;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    .sgsnapic-photo-stage.is-swipe-dragging > img {
        transition: none !important;
    }

    .sgsnapic-photo-stage.is-swipe-settling > img {
        transition: transform 120ms ease-out, opacity 120ms ease-out !important;
    }

    /* Information overlays the image instead of stealing image dimensions. */
    .sgsnapic-photo-info {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Previous/next controls stay together at the top-right. They are a fallback
       to the primary up/down finger gesture and do not cover the image center. */
    .sgsnapic-photo-nav {
        top: calc(7px + env(safe-area-inset-top)) !important;
        bottom: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        opacity: .82;
        background: rgba(0, 0, 0, .48) !important;
        transition: opacity 140ms ease, background-color 140ms ease;
    }

    .sgsnapic-photo-nav-prev {
        left: auto !important;
        right: 60px !important;
    }

    .sgsnapic-photo-nav-next {
        left: auto !important;
        right: 8px !important;
    }

    .sgsnapic-photo-nav:active,
    .sgsnapic-photo-nav:focus-visible {
        opacity: 1;
    }
}

/* Do not switch the viewer into a separate landscape image layout. If the
   device/browser rotates, the same centered portrait-viewer rules remain. */
@media (max-width: 760px) and (orientation: landscape) {
    .sgsnapic-photo-stage > img,
    .sgsnapic-photo-stage[data-sgsnapic-orientation] > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .sgsnapic-photo-info {
        max-height: 46dvh !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgsnapic-photo-stage > img,
    .sgsnapic-photo-nav {
        transition: none !important;
    }
}