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

/* ============================================
   CONTAINER
   ============================================ */

.carousel-container {
    height: 430px;
}

/* ============================================
   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: #f8f9fa;
    transition: height 0.3s ease;
}

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

/* Image styling */
.rov-carousel-image {
    object-fit: cover;
    object-position: center;
}

/* Title - max 3 lines with ellipsis */
.rov-card-title {
    font-size: 0.9rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 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
   ============================================ */

.rov-carousel-nav {
    width: 50px;
    height: 50px;
    background: white;
    border: 0;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rov-carousel-nav:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.rov-carousel-nav i {
    color: #333;
}

.rov-carousel-prev {
    left: -25px;
}

.rov-carousel-next {
    right: -25px;
}

/* 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);
    }
}