/* Responsive overrides for the React landing.
 * The component uses inline styles (CSS-in-JS) — no class names — so we
 * target via attribute selectors and override with !important. This is
 * the minimum surface needed to make the existing layout work on mobile
 * without forking the React source.
 */

/* No horizontal scroll, ever */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; height: auto; }

/* ---------- Mobile (≤ 640px) ---------- */
@media (max-width: 640px) {
  /* Force single-column for any inline-styled grid (1fr 1.3fr, repeat(3,…), etc.) */
  div[style*="display: grid"][style*="grid-template-columns"],
  div[style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Section vertical padding: 120px → 56px */
  section[style*="padding: 120px"],
  section[style*="padding:120px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section[style*="padding: 96px"]   { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding: 80px"]   { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Page-shell horizontal padding: 48px → 20px */
  div[style*="max-width: 1400px"],
  div[style*="max-width:1400px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Sticky positioning breaks when columns collapse — undo it */
  div[style*="position: sticky"],
  div[style*="position:sticky"] {
    position: static !important;
  }

  /* Headings: clamp giant display sizes (56-120px → fluid). The page sets
   * font-size in inline px; we override per common breakpoint without
   * needing to know each value. */
  h1[style*="font-size"] { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1 !important; }
  h2[style*="font-size"] { font-size: clamp(28px, 7vw, 44px)  !important; line-height: 1.05 !important; }
  h3[style*="font-size"] { font-size: clamp(20px, 5vw, 28px)  !important; }

  /* Body & UI text — keep readable */
  p[style*="font-size: 20px"],
  p[style*="font-size:20px"] { font-size: 16px !important; }

  /* Decorative absolutely-positioned elements off the right edge (the giant
   * "C" letter behind the hero) — clip them */
  div[style*="position: absolute"][style*="right:"] {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Tables / wide schedule grid: allow horizontal scroll inside the box
   * rather than the whole page */
  table, div[style*="overflow-x"] { overflow-x: auto !important; }
}

/* ---------- Tablet (641-1024px) ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 4-up grids → 2-up; 3-up stays 3-up */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="max-width: 1400px"],
  div[style*="max-width:1400px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}