/* =========================================================
   Mobile + tablet overrides for the inline-styled JSX prototype.
   All rules use !important because the JSX components ship styles
   on the `style` attribute, which beats normal CSS specificity.
   ========================================================= */

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  section,
  header > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Container max-widths shrink */
  [style*="max-width: 1320"] { max-width: 100% !important; }
  [style*="max-width: 1380"] { max-width: 100% !important; }

  /* Smaller gaps in two-column hero / cta */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1.1fr"] {
    gap: 32px !important;
  }

  /* WhoWeServe 4-col → 2-col on tablet */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* WeBuild Rail C 5-col → 2-col on tablet */
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* --- Global overflow guard: nothing escapes the viewport --- */
  body { overflow-x: hidden !important; }

  /* --- Universal: any grid → single column --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- BUT restore narrow marker/bullet grids (▸ beside text, not above) --- */
  [style*="grid-template-columns: 18px 1fr"] { grid-template-columns: 18px 1fr !important; }
  [style*="grid-template-columns: 20px 1fr"] { grid-template-columns: 20px 1fr !important; }
  [style*="grid-template-columns: 24px 1fr"] { grid-template-columns: 24px 1fr !important; }

  /* --- Hide the decorative blueprint frame on mobile (it overlaps content) --- */
  div[aria-hidden][style*="pointer-events: none"][style*="border: 1px solid"] {
    display: none !important;
  }

  /* --- Flex header rows (title + right-hand label) wrap instead of overflow --- */
  [style*="display: flex"][style*="justify-content: space-between"],
  [style*="display: flex"][style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
  }

  /* --- Mono / nowrap labels may wrap so long ones don't run off-screen --- */
  span[style*="white-space: nowrap"] { white-space: normal !important; }

  /* --- Quote blocks (case studies): reduce padding, quote mark, and stack mark above text --- */
  [style*="padding: 38px 44px"] { padding: 22px 18px !important; }
  [style*="font-size: 82px"] { font-size: 40px !important; line-height: 0.8 !important; }
  [style*="gap: 26"] { gap: 14px !important; flex-wrap: wrap !important; }

  /* --- SVG diagrams: always scale to their box, clip any stray coords --- */
  svg { max-width: 100% !important; height: auto !important; display: block; overflow: hidden !important; }

  /* --- Sections: tighter vertical + side padding --- */
  section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    min-height: 0 !important;
  }
  /* Outcomes has padding starting at 0 — preserve top */
  section[style*="padding: 0"] { padding-top: 0 !important; }

  /* --- Headlines: scale down --- */
  h1 { font-size: clamp(40px, 12vw, 64px) !important; line-height: 1 !important; }
  h2 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.04 !important; }
  h3 { font-size: clamp(22px, 5.5vw, 30px) !important; }

  /* Phase numbers (the giant "01", "02", "03") */
  [style*="font-size: 96px"] { font-size: 56px !important; }
  /* Phase verb ("We Build.") */
  [style*="font-size: 56px"] { font-size: 32px !important; }
  /* Founders' sign-off italic */
  [style*="font-size: 28px"][style*="italic"] { font-size: 22px !important; }

  /* --- Header notice strip → only "Join waitlist" --- */
  header > div:first-child > div {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 16px !important;
    gap: 0 !important;
  }
  /* Hide the two info spans, keep only the waitlist link */
  header > div:first-child > div > span {
    display: none !important;
  }
  header > div:first-child > div > a {
    justify-self: center !important;
    margin: 0 auto !important;
    font-size: 12px !important;
  }

  /* --- Header main row → strictly one line --- */
  header > div:nth-child(2) {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
  }
  /* Hide nav links on mobile (footer covers them) */
  header > div:nth-child(2) > nav {
    display: none !important;
  }
  /* Hide the "Sign in" link, keep just the Book CTA */
  header > div:nth-child(2) > div > a {
    display: none !important;
  }
  /* Shrink the logo a bit so it pairs well with the compact CTA */
  header > div:nth-child(2) img {
    height: 32px !important;
  }
  /* Compact Book button */
  header > div:nth-child(2) > div > button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  /* --- Flex containers that need to wrap nicely --- */
  [style*="flex-wrap: wrap"] { gap: 16px !important; }

  /* CTA button rows should wrap */
  [style*="display: flex"][style*="gap: 14"] { flex-wrap: wrap !important; }

  /* --- Hero phases footer (3-col with right borders) → stack with bottom borders --- */
  section > div > div[style*="margin-top: 72"] > div[style*="padding-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(230,241,241,0.18) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /* --- Process phase blocks: reset alternating orders --- */
  div[style*="order: 1"], div[style*="order: 2"] { order: initial !important; }

  /* --- Drop hover boxshadows on touch --- */
  /* (keep visuals consistent) */

  /* --- Outcomes stats panel: rebalance cell borders when stacked --- */
  [style*="border-right: 1px solid #C9BCA3"] { border-right: none !important; }

  /* --- SVG drawings — keep them readable, allow horizontal scroll if needed --- */
  svg { max-width: 100%; height: auto; }

  /* --- Cramers card: stack the wine panel above the modules --- */
  /* (already covered by universal grid → 1fr) */

  /* --- Reduce huge inner paddings inside cards on mobile --- */
  [style*="padding: 32px"] { padding: 20px !important; }
  [style*="padding: 36px"] { padding: 22px !important; }
}

/* ---------- Very small phones (≤ 420px) ---------- */
@media (max-width: 420px) {
  section { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: clamp(36px, 13vw, 56px) !important; }
}