/* Homepage Hero Mobile Responsive Fix */
/* Ultra-high specificity to override everything */

/* Desktop - reduce from 50vh to fixed height */
html body main .hero,
html body section.hero,
html body .hero.hero,
html[lang="en"] body .hero {
    min-height: 400px !important;
    height: 400px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Tablet - medium screens */
@media (max-width: 768px) {
    html body main .hero,
    html body section.hero,
    html body .hero.hero,
    html[lang="en"] body .hero {
        min-height: 300px !important;
        height: 300px !important;
        padding: 30px 20px !important;
    }
    
    html body .hero-content,
    html body .hero .hero-content {
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    html body .hero-quote,
    html body .hero .hero-quote {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
    }
}

/* Mobile phones - small screens */
@media (max-width: 480px) {
    html body main .hero,
    html body section.hero,
    html body .hero.hero,
    html[lang="en"] body .hero {
        min-height: 250px !important;
        height: 250px !important;
        padding: 20px 15px !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    html body .hero-content,
    html body .hero .hero-content {
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    html body .hero-quote,
    html body .hero .hero-quote {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    html body .hero-subtitle,
    html body .hero .hero-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    html body main .hero,
    html body section.hero,
    html body .hero.hero,
    html[lang="en"] body .hero {
        min-height: 200px !important;
        height: 200px !important;
        padding: 15px 10px !important;
    }
    
    html body .hero-quote,
    html body .hero .hero-quote {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }
    
    html body .hero-subtitle,
    html body .hero .hero-subtitle {
        font-size: 0.8rem !important;
    }
}