/* ============================================================
   Gallery Spotlight Unfold (GSU) — Styles
   ============================================================ */

/* FOUC prevention — hide gallery items until JS initializes */
.fxe-gsu .gallery-item {
    opacity: 0;
}

/* Kill Elementor's transition on the pinned widget — prevents animated unpin glitch */
.fxe-gsu {
    transition: none !important;
}

/* Gallery wrapper — override Elementor grid to center-stacked layout */
.fxe-gsu .elementor-image-gallery {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fxe-gsu .gallery {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Gallery items — absolutely positioned at center */
.fxe-gsu .gallery-item {
    position: absolute;
    width: 200px;
    height: 250px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    will-change: transform, opacity;
}

.fxe-gsu .gallery-item .gallery-icon {
    width: 100%;
    height: 100%;
}

.fxe-gsu .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hide captions during animation */
.fxe-gsu .gallery-caption {
    display: none;
}

/* ─── Editor Preview ─────────────────────────────────────── */
/* Editor uses same stacked layout and animation as frontend */

/* ─── Double Image Panel ─────────────────────────────────── */

.fxe-gsu-double-image {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    max-width: 1000px;
    height: 500px;
    display: flex;
    overflow: hidden;
    transform: scale(0);
    will-change: transform, opacity;
    z-index: 10;
}

.fxe-gsu-panel {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.fxe-gsu-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fxe-gsu-panel img.fxe-gsu-top-move,
.fxe-gsu-panel img.fxe-gsu-bottom-move {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}
