/* ============================================================
   Responsive Overrides — Druid Learning Hub
   Mobile-first breakpoints: 480, 768, 1024, 1440.
   ============================================================ */

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
    .container { padding: 0 var(--space-3); }
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    .section { padding: var(--space-10) 0; }
    .btn-primary, .btn-secondary, .btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Tablets (≤768px) ---- */
@media (max-width: 768px) {
    h1 { font-size: var(--text-3xl); }
    .section { padding: var(--space-12) 0; }
}

/* ---- Large screens (≥1440px) ---- */
@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
    }
}