/**
 * Hero Section Styles
 * =========================================
 * Background image support with overlay for text readability
 * Responsive design for all devices
 */

/* Hero Section Base Styles */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Background Image Styles */
.hero-section[style*="background-image"] {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Overlay for better text readability */
.hero-overlay {
    backdrop-filter: blur(1px);
}

/* Enhanced text shadows for background images */
.hero-section[style*="background-image"] .hero-content {
    text-shadow:
        0 1px 2px rgba(0,0,0,0.8),
        0 2px 4px rgba(0,0,0,0.6),
        0 4px 8px rgba(0,0,0,0.4);
}

.hero-section[style*="background-image"] .hero-content h1 {
    text-shadow:
        0 2px 4px rgba(0,0,0,0.9),
        0 4px 8px rgba(0,0,0,0.7),
        0 8px 16px rgba(0,0,0,0.5);
}

.hero-section[style*="background-image"] .hero-content .lead {
    text-shadow:
        0 1px 2px rgba(0,0,0,0.8),
        0 2px 4px rgba(0,0,0,0.6);
}

/* Feature icons with enhanced shadows */
.hero-section .feature-icon-circle {
    box-shadow:
        0 4px 8px rgba(0,0,0,0.3),
        0 8px 16px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section[style*="background-image"] {
        background-attachment: scroll; /* Fixed attachment can cause issues on mobile */
    }

    .hero-content h1 {
        font-size: 2.5rem !important;
    }

    .hero-content .lead {
        font-size: 1.25rem !important;
    }

    .hero-description {
        font-size: 1rem !important;
    }
}

@media (max-width: 576px) {
    .hero-section {
        min-height: 100vh;
        padding: 2rem 1rem !important;
    }

    .hero-content h1 {
        font-size: 2rem !important;
    }

    .hero-content .lead {
        font-size: 1.1rem !important;
    }

    /* Stack layout on very small screens */
    .hero-section .row {
        flex-direction: column;
        text-align: center;
    }

    .hero-section .col-lg-6,
    .hero-section .col-xl-5,
    .hero-section .col-lg-5,
    .hero-section .col-xl-4 {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .features-grid {
        margin-top: 2rem;
    }
}

/* Animation improvements for background images */
.hero-section[style*="background-image"] .animate-fade-in {
    animation-fill-mode: both;
}

/* Parallax effect on larger screens */
@media (min-width: 769px) {
    .hero-section[style*="background-image"] {
        background-attachment: fixed;
    }
}

/* Loading state for background images */
.hero-section[style*="background-image"] {
    transition: opacity 0.3s ease-in-out;
}

.hero-section[style*="background-image"].loaded {
    opacity: 1;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .hero-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}