/* GxPForge mobile overrides.
   The pages are styled inline, so these rules use attribute selectors
   plus !important to win at small widths. Desktop is untouched. */

@media (max-width: 900px) {
  /* Every multi column grid collapses to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* The three fixed width blocks on the homepage options page */
  [style*="width:1180px"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* Flex rows may wrap. Inline styles never set flex-wrap,
     so no !important is needed and rows that fit stay on one line. */
  [style*="display:flex"] {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }
  /* Hero headlines */
  [style*="font-size:64px"],
  [style*="font-size:62px"],
  [style*="font-size:56px"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  /* Section headings */
  [style*="font-size:46px"],
  [style*="font-size:44px"],
  [style*="font-size:42px"],
  [style*="font-size:40px"] {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  /* Tall hero padding comes down, side padding tightens */
  [style*="padding:104px"],
  [style*="padding:96px"] {
    padding: 56px 20px !important;
  }
  /* Main containers get phone friendly side padding */
  [style*="max-width:1200px"],
  [style*="max-width:1180px"],
  [style*="max-width:1100px"],
  [style*="max-width:960px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Images never overflow. Skips images that set their own height,
     like the hero background, so object-fit keeps working. */
  img:not([style*="height"]) {
    max-width: 100%;
    height: auto;
  }
  /* The consent banner buttons stack cleanly on narrow screens */
  #gxp-consent-banner > div {
    flex-direction: column;
    align-items: stretch !important;
  }
}

/* v2 additions. The sticky nav was still forcing the page wide on phones. */

@media (max-width: 700px) {
  /* The nav bar drops its fixed 68px height so its row can wrap
     into two lines: logo on top, links and button below. */
  nav [style*="height:68px"] {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 4px;
  }
  /* Tighten the wide gaps that push the row past the screen */
  [style*="gap:28px"] {
    gap: 10px 16px !important;
  }
  [style*="gap:26px"] {
    gap: 12px 18px !important;
  }
  [style*="gap:24px"] {
    gap: 10px 14px !important;
  }
  /* Nav links a touch smaller so the row fits on one wrapped line */
  nav a {
    font-size: 14px !important;
  }
  /* Belt and suspenders: nothing may widen the document */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* v3. The image-slot component computes width from its fixed height
   via a 3:2 aspect ratio, blowing out its grid column on phones. */

@media (max-width: 900px) {
  /* Grid and flex children may never be wider than their track */
  [style*="grid-template-columns"] > *,
  [style*="display:flex"] > * {
    min-width: 0;
    max-width: 100%;
  }
  image-slot {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Fixed-height image wrappers size from width instead */
  [style*="height:360px"],
  [style*="height:420px"],
  [style*="height:480px"] {
    height: auto !important;
  }
}

/* v4. Nav items must keep their size and wrap, not shrink and clip. */

@media (max-width: 700px) {
  nav [style*="display:flex"],
  nav > div {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 6px;
  }
  nav [style*="display:flex"] > *,
  nav > div > * {
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  nav > div {
    padding: 10px 16px !important;
  }
}

/* v5. The root index.html formats inline styles with spaces after colons
   ("gap: 28px"), the .dc pages without ("gap:28px"). Every rule needs
   both spellings. */

@media (max-width: 900px) {
  [style*="grid-template-columns:"] ,
  [style*="grid-template-columns: "] {
    grid-template-columns: 1fr !important;
  }
  [style*="display: flex"] {
    flex-wrap: wrap;
  }
  [style*="grid-template-columns"] > *,
  [style*="display: flex"] > * {
    min-width: 0;
    max-width: 100%;
  }
  [style*="height: 360px"],
  [style*="height: 420px"],
  [style*="height: 480px"] {
    height: auto !important;
  }
}

@media (max-width: 700px) {
  nav > div > div {
    gap: 10px 14px !important;
  }
  [style*="gap: 28px"] { gap: 10px 16px !important; }
  [style*="gap: 26px"] { gap: 12px 18px !important; }
  [style*="gap: 24px"] { gap: 10px 14px !important; }
  nav > div > * {
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 640px) {
  [style*="font-size: 64px"],
  [style*="font-size: 62px"],
  [style*="font-size: 56px"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  [style*="font-size: 46px"],
  [style*="font-size: 44px"],
  [style*="font-size: 42px"],
  [style*="font-size: 40px"] {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  [style*="padding: 104px"],
  [style*="padding: 96px"] {
    padding: 56px 20px !important;
  }
  [style*="max-width: 1200px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 960px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}