/* Octalcode — global responsive overrides.
   The components use inline styles with fixed pixels & multi-col grids.
   These rules clamp them down on smaller viewports without touching JS. */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* Reduce big display fonts */
  #root h1[style*="font-size: 132px"],
  #root h1[style*="font-size:132px"] { font-size: clamp(48px, 9vw, 96px) !important; line-height: 0.98 !important; }
  #root h2[style*="font-size: 84px"], #root h2[style*="font-size: 96px"],
  #root h2[style*="font-size: 88px"], #root h2[style*="font-size: 72px"],
  #root h2[style*="font-size:84px"],  #root h2[style*="font-size:96px"] { font-size: clamp(40px, 7vw, 72px) !important; line-height: 1.04 !important; }
  #root h3[style*="font-size: 64px"], #root h3[style*="font-size: 56px"],
  #root h3[style*="font-size: 48px"], #root h3[style*="font-size: 42px"] { font-size: clamp(32px, 5vw, 56px) !important; line-height: 1.1 !important; }

  /* Reduce side gutters on big section paddings */
  #root section[style*="padding: 140px 64px"],
  #root section[style*="padding: 120px 64px"],
  #root section[style*="padding: 160px 64px"] { padding: 96px 32px !important; }

  /* Tighten 5-col / 4-col grids to 3 */
  #root [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  #root [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Phones (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* Force every grid to a single column. Inline styles serialise as kebab-case. */
  #root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Cap absurd font sizes */
  #root h1, #root h1 * { font-size: clamp(36px, 11vw, 64px) !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; }
  #root h2 { font-size: clamp(32px, 8.5vw, 52px) !important; line-height: 1.06 !important; }
  #root h3 { font-size: clamp(24px, 6vw, 38px) !important; line-height: 1.15 !important; }
  #root blockquote { font-size: clamp(20px, 5vw, 28px) !important; line-height: 1.3 !important; }

  /* Shrink big section paddings */
  #root section[style] { padding-left: 20px !important; padding-right: 20px !important; }
  #root section[style*="padding: 140px"],
  #root section[style*="padding: 160px"],
  #root section[style*="padding: 120px"],
  #root section[style*="padding: 100px"] { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Tame fixed pixel paddings inside cards */
  #root [style*="padding: 56px"] { padding: 24px !important; }
  #root [style*="padding: 64px"] { padding: 28px !important; }
  #root [style*="padding: 48px"] { padding: 24px !important; }
  #root [style*="padding: 40px"] { padding: 20px !important; }

  /* Stack flex rows that were sized for desktop */
  #root [style*="display: flex"][style*="gap: 64"],
  #root [style*="display: flex"][style*="gap: 56"],
  #root [style*="display: flex"][style*="gap: 48"] { flex-wrap: wrap !important; gap: 20px !important; }

  /* Shrink the nav side gutter */
  #root nav[style] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Reveal: hide right-side scroll-rail dots & hints on mobile */
  body > div[style*="position: fixed"][style*="right: 24px"],
  body > div[style*="position: fixed"][style*="right: 32px"] { display: none !important; }

  /* Hero side margins */
  #root [style*="max-width: 980"],
  #root [style*="max-width: 1180"],
  #root [style*="max-width: 1100"],
  #root [style*="max-width: 900"] { max-width: 100% !important; }

  /* Smaller chatbot bubble doesn't hog screen */
  #octal-chatbot, [data-octal-chatbot] { max-width: calc(100vw - 24px) !important; }
}

/* ---------- Very small (≤ 420px) ---------- */
@media (max-width: 420px) {
  #root h1, #root h1 * { font-size: clamp(32px, 10vw, 48px) !important; }
  #root section[style] { padding-left: 16px !important; padding-right: 16px !important; }
  #root [style*="font-size: 22px"], #root [style*="font-size: 20px"] { font-size: 16px !important; }
  #root [style*="font-size: 18px"] { font-size: 15px !important; }
}

/* ---------- Universal safety: prevent horizontal overflow ---------- */
html, body { max-width: 100vw; overflow-x: hidden; }
#root, #root > div { max-width: 100vw; }
#root img, #root svg, #root video, #root canvas { max-width: 100%; height: auto; }

/* ===================================================================
   EXTENDED RESPONSIVE — hero, new sections, tablet stacking, paddings
   =================================================================== */

/* ---------- Tablet & down (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* new hero headline size */
  #root h1[style*="font-size: 124px"],
  #root h1[style*="font-size:124px"] { font-size: clamp(46px, 8.5vw, 92px) !important; line-height: 0.98 !important; }

  /* stack asymmetric two-column layouts (hero, section headers, mega panel) */
  #root [style*="grid-template-columns: 1.4fr 1fr"],
  #root [style*="grid-template-columns: 1fr 1.6fr"],
  #root [style*="grid-template-columns: 1fr 1.8fr"],
  #root [style*="grid-template-columns: 1.6fr 1fr"],
  #root [style*="grid-template-columns: 1fr 1.4fr"],
  #root [style*="grid-template-columns: 0.9fr 2fr"],
  #root [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }

  /* reduce the 1440-wide container side gutters */
  #root [style*="max-width: 1440px"] { padding-left: 32px !important; padding-right: 32px !important; }

  /* signal panel becomes full-width when the hero stacks */
  #root [style*="max-width: 452px"],
  #root [style*="max-width: 440px"] { max-width: 100% !important; }

  /* sections that switched to the trimmed paddings */
  #root section[style*="padding: 92px 64px"],
  #root section[style*="padding: 80px 64px"],
  #root section[style*="padding: 72px 64px"] { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---------- Phones (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* trimmed section paddings → compact vertical rhythm */
  #root section[style*="padding: 92px"],
  #root section[style*="padding: 80px"],
  #root section[style*="padding: 72px"],
  #root section[style*="padding: 108px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* container gutters tighter on phones */
  #root [style*="max-width: 1440px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* relax the tall hero so it sizes to its (now stacked) content */
  #root section[style*="min-height: 720px"] { min-height: 0 !important; }
  #root section[style*="min-height: 720px"] > [style*="padding-top: 116px"] { padding-top: 92px !important; padding-bottom: 48px !important; }

  /* dim + shrink the decorative globe so it sits behind text, not over it */
  #root section[style*="min-height: 720px"] > div[style*="right: -40px"] { opacity: 0.28 !important; transform: scale(0.7) translateX(20%) !important; }
}

/* ---------- Very small (≤ 420px) ---------- */
@media (max-width: 420px) {
  #root [style*="max-width: 1440px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* keep the chat launcher pill from spilling off-screen */
  [style*="right: 100px"][style*="bottom: 38px"] { right: 86px !important; max-width: 60vw !important; }
}