/* ════════════════════════════════════
   SKILLZY ACADEMY — GLOBAL MOBILE CSS
   ════════════════════════════════════ */

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ── TABLET 641px–900px ── */
@media (min-width: 641px) and (max-width: 900px) {
    .nav-links { display: none !important; }
    .nav-toggle { display: flex !important; }
    .nav-phone { display: none !important; }
    .ch-hero-grid { grid-template-columns: 1fr !important; }
    .enroll-card { position: static !important; width: 100%; margin-top: 1.5rem; }
    .other-courses-grid { grid-template-columns: repeat(2,1fr) !important; }
    .cs-faq-grid { grid-template-columns: 1fr !important; }
    .cs-testi-grid { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE max 640px ── */
@media (max-width: 640px) {

    /* NAV */
    .nav-links { display: none !important; }
    .nav-toggle { display: flex !important; }
    .nav-phone { display: none !important; }

    /* OVERFLOW */
    .container { overflow-x: hidden; }

    /* ── STATS BAR (home page) ── */
    .stats-bar-animate {
        grid-template-columns: repeat(3,1fr) !important;
        padding: 1rem 0.5rem !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* ── TOOLS GRID ── */
    .tool-grid {
        grid-template-columns: repeat(4,1fr) !important;
        gap: 0.5rem !important;
        overflow: hidden !important;
    }
    .tool-card {
        padding: 0.6rem 0.3rem !important;
        min-height: 70px !important;
    }
    .tool-card img {
        width: 32px !important;
        height: 32px !important;
    }
    .tool-card span {
        font-size: 0.5rem !important;
    }

    /* ── COURSE HERO ── */
    .ch-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .enroll-card {
        position: static !important;
        width: 100% !important;
        margin-top: 1.5rem;
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }
    .ch-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        overflow: hidden !important;
    }
    .ch-stats-row > div {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* ── EXPLORE OTHER COURSES — FORCE 1 COL ── */
    .other-courses-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    a.oc-card, .oc-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        text-decoration: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        min-height: 100px !important;
    }
    a.oc-card > div:first-child,
    .oc-card > div:first-child {
        width: 110px !important;
        min-width: 110px !important;
        height: auto !important;
        flex-shrink: 0 !important;
    }
    a.oc-card > div:last-child,
    a.oc-card > div:nth-child(2),
    .oc-card > div:last-child,
    .oc-card > div:nth-child(2) {
        padding: 0.75rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    a.oc-card h3, .oc-card h3 {
        font-size: 0.82rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* ── ALL GRIDS FALLBACK ── */
    [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:1fr 1fr;gap:4rem"] { grid-template-columns: 1fr !important; gap: 2rem !important; }
    [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; }

    /* ── TYPOGRAPHY ── */
    h1 { font-size: 1.7rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.4rem !important; }
    .section-h2 { font-size: 1.35rem !important; }

    /* ── HOME COURSES GRID ── */
    .courses-grid-home { grid-template-columns: 1fr !important; }

    /* ── WHO / FAQ / TESTI ── */
    .cs-who-grid, .who-grid, .cs-faq-grid, .cs-testi-grid {
        grid-template-columns: 1fr !important;
    }
    .cs-why-2col {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* ── CTA BUTTONS ── */
    .cs-cta-btns {
        flex-direction: column !important;
        padding: 0 1rem !important;
        gap: 0.75rem !important;
    }
    .cs-cta-btns > * {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── ABOUT / CONTACT ── */
    .mobile-1col { grid-template-columns: 1fr !important; }
    .mobile-2col { grid-template-columns: repeat(2,1fr) !important; }
    [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

    /* ── FOOTER ── */
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom-inner { flex-direction: column !important; text-align: center !important; }

    /* ── SECTION PADDING ── */
    section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    /* ── PILLS ── */
    .ch-pills, .usp-pills { flex-wrap: wrap !important; gap: 0.35rem !important; }
    .ch-pills span { font-size: 0.7rem !important; padding: 0.28rem 0.65rem !important; }
}