/* ==========================================================================
   SITCO - responsive.css
   Loaded last. Breakpoints: 1200 / 1024 / 900 / 768 / 600 / 420.
   ========================================================================== */

/* --- 1200px: tighten the shell before the gutter starts squeezing ---------- */
@media (max-width: 1200px) {
  .nav__link { padding-inline: 0.7rem; font-size: 0.86rem; }
  .nav__link::after { left: 0.7rem; right: 0.7rem; }
  .brand__sub { display: none; }
  .brand__rule { display: none; }
}

/* --- 1024px: three-up grids drop to two -------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .split--8-4, .split--7-5 { grid-template-columns: minmax(0, 1fr); }
  .split--6-6 { grid-template-columns: minmax(0, 1fr); }

  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .groups--2 { grid-template-columns: minmax(0, 1fr); }
  .sheet { columns: 2; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  /* The supporting instrument photo sits under the prose, capped so a
     244px source image is never blown up past its native size. */
  .split .instrument { max-width: 420px; }
  .split .instrument + .instrument { margin-top: var(--s-5); }
}

/* --- 900px: switch to the off-canvas menu ------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: var(--darkroom-raised);
    border-left: 1px solid var(--darkroom-line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--s-6)) var(--s-5) var(--s-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.34s var(--ease), visibility 0.34s;
    z-index: 110;
  }
  .nav.is-open { transform: none; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--darkroom-line-2); }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-size: 1.02rem;
  }
  .nav__link::after { left: 0; right: auto; width: 22px; bottom: 8px; }

  /* Accordion instead of hover dropdown on touch */
  .nav__drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--s-4);
    display: none;
  }
  .nav__item.is-open .nav__drop { display: block; }
  .nav__drop a { padding: 0.62rem var(--s-4); border-left: 1px solid var(--darkroom-line); }

  .nav__cta {
    display: inline-flex;
    margin: var(--s-6) 0 0;
    justify-content: center;
    padding-block: 0.85rem;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
  }

  /* Must sit BELOW .site-header (z-index 100). The header creates its own
     stacking context, so the menu panel's z-index is scoped inside it - a
     backdrop above 100 would cover the menu itself. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(6, 8, 10, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  body.nav-locked { overflow: hidden; }

  .utility__loc { display: none; }
  .utility__inner { justify-content: flex-end; }

  .hero__inner { min-height: clamp(400px, 62vh, 520px); }
  .hero__title { max-width: 100%; }
}

/* --- 768px: single-column everywhere ----------------------------------- */
@media (max-width: 768px) {
  .cards--3, .cards--2 { grid-template-columns: minmax(0, 1fr); }
  .approvals { grid-template-columns: minmax(0, 1fr); }

  .spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-4) 0; }
  .scope__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }

  .datatable th, .datatable td { display: block; width: 100%; }
  .datatable th { border-bottom: 0; padding-bottom: var(--s-1); }
  .datatable td { padding-top: 0; }

  .register { grid-template-columns: repeat(2, 1fr); }
  .register li { padding: var(--s-4); font-size: 0.86rem; }

  .footer__bar { flex-direction: column; align-items: flex-start; }

  .lightbox__img { max-height: 68vh; }
  .lightbox__close { top: var(--s-4); right: var(--s-4); }
}

/* --- 600px ------------------------------------------------------------- */
@media (max-width: 600px) {
  .sheet { columns: 1; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .btn-row .btn { width: 100%; justify-content: center; }
  .hero__dots { right: var(--gutter); bottom: var(--s-5); }
  .methods dd { font-size: 0.68rem; padding: 0.26rem 0.5rem; }
}

/* --- 420px ------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --gutter: 1.15rem; }
  .register { grid-template-columns: minmax(0, 1fr); }
  .brand img { height: 26px; }
  .group { padding: var(--s-5) var(--s-4); }
  .card { padding: var(--s-5); }
  .to-top { width: 40px; height: 40px; }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .to-top, .hero__dots, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* --- High-contrast / forced colours ------------------------------------ */
@media (forced-colors: active) {
  .btn, .card, .group, .register li, .instrument { border: 1px solid CanvasText; }
  .nav__link[aria-current="page"]::after { forced-color-adjust: none; background: Highlight; }
}