/* ==========================================================================
   Gallery Slideshow Block
   Cross-fades between slides; each slide is a preset multi-image collage.
   Images cover their grid cell (object-fit: cover). Clickable dots below.
   ========================================================================== */

.gallery-slideshow {
    --gs-height: 70vh;
    --gs-height-mobile: 60vh;
    --gs-gap: 12px;
    --gs-fade: 1s;
    --gs-dot: rgba(0, 0, 0, 0.25);
    --gs-dot-active: rgba(0, 0, 0, 0.8);
    width: 100%;
}

/* --- Viewport: the stage the slides cross-fade within --------------------- */
.gallery-slideshow .gs-viewport {
    position: relative;
    width: 100%;
}

/* Fixed mode: a set height; columns scale horizontally, reflows on mobile. */
.gallery-slideshow.gs-mode-fixed .gs-viewport {
    height: var(--gs-height);
}

/* Scale mode: a fixed-aspect-ratio canvas. Height is derived from width, so
   the whole collage scales as one unit — every cell keeps its ratio and
   position at any width, with no reflow. */
.gallery-slideshow.gs-mode-scale .gs-viewport {
    aspect-ratio: var(--gs-aspect, 16 / 9);
}

/* --- Slide: absolutely stacked so it can fade over the previous one -------- */
.gallery-slideshow .gs-slide {
    position: absolute;
    inset: 0;
    display: grid;
    gap: var(--gs-gap);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gs-fade, 1s) ease-in-out;
    will-change: opacity;
}

.gallery-slideshow .gs-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* --- Cell + image: fill the cell, crop to cover --------------------------- */
.gallery-slideshow .gs-cell {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.gallery-slideshow .gs-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ==========================================================================
   Preset Layouts (grid placement per mockup)
   ========================================================================== */

/* Layout 1 — 2 columns: stacked pair (left) + tall image (right). 3 images. */
.gallery-slideshow .gs-slide--two-col-stacked-pair {
    grid-template-columns: 0.82fr 1.18fr;
    grid-template-rows: 1fr 1fr;
}
.gallery-slideshow .gs-slide--two-col-stacked-pair .gs-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery-slideshow .gs-slide--two-col-stacked-pair .gs-cell:nth-child(2) { grid-column: 1; grid-row: 2; }
.gallery-slideshow .gs-slide--two-col-stacked-pair .gs-cell:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

/* Layout 2 — 3 columns: tall, stacked pair (center), tall. 4 images. */
.gallery-slideshow .gs-slide--three-col-center-pair {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.gallery-slideshow .gs-slide--three-col-center-pair .gs-cell:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.gallery-slideshow .gs-slide--three-col-center-pair .gs-cell:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-slideshow .gs-slide--three-col-center-pair .gs-cell:nth-child(3) { grid-column: 2; grid-row: 2; }
.gallery-slideshow .gs-slide--three-col-center-pair .gs-cell:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }

/* Layout 3 — 3 columns: stacked pair, tall (center), stacked pair. 5 images. */
.gallery-slideshow .gs-slide--three-col-two-pairs {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.gallery-slideshow .gs-slide--three-col-two-pairs .gs-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery-slideshow .gs-slide--three-col-two-pairs .gs-cell:nth-child(2) { grid-column: 1; grid-row: 2; }
.gallery-slideshow .gs-slide--three-col-two-pairs .gs-cell:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.gallery-slideshow .gs-slide--three-col-two-pairs .gs-cell:nth-child(4) { grid-column: 3; grid-row: 1; }
.gallery-slideshow .gs-slide--three-col-two-pairs .gs-cell:nth-child(5) { grid-column: 3; grid-row: 2; }

/* ==========================================================================
   Dots
   ========================================================================== */
.gallery-slideshow .gs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.gallery-slideshow .gs-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--gs-dot);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gallery-slideshow .gs-dot:hover {
    background-color: var(--gs-dot-active);
}

.gallery-slideshow .gs-dot.is-active {
    background-color: var(--gs-dot-active);
    transform: scale(1.25);
}

.gallery-slideshow .gs-dot:focus-visible {
    outline: 2px solid var(--gs-dot-active);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive (fixed mode only)
   In fixed mode, simplify every layout to a 2-column grid that auto-flows in
   fill order on small screens. Scale mode never reflows — its aspect-ratio
   canvas already shrinks the whole collage proportionally.
   ========================================================================== */
@media (max-width: 768px) {
    .gallery-slideshow.gs-mode-fixed .gs-viewport {
        height: var(--gs-height-mobile);
    }
    .gallery-slideshow.gs-mode-fixed .gs-slide {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: 1fr;
    }
    .gallery-slideshow.gs-mode-fixed .gs-slide .gs-cell {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* ==========================================================================
   Editor Preview
   JS does not run in the editor, so the first slide shows via .is-active.
   ========================================================================== */
.gallery-slideshow-placeholder {
    padding: 2rem;
    border: 1px dashed #b5bcc2;
    border-radius: 4px;
    text-align: center;
    color: #50575e;
    background: #f6f7f7;
}

/* Fixed mode has no intrinsic height until JS/vh resolves; give it a floor so
   it's visible while editing. Scale mode gets its height from aspect-ratio. */
.editor-styles-wrapper .gallery-slideshow.gs-mode-fixed .gs-viewport,
.wp-admin .gallery-slideshow.gs-mode-fixed .gs-viewport {
    min-height: 320px;
}