/* ==========================================================================
   responsive.css — mobile/tablet overrides on top of the inline-styled
   components. The components were authored desktop-first with hard-coded
   pixel widths and multi-column grids in style props; this file uses
   attribute selectors with !important to relax those for narrow viewports
   without rewriting every component.
   ========================================================================== */

/* Safety net: prevent any stray fixed-width content from triggering
   horizontal scroll on phones. */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  body { width: 100%; max-width: 100vw; }
}

/* -------- Mobile (<= 768px) ----------------------------------------------- */
@media (max-width: 768px) {

  /* Collapse every inline-styled grid into a single column. The components
     use grid-template-columns ranging from "repeat(3,1fr)" to bespoke
     "1.2fr 1fr 2.4fr" — none of those work on a phone. minmax(0, 1fr)
     instead of plain 1fr lets the column shrink below its content's
     min-content width, which is critical for cells that hold pre-
     formatted code (whiteSpace: pre) — otherwise the long curl-line
     forces the whole grid wider than the viewport. */
  [style*="display: grid"][style*="grid-template-columns"],
  [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  /* Pair with the override above: grid items must be allowed to shrink
     under their intrinsic min-content so any inner overflow:auto can
     actually create a horizontal scroll instead of pushing the parent. */
  [style*="display: grid"] > *,
  [style*="display:grid"] > * {
    min-width: 0 !important;
  }

  /* Code / terminal blocks: any monospace container with padding gets a
     horizontal-scroll fallback. This catches the Surfaces code samples,
     the TerminalShowcase output, and the pipeline YAML viewer — all of
     which use whiteSpace: pre on long single-line snippets that would
     otherwise crop. */
  [style*="JetBrains Mono"][style*="padding"] {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Trim aggressive section padding so vertical real-estate isn't wasted. */
  section[style*="padding: 120px 32px"],
  section[style*="padding: 100px 32px"],
  section[style*="padding: 80px 32px"],
  section[style*="padding: 80px 32px 100px"],
  section[style*="padding: 60px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Headlines and subheads — clamp() handles most of this, but a few
     sit at fixed font sizes. Cap them so they don't tower. */
  h1[style*="clamp(56px"], h1[style*="font-size: 56px"] {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
  h2[style*="clamp(36px"] {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  /* Navbar: hide the left-side dense link list + github icon + separator,
     keep just the logo block and the Cloud waitlist CTA so the bar stays
     usable on a phone. The component's right-side cluster is the second
     direct child of <nav>; we keep only its last child. */
  nav > div:last-child > *:not(:last-child) {
    display: none !important;
  }
  nav > div:last-child {
    gap: 0 !important;
  }
  nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* CTA buttons: shrink padding/font so two CTAs in a hero still fit
     side by side. Anchors using gradient-bg are the primary CTA pattern. */
  a[style*="linear-gradient(90deg, #2ec47a, #1a8fe0)"],
  a[style*="linear-gradient(90deg,#2ec47a,#1a8fe0)"] {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* The architecture-diagram iframe switches to pan mode on phones —
     it renders the stage at native size with horizontal pan, so the
     iframe needs to be tall enough for the full 720px stage plus the
     intro copy and swipe hint. The auto-resize postMessage will tune
     this exactly; min-height just avoids a brief load flash. */
  iframe[title="Skardi agent data plane architecture"] {
    min-height: 860px;
  }
}

/* -------- Small phones (<= 380px) ---------------------------------------- */
@media (max-width: 380px) {
  /* The BETA pill in the navbar logo block can wrap awkwardly on
     iPhone SE-width devices; hide it. */
  nav > div:first-child > span:last-child {
    display: none !important;
  }
}