/* Category Carousel Styles - Cleaned and LTR Optimized */

/* Category Section Styles */
.category-section {
    margin-bottom: 40px;
    position: relative;
}

.category-title {
    text-align: center;
    font-size: 40px;
    color: var(--clr-main);
    margin-bottom: 20px;
    line-height: 1.1;
}

/* Carousel Container */
.carousel-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 30px; /* Space for navigation buttons */
    direction: ltr; /* Force LTR for carousel */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    will-change: transform; /* Optimize for animations */
    direction: ltr; /* Ensure LTR flex direction */
}

/* Pause animation on hover for better UX */
.carousel-container:hover .carousel-track {
    transition-duration: 0.3s;
}

/* Loading state */
.carousel-container.loading .carousel-track {
    opacity: 0.7;
}

/* Navigation Buttons */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-linear-gradient);
    color: var(--clr-on-gradient);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-round);
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.2s ease;
    opacity: 0.8;
    box-shadow: 0 2px 10px var(--overlay);
}

.carousel-nav:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Inside the container, not straddling its edge. `.carousel-container` is
   `overflow: hidden` — it has to be, the track runs past both sides — so a
   button hung at -25px has exactly half of its 50px clipped away and renders as
   a half-disc sitting behind the cards. */
.carousel-nav.prev {
    left: 6px;
}

.carousel-nav.next {
    right: 6px;
}

.carousel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%) scale(0.9);
}

/* Carousel Items */
.carousel-container .listing {
    flex-shrink: 0;
    width: 300px; /* Fixed width for carousel items */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Ensure smooth performance */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Add hover effect for better interactivity */
.carousel-container .listing:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 10px 25px var(--overlay);
}

/* Hide original grid styles when in carousel */
.carousel-container .grid {
    display: flex;
    grid-template-columns: unset;
    grid-column-gap: unset;
    grid-row-gap: unset;
    grid-auto-rows: unset;
}

/* Smooth scrolling for better UX */
.carousel-track {
    scroll-behavior: smooth;
}

/* Loading state for carousel */
.carousel-container.loading .carousel-nav {
    opacity: 0.2;
    pointer-events: none;
}

/* No entrance animation on the cards. carousel.js rebuilds its clones with
   cloneNode(true) on every wrap, so a keyframe on .listing re-fires mid-scroll
   and the row flickers; the movement of the track is already the animation. */

/* Special styling for cloned items in infinite scroll */
.carousel-track .listing.carousel-clone {
    /* Clone items should look identical to originals */
    opacity: 1;
}

/* Infinite scroll transition states */
.carousel-container.transitioning .carousel-track {
    transition: transform 0.5s ease-in-out;
}

/* Focus styles for accessibility */
.carousel-nav:focus {
    outline: 2px solid var(--clr-main);
    outline-offset: 2px;
}

.carousel-container:focus-within {
    outline: 2px solid var(--clr-main);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Responsive Carousel Styles */
@media (max-width: 1200px) {
    .carousel-container .listing {
        width: 280px;
    }

    .carousel-container {
        padding: 0 25px;
    }

    .carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .carousel-nav.prev {
        left: 6px;
    }

    .carousel-nav.next {
        right: 6px;
    }
}

@media (max-width: 991px) {
    .carousel-container .listing {
        width: 250px;
        /* Tracks the media area like every other card min-height, so a taller
           or shorter --card-media-px does not clip the text half of a
           carousel card. */
        min-height: calc(var(--card-media-height) + 58px);
    }

    .carousel-track {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        padding: 0 20px;
    }

    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .carousel-nav.prev {
        left: 5px;
    }

    .carousel-nav.next {
        right: 5px;
    }

    .carousel-container .listing {
        width: 220px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 15px;
    }

    .carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .carousel-nav.prev {
        left: 4px;
    }

    .carousel-nav.next {
        right: 4px;
    }

    .carousel-container .listing {
        width: 200px;
        min-height: calc(var(--card-media-height) + 54px);
    }

    .carousel-track {
        gap: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .carousel-nav {
        border: 2px solid var(--clr-text);
    }

    .carousel-nav:hover {
        background: var(--clr-text);
        color: var(--bg-site);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .carousel-track,
    .carousel-nav,
    .carousel-container .listing {
        transition: none;
    }

    .carousel-container::before {
        animation: none;
    }
}

/* Print styles */
@media print {
    .carousel-nav {
        display: none;
    }

    .carousel-container {
        overflow: visible;
        padding: 0;
    }

    .carousel-track {
        flex-wrap: wrap;
    }
}