/* ============================================================
   Mobile responsiveness for the inline-styled ZStrike export.
   The pages have no classes. support.js renders via React, which
   re-serializes inline styles with a space after each colon and
   normalizes values (0 -> 0px). Selectors below MUST match that
   rendered form: `flex: 0 0`, `padding: 0px 32px`, etc.
   :has() stacks any flex row that holds a fixed-basis column.
   ============================================================ */

img, svg, video { max-width: 100%; height: auto; }

/* ---- Tablet / large phone: stack multi-column layouts ---- */
@media (max-width: 900px) {
  /* Paper column: tighter side padding; keep full-bleed bands flush to it */
  [style*="max-width: 1240px"][style*="padding: 0px 32px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [style*="margin: 0px -32px"] {
    margin-left: -18px !important;
    margin-right: -18px !important;
  }

  /* Any 2-column row (hero, feature bands, FAQ, split sections) -> stack */
  div:has(> [style*="flex: 0 0"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Columns can never exceed the paper width once stacked */
  [style*="flex: 0 0"],
  [style*="flex: 1 1 0%"] {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Code blocks scroll internally instead of forcing the page wide */
  pre {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  /* Icon+text rows (stat cards etc.) wrap instead of overflowing */
  [style*="gap: 14px"] { flex-wrap: wrap !important; }
}

/* ---- Phone: wrap the nav, collapse card grids, scale display type ---- */
@media (max-width: 760px) {
  /* Nav bar wraps; links drop to a centered row below the logo + CTA */
  [style*="padding: 20px 8px"] { flex-wrap: wrap !important; row-gap: 12px !important; }
  nav[style*="margin-left: 40px"] {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
  }
  /* Row 1 = logo + primary CTA (SIGN IN removed from markup). Trim the button
     padding a touch so the logo + DEPLOY FREE sit comfortably on one row. */
  [style*="padding: 11px 20px"] { padding: 10px 14px !important; }
}

@media (max-width: 620px) {
  /* Multi-up card rows (flex:1 columns) collapse to a single column */
  div:has(> [style*="flex: 1 1 0%"]) { flex-wrap: wrap !important; }
  div:has(> [style*="flex: 1 1 0%"]) > [style*="flex: 1 1 0%"] { flex-basis: 100% !important; }
  [style*="flex: 1 1 140px"], [style*="flex: 1 1 300px"], [style*="flex: 1 1 380px"] { flex-basis: 100% !important; }

  /* Headline + display type scaling */
  [style*="font-size: 56px"] { font-size: 33px !important; letter-spacing: -0.6px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 38px"] { font-size: 25px !important; }
  [style*="font-size: 34px"], .zs-h2 { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 110px"] { font-size: 54px !important; letter-spacing: -2px !important; }
  [style*="font-size: 96px"], .zs-stat { font-size: 48px !important; letter-spacing: -1.5px !important; }

  /* Every multi-column grid collapses to a single column (sidebars, card
     grids, stat pairs) — except the comparison table, which must stay a grid
     to read as a comparison (tightened just below). */
  [style*="grid-template-columns"]:not([style*="grid-template-columns: 2.2fr"]),
  .zs-legal-row {
    grid-template-columns: 1fr !important;
  }

  /* Comparison grid: tighten cells so 4 columns still fit */
  [style*="grid-template-columns: 2.2fr"] { font-size: 12px !important; }
  [style*="grid-template-columns: 2.2fr"] > div { padding-left: 6px !important; padding-right: 6px !important; }

  /* Footer: stack the 3 link columns and the copyright/email bar so the
     mono labels get full width instead of breaking mid-word */
  [style*="gap: 64px"] { flex-direction: column !important; gap: 22px !important; }
  [style*="padding: 20px 0px 24px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  [style*="padding: 20px 0px 24px"] > * { margin-left: 0 !important; }
}