/* ==========================================================================
   📱 BULLETPROOF RESPONSIVE LAYOUT MATRIX (MOBILE, TABLET, LAPTOP)
   ========================================================================== */

/* 💻 Large Screens & Laptops (Fix content overflows) */
@media (max-width: 1200px) {
    .container {
        padding: 0 24px;
        box-sizing: border-box;
    }
}

/* 📑 Tablets & iPads (Portrait & Landscape viewports) */
@media (max-width: 991px) {
    /* Navbar Alignment */
    .navbar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px 0;
    }
    
    .header-meta-row {
        padding-left: 0; /* Centers badge and link */
        justify-content: center;
        margin: 10px 0;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* About Section */
    .about-container {
        grid-template-columns: 1fr; /* Stack video above text */
        gap: 40px;
    }
    
    .about-video-wrapper {
        height: 380px; /* Slight scale down for tablet view */
    }

    /* Contact & Maps Split Layout */
    .contact-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .contact-info, .contact-map {
        width: 100%;
        flex: none;
    }
}

/* 📱 Smartphones & Small Devices (iPhone, Android, etc.) */
@media (max-width: 640px) {
    /* Typographic Adjustments */
    .logo-title-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .logo-title-row h2 {
        font-size: 18px; /* Prevents text overflow */
        text-align: center;
    }
    
    .estd-pill {
        margin-left: 0; /* Align perfectly on mobile grids */
        margin-right: 10px;
    }

    .hero h1 {
        font-size: 28px; /* Clean scannable sizing on mobile screen */
    }
    
    .hero p {
        font-size: 15px;
    }

    /* Interactive Interface Elements */
    .hero-buttons-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .hero-btn-primary, .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
    }

    /* Grid layout flattening rules */
    .features-grid-wrapper {
        grid-template-columns: 1fr; /* Forces single column stack */
        gap: 20px;
    }
    
    .highlight-metrics-grid {
        grid-template-columns: 1fr; /* Stack modern metric metrics blocks */
        gap: 10px;
    }
    
    .about-video-wrapper {
        height: 280px; /* Adapts cleanly to landscape/portrait phone bounds */
    }

    /* Dynamic Popup Modals */
    .home-modal-box {
        width: 95%;
        max-height: 90vh;
    }
    
    .course-downloads {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dl-link {
        justify-content: center;
    }
}

/* 🚨 Smart Screen Override Rules for Extra Small Viewports */
@media (max-width: 480px) {
    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .nav-link {
        padding: 8px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .professional-portal-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}