/* ============================================================================
   SorbiTech R2 — CANONICAL RESPONSIVE LAYER  (responsive.css)
   ----------------------------------------------------------------------------
   THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR RESPONSIVE BEHAVIOUR.
   It is enqueued LAST (after main / nav / components / widget) so its rules
   win the cascade at equal specificity.

   WHY A DEDICATED LAYER:
   The global foundations below are element-level (containers, media, tables,
   typography, touch targets). They cascade to EVERY page — existing templates
   AND any template, block, or component added in the future — automatically.
   New work does NOT need its own breakpoints for the basics; it inherits them.

   ── THE 6-TIER BREAKPOINT STANDARD ──────────────────────────────────────────
   Use THESE breakpoints for any future component-specific media query so the
   whole site stays consistent. (CSS vars can't be used inside @media, so these
   pixel values are the contract — copy them exactly.)

   | Tier             | Screen            | Range            | min/max query                       |
   |------------------|-------------------|------------------|-------------------------------------|
   | xs  Mobile Port. | Mobile Portrait   | 0   – 479px      | (max-width: 479px)                  |
   | sm  Mobile Land. | Mobile Landscape  | 480 – 767px      | (min-width:480px) and (max:767px)   |
   | md  Tablet Port. | Tablet Portrait   | 768 – 1023px     | (min-width:768px) and (max:1023px)  |
   | lg  Tablet Land. | Tablet Landscape  | 1024 – 1279px    | (min-width:1024px) and (max:1279px) |
   | xl  Laptop       | Laptop            | 1280 – 1679px    | (min-width:1280px) and (max:1679px) |
   | xxl Large Screen | Large Screen      | 1680px and up    | (min-width: 1680px)                 |

   KEY LAYOUT BOUNDARIES (already wired in nav.css/main.css, kept consistent):
   - Desktop nav → hamburger drawer at <= 1024px (Tablet Portrait & below).
   - Container fluid padding scales clamp(16px → 32px) across all tiers.
   - Container max-width: 1280px (Laptop) → 1440px (Large Screen >= 1680).
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════════
   1. GLOBAL FOUNDATIONS — apply to ALL screens & ALL content (current + future)
   ════════════════════════════════════════════════════════════════════════════ */

/* 1a. Never allow horizontal scroll / overflow on any device.
   Using overflow-x: clip (not hidden) because `hidden` creates a new
   scrolling container on html/body which breaks position:sticky descendants
   like the site header. `clip` prevents horizontal overflow without that
   side effect. Falls back to `hidden` on browsers older than Chrome 90 /
   Safari 15.4 / Firefox 81. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }
}

/* 1b. Media never overflows its container (images, video, embeds, iframes, SVG) */
img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe { border: 0; }

