/* Mobile layer for the deployed site. The pages style themselves with inline
   styles that reference the design tokens, so small screens are handled two
   ways: shrink the tokens, and collapse the inline multi-column grids via
   [style*=...] attribute selectors (a stylesheet !important beats an inline
   declaration). Desktop is untouched. */

@media (max-width: 860px) {
  :root {
    --section-y: 56px;
    --section-y-tight: 40px;
    --section-y-loose: 72px;
    --gutter: 16px;
    --text-6xl: 44px;
    --text-5xl: 38px;
    --text-4xl: 32px;
    --text-3xl: 27px;
    --text-2xl: 23px;
    --space-16: 40px;
  }

  /* The app wrapper is a grid; stop its implicit column growing to the
     min-content width of the widest descendant. */
  [style*="grid-template-rows"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Collapse page grids to a single column… */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* …except narrow icon/text rows, restored to their inline values. */
  [style*="grid-template-columns: auto 1fr"] { grid-template-columns: auto 1fr !important; }
  [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr auto !important; }
  [style*="grid-template-columns: 26px 1fr auto"] { grid-template-columns: 26px 1fr auto !important; }
  [style*="repeat(12,1fr)"] {
    grid-template-columns: repeat(12, 1fr) !important; /* PMP hero collage */
  }
  [style*="10fr 5fr"] {
    grid-template-columns: 10fr 5fr 80fr 5fr 18fr !important; /* phone frame chrome */
  }

  /* Header: let it wrap into logo + nav rows instead of overflowing. */
  header {
    position: static !important;
    height: auto !important;
    flex-wrap: wrap;
    padding: 10px var(--space-4) !important;
    row-gap: 6px;
  }
  header nav {
    order: 3;
    flex-basis: 100%;
    min-width: 0;      /* flex items refuse to shrink below content without this */
    max-width: 100%;
    margin-left: 0 !important;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  header nav span { white-space: nowrap; }

  /* Grids without explicit columns (Hero, CTA bands) get one capped track,
     so their implicit column can't grow past the viewport either. */
  main [style*="display: grid"]:not([style*="grid-template-columns"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Button rows (gap --space-3/-4 groups) wrap instead of overflowing;
     icon+text rows keep their single line. */
  main [style*="display: flex"][style*="gap: var(--space-3)"],
  main [style*="display: flex"][style*="gap: var(--space-4)"],
  main [style*="display: flex"][style*="gap: var(--space-6)"] {
    flex-wrap: wrap;
  }

  /* Anything wider than the phone scrolls inside itself, not the page. */
  body { overflow-x: hidden; }
}