/* Shared vertical photo slider (Favorites, Auto Scroller). Markup: .slider > .slide > img + .caption, plus .slider-controls.
   Mobile first: one full-screen photo at a time. See wwwroot/js/slider.js and zoom.js. */

.slider {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    position: relative;
    background: #000;
}

    .slider::-webkit-scrollbar {
        display: none;
    }

.slider .slide {
    position: relative;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .slider .slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #050505;
        transform-origin: center;
        cursor: zoom-in;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
    }

/* Zoom (see zoom.js): vertical swipes stay native; pinches and pans are handled in script.
   While a photo is zoomed the slider stops scrolling so drags pan the photo instead. */
.slider {
    touch-action: pan-y;
}

.slider .slide {
    overflow: hidden;
}

.slider.zoomed {
    overflow: hidden;
    touch-action: none;
}

    .slider.zoomed .slide img {
        cursor: grab;
        will-change: transform;
    }

    .slider.zoomed .caption {
        opacity: 0;
    }

.slider.dragging .slide img {
    cursor: grabbing;
}

.slider .caption {
    position: absolute;
    left: 1rem;
    right: 4.5rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider-controls {
    position: fixed;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

    .slider-controls button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    }

        .slider-controls button:hover:not(:disabled) {
            background: var(--accent);
            border-color: var(--accent);
        }

        .slider-controls button:disabled {
            opacity: 0.3;
            cursor: default;
        }

    .slider-controls svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
    }


.slider-controls .counter {
    min-width: 3.5rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    text-shadow: 0 1px 3px #000;
    font-variant-numeric: tabular-nums;
}

/* Desktop: the portrait sits centred like a print, controls stay to the right. */
@media (min-width: 900px) {
    .slider .slide {
        padding: 5.5rem 0 2.5rem;
    }

        .slider .slide img {
            width: auto;
            max-width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
        }

    .slider .caption {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 0.75rem;
        font-size: 0.95rem;
    }

    .slider-controls {
        right: 2rem;
        bottom: 50%;
        transform: translateY(50%);
    }
}