/* Mobile fallbacks.
   The design export lays everything out with inline styles, and inline styles
   can't carry media queries — hence the attribute selectors and !important.
   ponytail: one shared sheet instead of hand-editing every grid in every page. */

@media (max-width: 760px) {
  /* Fixed multi-column grids collapse to one column.
     Grids already using repeat(auto-fit, ...) adapt on their own — leave them. */
  [style*="grid-template-columns"]:not([style*="auto-fit"]) {
    grid-template-columns: 1fr !important;
  }

  /* The export's display sizes overflow narrow screens on long words
     ("opportunity.", "continental:"). */
  h1 { font-size: var(--text-3xl) !important; }
  h2 { font-size: var(--text-xl) !important; }

  /* The header is a space-between row; at this width the wordmark and the
     wrapped nav collide. Stack them instead. */
  header {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 14px !important;
  }
  header > nav {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Desktop side padding eats too much of a phone screen. */
  section {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
}