/* ==========================================================================
   Responsive - breakpoint overrides
   Mobile-first base styles live in layout.css/components.css; this file
   layers on adjustments as viewport grows, plus a few max-width tweaks for
   small screens where a mobile-first override would be more verbose.
   Breakpoints: sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536
   ========================================================================== */

/* ---------------------------------------------------------------------
   Large screens (2xl, 1536px+) - roomier rhythm
   --------------------------------------------------------------------- */
@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
  .section {
    padding-block: var(--space-24);
  }
}

/* ---------------------------------------------------------------------
   Laptop / desktop down to tablet (max-width: 1023px)
   Nav collapses to the mobile drawer here.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .main-nav,
  .site-header__cta {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__grid .footer-col--brand {
    grid-column: 1 / -1;
  }
  .page-shell {
    grid-template-columns: 1fr;
  }
  .page-shell__sidebar {
    order: 2;
  }
  .index-shell {
    grid-template-columns: 1fr;
  }
  .index-rail {
    display: none;
  }
  .index-panel {
    padding-inline: var(--container-pad);
  }
  .drawer {
    width: 60%;
  }
  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Tablet (max-width: 767px)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .capability-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .drawer {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .cookie-consent__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-consent__actions {
    justify-content: center;
  }
  .cookie-consent__actions .btn {
    flex: 1 1 auto;
  }
  .split--reverse {
    direction: ltr;
  }
  .split--reverse > *:first-child {
    order: 2;
  }
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--6 {
    grid-template-columns: 1fr;
  }
  .mega-menu__grid {
    grid-template-columns: 1fr;
  }
  .cta-banner__inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner .eyebrow::before {
    display: none;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-col__list,
  .social-list {
    align-items: center;
  }
  .social-list {
    justify-content: center;
  }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .stats-band {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* ---------------------------------------------------------------------
   Mobile (max-width: 479px)
   --------------------------------------------------------------------- */
@media (max-width: 479px) {
  .site-header__inner {
    height: 64px;
  }
  .btn {
    padding: 0.8rem 1.3rem;
  }
  .cta-banner__actions,
  .error-page .btn {
    width: 100%;
  }
  .cta-banner__actions .btn {
    width: 100%;
  }
  .stats-band {
    grid-template-columns: 1fr 1fr;
  }
  .floating-buttons {
    right: var(--space-5);
    bottom: var(--space-5);
    gap: var(--space-2);
  }
  .floating-btn {
    width: 40px;
    height: 40px;
  }
  .floating-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------------------
   Short / landscape handheld devices
   --------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mobile-nav {
    padding-top: var(--space-16);
  }
  .section {
    padding-block: var(--space-12);
  }
}

/* ---------------------------------------------------------------------
   Print
   --------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .floating-buttons,
  .mobile-nav,
  .mobile-nav-backdrop,
  .drawer,
  .drawer-backdrop,
  .skip-link,
  .page-loader {
    display: none !important;
  }
}