/* Responsive layer
   ----------------
   Pages are authored with inline styles, so these rules override them using
   attribute selectors plus !important. The selector strings match the style
   attribute AS THE BROWSER SERIALISES IT after render, which is not always
   how it appears in the source: `0` becomes `0px`, hex colours become
   `rgb()`. Change an inline style in the markup and the matching rule here
   may silently stop applying.

   The auto-fit grids already use minmax(min(Npx, 100%), 1fr) and need no
   help. Only the fixed-column grids are handled below. */

/* Inputs carry a default intrinsic width that bursts out of grid tracks. */
input, select, textarea { min-width: 0 !important; max-width: 100% !important; }

@media (max-width: 900px) {
  /* Fixed-column grids have no auto-fit fallback, so stack them. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: minmax(48px, 90px) minmax(180px, 340px) 1fr"],
  [style*="grid-template-columns: minmax(140px, 220px) 1fr"],
  [style*="grid-template-columns: minmax(64px, 120px) 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Numbered process steps: once the number column stacks above the text it
     inherits the grid's centred alignment. Pull it back to the left edge so
     the number, heading and body read as one left-aligned block. */
  [style*="grid-template-columns: minmax(48px, 90px)"] > *,
  [style*="grid-template-columns: minmax(64px, 120px)"] > *,
  [style*="grid-template-columns: minmax(140px, 220px)"] > * {
    text-align: left !important;
    justify-self: start !important;
  }
}

/* The desktop nav is shown from about 1000px up, but between there and
   roughly 1120px the seven items plus the language toggle and CTA no longer
   share a line, so the sticky header doubles to 121px. Tighten it rather than
   let it eat the viewport. The upper bound moved when Press was added. */
@media (min-width: 901px) and (max-width: 1119px) {
  header nav { gap: 12px !important; }
  header nav a, header nav button { font-size: 12px !important; }
  header nav + div { gap: 12px !important; }
  header nav + div > span { display: none !important; }
  header nav + div > a { padding: 11px 14px !important; font-size: 11px !important; }
}

@media (max-width: 760px) {
     they stack, every rule points the wrong way and leaves a stray line down
     the right edge of the screen. Turn the divider through 90 degrees and
     trim the padding, which is sized for a wide row, not a tall stack.
     Note the spacing inside rgba(): that is how the browser serialises it,
     and the selector has to match the serialised form. */
  [style*="border-right: 1px solid rgba(255, 255, 255, 0.16)"] {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  }
  /* Same band pattern on light grounds. */
  [style*="border-right: 1px solid rgb(231, 234, 238)"] {
    border-right: 0 !important;
    border-bottom: 1px solid rgb(231, 234, 238) !important;
  }
  /* The three cell paddings in these bands: left cell, middle cells, right
     cell. Left and right carry an asymmetric inset for the vertical rules,
     which is meaningless once stacked. */
  [style*="padding: 40px 32px"],
  [style*="padding: 40px 0px 40px 32px"] {
    padding: 22px 0 !important;
  }
  [style*="border-right: 1px solid rgba(255, 255, 255, 0.16)"]:last-child,
  [style*="border-right: 1px solid rgb(231, 234, 238)"]:last-child {
    border-bottom: 0 !important;
  }
  /* The last cell of a light band carries a left inset for its vertical rule. */
  [style*="padding: 40px 0px 40px 32px"] { padding: 22px 0 !important; }
}

@media (max-width: 700px) {
  /* The large CTAs are set to nowrap and are intrinsically wider than a
     phone screen, so let them wrap and take the full column. */
  a[style*="padding: 20px 32px"][style*="white-space: nowrap"] {
    flex: 1 1 100% !important;
    padding: 16px 20px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* An image well with both aspect-ratio and a min-height derives a minimum
     WIDTH from that height: 300px at 4/3 is 400px, wider than the phone. Let
     the aspect ratio work from the available width instead. */
  [style*="aspect-ratio: 4 / 3"][style*="min-height: 300px"],
  [style*="aspect-ratio: 16 / 10"][style*="min-height: 300px"],
  [style*="aspect-ratio: 21 / 9"][style*="min-height: 300px"] {
    min-height: 0 !important;
  }

  /* One CTA pair sits in a `flex: none` wrapper, so the buttons above can
     wrap but the wrapper still sizes to their combined max-content width.
     Serialised as `flex: 0 0 auto`, which is what this has to match. */
  div[style*="flex: 0 0 auto"][style*="display: flex; gap: 16px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  /* Without this the masthead wraps onto a second row and a 121px sticky
     header eats a sixth of the screen. Dropping the language toggle and
     tightening the gutters keeps the logo, CTA and menu button on one line.
     The hamburger still opens the full navigation. */
  header > div:first-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px !important;
    min-height: 60px !important;
    flex-wrap: nowrap !important;
  }
  header nav + div > span,
  header > div:first-child > div > span { display: none !important; }
  header > div:first-child > div > a {
    padding: 11px 13px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  /* Below this the logo, CTA and menu button cannot share a line at any
     readable size. The CTA goes; the hero and the in-page calls to action
     still carry it, and the menu button keeps navigation reachable. */
  header > div:first-child > div > a { display: none !important; }
}