/* ===== Banner & Search Overlay Component ===== */
/* Optimized and refactored for maintainability */

/* ========================================
   1. CSS Custom Properties & Configuration
   ======================================== */
:root {
    /* Banner dimensions - easily customizable */
    --banner-width: 100vw;        /* Full screen width */
    --banner-height: 400px;        /* Default height */
    /* --banner-ratio: 2.5;           Width/height aspect ratio */
    
    /* Container widths for responsive design */
    --container-xl: 1320px;
    --container-lg: 1140px;
    --container-md: 960px;
    
    /* Navigation arrows positioned at banner edges */
}

/* ========================================
   2. Base Banner Styles
   ======================================== */

/* Hero wrapper for positioning context */
.hero-banner-wrapper {
    position: relative;
    width: 100%;
}

/* Banner section with full-width breakout */
.banner-carousel-section {
    /* Full-width breakout technique */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Ensure breakout works within containers */
    max-width: none !important;
    overflow: visible;
}

/* Main carousel container */
.banner-carousel {
    width: 100%;
    position: relative;
}

/* Main display area with aspect ratio */
.banner-carousel .carousel-main {
    aspect-ratio: var(--banner-ratio);
    width: 100%;
    margin: 0;
    background: var(--gray-900);
    /* min-height: var(--banner-height); */
}

/* Carousel slides */
.banner-carousel .carousel-slide {
    position: relative;
}

.banner-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Exact fit images (1000x400) */
.banner-carousel img.exact-fit {
    object-fit: contain;
}

/* ========================================
   3. Navigation Controls
   ======================================== */

/* Navigation arrows - base styles */
.banner-carousel .carousel-nav {
    z-index: 30;
}

/* .banner-carousel .carousel-nav.prev {
    left: 1px;
}

.banner-carousel .carousel-nav.next {
    right: 1px;
} */

/* ========================================
   4. Thumbnails
   ======================================== */

.banner-carousel .carousel-thumbnails {
    max-width: 100%;
    margin: var(--space-3) 0 0;
    padding: 0 var(--space-3);
}

.banner-carousel .carousel-thumb {
    width: 120px;
    height: calc(120px / var(--banner-ratio));
}

/* ========================================
   5. Search Overlay Styles
   ======================================== */

/* Mobile-first search container */
.search-mobile-first {
    display: block;
}


/* ========================================
   6. Banner Content Overlays
   ======================================== */

/* Caption overlay */
.banner-carousel .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6) var(--space-8);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: white;
    text-align: center;
}

.banner-carousel .carousel-caption h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-carousel .carousel-caption p {
    font-size: var(--text-base);
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Clickable banner areas */
.banner-carousel .carousel-slide a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.banner-carousel .carousel-slide a:hover img {
    transform: scale(1.02);
    transition: transform var(--transition-slow);
}

/* ========================================
   7. Fallback Banner Styles
   ======================================== */

/* When no image is available */
.fallback-banner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue-50), var(--secondary-indigo-light));
    color: white;
    text-align: center;
    padding: var(--space-6);
}

.fallback-banner h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

/* ========================================
   8. Responsive Breakpoints
   ======================================== */

/* Tablets (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    /* Reset breakout for tablets */
    .banner-carousel-section {
        width: 100%;
        position: relative;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Adjust thumbnail sizes */
    .banner-carousel .carousel-thumb {
        width: 100px;
        height: calc(100px / var(--banner-ratio));
    }
    
    /* Keep mobile search visible */
    .hero-banner-wrapper {
        margin-top: 0;
    }
}

/* Mobile devices (<768px) */
@media (max-width: 767px) {
    /* Reset breakout for mobile */
    .banner-carousel-section {
        width: 100%;
        position: relative;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Let aspect ratio control height */
    .banner-carousel .carousel-main {
        min-height: unset;
    }
    
    /* Smaller thumbnails */
    .banner-carousel .carousel-thumb {
        width: 80px;
        height: calc(80px / var(--banner-ratio));
    }
    
    /* Smaller navigation arrows */
    .banner-carousel .carousel-nav {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .banner-carousel .carousel-nav.prev {
        left: 8px; /* Small edge padding for mobile touch */
    }
    
    .banner-carousel .carousel-nav.next {
        right: 8px; /* Small edge padding for mobile touch */
    }
}

/* Small mobile devices (<480px) */
@media (max-width: 480px) {
    .banner-carousel .carousel-main {
        min-height: unset;
    }
    
    .banner-carousel .carousel-thumb {
        width: 60px;
        height: calc(60px / var(--banner-ratio));
    }
}

/* Desktop screens (≥992px) */
@media (min-width: 992px) {
    /* Hide mobile search, show overlay */
    .search-mobile-first {
        display: none;
    }
    
    
    
    
}

/* Large screens (≥1200px) */
@media (min-width: 1200px) {
    /* Slightly taller banner */
    .banner-carousel {
        --banner-height: 450px;
    }
    
}

/* Extra large screens (≥1400px) */
@media (min-width: 1400px) {
    /* Keep navigation near edges on extra large screens */
    .banner-carousel .carousel-nav.prev {
        left: 2px;
    }
    
    .banner-carousel .carousel-nav.next {
        right: 2px;
    }
    
}

/* ========================================
   9. Fallback for browsers without :has()
   ======================================== */


/* ========================================
   10. Utility Classes
   ======================================== */

/* Loading state */
.banner-carousel .carousel-slide.loading {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Debug mode */
.banner-carousel.debug::after {
    content: attr(data-dimensions);
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

/* ========================================
   11. Print Styles
   ======================================== */

@media print {
    .banner-carousel .carousel-nav,
    .banner-carousel .carousel-dots,
    .banner-carousel .carousel-counter {
        display: none !important;
    }
    
    .banner-carousel .carousel-main {
        height: auto;
        aspect-ratio: var(--banner-ratio);
    }
    
    .search-mobile-first {
        display: none !important;
    }
}

/* ========================================
   12. Animation Keyframes
   ======================================== */

/* Loading animation is defined in utilities/helpers.css */