/* ==========================================================================
   Glint Development — responsive adjustments

   Most of the layout is already fluid: sizes use clamp()/min()/vw and grids use
   `repeat(auto-fit, minmax(min(Npx, 100%), 1fr))`, which collapses on its own.
   This file handles the cases intrinsic sizing cannot: the fixed-column
   timeline, the scroll-driven hero, and touch/small-screen ergonomics.

   Breakpoints
     1080px  desktop nav -> mobile menu (see main.css)
      900px  tablet
      640px  phone
   ========================================================================== */

/* --------------------------------------------------------- overflow guards -- */

/* An aspect-ratio box that also carries a min-height resolves its WIDTH from
   that height (21/9 x 280px = 653px), which overflows narrow viewports. Pinning
   the width back to the container lets min-height simply make the box taller. */
[style*="aspect-ratio"][style*="min-height"] {
  width: 100%;
}

/* NOTE on the attribute selectors below: when JS touches any inline style the
   browser re-serialises the whole attribute, turning `a:b;c:d` into `a: b; c: d`.
   Selectors matching a declaration's VALUE must therefore accept both spellings.
   Where a fix must not depend on that, it is applied inline in the markup
   instead — e.g. the box-sizing opt-in on the home page's two split-panel links,
   whose `min-width: min(460px, 100%)` plus padding otherwise overflows a phone
   under content-box. (The original ships that overflow.) */

/* Media never widens its column. */
img,
canvas,
video {
  max-width: 100%;
  height: auto;
}

img[style*="height:100%"],
img[style*="height: 100%"],
canvas[style*="height:100%"],
canvas[style*="height: 100%"] {
  height: 100%;
}

/* --------------------------------------------------------------- tablet ---- */
@media (max-width: 900px) {

  /* The mega-menu grid is desktop-only, but keep it sane if it ever shows. */
  .nav-mega [style*="grid-template-columns:1fr 1fr minmax"],
  .nav-mega [style*="grid-template-columns: 1fr 1fr minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* Centre-spine timeline (commercial page) collapses to a single left rail. */
  [data-spine] > span[aria-hidden] {
    left: 4px !important;
    transform: none !important;
  }

  [data-spine] > div {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  [data-spine] > div > div {
    grid-column: 1 !important;
    grid-row: auto !important;
    text-align: left !important;
    padding-left: 34px !important;
    padding-right: 0 !important;
  }

  /* Re-anchor the stage dots to the left rail. */
  [data-spine] > div > div > span[aria-hidden] {
    left: 0 !important;
    right: auto !important;
  }

  /* Two-column sections pin their left heading while the right column scrolls
     past it. Both grids use auto-fit minmax(380px), so they fold to a single
     column at ~905px — and a sticky element in a one-column grid stops being a
     companion to anything. It just parks over the content that follows it,
     which is the overlap seen on /commercial. Unpin below the fold point.

     Matched on the inline `top` value so the homepage hero (top:0) keeps its
     sticky scroll-scrub stage, which must not be touched. */
  [style*="position:sticky;top:100px"],
  [style*="position:sticky;top:110px"],
  [style*="position: sticky; top: 100px"],
  [style*="position: sticky; top: 110px"] {
    position: static !important;
  }
}

/* ---------------------------------------------------------------- phone ---- */
@media (max-width: 640px) {

  /* Wide fixed-column strips become horizontal scrollers rather than
     squeezing their contents; the wrapper already sets overflow-x: auto. */
  [data-hidescroll] > div[style*="min-width"] {
    min-width: 900px !important;
  }

  /* Decorative rings are sized for desktop; shrink so they do not dominate. */
  [aria-hidden="true"][style*="border-radius:50%"][style*="animation"],
  [aria-hidden="true"][style*="border-radius: 50%"][style*="animation"] {
    transform: scale(0.6);
  }
}

/* ------------------------------------------------------------ short screens */
/* The hero runs a 560vh scroll runway to scrub its frame sequence. On phones
   home.js shortens it to 220svh; this keeps it sane when JS has not run. */
@media (max-width: 900px) {
  #heroWrap { height: 260vh; }
}

@media (hover: none) {
  #heroWrap { height: 220svh; }
  #heroStage { height: 100svh; }
}

/* ----------------------------------------------------------- touch targets */
@media (pointer: coarse) {
  /* WCAG 2.5.8 asks for 24x24 minimum; 44px is the comfortable target. */
  button,
  a[data-navk],
  [data-filter],
  [data-tidx] {
    min-height: 44px;
  }

  [data-navk][data-pill] {
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  #siteHeader,
  .mobile-menu,
  .nav-mega,
  .skip-link,
  footer {
    display: none !important;
  }

  [data-rv] {
    opacity: 1 !important;
    transform: none !important;
  }

  #heroWrap { height: auto !important; }
  #heroStage { position: static !important; height: auto !important; }

  body { background: #fff; color: #000; }
}