/* ============================================================
   05. RESPONSIVE — breakpoint behaviour
   ------------------------------------------------------------
   Component files carry their own mobile-first grid rules. This
   file owns the cross-cutting decisions: when the navigation
   changes mode, how dense layouts behave on tablets, and the
   guards that keep the page from ever scrolling sideways.

   Breakpoints
     < 620px    phone
     620–1023   tablet
     1024–1279  laptop
     >= 1280    desktop
   ============================================================ */


/* ============================================================
   Navigation mode switch
   ------------------------------------------------------------
   The four primary links plus a CTA need roughly 1024px before
   they stop crowding the wordmark, so that is where the drawer
   hands over to the inline bar.
   ============================================================ */

@media (min-width: 1024px) {
  .nav-links  { display: flex; }
  .nav-cta    { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }
}


/* ============================================================
   Phone — < 620px
   ============================================================ */

@media (max-width: 619px) {

  :root { --nav-h: 68px; }

  /* Tighter section rhythm so a phone scroll does not feel endless */
  .band { padding-block: clamp(2.75rem, 9vw, 3.5rem); }

  .brand img { width: 36px; height: 31px; }
  .brand-txt b { font-size: 0.9rem; }
  .brand-txt span { font-size: 0.5rem; letter-spacing: 0.08em; }

  /* Full-width CTAs read as buttons, not as stranded links */
  .hero-cta .btn,
  .cta-band .btn-row .btn { width: 100%; }

  .hero { padding-block: 2.5rem 2.75rem; }
  .hero h1 { max-width: none; }

  /* Sticky table headers are unhelpful in a narrow scroller */
  .dtable thead th { position: static; }
  .dtable .pname { min-width: 11rem; }

  /* Certificate grid: two up rather than one, so the section
     does not become a tall single column of logos */
  .certs { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .cert { padding: 1rem 0.7rem; gap: 0.7rem; }
  .cert-mark { height: 58px; }
  .cert-mark--type b { font-size: 1.05rem; }
  .cert-name { font-size: var(--fs-xs); }
  .cert-desc { display: none; }

  .foot-base { justify-content: flex-start; }
}

/* Very narrow phones — 320–380px */
@media (max-width: 380px) {
  .certs { grid-template-columns: 1fr; }
  .cert-desc { display: block; }
  .chip, .cat-chip { font-size: 0.75rem; }
  .contact-lines li { grid-template-columns: 1fr; }
}


/* ============================================================
   Tablet — 620px to 1023px
   ============================================================ */

@media (min-width: 620px) and (max-width: 1023px) {

  /* Three-across platform cards would be too narrow here, and
     the hero figure sits below the copy rather than beside it */
  .hero-grid, .phero-grid { grid-template-columns: 1fr; }
  .hero-fig { max-width: 560px; }

  /* Keep the six-step tracks readable rather than squeezing
     six columns into a tablet width */
  .track { grid-template-columns: repeat(2, 1fr); }
  .flow  { grid-template-columns: repeat(2, 1fr); }

  .certs { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   Laptop and up — >= 1024px
   ============================================================ */

@media (min-width: 1024px) {
  .certs { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  /* Four-up stats only once there is genuinely room for them */
  .stats--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   Grid column counts that depend on child count
   ============================================================ */

@media (min-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .stats--3 { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   Overflow guards
   ------------------------------------------------------------
   Long chemical names, CAS strings and email addresses are the
   usual culprits behind a sideways scroll on a 320px screen.
   ============================================================ */

.dtable td, .dtable th { overflow-wrap: break-word; }
.dtable .pname { overflow-wrap: anywhere; }

.lede, .callout span, .pillar p, .tcard p, .stat-sub,
.metric span, .fig figcaption, .cert-desc { overflow-wrap: break-word; }

/* Any direct grid/flex child can shrink below its content size */
.shell > *, .hero-grid > *, .phero-grid > *, .duo > *,
.contact > *, .withrail > *, .leader > * { min-width: 0; }


/* ============================================================
   Coarse pointers — give every control a 44px target
   ============================================================ */

@media (pointer: coarse) {
  .foot-col a,
  .foot-contact a,
  .link-go { min-height: 44px; display: flex; align-items: center; }
  .foot-col ul { gap: 0; }
  .toc-list a { min-height: 44px; }
}


/* ============================================================
   Desktop — sections run the full width of the window
   ------------------------------------------------------------
   --measure is released so .shell spans edge to edge, with a
   flat 32px gutter either side. Line length is still protected:
   .lede, .sec > p and the prose blocks keep their own ch-based
   caps, so the text does not stretch with the window.
   ============================================================ */

@media (min-width: 768px) {
  :root {
    --gut: 2rem;      /* 32px each side */
    --measure: 100%;
  }
}


/* ============================================================
   Mobile gutter — a flat 16px each side
   ------------------------------------------------------------
   Every layout wrapper (.shell, .nav-inner, .nav-drawer and the
   edge-bleeding rails) derives its inset from --gut, so setting
   the token once gives every section an identical 16px margin
   on phones. The fluid clamp resumes above this breakpoint.
   ============================================================ */

@media (max-width: 767px) {
  :root { --gut: 1rem; }

  /* The rail heading carried a small optical indent that would
     otherwise sit at 20px while everything else sits at 16px */
  .rail-h, .toc-title { padding-inline: 0; }
}