/* TFS responsive overrides — targets [data-rsp] markers set in the DC templates.
   Breakpoints per design system: <=767 mobile, 768-1023 tablet. */

/* Page shell — the layouts are tuned for <=1600px, so cap the DC root (the div
   support.js mounts the page into) and centre it. Beyond 1600px the viewport
   just grows gutters instead of stretching every section. */
#dc-root { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* Full-bleed sections — background spans the whole viewport while the content
   box stays on the same 1600px column as every other section. The negative
   margin widens the element past the cap; the matching padding pulls its
   contents back in, so children keep their own 48/80px padding untouched.
   Percentages resolve against the 1600px parent, so below the cap both terms
   cancel out and the rules are inert. */
@media (min-width: 1601px) {
  html { overflow-x: hidden; } /* clips the scrollbar-width slop in 100vw */
  [data-rsp~="bleed"], [data-rsp~="bleed-pad"] {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  /* Container whose own padding lives on its children (home hero). */
  [data-rsp~="bleed"] {
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }
  /* Section that carries its own 80px padding (footer) — inline style, so the
     override has to win. */
  [data-rsp~="bleed-pad"] {
    padding-left: calc(50vw - 50% + 80px) !important;
    padding-right: calc(50vw - 50% + 80px) !important;
  }
}
/* Sibling components (site-nav, site-footer, monitoring-portal) are separate
   .dc.html files the runtime fetches after React boots, so it paints a
   placeholder first. Left alone that placeholder is a bordered grey box, and
   its hint-size height is stale — the header flashed a skeleton and then
   shoved the hero down on swap. Keep the reserved space invisible, and pin the
   nav box to the height the nav actually renders at. */
.sc-placeholder { background: transparent !important; border-color: transparent !important; }
.sc-placeholder[title="site-nav"] { height: 84px !important; }
@media (max-width: 1023px) { .sc-placeholder[title="site-nav"] { height: 88px !important; } }

[data-rsp~="menubtn"] { display: none; }
[data-rsp~="only-sm"] { display: none; }
@media (max-width: 1023px) {
  [data-rsp~="wm"] { display: none !important; }
  [data-rsp~="pad"] { padding-left: 40px !important; padding-right: 40px !important; }
  [data-rsp~="grid-md"] { grid-template-columns: 1fr !important; gap: 48px !important; }
  [data-rsp~="grid3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-rsp~="grid4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-rsp~="navlinks"] { display: none !important; }
  [data-rsp~="langhead"] { display: none !important; }
  [data-rsp~="menubtn"] { display: inline-flex !important; }
  [data-rsp~="off"] { margin-top: 0 !important; }
  [data-rsp~="padtop"] { padding-top: 72px !important; }
  [data-rsp~="padbot"] { padding-bottom: 72px !important; }
  [data-rsp~="heroov"] { background: linear-gradient(180deg, rgba(250,248,244,.95) 0%, rgba(250,248,244,.85) 60%, rgba(250,248,244,.72) 100%) !important; }
  [data-rsp~="photobox"], [data-rsp~="photo"] { margin-left: auto !important; margin-right: auto !important; }
  [data-rsp~="cap"] { justify-content: center !important; }
  [data-rsp~="stepgrid"] { grid-template-columns: auto 1fr !important; gap: 20px 24px !important; }
  [data-rsp~="stepcard"] { grid-column: 1 / -1; }
  [data-rsp~="h1"] { font-size: 48px !important; }
  [data-rsp~="h2"] { font-size: 36px !important; }
}
@media (max-width: 767px) {
  [data-rsp~="pad"] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-rsp~="padtop"] { padding-top: 56px !important; }
  [data-rsp~="padbot"] { padding-bottom: 56px !important; }
  [data-rsp~="grid"], [data-rsp~="grid3"], [data-rsp~="grid-md"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-rsp~="grid4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  [data-rsp~="grid2"] { grid-template-columns: 1fr !important; }
  [data-rsp~="gridm1"] { grid-template-columns: 1fr !important; }
  [data-rsp~="h1"] { font-size: 38px !important; }
  [data-rsp~="h2"] { font-size: 30px !important; }
  [data-rsp~="stack"] { flex-direction: column !important; align-items: flex-start !important; }
  [data-rsp~="wrap"] { flex-wrap: wrap !important; }
  [data-rsp~="photo"] { width: 300px !important; height: 300px !important; }
  [data-rsp~="photobox"] { width: 300px !important; }
  [data-rsp~="navcta"] { display: none !important; }
  [data-rsp~="kv"] { grid-template-columns: 1fr !important; gap: 6px !important; }
  [data-rsp~="scrollx"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-rsp~="cardpad"] { padding: 24px 20px !important; }
  [data-rsp~="num"] { font-size: 22px !important; }
  [data-rsp~="btnfit"] a { max-width: 100%; }
  [data-rsp~="btnfit"] button { max-width: 100% !important; white-space: normal !important; height: auto !important; min-height: 48px; padding-top: 10px !important; padding-bottom: 10px !important; line-height: 1.3 !important; }
  [data-rsp~="scrollx"]::-webkit-scrollbar { display: none; }
  [data-rsp~="tabsfit"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  [data-rsp~="hide-sm"] { display: none !important; }
  [data-rsp~="only-sm"] { display: flex !important; }
  [data-rsp~="tabsfit"] > * { min-width: max-content; }
  [data-rsp~="tabsfit"] button { white-space: nowrap !important; }
  [data-rsp~="pill"] { white-space: nowrap !important; }
  [data-rsp~="body-sm"] { font-size: 13.5px !important; }
  [data-rsp~="title-sm"] { font-size: 18px !important; }
  /* Portal (monitoring-portal) mobile simplification */
  [data-rsp~="portalkpi"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  [data-rsp~="portalkpi"] > div { padding: 16px 18px !important; }
  [data-rsp~="portalbtns"] { width: 100%; flex-direction: column !important; }
  [data-rsp~="portalbtns"] button { width: 100%; justify-content: center; }
}