/* =============================================================
   Responsive rules - mobile first adjustments
   ============================================================= */

@media (max-width: 900px) {
    .hero h1 { font-size: 1.8rem; }
    .hero { padding: 52px 0; }
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }

    .main-nav {
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        background: var(--primary);
        display: none;
        box-shadow: var(--shadow);
    }
    .main-nav.open { display: block; }
    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }
    .main-nav a { display: block; padding: 13px 14px; }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-content { margin-left: 0; padding: 20px 14px; }
    .admin-toggle { display: block; }

    .btn { padding: 13px 22px; min-height: 44px; }
    .btn-sm { min-height: 38px; }
    input, select, textarea { font-size: 16px; }

    .lesson-nav { flex-direction: column; }
    .lesson-nav .btn { width: 100%; }

    .search-form { flex-direction: column; }
    .filter-form { flex-direction: column; }
    .filter-form input, .filter-form select { width: 100%; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .auth-card { padding: 24px 18px; }
}

@media (min-width: 769px) {
    .admin-toggle { display: none; }
}