/* ============================================================
   ONE4ALL — Responsive Catch-All
   CSS variable overrides live in tokens.css.
   Layout-level responsive rules live in layout.css.
   This file handles component and page-level responsive
   adjustments that don't belong in tokens or layout.
   ============================================================ */

/* ----------------------------------------------------------
   STATS GRID — stays 2×2 on mobile (exception to normal collapse)
   Source: Grid System Spec §E6 / §F6
   Apply .o4-grid-4--stats to preserve 2-column on mobile.
---------------------------------------------------------- */

@media (max-width: 767px) {
  .o4-grid-4--stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o4all-grid-gap-mobile);
  }
}

/* ----------------------------------------------------------
   FOOTER GRID — 2×2 on tablet, stacked on mobile
   Source: Grid System Spec §F12
---------------------------------------------------------- */

@media (max-width: 767px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ----------------------------------------------------------
   HEADER — mobile layout adjustments
---------------------------------------------------------- */

@media (max-width: 1023px) {
  .site-header__inner {
    padding-block: 16px;
  }
}

/* ----------------------------------------------------------
   BUTTONS — mobile sizing
---------------------------------------------------------- */

@media (max-width: 767px) {
  .btn {
    padding: 12px 24px;
  }
}

/* ----------------------------------------------------------
   PRINT STYLES
   Strip navigation, fix colours, remove background images.
---------------------------------------------------------- */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .site-header,
  .site-footer,
  .nav-toggle,
  .btn {
    display: none !important;
  }

  .site-main {
    padding-top: 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    page-break-inside: avoid;
  }
}