/* =========================================================
   Agahi AI - responsive.css
   Mobile-first overrides
   ========================================================= */

@media (max-width: 1024px) {
    .agahi-feat-grid { grid-template-columns: repeat(3, 1fr); }
    .agahi-grade-grid { grid-template-columns: repeat(2, 1fr); }
    .agahi-post-grid { grid-template-columns: repeat(2, 1fr); }
    .agahi-footer-grid { grid-template-columns: 1fr 1fr; }
    .agahi-hero-grid { grid-template-columns: 1fr; }
    .agahi-hero-visual { order: -1; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .agahi-nav { display: none; }
    .agahi-mobile-toggle { display: inline-flex; }
    .agahi-feat-grid { grid-template-columns: repeat(2, 1fr); }
    .agahi-stats { grid-template-columns: repeat(2, 1fr); }
    .agahi-dash-grid { grid-template-columns: repeat(2, 1fr); }
    .agahi-two-col { grid-template-columns: 1fr; }
    .agahi-post-grid { grid-template-columns: 1fr; }
    .agahi-cta-card { flex-direction: column; align-items: flex-start; }

    .agahi-bottom-nav { display: flex; }
    body { padding-bottom: 84px; }

    .agahi-hero { padding: 36px 0 16px; }
    .agahi-h1 { font-size: clamp(28px, 8vw, 40px); }
}

@media (max-width: 480px) {
    :root { --agahi-gutter: 16px; }
    .agahi-feat-grid { grid-template-columns: 1fr 1fr; }
    .agahi-grade-grid { grid-template-columns: 1fr 1fr; }
    .agahi-stats { grid-template-columns: 1fr 1fr; }
    .agahi-dash-grid { grid-template-columns: 1fr 1fr; }
    .agahi-footer-grid { grid-template-columns: 1fr; }
    .agahi-btn { padding: 11px 18px; font-size: 14px; }
    .agahi-brand-text small { display: none; }
}

/* Mobile menu open */
.agahi-nav.is-open {
    display: block !important;
    position: fixed; inset: 64px 0 0 0;
    background: rgba(11,16,32,0.95); padding: 24px;
    backdrop-filter: blur(18px); z-index: 49;
}
html[data-theme="light"] .agahi-nav.is-open { background: rgba(255,255,255,0.98); }
.agahi-nav.is-open .agahi-menu { flex-direction: column; gap: 12px; align-items: stretch; }
.agahi-nav.is-open .agahi-menu a { font-size: 18px; padding: 12px 16px; border-radius: 12px; background: var(--agahi-surface); border: 1px solid var(--agahi-border); }