/* Mobile Hero Override Styles - MAXIMUM SPECIFICITY - NO JAVASCRIPT NEEDED */
@media screen and (max-width: 768px) {
    
    /* MOBILE TITLE - Ultra High Specificity */
    html body section.hero-bg .hero-container div h1.hero-title-mobile[style],
    html body section.hero-bg .hero-container div h1.hero-title-mobile,
    html body .hero-bg h1.hero-title-mobile[style],
    html body .hero-bg h1.hero-title-mobile,
    html body h1.hero-title-mobile[style],
    html body h1.hero-title-mobile,
    html body .hero-title-mobile[style],
    html body .hero-title-mobile {
        font-family: 'Poppins', sans-serif !important;
        font-size: 35px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }
    
    /* MOBILE SUBTITLE - Ultra High Specificity - FORCE OVERRIDE */
    html body section.hero-bg .hero-container div h2.hero-subtitle-mobile[style],
    html body section.hero-bg .hero-container div h2.hero-subtitle-mobile,
    html body .hero-bg h2.hero-subtitle-mobile[style],
    html body .hero-bg h2.hero-subtitle-mobile,
    html body h2.hero-subtitle-mobile[style],
    html body h2.hero-subtitle-mobile,
    html body .hero-subtitle-mobile[style],
    html body .hero-subtitle-mobile {
        font-family: 'Poppins', sans-serif !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE DESCRIPTION - Ultra High Specificity - FORCE OVERRIDE */
    html body section.hero-bg .hero-container div p.hero-description-mobile[style],
    html body section.hero-bg .hero-container div p.hero-description-mobile,
    html body .hero-bg p.hero-description-mobile[style],
    html body .hero-bg p.hero-description-mobile,
    html body p.hero-description-mobile[style],
    html body p.hero-description-mobile,
    html body .hero-description-mobile[style],
    html body .hero-description-mobile {
        font-family: 'Poppins', sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #ffffff !important;
        line-height: 1.6 !important;
    }
    
    /* HIDE RIGHT SIDEBAR IMAGE AND ANIMATIONS ON MOBILE ONLY - HERO SECTION SPECIFIC */
    html body section.hero-bg .hero-container .grid > div:last-child,
    html body section.hero-bg .resume-animation-container,
    html body section.hero-bg .resume-card,
    html body section.hero-bg .animate-float-1,
    html body section.hero-bg .animate-float-2,
    html body section.hero-bg .animate-float-3,
    html body section.hero-bg .animate-bounce,
    html body section.hero-bg .animate-pulse,
    html body section.hero-bg .animate-ping {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* MAKE LEFT CONTENT FULL WIDTH ON MOBILE */
    html body section.hero-bg .hero-container .grid {
        grid-template-columns: 1fr !important;
    }
    
    html body section.hero-bg .hero-container .grid > div:first-child {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* FIX MOBILE RESUME DISPLAY - ENSURE VISIBILITY */
    html body section:not(.hero-bg) .resume-card,
    html body #resume-grid .resume-card,
    html body .swiper-slide .resume-card,
    html body .thumbnail-container,
    html body .thumbnail-image {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: white !important;
    }
    
    /* IMPROVE CATEGORY FILTER BUTTON TRANSITIONS */
    html body .filter-btn {
        transition: all 0.2s ease-in-out !important;
        transform: scale(1) !important;
    }
    
    html body .filter-btn:hover {
        transform: scale(1.05) !important;
    }
    
    html body .filter-btn.active {
        background-color: #2563eb !important;
        color: white !important;
        transform: scale(1.02) !important;
    }
}

@media screen and (max-width: 640px) {
    /* Extra mobile specificity */
    section.hero-bg .hero-container div h1.hero-title-mobile[style],
    .hero-title-mobile[style] {
        font-size: 31px !important;
    }
    
    section.hero-bg .hero-container div h2.hero-subtitle-mobile[style],
    .hero-subtitle-mobile[style] {
        font-size: 16px !important;
    }
    
    section.hero-bg .hero-container div p.hero-description-mobile[style],
    .hero-description-mobile[style] {
        font-size: 14px !important;
    }
}