/* =====================================================
   High Skill — Responsive Media Queries
   ===================================================== */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .course-detail-layout { grid-template-columns: 1fr; }
    .course-sidebar-card { position: static; margin-top: 2rem; }
    .courses-layout { grid-template-columns: 240px 1fr; }
}

/* ── Medium Tablet (≤ 900px) ── */
@media (max-width: 900px) {
    .courses-layout { grid-template-columns: 1fr; }
    .filter-sidebar  { position: static; }
}

/* ── Tablet / Large Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    /* Navbar */
    .hs-nav-search  { display: none; }
    .hs-nav-links   { display: none; }
    .hs-hamburger   { display: block; }
    .hs-auth-btns   { display: none !important; }
    .hs-user-menu   { display: none !important; }
    .hs-nav-divider { display: none; }

    .hs-navbar-inner { height: 60px; }

    /* Mobile Nav Menu — display:none is set globally in app.css; .open is added by JS */
    .hs-mobile-menu .hs-nav-link {
        display: block;
        padding: .75rem 1rem;
        border-radius: var(--radius-md);
        font-size: .95rem;
        width: 100%;
    }
    .hs-mobile-search {
        display: flex;
        gap: .5rem;
        margin-bottom: .75rem;
    }
    .hs-mobile-search input {
        flex: 1; padding: .65rem 1rem;
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        font-family: 'Inter',sans-serif; font-size: .9rem;
        outline: none;
    }
    .hs-mobile-search input:focus { border-color: var(--color-accent); }
    .hs-mobile-search button {
        padding: .65rem 1rem;
        background: var(--color-accent); color: #fff;
        border: none; border-radius: var(--radius-md); cursor: pointer;
    }
    .hs-mobile-divider { height: 1px; background: var(--color-border); margin: .5rem 0; }
    .hs-mobile-auth-btns { display: flex; gap: .75rem; margin-top: .5rem; }
    .hs-mobile-auth-btns .btn { flex: 1; justify-content: center; }

    /* Hero */
    .hero-gradient { padding: 4rem 0 3rem; }
    .hero-gradient h1 { font-size: 2.2rem; }

    /* Home grid sections */
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }

    /* Course details hero */
    .course-detail-hero h1 { font-size: 1.75rem; }

    /* Auth */
    .auth-panel { display: none; }
    .auth-card  { padding: 2rem 1.5rem; max-width: 100%; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }

    /* Blog */
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { display: none; }
}

/* ── Small Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .hero-gradient h1 { font-size: 1.75rem; }
    .hero-gradient p  { font-size: .95rem; }
    .hero-cta-group   { flex-direction: column; align-items: center; }
    .hero-cta-group .btn { width: 100%; max-width: 280px; justify-content: center; }

    .stats-grid       { grid-template-columns: 1fr; }
    .categories-grid  { grid-template-columns: repeat(2,1fr); gap: .75rem; }
    .course-grid      { grid-template-columns: 1fr; }

    .section-pad  { padding: 3.5rem 0; }
    .section-pad-sm { padding: 2rem 0; }

    .auth-card { padding: 1.5rem 1.25rem; }
    .otp-group { gap: .4rem; }
    .otp-input { width: 42px; height: 48px; font-size: 1.25rem; }

    .course-detail-layout { grid-template-columns: 1fr; }
    .instructor-card { flex-direction: column; }
    .instructor-avatar-lg { width: 72px; height: 72px; }

    .contact-grid { grid-template-columns: 1fr; }
}

/* ── Dashboard responsive (handled in dashboard.css, repeated here for clarity) ── */
@media (max-width: 768px) {
    .dashboard-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        position: fixed;
    }
    .dashboard-sidebar.open { transform: translateX(0); }
    .dashboard-main { margin-left: 0; }
}