/* ============================================================
   RESPONSIVE — Mobile-first overrides
   Breakpoints: 320 / 360 / 375 / 414 / 600 / 768 / 820 / 912 /
                1024 / 1280 / 1366 / 1440 / 1600 / 1920
   ============================================================ */

/* Global safety: never allow horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- TABLET & BELOW ---------- */
@media (max-width: 1024px) {
  .container { padding-inline: var(--sp-5); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- SMALL TABLET ---------- */
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    max-height: 0; opacity: 0; visibility: hidden;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1),
                opacity .28s ease, visibility .28s;
    z-index: 899;
  }
  .nav.is-open {
    max-height: calc(100vh - var(--header-h));
    opacity: 1; visibility: visible; overflow-y: auto;
  }
  .nav__list {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--sp-4) var(--sp-5) var(--sp-6);
  }
  .nav__link {
    padding: .95rem 0;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
    padding-left: .75rem;
    font-size: 1rem;
  }
  .nav__link[aria-current="page"] {
    border-bottom-color: var(--line-soft);
    border-left-color: var(--terracotta);
    background: rgba(166,83,53,.05);
  }
  .nav__cta { margin-top: var(--sp-4); text-align: center; padding: .9rem 1.3rem; }

  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__meta { justify-content: center; }
  .hero__art { order: -1; }
  .chai-art { max-width: 340px; }

  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  :root {
    --sp-8: 3rem;
    --sp-9: 4rem;
  }
  .container { padding-inline: var(--sp-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .leader-grid { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .form-card { padding: var(--sp-5); }
  .card { padding: var(--sp-5); }
  .panel { padding: var(--sp-5); }
  .page-hero { padding-block: var(--sp-7) var(--sp-6); }
  .hero { padding-block: var(--sp-7) var(--sp-8); }
  .hero__meta { gap: var(--sp-5); }
  .hero__meta-item strong { font-size: 1.3rem; }
  .brand__sub { display: none; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .to-top { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

/* ---------- VERY SMALL (320–375) ---------- */
@media (max-width: 380px) {
  :root { --header-h: 68px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .container { padding-inline: .85rem; }
  .hero__badge { font-size: .66rem; padding: .4rem .8rem; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark i { font-size: 1rem; }
  .brand__name { font-size: .95rem; }
  .btn { padding: .75rem 1.4rem; font-size: .9rem; }
  .stats { grid-template-columns: 1fr; }
}

/* ---------- LANDSCAPE MOBILE ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: var(--sp-6); }
  .hero__art { display: none; }
}

/* ---------- LARGE DESKTOP ---------- */
@media (min-width: 1440px) {
  :root { --max: 1240px; }
}
@media (min-width: 1920px) {
  :root { --max: 1320px; }
  body { font-size: 1.1rem; }
}