/* Setura Digital — responsive layer.

   The site is authored in inline styles, which cannot express media queries.
   This file is the only place breakpoints live. It changes nothing about the
   design language: it reduces the page gutter, collapses multi-column grids to
   one column, and steps the display sizes down.

   IMPORTANT — selector form. The runtime re-serialises inline styles before
   they reach the DOM: a space is inserted after every colon and after commas
   inside functions, bare zeros become 0px, and hex colours become rgb().
   So `style="font-size:54px"` in the source arrives as `font-size: 54px`.
   Every selector below is written against that SERIALISED form. Matching the
   authored form silently matches nothing, which is easy to miss because the
   file still loads and the page still renders.

   !important is required throughout: an author stylesheet only beats an inline
   style when the declaration is marked important.

   Breakpoints
     1180px  three-column grids become two
      900px  everything becomes one column; gutter and display sizes step down
      560px  phone gutter, tightest display sizes, table type reduced
*/

img, table, iframe { max-width: 100%; }

/* The masthead wordmark and nav links must never break mid-phrase, at any width. */
[style*="padding: 26px 76px 0px"] nav a,
[style*="padding: 26px 76px 0px"] a > span {
  white-space: nowrap !important;
}

/* ---------- 1180px: three across is too tight ---------- */
@media (max-width: 1180px) {
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 230px 190px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="px 76px"] {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* The header row needs ~950px to hold wordmark and nav side by side, so the
     nav drops to its own row here — before the row runs out of width, not after. */
  [style*="padding: 26px 76px 0px"] > [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  [style*="padding: 26px 76px 0px"] nav {
    flex-wrap: wrap !important;
    gap: 20px !important;
    row-gap: 10px !important;
  }
}

/* ---------- 900px: single column ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="px 76px"] {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Row gaps carry the rhythm once columns collapse. */
  [style*="gap: 56px"], [style*="gap: 44px"], [style*="gap: 40px"] { gap: 32px !important; }
  [style*="gap: 88px"] { gap: 40px !important; }

  /* Fixed-width media and figure placeholders become fluid. */
  [style*="width: 290px"], [style*="width: 300px"], [style*="width: 340px"],
  [style*="width: 360px"], [style*="width: 380px"] {
    width: 100% !important;
  }
  [style*="height: 375px"], [style*="height: 425px"], [style*="height: 450px"],
  [style*="height: 363px"], [style*="height: 325px"] {
    height: auto !important;
    aspect-ratio: 4 / 5;
  }

  /* Display sizes. Body copy is already comfortable and stays where it is. */
  [style*="font-size: 54px"] { font-size: 38px !important; }
  [style*="font-size: 46px"] { font-size: 34px !important; }
  [style*="font-size: 44px"] { font-size: 33px !important; }
  [style*="font-size: 38px"] { font-size: 30px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 25px !important; }

  /* Character measures stop mattering once the column is the limit. */
  [style*="max-width: 17ch"], [style*="max-width: 18ch"], [style*="max-width: 20ch"],
  [style*="max-width: 22ch"], [style*="max-width: 24ch"], [style*="max-width: 26ch"],
  [style*="max-width: 52ch"], [style*="max-width: 54ch"], [style*="max-width: 56ch"],
  [style*="max-width: 58ch"], [style*="max-width: 60ch"], [style*="max-width: 62ch"],
  [style*="max-width: 66ch"] {
    max-width: 100% !important;
  }

  /* Masthead: tighten the wrapped nav further on small screens. */
  [style*="padding: 26px 76px 0px"] > [style*="justify-content: space-between"] {
    gap: 16px !important;
  }
  [style*="padding: 26px 76px 0px"] nav {
    gap: 18px !important;
  }

  /* Any heading-and-value row keeps its parts together by wrapping. */
  [style*="justify-content: space-between"][style*="align-items: baseline"] {
    flex-wrap: wrap !important;
  }
}

/* ---------- 560px: phone ---------- */
@media (max-width: 560px) {
  [style*="px 76px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [style*="font-size: 54px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 28px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="font-size: 32px"] { font-size: 23px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 21px !important; }
  [style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }

  /* Buttons and their trailing reassurance line stop sitting side by side. */
  [style*="align-items: center"][style*="gap: 26px"],
  [style*="align-items: center"][style*="gap: 22px"],
  [style*="align-items: center"][style*="gap: 20px"],
  [style*="align-items: center"][style*="gap: 18px"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Tables: reduce type rather than break the grid, so figures stay comparable. */
  table { font-size: 13px !important; }
  th, td { padding-left: 0 !important; padding-right: 8px !important; }
  th:last-child, td:last-child { padding-right: 0 !important; }

  /* Primary action becomes a full-width tap target. */
  a[style*="background: rgb(154, 52, 18)"] {
    display: block !important;
    text-align: center !important;
  }
  [style*="padding: 15px 28px"], [style*="padding: 17px 30px"] {
    padding: 16px 24px !important;
  }
}