/* =========================================================
   WP Page Widgets — Infinite Image Carousel
   Pure CSS infinite horizontal scroll via repeated track.
   ========================================================= */

.wpw-infinite-carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.wpw-infinite-carousel:active {
    cursor: grabbing;
}

.wpw-infinite-carousel img {
    pointer-events: none; /* Prevents default browser image drag */
}

/* ── Track ────────────────────────────────────────────── */

.wpw-carousel-track {
    display: flex;
    width: max-content;
    animation: wpw-scroll 0s linear infinite paused; /* duration set by JS after measuring real track width */
    will-change: transform;
    padding: var(--wpw-v-padding, 20px) 0;
}

/* ── Slides ───────────────────────────────────────────── */

.wpw-carousel-slide {
    flex: 0 0 auto;
    padding-right: var(--wpw-gap, 20px);
}

.wpw-carousel-slide img {
    display: block;
    height: var(--wpw-height, 300px);
    width: var(--wpw-width, auto);
    object-fit: var(--wpw-fit, cover);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease, box-shadow 0.4s ease;
}

/* Grayscale */
.wpw-grayscale .wpw-carousel-slide img {
    filter: grayscale(100%);
}
.wpw-grayscale .wpw-carousel-slide:hover img {
    filter: grayscale(0%);
}

/* Scale on hover */
.wpw-scale-hover .wpw-carousel-slide:hover img {
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

/* Shadow */
.wpw-has-shadow .wpw-carousel-slide img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wpw-has-shadow .wpw-carousel-slide:hover img {
    box-shadow: 0 15px 45px rgba(0,0,0,0.2);
}

/* ── Keyframes ────────────────────────────────────────── */

@keyframes wpw-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--wpw-loop-shift, 0)); }
}

/* ── Modifiers ────────────────────────────────────────── */

/* Reverse direction */
.wpw-infinite-carousel.wpw-reverse .wpw-carousel-track {
    animation-direction: reverse;
}

/* Pause on hover */
.wpw-infinite-carousel.wpw-pause-hover:hover .wpw-carousel-track {
    animation-play-state: paused;
}

/* ── Smooth edge fade (optional aesthetic) ────────────── */
.wpw-infinite-carousel.wpw-has-gradients::before,
.wpw-infinite-carousel.wpw-has-gradients::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--wpw-gradient-width, 60px);
    z-index: 2;
    pointer-events: none;
}

.wpw-infinite-carousel.wpw-has-gradients::before {
    left: 0;
    background: linear-gradient(to right, var(--wpw-gradient-color, rgba(255,255,255,1)) 0%, var(--wpw-gradient-color0, rgba(255,255,255,0)) 100%);
}

.wpw-infinite-carousel.wpw-has-gradients::after {
    right: 0;
    background: linear-gradient(to left, var(--wpw-gradient-color, rgba(255,255,255,1)) 0%, var(--wpw-gradient-color0, rgba(255,255,255,0)) 100%);
}