/* ========================================
   GLOBAL HERO SECTION - RESPONSIVE STYLES
   ========================================
   Mobile-first responsive design
   ======================================== */

/* Tablet - 768px and up */
@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        text-align: left;
    }
    
    .hero-content {
        text-align: left;
        margin: 0;
    }
    
    .hero-headline {
        font-size: clamp(2.5rem, 4vw, 4rem);
        margin-bottom: 2rem;
    }
    
    .hero-subheading {
        font-size: clamp(1.125rem, 2vw, 1.375rem);
        margin-bottom: 2.5rem;
        margin-left: 0;
        margin-right: 0;
        max-width: 500px;
    }
    
    .hero-cta {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        min-width: 180px;
    }
    
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        max-width: 100%;
        margin: 0;
    }
    
    .hero-feature {
        padding: 1rem;
    }
    
    .hero-visual {
        text-align: right;
    }
    
    .hero-image-wrapper,
    .hero-video-wrapper,
    .hero-carousel {
        max-width: 100%;
        margin: 0;
    }
    
    .hero-image {
        height: 500px;
    }
    
    .hero-video-wrapper {
        height: 500px;
    }
    
    .hero-carousel-item {
        height: 500px;
    }
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
    .hero-section {
        padding: 52px 0 80px 0;
        min-height: 100vh;
    }
    
    .hero-container {
        padding: 0 40px;
    }
    
    .hero-grid {
        gap: 5rem;
        min-height: 700px;
    }
    
    .hero-headline {
        font-size: clamp(3rem, 5vw, 4.5rem);
        line-height: 1.05;
        margin-bottom: 2.5rem;
    }
    
    .hero-subheading {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
        margin-bottom: 3rem;
        max-width: 550px;
    }
    
    .hero-cta {
        margin-bottom: 4rem;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 1rem 2.5rem;
        font-size: 1.125rem;
        min-width: 200px;
    }
    
    .hero-features {
        gap: 1.5rem;
        max-width: 500px;
    }
    
    .hero-feature {
        padding: 1.25rem;
    }
    
    .hero-image {
        height: 600px;
    }
    
    .hero-video-wrapper {
        height: 600px;
    }
    
    .hero-carousel-item {
        height: 600px;
    }
}

/* Large Desktop - 1440px and up */
@media (min-width: 1440px) {
    .hero-container {
        max-width: 1400px;
        padding: 0 60px;
    }
    
    .hero-grid {
        gap: 6rem;
    }
    
    .hero-headline {
        font-size: clamp(3.5rem, 6vw, 5rem);
    }
    
    .hero-subheading {
        font-size: clamp(1.375rem, 3vw, 1.75rem);
        max-width: 600px;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 1.125rem 3rem;
        font-size: 1.25rem;
        min-width: 220px;
    }
    
    .hero-image {
        height: 650px;
    }
    
    .hero-video-wrapper {
        height: 650px;
    }
    
    .hero-carousel-item {
        height: 650px;
    }
}

/* Ultra-wide - 1920px and up */
@media (min-width: 1920px) {
    .hero-container {
        max-width: 1600px;
        padding: 0 80px;
    }
    
    .hero-grid {
        gap: 8rem;
    }
    
    .hero-headline {
        font-size: clamp(4rem, 7vw, 6rem);
    }
    
    .hero-subheading {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
        max-width: 700px;
    }
    
    .hero-image {
        height: 700px;
    }
    
    .hero-video-wrapper {
        height: 700px;
    }
    
    .hero-carousel-item {
        height: 700px;
    }
}

/* Mobile Landscape - 480px to 767px */
@media (min-width: 480px) and (max-width: 767px) {
    .hero-section {
        min-height: 90vh;
        padding: 48px 0 60px 0;
    }
    
    .hero-grid {
        gap: 2.5rem;
        min-height: 500px;
    }
    
    .hero-headline {
        font-size: clamp(2.25rem, 6vw, 3rem);
        margin-bottom: 1.75rem;
    }
    
    .hero-subheading {
        font-size: clamp(1.125rem, 3vw, 1.375rem);
        margin-bottom: 2rem;
    }
    
    .hero-cta {
        margin-bottom: 2.5rem;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 1rem 2rem;
        font-size: 1.0625rem;
        min-width: 180px;
    }
    
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.125rem;
        max-width: 350px;
    }
    
    .hero-image {
        height: 350px;
    }
    
    .hero-video-wrapper {
        height: 350px;
    }
    
    .hero-carousel-item {
        height: 350px;
    }
}

/* Small Mobile - 320px to 479px */
@media (max-width: 479px) {
    .hero-section {
        min-height: 100vh;
        padding: 44px 0 40px 0;
    }
    
    .hero-container {
        padding: 0 16px;
    }
    
    .hero-grid {
        gap: 2rem;
        min-height: 450px;
    }
    
    .hero-headline {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    .hero-subheading {
        font-size: clamp(1rem, 4vw, 1.25rem);
        margin-bottom: 1.75rem;
    }
    
    .hero-cta {
        margin-bottom: 2rem;
        gap: 0.875rem;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        min-width: 160px;
    }
    
    .hero-features {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        max-width: 280px;
    }
    
    .hero-feature {
        padding: 0.625rem;
    }
    
    .hero-feature-icon {
        margin-right: 0.75rem;
    }
    
    .hero-feature-icon i {
        font-size: 1.125rem;
    }
    
    .hero-feature-text {
        font-size: 0.875rem;
    }
    
    .hero-image {
        height: 280px;
    }
    
    .hero-video-wrapper {
        height: 280px;
    }
    
    .hero-carousel-item {
        height: 280px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image,
    .hero-video,
    .hero-carousel-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .hero-content,
    .hero-visual,
    .hero-cta,
    .hero-features,
    .hero-image,
    .hero-video,
    .hero-carousel-image {
        animation: none;
        transition: none;
    }
    
    .hero-cta:hover,
    .hero-cta-secondary:hover,
    .hero-image:hover,
    .hero-carousel-item:hover .hero-carousel-image {
        transform: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .hero-section {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    }
    
    .hero-section::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.03) 100%);
    }
    
    .hero-section::after {
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(243, 145, 137, 0.02) 0%, transparent 50%),
            radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    }
    
    .hero-headline {
        color: #ffffff;
    }
    
    .hero-subheading {
        color: #b0b0b0;
    }
    
    .hero-feature {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
    }
    
    .hero-feature:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .hero-feature-text {
        color: #e0e0e0;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .hero-cta,
    .hero-cta-secondary {
        min-height: 44px;
        min-width: 44px;
    }
    
    .hero-feature {
        padding: 1rem;
    }
    
    .hero-cta:hover,
    .hero-cta-secondary:hover,
    .hero-image:hover,
    .hero-carousel-item:hover .hero-carousel-image {
        transform: none;
    }
}

/* Print Optimizations */
@media print and (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-visual {
        order: -1;
    }
}