/* ========================================
   CAROUSEL RESPONSIVE STYLES
   Breakpoints for desktop, tablet, mobile
   ======================================== */

/* ========================================
   TABLET (768px - 1199px)
   ======================================== */
@media (max-width: 1199px) {

    /* Carousel Wrapper */
    .carousel-wrapper {
        padding: 0 15px;
        max-width: 1000px;
    }

    /* Track Container - Using aspect-ratio from main css */
    .carousel-track-container {
        min-height: 300px;
    }

    /* Track Gap */
    .carousel-track {
        gap: 16px;
    }

    /* Previous slide (left) - 16:9 ratio */
    .carousel-slide.prev {
        width: 360px;
        /* Reduced */
        height: 202px;
        /* 360 / 16 * 9 = 202.5 */
        opacity: 0.5;
        transform: scale(0.8);
    }

    /* Active slide (center) - 16:9 ratio */
    .carousel-slide.active {
        width: 580px;
        /* Reduced */
        height: 326px;
        /* 580 / 16 * 9 = 326.25 */
    }

    /* Next slide (right) - 16:9 ratio */
    .carousel-slide.next {
        width: 360px;
        height: 202px;
        opacity: 0.5;
        transform: scale(0.8);
    }

    /* Caption */
    .carousel-caption h3 {
        font-size: 1.5rem;
    }

    /* Navigation Arrows */
    .carousel-nav {
        width: 50px;
        height: 50px;
    }

    .carousel-nav i {
        font-size: 1.25rem;
    }

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

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

/* ========================================
   MOBILE (< 768px)
   ======================================== */
@media (max-width: 767px) {

    /* Section Padding */
    .campus-carousel-section {
        padding: var(--space-xl) 0;
    }

    /* Section Header */
    .campus-carousel-section .section-header {
        margin-bottom: var(--space-2xl);
    }

    .campus-carousel-section .section-header h2 {
        font-size: var(--font-size-3xl);
    }

    .campus-carousel-section .section-header p {
        font-size: var(--font-size-base);
        padding: 0 var(--space-md);
    }

    /* Carousel Wrapper */
    .carousel-wrapper {
        padding: 0 10px;
        max-width: 100%;
    }

    /* Track Container - Using aspect-ratio */
    .carousel-track-container {
        min-height: auto;
        height: auto;
        aspect-ratio: 16/9;
    }

    /* Track Gap */
    .carousel-track {
        gap: 0;
    }

    /* Hide side slides on mobile */
    .carousel-slide.prev,
    .carousel-slide.next {
        width: 0;
        height: 0;
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
        margin: 0;
    }

    /* Active slide (center) - full width, 16:9 ratio */
    .carousel-slide.active {
        width: calc(100vw - 40px);
        max-width: 500px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0;
    }

    /* Caption */
    .carousel-caption {
        bottom: 20px;
        padding: 0 var(--space-md);
    }

    .carousel-caption h3 {
        font-size: 1.25rem;
    }

    /* Navigation Arrows */
    .carousel-nav {
        width: 40px;
        height: 40px;
    }

    .carousel-nav i {
        font-size: 1rem;
    }

    .carousel-prev {
        left: 5px;
    }

    .carousel-next {
        right: 5px;
    }

    /* Indicators */
    .carousel-indicators {
        margin-top: var(--space-md);
        gap: 8px;
    }

    .carousel-indicators .indicator {
        width: 10px;
        height: 10px;
    }
}

/* ========================================
   SMALL MOBILE (< 480px)
   ======================================== */
@media (max-width: 479px) {

    /* Carousel Wrapper */
    .carousel-wrapper {
        padding: 0 40px;
    }

    /* Track Container */
    .carousel-track-container {
        min-height: auto;
    }

    /* Active slide - 16:9 ratio */
    .carousel-slide.active {
        width: calc(100vw - 20px);
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Caption */
    .carousel-caption {
        bottom: 15px;
    }

    .carousel-caption h3 {
        font-size: 1.125rem;
    }

    /* Navigation Arrows */
    .carousel-nav {
        width: 36px;
        height: 36px;
    }

    .carousel-nav i {
        font-size: 0.875rem;
    }
}

/* ========================================
   LARGE DESKTOP (> 1400px)
   ======================================== */
@media (min-width: 1400px) {

    /* Carousel Wrapper */
    .carousel-wrapper {
        max-width: 1400px;
        padding: 0 30px;
    }

    /* Track Container */
    .carousel-track-container {
        min-height: 400px;
    }

    /* Track Gap */
    .carousel-track {
        gap: 20px;
    }

    /* Previous slide (left) - 16:9 ratio */
    .carousel-slide.prev {
        width: 480px;
        height: 270px;
    }

    /* Active slide (center) - 16:9 ratio */
    .carousel-slide.active {
        width: 720px;
        height: 405px;
    }

    /* Next slide (right) - 16:9 ratio */
    .carousel-slide.next {
        width: 480px;
        height: 270px;
    }

    /* Caption */
    .carousel-caption h3 {
        font-size: 2rem;
    }

    /* Navigation Arrows */
    .carousel-nav {
        width: 70px;
        height: 70px;
    }

    .carousel-nav i {
        font-size: 1.75rem;
    }

    .carousel-prev {
        left: -15px;
    }

    .carousel-next {
        right: -15px;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .carousel-nav {
        width: 50px;
        height: 50px;
    }

    .carousel-indicators .indicator {
        width: 14px;
        height: 14px;
    }

    /* Remove hover effects on touch devices */
    .carousel-slide:hover img {
        transform: none;
    }

    .carousel-slide.prev:hover,
    .carousel-slide.next:hover {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .carousel-track-container {
        height: 220px;
    }

    .carousel-slide.active {
        max-width: 390px;
        height: 220px;
        /* 390 / 16 * 9 = 219.375 */
    }

    .carousel-caption h3 {
        font-size: 1rem;
    }
}