/* =========================================================
   SHOOLIFYAI — Responsive Stylesheet
   Mobile-first adjustments via max-width media queries
   ========================================================= */

/* ============ LARGE DESKTOP (>1400px) already handled by max-width container ============ */

/* ============ TABLET / SMALL DESKTOP (<=1100px) ============ */
@media (max-width: 1100px) {
  .subjects-grid, .features-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col-panels { grid-template-columns: 1fr; }
  .tool-card-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-desc { margin: 0 auto 34px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { min-height: 340px; margin-top: 20px; }
  .schools-inner, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .dash-wrap { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
}

/* ============ TABLET (<=900px) ============ */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .section { padding: 72px 0; }
  .assistant-section { padding: 48px 24px; }
  .schools-section { padding: 48px 24px; }
  .steps-grid { grid-template-columns: 1fr; gap: 40px; }
  .step-connector { display: none; }
  .subjects-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row, .planner-form-grid, .quiz-setup-grid, .gen-form-grid { grid-template-columns: 1fr; }
  .lang-select-wrap { display: none; }
}

/* ============ MOBILE (<=640px) ============ */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  :root { --header-height: 68px; }

  .brand { font-size: 17px; }
  .brand-mark { width: 34px; height: 34px; }
  .header-actions .icon-btn:not(.mobile-visible) { display: none; }
  .header-actions { gap: 6px; }

  .hero { padding: 40px 0 56px; }
  .hero-title { font-size: 30px; }
  .hero-desc { font-size: 15.5px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { justify-content: space-between; width: 100%; }
  .hero-stat strong { font-size: 21px; }
  .hero-visual { min-height: 280px; }
  .shooli-orb-wrap { width: 220px; height: 220px; }
  .float-card { display: none; }
  .card-badge { display: flex; top: -10px; right: 0; }

  .subjects-grid, .features-grid, .dash-cards-grid, .tool-card-grid, .steps-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-cards-grid { grid-template-columns: 1fr 1fr; }
  @supports (width: 1fr) { }

  .assistant-panel { border-radius: var(--r-md); }
  .voice-panel { padding: 28px 16px; }
  .mic-ring-wrap { width: 130px; height: 130px; }
  .mic-btn { width: 92px; height: 92px; }
  .mic-btn svg { width: 32px; height: 32px; }
  .chat-panel { height: 480px; }
  .chat-messages { padding: 14px; }
  .msg { max-width: 96%; }

  .mode-toggle button { padding: 9px 14px; font-size: 13px; }
  .mode-toggle button span.toggle-label { display: none; }

  .schools-list li { font-size: 14px; }
  .form-card { padding: 20px; }
  .contact-info-card { padding: 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .welcome-banner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .dash-panel { padding: 18px; }

  .quiz-header-bar { flex-direction: column; align-items: flex-start; }
  .quiz-question { font-size: 17px; }
  .score-ring { width: 130px; height: 130px; }
  .score-ring span { font-size: 24px; }

  .dropdown-panel { width: min(320px, 90vw); right: -10px; }
}

/* ============ VERY SMALL MOBILE (<=400px) ============ */
@media (max-width: 400px) {
  .subjects-grid, .features-grid, .dash-cards-grid, .tool-card-grid, .steps-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 16px 24px; }
  .mode-toggle { width: 100%; justify-content: center; }
}

/* No horizontal scroll safety net */
html, body { max-width: 100%; }