/* ==========================================================================
   responsive.css — breakpoint overrides only.
   Most of the site is fluid by construction (clamp() type, auto-fit grids),
   so this file carries the few rules that must change at a threshold.
   Load order: main.css -> components.css -> pages.css -> responsive.css
   ========================================================================== */

/* ==========================================================================
   Desktop navigation <-> drawer switch (1160px)
   The desktop nav and the mega menu are hidden below this width; the MENU
   button and the slide-in drawer take over.
   ========================================================================== */

@media (max-width: 1159px) {
  .nav,
  .site-header .btn--primary { display: none; }
  .mega { display: none !important; }
  .menu-btn { display: inline-flex; }
}

@media (min-width: 1160px) {
  .menu-btn { display: none; }
}

/* ==========================================================================
   Homepage capability selector <-> accordion (1024px)
   The wide layout shows the list-plus-image selector; below it the same nine
   capabilities become an accordion. Only one is ever visible.
   ========================================================================== */

@media (min-width: 1024px) {
  #capabilities > .accordion { display: none; }
}

@media (max-width: 1023px) {
  #capabilities .cap-select { display: none; }
}

/* ==========================================================================
   Development process: scroll rail (wide) <-> stacked stages (narrow)
   ========================================================================== */

@media (min-width: 1024px) {
  #platform > .proc-stacked { display: none; }
}

@media (max-width: 1023px) {
  #platform > .proc-outer { display: none; }
}

/* ==========================================================================
   Tablet and below
   ========================================================================== */

@media (max-width: 1023px) {
  /* Floating brand rail is decorative on small screens; the drawer covers it */
  .floating-mark { display: none; }

  .home-positioning { flex-direction: column; }
  .home-positioning__rail { flex-basis: auto; }

  .home-case__ghost { font-size: clamp(96px, 22vw, 180px); }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {
  .home-clinical__band { aspect-ratio: 4 / 3; min-height: 300px; }

  .home-clinical__overlay {
    right: var(--space-5);
    left: var(--space-5);
    align-items: flex-start;
  }

  /* Hero foot rules read better stacked at phone width */
  .hero__foot { gap: var(--space-2); }

  .qualify__body { grid-column: auto; }

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

@media (max-width: 479px) {
  .home-hero { min-height: 92svh; }

  .floating-actions .btn span { display: none; }

  /* Keep tap targets at 44px+ when labels wrap */
  .btn { padding: 15px 18px; }
}

/* ==========================================================================
   Large screens — the layout is capped by --container-max, nothing to widen
   ========================================================================== */

@media (min-width: 1600px) {
  .home-hero__inner,
  .section--bleed { padding-inline: var(--gutter-wide); }
}

/* ==========================================================================
   Print — content only
   ========================================================================== */

@media print {
  .site-header,
  .mega,
  .drawer,
  .floating-mark,
  .floating-actions,
  .page-nav,
  .site-cta,
  .skip-link { display: none !important; }

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

  .hero { min-height: 0; }
  .hero__media,
  .hero__wash,
  .hero__scrim-x,
  .hero__scrim-y { display: none; }
  .hero { background: #fff; }
  .hero__title,
  .breadcrumb,
  .breadcrumb__current { color: #000; }
  .hero__lead { color: #333; }

  .accordion__panel { display: block !important; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }
}