/* Standalone Infinite Slider - Complete Implementation */

/* Base slider styles (extracted from Swiffy Slider) */
.swiffy-slider {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.swiffy-slider * {
    box-sizing: border-box;
}

.slider-container {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.slider-container > * {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Custom Infinite Slider implementation */
.swiffy-slider.slider-nav-autoplay {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.swiffy-slider.slider-nav-autoplay .slider-container {
    display: flex;
    height: 100%;
    transition: transform 1s ease; /* Slower transition for smooth movement */
    /* Remove scroll-based behavior */
    overflow: visible;
    scroll-snap-type: none;
    /* Remove grid layout */
    grid: none;
    grid-auto-flow: unset;
    /* Remove any gaps between slides */
    gap: 0;
    column-gap: 0;
    row-gap: 0;
}

/* Ensure slides are sized correctly */
.swiffy-slider.slider-nav-autoplay .slider-container > * {
    flex: 0 0 100%; /* Use flex-basis instead of width */
    min-width: 100%;
    max-width: 100%;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Show navigation for manual control */
.swiffy-slider.slider-nav-autoplay .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.swiffy-slider.slider-nav-autoplay .slider-nav:hover {
    background: rgba(0,0,0,0.7);
}

.swiffy-slider.slider-nav-autoplay .slider-nav .slider-arrow {
    width: 24px;
    height: 24px;
    color: white;
}

.swiffy-slider.slider-nav-autoplay:hover .slider-nav {
    opacity: 1;
}

.swiffy-slider.slider-nav-autoplay .slider-nav:first-of-type {
    left: 10px;
}

.swiffy-slider.slider-nav-autoplay .slider-nav.slider-nav-next {
    right: 10px;
}

/* Hide indicators since they won't sync */
.swiffy-slider.slider-nav-autoplay .slider-indicators {
    display: none;
}

/* Preserve image display */
.swiffy-slider.slider-nav-autoplay .slider-container .li-div-img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.swiffy-slider.slider-nav-autoplay .slider-container .li-div-img > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FDFDFD;
    margin: 0;
    padding: 0;
}

.swiffy-slider.slider-nav-autoplay .slider-container .li-div-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show entire image without cropping */
}

/* Mobile frames are intentionally compact; crop rather than letterbox images
   whose source proportions do not match the shared 16:9 slider ratio. */
@media (max-width: 767px) {
    .swiffy-slider.slider-item-ratio-16x9 {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .swiffy-slider.slider-nav-autoplay .slider-container .li-div-img,
    .swiffy-slider.slider-nav-autoplay .slider-container .li-div-img > div,
    .swiffy-slider.slider-nav-autoplay .slider-container .li-div-img img {
        height: 100% !important;
    }

    .swiffy-slider.slider-nav-autoplay .slider-container .li-div-img img {
        object-fit: cover;
    }
}

/* No timing adjustments needed - JavaScript handles timing */