/* Responsive overlay for the Touchstone page.
 *
 * The design canvas styles every element with an inline style attribute and
 * emits no media queries, so the published page is otherwise a fixed-width
 * desktop layout. An inline style beats any selector in the cascade, which is
 * why every rule here carries !important — that is the only way an external
 * sheet can override a style attribute, and it is not a smell in this file.
 *
 * Rules match on the *content* of the style attribute rather than on position
 * in the document, so they keep working when the canvas reorders sections or
 * adds new ones. They only stop applying if the design changes the underlying
 * value — e.g. a hero retyped from 82px to 76px — which `make check` reports.
 *
 * Loaded after the design-system stylesheet; see the Makefile.
 *
 * Breakpoints
 *   <= 1100px   the four-up stage grid folds to two columns
 *   <=  860px   every grid becomes a single column; display type steps down
 *   <=  560px   phone gutters and the smallest type step
 */


/* -------------------------------------------------------------------------
 * Safety net — nothing may push the page sideways at any width.
 * ---------------------------------------------------------------------- */

html {
  overflow-x: hidden;
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

/* The header nav is a flex row that would otherwise overflow on narrow
   screens; the header itself already wraps, the nav does not. */
header nav {
  flex-wrap: wrap !important;
  row-gap: 14px !important;
}


/* -------------------------------------------------------------------------
 * <= 1100px — the four-up "Structure / Reduce / Prove / Detect" grid folds
 * to a 2x2. Cell rules are rebuilt so the interior keeps its rules and the
 * outer edges stay clean.
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {

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

  [style*="repeat(4, 1fr)"] > * {
    border-right: 2px solid #201e1d !important;
  }

  [style*="repeat(4, 1fr)"] > *:nth-child(2n) {
    border-right: 0 !important;
  }

  [style*="repeat(4, 1fr)"] > *:nth-child(-n+2) {
    border-bottom: 2px solid #201e1d !important;
  }

  /* Hero display type, one step down. */
  [style*="font-size: 82px"] { font-size: 64px !important; }
  [style*="font-size: 68px"] { font-size: 54px !important; }
  [style*="font-size: 54px"] { font-size: 44px !important; }
}


/* -------------------------------------------------------------------------
 * <= 860px — tablet and below. Every grid becomes one column, the vertical
 * cell rules become horizontal ones, and the 48px gutter narrows.
 * ---------------------------------------------------------------------- */

@media (max-width: 860px) {

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

  [style*="repeat(4, 1fr)"] > *,
  [style*="repeat(3, 1fr)"] > * {
    border-right: 0 !important;
    border-bottom: 2px solid #201e1d !important;
  }

  [style*="repeat(4, 1fr)"] > *:last-child,
  [style*="repeat(3, 1fr)"] > *:last-child {
    border-bottom: 0 !important;
  }

  /* The 48px horizontal gutter, in every padding shorthand that carries it. */
  [style*=" 48px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Display type. */
  [style*="font-size: 82px"] { font-size: 46px !important; }
  [style*="font-size: 68px"] { font-size: 40px !important; }
  [style*="font-size: 54px"] { font-size: 34px !important; }
  [style*="font-size: 40px"] { font-size: 34px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 28px"] { font-size: 24px !important; }

  /* Body copy. */
  [style*="font-size: 20px"] { font-size: 17px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }

  /* The kicker above the hero is a long single line of tracked-out caps. */
  [style*="letter-spacing: 0.2em"] {
    letter-spacing: 0.14em !important;
  }

  /* Tall section padding is disproportionate once the type has shrunk. */
  [style*="padding: 96px"] { padding-top: 56px !important; padding-bottom: 52px !important; }
  [style*="padding: 88px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 72px"] { padding-top: 48px !important; }
}


/* -------------------------------------------------------------------------
 * <= 560px — phones.
 * ---------------------------------------------------------------------- */

@media (max-width: 560px) {

  [style*=" 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [style*="padding: 32px 28px 36px"],
  [style*="padding: 36px 32px 44px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [style*="font-size: 82px"] { font-size: 36px !important; }
  [style*="font-size: 68px"] { font-size: 32px !important; }
  [style*="font-size: 54px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size: 27px"] { font-size: 23px !important; }
  [style*="font-size: 22px"] { font-size: 20px !important; }

  /* Full-width call-to-action buttons read better than centred stubs. */
  a[href="#demo"][style*="padding: 20px 30px"],
  a[href^="mailto:"][style*="padding: 20px 30px"] {
    display: block !important;
    text-align: center !important;
  }

  /* The footer's two clusters stack rather than sitting on one baseline. */
  footer {
    align-items: flex-start !important;
    row-gap: 24px !important;
  }
}