/* ==========================================================================
   AFRA LINGUISTIC ACADEMY — RESPONSIVE LAYER
   Mobile-first overrides layered on top of style.css
   ========================================================================== */

/* -----------------------------
   LARGE DESKTOP (>1440px) — roomier rhythm
------------------------------ */
@media (min-width: 1440px) {
  :root { --container-width: 1320px; }
}

/* -----------------------------
   LAPTOP / SMALL DESKTOP (<=1180px)
------------------------------ */
@media (max-width: 1180px) {
  .nav-list { gap: var(--space-md); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .trust-item:nth-child(4) { border-left: 0; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .kids-preview { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------
   TABLET (<=992px)
------------------------------ */
@media (max-width: 992px) {
  :root { --header-height: 80px; }

  .primary-nav { display: none; }
  .menu-toggle { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 4/3.4; }
  .hero-lead { max-width: 60ch; }

  .arabic-feature-grid { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }

  .meet-afra-grid { grid-template-columns: 1fr; }
  .meet-afra-photo { width: 100%; max-width: 380px; margin-inline: auto; }

  .split-feature { grid-template-columns: 1fr; }
  .split-feature.reverse .split-visual { order: -1; }
  .split-visual { width: 100%; max-width: 460px; margin-inline: auto; }

  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .publications-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .stat-band { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-newsletter { grid-column: 1 / -1; }

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

/* -----------------------------
   MOBILE (<=680px)
------------------------------ */
@media (max-width: 680px) {
  :root {
    --header-height: 72px;
    --space-2xl: 3.75rem;
    --space-3xl: 5rem;
  }

  .site-header.is-scrolled .header-inner { height: 62px; }
  .brand-logo { height: 44px; }
  .site-header.is-scrolled .brand-logo { height: 36px; }
  .header-cta { display: none; }
  .lang-switch { display: none; }

  .hero { padding-block: var(--space-lg) var(--space-xl); }
  .hero-eyebrow-line { font-size: 0.7rem; }
  .hero-lead { font-size: 1rem; }
  .hero-services-line { font-size: 0.92rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-sm); }
  .trust-item:nth-child(-n+2) { border-top: 0; padding-top: 0; }

  .program-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .publications-grid { grid-template-columns: 1fr; }
  .kids-preview { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; justify-content: center; }

  .section { padding-block: var(--space-2xl); }
  .section-tight { padding-block: var(--space-lg); }

  .back-to-top { width: 40px; height: 40px; right: var(--space-sm); bottom: var(--space-sm); }
}

/* -----------------------------
   SMALL MOBILE (<=380px)
------------------------------ */
@media (max-width: 380px) {
  .trust-grid, .pillars-grid, .kids-preview, .stat-band { grid-template-columns: 1fr; }
  .arabic-word { font-size: 2.6rem; }
}

/* -----------------------------
   RTL SUPPORT (future Arabic locale)
------------------------------ */
html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="rtl"] .eyebrow::before { order: 2; }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }