/* ============================================================
   Keats Learning Academy — Responsive overrides
   Mobile-first overrides applied on top of inline component styles.
   Targets: hero / sections / grids / nav / type / forms / footer
   ============================================================ */

/* ---------- Universal: never let things bust the viewport ---------- */
/* `overflow-x: clip` is the stricter modern fix — it enforces the clip on
   the touch-pan handler too, not just on paint. Necessary because iOS
   Safari leaks horizontal pan when a fixed element is parked off-screen
   via transform (e.g. the mobile nav drawer's `translateX(100%)` closed
   state); `overflow-x: hidden` alone doesn't catch that case. Older
   browsers fall back to the `hidden` declaration. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; height: auto; }

/* ---------- Tablet & below (≤980px) ---------- */
@media (max-width: 980px) {
  /* Generic: anything inline-styled width >= 1100 -> full width */
  [style*="maxWidth: 1440"], [style*="max-width: 1440"],
  [style*="maxWidth: 1320"], [style*="max-width: 1320"],
  [style*="maxWidth: 1280"], [style*="max-width: 1280"],
  [style*="maxWidth: 1200"], [style*="max-width: 1200"],
  [style*="maxWidth: 1100"], [style*="max-width: 1100"] {
    max-width: 100% !important;
  }

  /* Generic: large left/right inline padding -> trim */
  [style*="padding: 80px"], [style*="padding: 96px"],
  [style*="padding: 100px"], [style*="padding: 120px"],
  [style*="padding: 140px"], [style*="padding: 160px"] {
    padding: 56px 24px !important;
  }
  [style*="paddingLeft: 80px"], [style*="paddingLeft: 96px"],
  [style*="paddingLeft: 120px"], [style*="paddingLeft: 140px"],
  [style*="paddingLeft: 160px"] { padding-left: 24px !important; }
  [style*="paddingRight: 80px"], [style*="paddingRight: 96px"],
  [style*="paddingRight: 120px"], [style*="paddingRight: 140px"],
  [style*="paddingRight: 160px"] { padding-right: 24px !important; }

  /* Two-column flex layouts -> stack */
  [style*="display: grid"][style*="gridTemplateColumns: 1.1fr 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 1.1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1.2fr 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 1.2fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1.4fr 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 0.8fr 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 0.8fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 320px 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 360px 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 280px 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 240px 1fr"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 320px"],
  [style*="display: grid"][style*="gridTemplateColumns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 3- and 4-column grids -> 2 cols on tablet, 1 on phone */
  [style*="gridTemplateColumns: repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="gridTemplateColumns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Display headlines: cap massive font sizes */
  [style*="fontSize: 200px"], [style*="font-size: 200px"],
  [style*="fontSize: 180px"], [style*="font-size: 180px"],
  [style*="fontSize: 160px"], [style*="font-size: 160px"],
  [style*="fontSize: 140px"], [style*="font-size: 140px"],
  [style*="fontSize: 130px"], [style*="font-size: 130px"],
  [style*="fontSize: 120px"], [style*="font-size: 120px"] {
    font-size: clamp(56px, 13vw, 110px) !important;
    line-height: 0.98 !important;
  }
  [style*="fontSize: 110px"], [style*="font-size: 110px"],
  [style*="fontSize: 100px"], [style*="font-size: 100px"],
  [style*="fontSize: 96px"], [style*="font-size: 96px"],
  [style*="fontSize: 92px"], [style*="font-size: 92px"],
  [style*="fontSize: 88px"], [style*="font-size: 88px"],
  [style*="fontSize: 84px"], [style*="font-size: 84px"],
  [style*="fontSize: 80px"], [style*="font-size: 80px"],
  [style*="fontSize: 76px"], [style*="font-size: 76px"],
  [style*="fontSize: 72px"], [style*="font-size: 72px"] {
    font-size: clamp(40px, 10vw, 80px) !important;
    line-height: 1.02 !important;
  }
  [style*="fontSize: 68px"], [style*="font-size: 68px"],
  [style*="fontSize: 64px"], [style*="font-size: 64px"],
  [style*="fontSize: 60px"], [style*="font-size: 60px"],
  [style*="fontSize: 56px"], [style*="font-size: 56px"],
  [style*="fontSize: 52px"], [style*="font-size: 52px"],
  [style*="fontSize: 48px"], [style*="font-size: 48px"] {
    font-size: clamp(32px, 7.5vw, 56px) !important;
    line-height: 1.08 !important;
  }
  [style*="fontSize: 44px"], [style*="font-size: 44px"],
  [style*="fontSize: 40px"], [style*="font-size: 40px"],
  [style*="fontSize: 38px"], [style*="font-size: 38px"],
  [style*="fontSize: 36px"], [style*="font-size: 36px"] {
    font-size: clamp(26px, 5.5vw, 40px) !important;
  }
  [style*="fontSize: 32px"], [style*="font-size: 32px"],
  [style*="fontSize: 30px"], [style*="font-size: 30px"],
  [style*="fontSize: 28px"], [style*="font-size: 28px"] {
    font-size: clamp(22px, 4.5vw, 30px) !important;
  }

  /* Common section min-heights too tall */
  [style*="minHeight: 100vh"], [style*="min-height: 100vh"] {
    min-height: auto !important;
  }
  [style*="height: 100vh"] { height: auto !important; }

  /* Tables that overflow */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Pre / code blocks */
  pre, code { white-space: pre-wrap !important; word-break: break-word; }
}

/* ---------- Nav: collapse to mobile drawer ---------- */
@media (max-width: 880px) {
  /* Hide the row of inline nav links and CTA cluster.
     Nav.jsx has these inline-flex groups; we toggle them to none and
     show a hamburger trigger via the [data-mobile-nav] markers Nav.jsx adds. */
  nav [data-desktop-only="true"],
  header [data-desktop-only="true"] { display: none !important; }
  nav [data-mobile-only="true"],
  header [data-mobile-only="true"] { display: flex !important; }

  /* Fallback: any nav UL or links list with many siblings - just allow scroll */
}

/* ---------- Phone (≤640px) ---------- */
@media (max-width: 640px) {
  /* All multi-col grids -> single column */
  [style*="gridTemplateColumns: repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="gridTemplateColumns: repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Trim large gaps */
  [style*="gap: 80px"], [style*="gap: 96px"], [style*="gap: 120px"] {
    gap: 32px !important;
  }
  [style*="gap: 60px"], [style*="gap: 64px"], [style*="gap: 56px"] {
    gap: 28px !important;
  }
  [style*="gap: 48px"], [style*="gap: 40px"] { gap: 24px !important; }

  /* Padding trim */
  [style*="padding: 56px"], [style*="padding: 64px"], [style*="padding: 72px"] {
    padding: 40px 20px !important;
  }
  [style*="padding: 40px"], [style*="padding: 48px"] {
    padding: 28px 18px !important;
  }

  /* Forms: full-width inputs */
  input, textarea, select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

  /* Buttons: don't fix to wide */
  button[style*="minWidth"], a[style*="minWidth"] { min-width: 0 !important; }

  /* Long single words (URLs, etc) */
  p, li, span, a, h1, h2, h3, h4 { overflow-wrap: anywhere; }
}

/* ---------- Reduce motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}