/* Responsive overrides for the ZeroZ4j site.
   Layouts are inline-styled in JSX, so these target the rendered style attrs with !important. */

html, body { overflow-x: hidden; }
pre, img, table { max-width: 100%; }

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px) {
  section { padding-left: 40px !important; padding-right: 40px !important; }
  .vault-surface > div { padding-left: 40px !important; padding-right: 40px !important; }
  /* three-column card/table grids -> two up */
  div[style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* fixed sidebar + content splits -> stack */
  div[style*="380px 1fr"],
  div[style*="1fr 380px"],
  div[style*="440px 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  section { padding-top: 72px !important; padding-bottom: 72px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .vault-surface > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* collapse every multi-column grid to a single column */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* inner section wrappers shouldn't cap width awkwardly */
  section > div { max-width: 100% !important; }

  /* two-up hero splits (flex) stack */
  div[style*="minHeight: 620"], div[style*="min-height: 620"],
  div[style*="minHeight: 560"], div[style*="min-height: 560"] { display: block !important; }

  /* hide the decorative centre "Libra" axis lines on mobile */
  div[style*="left: 50%"][style*="position: absolute"] { display: none !important; }

  /* nav: wrap + tighten */
  .vault-surface > div:first-child { flex-wrap: wrap !important; gap: 10px 18px !important; padding-top: 14px !important; padding-bottom: 14px !important; justify-content: center !important; row-gap: 10px !important; }
  .vault-surface > div:first-child > div { flex-wrap: wrap !important; justify-content: center !important; gap: 10px 16px !important; }

  /* code blocks: comfortable on small screens */
  pre { font-size: 12px !important; padding: 18px !important; }

  /* dial big display headings down a touch on very small widths */
  h1 { line-height: 1.05 !important; }
}

@media (max-width: 480px) {
  section { padding-left: 18px !important; padding-right: 18px !important; }
  .vault-surface > div { padding-left: 18px !important; padding-right: 18px !important; }
  pre { font-size: 11px !important; }
}