/* 
   Infinite Slow Loop for Featured Templates
   Mobile Only Carousel
*/

.featured-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
    position: relative;
}

.featured-carousel-wrapper.no-snap {
    scroll-snap-type: none !important;
}

.featured-carousel-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    flex-wrap: nowrap;
    /* Ensure single row always */
    transition: transform 0.1s linear;
}

.featured-carousel-track.is-looping {
    animation: scrollInfinite 30s linear infinite;
}

.featured-carousel-track.is-looping:hover {
    animation-play-state: paused;
}

/* Mobile: Scrollable & Snap */
@media (max-width: 768px) {
    .featured-carousel-wrapper {
        overflow-x: auto;
        padding: 1rem 0;
    }

    .featured-carousel-wrapper.is-looping {
        overflow-x: hidden;
        /* Hide scrollbar when looping */
    }

    .featured-carousel-wrapper::-webkit-scrollbar {
        display: none;
    }

    .featured-carousel-track {
        gap: 1rem;
        padding: 0 1rem;
    }

    .template-card {
        flex: 0 0 280px;
        /* Fixed width on mobile for better slider control */
        scroll-snap-align: center;
    }
}

/* Desktop: Static & Centered */
@media (min-width: 769px) {
    .featured-carousel-wrapper {
        display: flex;
        justify-content: center;
        padding: 4rem 0;
        overflow: hidden;
    }

    .featured-carousel-track:not(.is-looping) {
        justify-content: center;
        width: auto;
        max-width: 1400px;
        margin: 0 auto;
    }

    .template-card {
        width: 350px;
        flex-shrink: 0;
    }
}

@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 1rem));
        /* Adjust for gap */
    }
}