/**
 * Custom 3-Card Carousel Styles - REBUILT
 * Bootstrap-first approach - MINIMAL custom CSS
 */

/* ============================================
   TRACK & CARDS (Desktop)
   ============================================ */

.rov-carousel-track {
    transition: transform 0.3s ease;
    will-change: transform;
}

.rov-carousel-card {
    width: 33.333%; /* Exact 1/3 width for transform calculations */
    min-width: 33.333%; /* Prevent shrinking */
    padding: 0 0.5rem; /* Spacing inside card width (doesn't affect transform) */
    box-sizing: border-box; /* Include padding in width */
}

/* ============================================
   CARD CONTENT
   ============================================ */

/* Image container - shrinks on hover */
.rov-image-container {
    height: 240px;
    background: var(--color-rov-light-gray);
    transition: height 0.3s ease;
}

.rov-card-link:hover .rov-image-container {
    height: 180px;
}

/* Badges - hidden by default, show on hover */
.rov-card-badges {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.rov-card-link:hover .rov-card-badges {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */

/* Hide disabled navigation */
.rov-carousel-nav.rovCarouselDisableWrap {
    display: none;
}

/* ============================================
   MOBILE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
    /* Container grows to fit content */
    .carousel-container {
        height: auto;
    }

    /* Allow viewport to show all cards on mobile */
    #latestViewsCarousel > div,
    #trendingNowViewsCarousel > div,
    #crazyFunViewsCarousel > div,
    #lookingBackViewsCarousel > div,
    #specialViewsCarousel > div {
        overflow: visible !important;
    }

    /* Track becomes vertical */
    .rov-carousel-track {
        flex-direction: column;
        gap: 3rem;
        transform: none !important; /* Override JS transform */
    }

    /* Cards full width */
    .rov-carousel-card {
        width: 100%;
        padding: 0; /* Remove horizontal padding on mobile */
    }

    /* Show only first 3 cards */
    .rov-carousel-card:nth-child(n + 4) {
        display: none;
    }

    /* Smaller image on mobile */
    .rov-image-container {
        height: 200px;
    }

    /* No hover effect on mobile */
    .rov-card-link:hover .rov-image-container {
        height: 200px;
    }

    /* Always show badges on mobile */
    .rov-card-badges {
        opacity: 1;
        transform: translateY(0);
    }
}