/* 1c. Long words / URLs / spec codes wrap instead of forcing horizontal scroll */
h1, h2, h3, h4, h5, h6, p, li, a, dd, dt,
.st-card__title, .r2-rellist__title, .st-hero__title, .r2-slide__title,
.r2-mosaic__title, .st-quick-answer__text {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 1d. Fluid container padding — one rule covers every tier.
   16px on the smallest phones → 32px on laptop/up. */
.st-container { padding-inline: clamp(16px, 4vw, 32px); }

/* 1e. Wide-content tables (editor prose) scroll horizontally instead of
   blowing out the layout on narrow screens. No HTML change needed → works for
   any future article/table too. */
.st-prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
@media (min-width: 768px) { .st-prose table { white-space: normal; } }

/* 1f. Touch targets >= 44px on touch/coarse-pointer devices (WCAG 2.5.5).
   Scoped to genuinely interactive controls — never to inline prose links. */
@media (pointer: coarse) {
  .st-btn,
  .st-nav-cta, .st-nav-btn, .st-nav-link,
  .st-mobile-nav__link, .st-mobile-nav__toggle, .st-mobile-drawer__close,
  .st-hamburger,
  .page-numbers,
  .st-form__input, .st-form__textarea, .st-form__submit,
  .st-search-form__input,
  .st-float-widget__toggle, .st-float-widget__option,
  .st-doc-link, .st-tag {
    min-height: 44px;
  }
  .st-nav-cta, .st-btn { display: inline-flex; align-items: center; }
}

/* 1g. Media that must keep aspect ratio still behaves when intrinsic size unknown */
.r2-slide__media img, .r2-prod-hero__media img, .r2-fullbleed__media img,
.r2-mosaic__media img, .r2-insight__media img, .r2-featured-story__media img {
  width: 100%; height: 100%; object-fit: cover;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. LARGE SCREEN  (xxl — min-width: 1680px)
   Widen the canvas and scale type up so big displays aren't mostly empty margin.
   Prose stays capped by --st-container-narrow, so readability is preserved.

   NOTE 2026-06-05: container max-widths kept at 1600 / 1800. The earlier bump
   to 1760 / 1920 was reverted — it widened both left and right edges, while
   the user wanted ONLY the right edge of split-layout prose to extend (toward
   the TOC). That fix lives in main.css now (.r2-split__main .r2-readable
   max-width override).
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1680px) {
  :root {
    --st-container-max:    1600px;
    --st-container-wide:   1760px;
    /* Narrow-content cap widened for large screens (was 780px). The 780 cap
       is correct for body prose on laptop, but on a 1600px+ canvas it leaves
       narrow .r2-readable / .st-container--narrow blocks (about pages, hub
       intros, callouts, qualification strips, contact-cta inner text) stranded
       with hundreds of pixels of empty margin. 940px is still well within
       readable line-length (~90 chars at 17px). */
    --st-container-narrow:  940px;
  }
  html { font-size: 17px; }

  .r2-hero-slider { max-height: 1040px; }
  .r2-slide__inner { max-width: 820px; }
  .r2-slide__title { font-size: clamp(3rem, 4vw, 4.6rem); }

  /* Allow the industries mosaic to use a 4th column on very wide screens */
  .r2-mosaic__grid { grid-template-columns: repeat(4, 1fr); }

  /* ── Content-block caps widened (2026-06-05) ──────────────────────────
     Per user direction: extend the RIGHT edge of all narrow content blocks
     on big screens so they don't sit in the left third of the canvas with
     huge empty space on the right. Each cap is bumped from 760–860px to
     1080px, which still keeps line length within the comfortable upper
     band (~100 chars at 17px) for technical/datasheet prose. */
  .r2-problem__text          { max-width: 1080px; }
  .r2-steps                  { max-width: 1080px; }
  .st-quick-answer__inner    { max-width: 1080px; }
  .st-section__header        { max-width: 1080px; }
  .st-proof-block            { max-width: 1080px; }
  .st-hub-intro__text        { max-width: 1080px; }
  .st-hub-rich-intro__inner  { max-width: 1080px; }
}

/* Ultra-wide displays (>= 1920px) — go wider still */
@media (min-width: 1920px) {
  :root {
    --st-container-max:    1800px;
    --st-container-wide:   1960px;
    --st-container-narrow: 1020px;
  }

  /* Content-block caps continue to scale on ultra-wide so the right side
     doesn't drift back into empty whitespace at 1920px+. */
  .r2-problem__text          { max-width: 1220px; }
  .r2-steps                  { max-width: 1220px; }
  .st-quick-answer__inner    { max-width: 1220px; }
  .st-section__header        { max-width: 1220px; }
  .st-proof-block            { max-width: 1220px; }
  .st-hub-intro__text        { max-width: 1220px; }
  .st-hub-rich-intro__inner  { max-width: 1220px; }
}

/* Ultra-wide guard: keep mosaic at 3 between 1280–1679 (Laptop) for balance */
@media (min-width: 1280px) and (max-width: 1679px) {
  .r2-mosaic__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════════════
   3. TABLET LANDSCAPE  (lg — 1024px – 1279px)
   Desktop nav is still active here (switches to hamburger only below 1024).
   Tighten nav spacing so 5 items + CTA never collide, and relax wide grids.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .st-nav-bar { height: 72px; }
  .st-nav-btn, .st-nav-link { padding: 0 var(--st-space-3); font-size: 0.9rem; }
  .st-logo img { height: 64px; }

  /* Sticky product spec rail gets a touch narrower so prose keeps room */
  .r2-split { grid-template-columns: 1fr 320px; gap: var(--st-space-7); }

  /* Footer: 5 columns is tight here → 4 across reads better */
  .st-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. TABLET PORTRAIT  (md — 768px – 1023px)
   Hamburger nav is active. Collapse 3–4 col grids to 2; ease section rhythm.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .st-section { padding-block: var(--st-space-8); }

  /* Multi-column grids → 2 across */
  .r2-stats__grid,
  .r2-entity-cards,
  .r2-mosaic__grid { grid-template-columns: repeat(2, 1fr); }

  /* Two-up editorial blocks stack for breathing room */
  .r2-featured-story__inner,
  .r2-showcase,
  .r2-insights { grid-template-columns: 1fr; }
  .r2-insight--lead { grid-row: auto; }

  /* Product split: spec rail drops under the prose */
  .r2-split { grid-template-columns: 1fr; }
  .r2-split__rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .r2-split__rail > * { flex: 1 1 280px; }

  /* Quality strip: label no longer needs its rigid min-width */
  .r2-quality__label { min-width: 0; border-right: 0; padding-right: 0; }
  .r2-quality__inner { gap: var(--st-space-4); }
}


/* ════════════════════════════════════════════════════════════════════════════
   5. MOBILE LANDSCAPE  (sm — 480px – 767px)
   Phones held sideways: short height. Cap hero height, single-column grids.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {
  .st-section { padding-block: var(--st-space-7); }

  .r2-stats__grid,
  .r2-entity-cards,
  .r2-mosaic__grid,
  .r2-featured-story__inner,
  .r2-showcase,
  .r2-insights,
  .r2-split { grid-template-columns: 1fr; }
  .r2-insight--lead { grid-row: auto; }

  .r2-split__rail { position: static; }

  .st-hero__actions, .r2-slide__actions { flex-direction: row; flex-wrap: wrap; }
  .st-btn--lg { flex: 1 1 auto; }
}

/* Short-and-wide phones (landscape) — keep the hero from eating the whole screen */
@media (max-height: 500px) and (orientation: landscape) {
  .r2-hero-slider { height: auto; min-height: 440px; max-height: none; }
  .r2-prod-hero, .r2-fullbleed { min-height: 380px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   6. MOBILE PORTRAIT  (xs — max-width: 479px)
   Everything single-column. Reduce heading scale, tighten spacing, stack CTAs.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  .st-section { padding-block: var(--st-space-6); }
  .st-container { padding-inline: 16px; }

  /* All grids single column */
  .r2-stats__grid,
  .r2-entity-cards,
  .r2-mosaic__grid,
  .r2-featured-story__inner,
  .r2-showcase,
  .r2-insights,
  .r2-split,
  .st-card-grid, .st-card-grid--2col, .st-card-grid--3col,
  .st-footer__grid { grid-template-columns: 1fr; }
  .r2-insight--lead { grid-row: auto; }

  /* Heading scale down a notch so long titles don't dominate the viewport */
  h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .r2-slide__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .r2-fullbleed__title, .r2-prod-hero__title { font-size: clamp(1.8rem, 8vw, 2.3rem); }

  /* Hero height tuned for tall narrow screens */
  .r2-hero-slider { height: auto; min-height: 540px; }

  /* CTAs stack full-width and are easy to tap */
  .st-hero__actions, .r2-slide__actions, .st-contact-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .st-hero__actions .st-btn, .r2-slide__actions .st-btn { width: 100%; }

  /* Stats / sector numbers shrink slightly */
  .r2-stat__num { font-size: 2rem; }

  /* Quick Answer + rails comfortable padding */
  .st-quick-answer__inner { padding: var(--st-space-4) var(--st-space-4); }

  /* Quality strip label stacks above items */
  .r2-quality__label { min-width: 0; border-right: 0; padding-right: 0; }

  /* Breadcrumb wraps gracefully */
  .st-breadcrumb__list { font-size: 0.78rem; }

  /* Tables in prose stay scrollable (foundation 1e already handles this) */
}


/* ════════════════════════════════════════════════════════════════════════════
   7. PRINT — clean, ink-light output (bonus; applies site-wide)
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
  .st-site-header, .st-mobile-drawer, .st-mobile-overlay,
  .st-float-widget, .st-contact-cta, .r2-slider__arrow, .r2-slider__dots,
  .st-footer__enquiry { display: none !important; }
  .r2-hero-slider { height: auto; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
}