/**
 * Mobile-only overrides for the static marketing site.
 *
 * The original styles.css ships fixed-width <pre>/code-window blocks that
 * push the document past the viewport on narrow screens. These overrides
 * constrain them to the available width with horizontal scroll where the
 * content genuinely doesn't fit.
 *
 * Kept in a separate file so the original styles.css stays unmodified
 * (easy to re-sync from upstream).
 */

@media (max-width: 760px) {
  .code-window {
    max-width: 100%;
    width: 100%;
  }

  .code-window__body {
    max-width: 100%;
    overflow-x: auto;
  }

  pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }

  .cli-terminal {
    max-width: 100%;
    overflow-x: auto;
  }

  .terminal-line {
    flex-wrap: wrap;
  }

  .terminal-line__cmd {
    word-break: break-all;
  }

  .vocabulary-strip {
    flex-wrap: wrap;
  }

  /* Multi-column grids that don't shrink natively */
  .app-shell-grid,
  .language-grid,
  .delivery-grid,
  .feature-grid,
  .resilience-steps,
  .gate-grid,
  .crud-routes,
  .rls-modes,
  .versioning-grid,
  .ai-first-grid,
  .pipeline,
  .auth-pillars,
  .crud-pillars,
  .rls-pillars,
  .retrieval-grid,
  .plugin-grid,
  .ownership-table {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .shell-card,
  .feature-card,
  .gate-card,
  .language-card,
  .retrieval-card {
    min-width: 0;
    max-width: 100%;
  }

  /* Stat strips and tables */
  .proof-strip__hero,
  .proof-strip__minor {
    flex-wrap: wrap;
    justify-content: center;
  }

  .retrieval-table {
    width: 100%;
    table-layout: fixed;
  }

  /* Hero callouts and tagline reflow */
  .hero-tagline {
    flex-direction: column;
    gap: 4px;
  }

  .hero-tagline .sep {
    display: none;
  }

  /* Section padding shrinks on mobile so islands and content breathe */
  .section {
    padding: var(--gap-2xl) 0;
  }

  /* Hero copy reflow */
  h1 {
    font-size: clamp(36px, 10vw, 64px);
  }

  h2 {
    font-size: clamp(28px, 7vw, 44px);
  }
}