/* ==========================================================================
   GCS Gallery Carousel — frontend
   ========================================================================== */

/* Override the gallery block's flex layout so Slick / marquee can inject DOM. */
.wp-block-gallery.gcs-gallery-carousel,
.wp-block-gallery.has-nested-images.gcs-gallery-carousel {
    display: block !important;
    flex-wrap: initial !important;
    gap: 0 !important;
	overflow: hidden;
    z-index: 999;
}

.gcs-gallery-carousel .wp-block-image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Smush / generic lazy-load hide rules (opacity:0 on .lazyload, .lazyloading)
   would otherwise keep images invisible even when src is populated. */
.gcs-gallery-carousel img,
.gcs-gallery-carousel img.lazyload,
.gcs-gallery-carousel img.lazyloading,
.gcs-gallery-carousel img.lazyloaded {
    opacity: 1 !important;
}

/* ── Slick: arrows + dots ───────────────────────────────────────────────── */

.gcs-gallery-carousel .slick-prev,
.gcs-gallery-carousel .slick-next {
    z-index: 2;
    width: 36px;
    height: 36px;
}

.gcs-gallery-carousel .slick-prev { left:  10px; }
.gcs-gallery-carousel .slick-next { right: 10px; }

.gcs-gallery-carousel .slick-prev::before,
.gcs-gallery-carousel .slick-next::before {
    font-size: 28px;
    color: #000;
}

.gcs-gallery-carousel .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 16px;
}

/* ── Slick: gap between slides ──────────────────────────────────────────── */

.gcs-gallery-carousel:not(.gcs-gallery-carousel--continuous) .slick-list {
    margin: 0 calc( var( --gcs-gap, 0px ) / -2 ) !important;
}

.gcs-gallery-carousel:not(.gcs-gallery-carousel--continuous) .slick-slide {
    box-sizing: border-box !important;
    padding: 0 calc( var( --gcs-gap, 0px ) / 2 ) !important;
}

/* Ensure nested figures don't re-expand into the padding via margins. */
.gcs-gallery-carousel:not(.gcs-gallery-carousel--continuous) .slick-slide > figure,
.gcs-gallery-carousel:not(.gcs-gallery-carousel--continuous) .slick-slide > .wp-block-image {
    margin: 0 !important;
    width: 100%;
}

/* ── Same-height mode (Slick, variableWidth=true) ───────────────────────── */

.gcs-gallery-carousel--fit-height:not(.gcs-gallery-carousel--continuous) .slick-slide {
    height: var( --gcs-fixed-height, 400px );
}

.gcs-gallery-carousel--fit-height:not(.gcs-gallery-carousel--continuous) .slick-slide > figure,
.gcs-gallery-carousel--fit-height:not(.gcs-gallery-carousel--continuous) .slick-slide > .wp-block-image {
    height: 100% !important;
    margin: 0 !important;
}

.gcs-gallery-carousel--fit-height:not(.gcs-gallery-carousel--continuous) .slick-slide img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* ── Continuous (CSS marquee) ───────────────────────────────────────────── */

/* Hide the gallery until JS finishes cloning + sizing, then fade in. */
.gcs-gallery-carousel[data-gcs-transition="continuous"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.gcs-gallery-carousel[data-gcs-transition="continuous"].gcs-marquee-initialized {
    opacity: 1;
}

.gcs-gallery-carousel--continuous {
    overflow: hidden;
    position: relative;
}

.gcs-gallery-carousel--continuous .gcs-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    animation: gcs-marquee-rtl var( --gcs-loop-duration, 30s ) linear infinite;
    will-change: transform;
	gap: var( --gcs-gap, 0px );
    touch-action: pan-y; /* let vertical page scroll through; JS handles horizontal drag */
}

.gcs-gallery-carousel--continuous[data-gcs-direction="ltr"] .gcs-marquee-track {
    animation-name: gcs-marquee-ltr;
}

.gcs-gallery-carousel--continuous .gcs-marquee-track > * {
    flex: 0 0 auto;
    /* Core gallery CSS targets .wp-block-gallery.has-nested-images figure.wp-block-image
       with specificity (1,3,1), so we need !important here to win. Gap uses margin-right
       so total track width = 2×content + 2×N×gap, keeping the -50% translate seamless. */
    margin: 0 !important;
}

/* Same-height mode: items size to image aspect at a fixed height. */
.gcs-gallery-carousel--continuous.gcs-gallery-carousel--fit-height .gcs-marquee-track > * {
    height: var( --gcs-fixed-height, 400px );
    width: auto !important;
}

.gcs-gallery-carousel--continuous.gcs-gallery-carousel--fit-height .gcs-marquee-track img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
}

/* Same-width mode: JS sets px widths; images fill the box. */
.gcs-gallery-carousel--continuous:not(.gcs-gallery-carousel--fit-height) .gcs-marquee-track img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Pause on hover — only when data-gcs-pause-on-hover="true". */
.gcs-gallery-carousel--continuous[data-gcs-pause-on-hover="true"]:hover .gcs-marquee-track {
    animation-play-state: paused;
}

@keyframes gcs-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes gcs-marquee-ltr {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@media ( prefers-reduced-motion: reduce ) {
    .gcs-gallery-carousel--continuous .gcs-marquee-track {
        animation: none;
    }
}