/* ==========================================================================
   Spectrum IT Hub — responsive layer
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS, AND WHY IT LOOKS LIKE THIS

   The 13 .dc.html pages lay out almost entirely with inline `style="..."`
   attributes. A normal stylesheet cannot override an inline style, so every
   rule here targets the inline style attribute by substring and uses
   !important. That is deliberate, not sloppiness — it is the only way to add
   breakpoints without rewriting the markup of all 13 pages.

   RULES OF THE ROAD
   - Everything lives inside a `max-width` media query, so desktop rendering
     is byte-for-byte unchanged. If a rule would affect desktop, it is a bug.
   - Selectors match the *rendered* style attribute, which React re-serialises.
     Keep the exact spacing used in the markup (`1fr 1fr`, `minmax(0, 1fr)`) —
     NOTE: the browser re-serialises `minmax(0, 1fr)` and `minmax(0,1fr)` alike
     into `minmax(0px, 1fr)`. Match the 0px form — the source spellings do NOT
     match the rendered attribute. Verify new selectors in devtools.
   - Load this AFTER the page's own <style> block.

   Breakpoints: 1024px tablet, 760px phone-landscape, 520px phone.
   ========================================================================== */


/* ---------- 1024px and below: tablet ---------------------------------- */
@media (max-width: 1024px) {

  /* Page gutters. EVERY container width the markup uses must be listed here,
     or that wrapper keeps its desktop 40px padding at every screen size. That
     is exactly what had happened: 1100px (Disclaimer), 1000px (the three legal
     pages), 900px and 860px (Contact, Register, legal) were all missing, so
     five pages sat at a 40px gutter while the other twelve moved to 28/20/16.
     Seventeen wrappers were affected.

     Measured widths in use: 1340, 1140, 1100, 1000, 900, 860. `760px` matches
     nothing today and is kept only so a future 760px wrapper is covered.

     Deliberately excluded: the 560px and 780px modals (centred chrome, not page
     content), and FAQ's `max-width: 540px`, which carries no padding.

     Substring matching is safe across these values — `max-width: 100px` also
     appears in the markup and cannot match `max-width: 1000px` because the
     characters after `100` differ. Verify that before adding a new width. */
  [style*="max-width: 1340px"], [style*="max-width: 1140px"],
  [style*="max-width: 1100px"], [style*="max-width: 1000px"],
  [style*="max-width: 900px"],  [style*="max-width: 860px"],
  [style*="max-width: 760px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* The site justifies all body text by design (see HANDOFF.md §5). That works
     at full width, but from tablet down the columns get narrow enough that
     justification opens visible rivers of whitespace — a two-column section at
     768px leaves each column around 240px. Left-aligned below 1024px only;
     desktop keeps the intended justified setting. Revert this block if the
     justified look is wanted at every size. */
  p, li { text-align: left !important; }

  /* Four- and seven-up card rows are unreadable at this width; go two-up. */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(7, minmax(0px, 1fr))"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Home hero stat cards — centre the wording, not the boxes.
     At four across the left-aligned icon+title reads fine, but once the row
     collapses the cards get much wider than their content and the text drifts
     to one edge of a mostly empty box. The boxes and their padding are left
     exactly as they are; only the contents are centred.

     Keyed on `data-parallax-layer="4"`, which wraps exactly these four cards
     and nothing else on the site — a stable hook rather than a match on an
     inline style string, which is the trap in HANDOFF §6.8. Neither property
     is declared inline, so `!important` is not strictly needed here; it is
     kept for the file's convention and so an inline `justify-content` added
     later cannot silently undo this. */
  [data-parallax-layer="4"] > div > div:first-child {
    justify-content: center !important;   /* the icon + title pair */
  }

  [data-parallax-layer="4"] > div > div:last-child {
    text-align: center !important;        /* the description line */
  }

  /* Footer's 4-column band. */
  [style*="grid-template-columns: 1.3fr 1fr 1.2fr 1.3fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }

  /* Mega-menu: the 260px explainer column crowds the service grid. */
  [style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* ---------- 760px and below: phone landscape / small tablet ----------- */
@media (max-width: 760px) {

  /* No horizontal scrolling, whatever else happens below. */
  /* `clip`, not `hidden`. On html/body, overflow-x:hidden forces the computed
     overflow-y to `auto`, which makes BODY the scroll container: window.scrollY
     then stays 0 forever, position:sticky stops sticking to the viewport, and
     any script reading window.scrollY silently does nothing on mobile — which
     is exactly what happened to the header's condense-on-scroll. `clip` gives
     the same horizontal guard without creating a scroll container. */
  html, body { max-width: 100% !important; overflow-x: clip !important; }

  /* Media should never force the page wider than the screen. */
  img, canvas, svg, video, iframe { max-width: 100% !important; height: auto !important; }

  [style*="max-width: 1340px"], [style*="max-width: 1140px"],
  [style*="max-width: 1100px"], [style*="max-width: 1000px"],
  [style*="max-width: 900px"],  [style*="max-width: 860px"],
  [style*="max-width: 760px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Every multi-column grid collapses to a single column ---------- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1fr 0.55fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: auto 1px 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr 1.2fr 1.3fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"],
  [style*="minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Services' seven cards are full-width bands on desktop: icon+title in a
     fixed 300px column, description filling the middle, EXPLORE flush right.
     On a phone there is no room for three things across, so each band folds
     back into an ordinary stacked card.

     The child reset is not optional. `flex: 0 0 300px` on the title column
     resolves against the MAIN axis, so the moment flex-direction becomes
     column that 300px stops being a width and becomes a 300px HEIGHT — an
     empty half-screen block above every description. Resetting every child to
     `flex: 0 0 auto` is what stops that.

     Keyed on a class, not an inline-style substring (see the note at the top
     of this file). */
  .svc-wide {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .svc-wide > div {
    flex: 0 0 auto !important;
  }

  .svc-wide > div:nth-child(3) {
    margin-top: 4px !important;
  }

  /* Desktop gaps (up to 72px) are wasted vertical space once stacked. */
  [style*="gap: 72px"], [style*="gap: 66px"], [style*="gap: 64px"],
  [style*="gap: 60px"], [style*="gap: 56px"], [style*="gap: 52px"],
  [style*="gap: 48px"], [style*="gap: 44px"], [style*="gap: 40px"] {
    gap: 30px !important;
  }

  /* A stacked cell that was told to span 2 columns must not span 2 of 1. */
  [style*="grid-column: span 2"] { grid-column: span 1 !important; }

  /* --- Header: swap the inline nav for the hamburger ----------------- */
  /* The desktop nav and Register button are replaced by a single toggle at the
     top right. Both the toggle and the panel carry `display: none` inline, so
     they stay hidden on desktop even if this stylesheet fails to load. */
  .hdr-nav, .hdr-cta { display: none !important; }
  .mnav-toggle { display: flex !important; }
  .mnav-panel { display: block !important; }

  /* Header stays a single 82px row — the panel drops below it. */
  [style*="height: 50px"] { height: 38px !important; }

  /* --- Typography / rhythm ------------------------------------------ */
  /* Tame the largest desktop section padding. */
  [style*="padding: 108px"], [style*="padding: 100px"], [style*="padding: 96px"],
  [style*="padding: 92px"], [style*="padding: 88px"], [style*="padding: 84px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* --- Card interiors ----------------------------------------------- */
  /* Generous desktop card padding eats most of a 375px screen — a 56px inset
     leaves barely 230px of usable column.

     `:not([style*="max-width"])` keeps this off the PAGE WRAPPERS. Without it,
     `[style*="padding: 56px"]` also matched `padding: 56px 40px` on the section
     wrappers, and because this rule sits after the gutter rule above it won the
     cascade — so between 521px and 760px those wrappers rendered at a 24px
     gutter while their neighbours sat at 20px, which is precisely the ragged
     left edge this file is supposed to prevent. Being a shorthand it also
     flattened their vertical padding (76px section spacing down to 24px).

     The split is exact and was measured: every match carrying `max-width` is a
     `margin: 0 auto` page wrapper, and all seven real cards declare no
     max-width — they are identified by `background:` or `border:`. Re-check
     that before adding a width here. */
  [style*="padding: 56px"]:not([style*="max-width"]),
  [style*="padding: 52px"]:not([style*="max-width"]),
  [style*="padding: 48px"]:not([style*="max-width"]),
  [style*="padding: 44px"]:not([style*="max-width"]),
  [style*="padding: 40px"]:not([style*="max-width"]) {
    padding: 24px !important;
  }

  /* Columns sitting to the right of a vertical divider carry a left inset that
     only makes sense side-by-side; once stacked it reads as a stray indent. */
  [style*="padding-left: 44px"], [style*="padding-left: 56px"] {
    padding-left: 0 !important;
  }

  /* --- "Our focus" accordion ---------------------------------------- */
  /* Hover-to-expand is meaningless on touch, and a collapsed rail would hide
     three quarters of the copy. Stack the panels and show every description.
     !important throughout: flex, max-height and opacity are all set inline,
     driven by component state. */
  .focus-row {
    flex-direction: column !important;
    /* 4px suited flat rule-separated rows. Once each panel reads as a card,
       they need room to be separate objects; 10px is the desktop row's own
       gap, so nothing new is invented here. */
    gap: 10px !important;
  }

  .focus-panel {
    flex: 1 1 auto !important;
    /* The horizontal padding was 0, which is what put the copy hard against
       the panel edge. These panels are NOT missing a card material — the
       `.glass-paper .glass-sand` classes supply the paper gradient and the 1px
       inset ring, and glass.css loads after this file so its !important
       background survives the `transparent` below. All that was missing was
       the breathing room. 20px is the panel's own desktop side padding. */
    padding: 18px 20px 22px !important;
    /* Kept: this only neutralises the state-driven active highlight
       (`panelBg`), so all four panels read identically once every body is
       expanded on touch. It does not remove the glass material. */
    background: transparent !important;
  }

  .focus-panel h3 { color: var(--heading) !important; }
  .focus-panel svg { opacity: 1 !important; }

  /* Every panel is open on touch, so the desktop presentation of "which one
     won" has nothing to say here. The min-height was sized for a rail with a
     numeral in it; stacked, it would make four tall empty cards. The numeral
     stays, smaller — it is the only thing giving these cards a composition —
     but the sweep rule goes, because it would mark one card out of four that
     are all equally open. */
  .focus-panel { min-height: 0 !important; }
  .focus-panel h3 { margin-top: 0 !important; }
  .focus-panel::after { display: none !important; }
  .focus-ghost { font-size: 72px; top: 2px; right: 14px; opacity: 0.10; }
  .focus-panel::before { top: 56px; }
  .focus-panel[data-on="1"] .focus-ghost { transform: none; opacity: 0.06; }

  .focus-body {
    max-height: none !important;
    opacity: 1 !important;
  }

  /* Every panel is open here, so the one-line clamp the collapsed desktop
     panels use would truncate all four descriptions instead of none. */
  .focus-panel[data-on="0"] .focus-body p {
    display: block !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
  }

  /* --- Multi-column lists ------------------------------------------- */
  /* The only CSS multi-column list on the site (DevOps, "Why choose us").
     Nothing collapsed it, so at 344px it rendered as two 131px columns — about
     17 characters a line. The grid rules above do not help: `columns` is CSS
     multi-column, not grid.

     Keyed on a class, NOT `[style*="columns: 2"]` — that substring also matches
     `grid-template-columns: 260px 1fr`, which appears on all 17 pages, and
     would have silently flattened every mega-menu grid on the site.

     Left two-up above 760, where each column is still ~330px wide. */
  .svc-cols {
    columns: auto !important;
  }

  /* --- Multi-column body copy --------------------------------------- */
  /* Nothing on the site sets CSS multi-column body copy any more: About's
     Formation paragraph was the only `data-cols="2"` and is now a single
     full-width column. The rule that collapsed it below 760 has been removed
     rather than left matching nothing (HANDOFF 9b). If two-column copy comes
     back, key it on `data-cols` again and NOT on `[style*="columns: 2"]` —
     that substring also matches `grid-template-columns: 260px 1fr`, which is
     on all 17 pages, and would flatten every mega-menu grid on the site. */

  /* --- Legal pages: the accordion hanging indent -------------------- */
  /* Desktop indents the body 64px so it lines up under the section TITLE:
     20px (the button's own padding) + 28px (the number badge) + 16px (the flex
     gap). That is right at full width and punishing on a phone — it left body
     copy 178px wide on a 344px screen, about 20 characters a line, and because
     neither the indent nor the 1000px wrapper responded, it was still 105px
     from the edge at 768px too.

     Below 760 the body aligns to the card's inner edge instead, matching the
     button's own 20px. The number badge is untouched: it lives in the header
     row, so it already sits above the text. Desktop keeps the aligned indent. */
  .legal-body > div {
    padding-left: 20px !important;
  }

  /* --- Home hero ---------------------------------------------------- */
  /* Desktop pins the hero to a sticky 100vh with the globe beside the copy.
     A phone viewport is far too short for that: the heading slid up under the
     sticky header and the paragraph was clipped by `overflow: scroll`. Let the
     hero grow to fit its content, and demote the globe to a backdrop.
     `relative` rather than `static` — the globe is absolutely positioned and
     needs this element to stay its containing block. */
  [style*="position: sticky"][style*="height: 100vh"] {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  [style*="z-index: 3"][style*="overflow: scroll"] {
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    /* Home's header is position:fixed (the other 12 pages use sticky), so it
       overlays the hero rather than pushing it down. This must clear the
       stacked two-row mobile header, which measures ~104px at 375px wide. */
    padding-top: 124px !important;
    padding-bottom: 48px !important;
    gap: 18px !important;
  }

  /* Centre the globe behind the copy and fade it back so text stays legible. */
  gold-globe {
    width: 100% !important;
    right: 0 !important;
    opacity: 0.3 !important;
  }

  /* The 90deg scrim assumed a side-by-side layout; flatten it once stacked. */
  gold-globe + div {
    background: rgba(var(--bg-rgb), 0.55) !important;
  }

  /* --- TalentedStaff badge ------------------------------------------ */
  /* Out of the way of the thumb, and clear of the chat launcher, which is
     still at right 22 / bottom 22 down to 520px. Keyed on .ts-pill: this used
     to match [style*="right: 24px; bottom: 24px"], and the moment the badge
     was raised to clear the launcher that substring stopped matching and the
     rule silently did nothing. Exactly the trap at the top of this file. */
  .ts-pill {
    right: 22px !important;
    bottom: 77px !important;
    max-width: calc(100vw - 44px) !important;
  }
  [style*="white-space: nowrap"] { white-space: normal !important; }
}


/* ---------- 520px and below: phone ------------------------------------ */
@media (max-width: 520px) {

  [style*="max-width: 1340px"], [style*="max-width: 1140px"],
  [style*="max-width: 1100px"], [style*="max-width: 1000px"],
  [style*="max-width: 900px"],  [style*="max-width: 860px"],
  [style*="max-width: 760px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Two-up rows left over from the tablet block finish collapsing here. */
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* Form controls go full width — easier targets, no overflow. Chrome buttons
     (hamburger, floating badge, modal close) are explicitly excluded; they are
     UI furniture, not form fields. */
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  button[type="button"]:not(.mnav-toggle):not([aria-label="Close"]) {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ts-pill button {
    width: auto !important;
  }

  /* Below 520 the chat launcher itself drops to right 12 / bottom 12, so the
     badge has to come down with it or a 10px gap opens under it. */
  .ts-pill {
    right: 12px !important;
    bottom: 67px !important;
    max-width: calc(100vw - 24px) !important;
  }

  [style*="gap: 30px; margin-left: auto"] {
    gap: 0 16px !important;
    font-size: 13px !important;
  }
}

/* Footer layout and its responsive rules moved to footer.css, which owns the
   whole component now — keeping half of it here meant two files fighting over
   the same breakpoints. */

/* --------------------------------------------------------------------------
   Careers — open role rows
   --------------------------------------------------------------------------
   Class-keyed for the same reason as the footer: the row gained a fifth
   ("View role") column, so the old inline-string selector for
   "1.5fr 1fr 1fr 1fr" no longer matches it.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .role-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .role-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   Forms — label left, field right
   --------------------------------------------------------------------------
   Every form row is a two-column grid: the label sits in a fixed 150px column
   and the control fills the rest. Rows with no label of their own (consent
   checkboxes, submit buttons) are pushed across by a matching margin so they
   line up under the controls rather than under the labels.

   Below 760px there is not enough width for a label column that leaves a
   usable field, so rows stack and the indent is dropped.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Two columns of form need roughly 1100px to keep a usable input beside a
     150px label. Below that they fold back to one column, before the label
     column starts squeezing the field. */
  .frm-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

@media (max-width: 760px) {
  .frm-row {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 9px !important;
  }
  .frm-indent {
    margin-left: 0 !important;
  }
}

/* The role dialog's title and Apply button share a row; stack them before the
   title is squeezed into a column of its own. */
@media (max-width: 620px) {
  .role-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }
}