/* Gallery hub cross-fade slideshow — Stage J token pass. The JS behavior
   (setInterval cross-fade + data-bg lazy loading) is untouched. */
.gal-slider {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--sj-paper);
    overflow: hidden;
}

.container-slider {
    position: relative;
    width: 60%;
    margin: auto;
    height: 500px;
    border-radius: var(--sj-r-card);
    box-shadow: var(--sj-shadow-2);
    overflow: hidden;
}

/* K16 (owner): slides hold photos of MIXED aspect ratios — a portrait or a
   4:3 crop dropped into this landscape box used to be `cover`-zoomed, so the
   top and bottom were sliced off and only the middle band showed.
   Recipe now: the WHOLE photo is always visible (`contain`), and the leftover
   space is filled by the same photo blurred + dimmed, so there are no dead
   bars. The parent keeps a plain `cover` background as the fallback if
   pseudo-elements are unavailable. JS/markup unchanged. */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
}
/* backdrop: same image (inherited), zoomed, blurred and darkened.
   inset overscan hides the soft edge the blur leaves at the border. */
.slide::before {
    content: "";
    position: absolute;
    inset: -6%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(.55) saturate(.9);
}
/* the photo itself — complete, never cropped */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .container-slider {
        /* was width:100% — edge-to-edge, so the rounded corners and shadow
           were clipped off the viewport and the slider looked unpadded. */
        width: auto;
        margin: 0 clamp(14px, 4vw, 22px);
        /* a 4:3 window keeps letterboxing small for the common 16:9 and 4:3
           photos while staying comfortably inside a phone screen. */
        height: auto;
        aspect-ratio: 4 / 3;
    }
}
@media (max-width: 380px) {
    .slide::before { filter: blur(12px) brightness(.55) saturate(.9); }
}