/* Responsive layer for the Xenophon public site.
 *
 * The design bundle ships no media queries: type is fluid via clamp(), but
 * every grid declares a fixed column count and the page root sets
 * overflow-x:hidden, so below roughly 1000px the wide grids and the nav row
 * push the layout past the viewport and the excess is silently clipped
 * rather than scrolled.
 *
 * Everything here is layout only — stacking columns and letting the header
 * wrap. No colour, type scale or spacing token is overridden; those already
 * adapt on their own. Inline style attributes carry the design, so these
 * rules need !important to reach it.
 */

/* ---- Tablet: the widest grids stop being wide ---------------------------- */
@media (max-width: 1080px) {
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:1.5fr repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Editorial two-column sections become one reading column ------------- */
@media (max-width: 900px) {
  [style*="grid-template-columns:minmax(0,.85fr)"],
  [style*="grid-template-columns:minmax(0,.8fr)"],
  [style*="grid-template-columns:minmax(0,.9fr)"],
  [style*="grid-template-columns:minmax(0,1.05fr)"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Label-in-the-gutter rows: the gutter is wider than the label needs on a
   * narrow screen, so the label moves above the content it introduces. */
  [style*="grid-template-columns:200px minmax(0,1fr)"],
  [style*="grid-template-columns:180px minmax(0,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The nav row is a single non-wrapping flex line sized for five links plus
   * a wordmark and a call to action. Let it become two rows instead. */
  header[data-screen-label="Nav"] {
    height: auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 20px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  header[data-screen-label="Nav"] > nav {
    order: 3 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 18px !important;
  }
}

/* ---- Phone: everything is one column ------------------------------------- */
@media (max-width: 640px) {
  [style*="grid-template-columns"]:not([style*="grid-template-columns:36px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Side-by-side hero actions stack rather than shrink below a tappable
   * width; they are already flex-wrap:wrap, they just need the room. */
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a {
    justify-content: center !important;
  }
}

/* Long monospaced label runs are the one thing that can still establish a
 * min-content width wider than a phone. */
@media (max-width: 640px) {
  [style*="Martian Mono"] {
    overflow-wrap: anywhere !important;
  }
}