/*
  Station70 responsive retrofit layer.
  Loaded by every page after colors_and_type.css.
  Breakpoints per design system: 640 / 1024.
  Desktop styles are inline; mobile overrides live here inside media
  queries (the one thing inline styles cannot express), using !important
  to win over the inline declarations.
*/

/* Tablet and below: swap the desktop nav links for the hamburger (s70-mobile-nav.js) */
@media (max-width: 1023px) {
  .s70-desktop-nav { display: none !important; }
}

/* Phones */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }

  /* Collapse equal multi column grids to a single column.
     Grids with fixed track sizes (icon + text rows) are untouched. */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide tables scroll horizontally instead of overflowing the page */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 16px minimum stops iOS zooming the page when a field gets focus */
  input, select, textarea { font-size: 16px !important; }

  /* Full height heroes track the visible viewport, not the URL bar */
  [style*="height: 100vh"] { height: 100svh !important; }

  /* Utility: hide desktop-only decoration on phones */
  .s70-m-hide { display: none !important; }

  /* Utility: pin absolutely positioned hero copy to the phone's edges */
  .s70-m-inset {
    left: 24px !important;
    right: 24px !important;
    max-width: none !important;
  }
}

/* Small phones: keep display type inside the viewport */
@media (max-width: 640px) {
  h1 { font-size: clamp(30px, 9.5vw, 42px) !important; }
}