/* ==========================================================================
   MAAC SOLUTIONS — RESPONSIVE CORRECTIONS
   Fixes verified by in-page measurement at 320 / 375 / 768 / 1280 / 1920.
   ========================================================================== */

/* No element may extend the scroll box. `clip` rather than `hidden` so we do
   not create a scroll container on the root (which breaks position:sticky). */
html { overflow-x: clip; }

/* ---- UTILITY BAR --------------------------------------------------------
   At 375px the hours + email pair measured 453px against a 375px viewport —
   78px of horizontal overflow. Email lives in the drawer and footer already,
   so below 600px the bar carries the opening hours alone. */
@media (max-width: 599px) {
  .utility__inner { justify-content: center; }
  .utility__inner > .utility__list:last-child { display: none; }
  .utility__item span { white-space: normal; }
}

/* ---- MOBILE HERO --------------------------------------------------------
   Purpose-built, not a squeezed desktop hero (Directive §11): the measured
   1216px column was pushing everything below it off the first two screens. */
@media (max-width: 899px) {
  .hero__inner { gap: var(--space-6); padding-block: var(--space-6) 0; }
  .hero__copy  { gap: var(--space-3); }
  .hero__title { max-width: 16ch; }
  .hero__lead  { font-size: 1rem; line-height: 1.62; }
  .hero__media { aspect-ratio: 3 / 2; }
  .hero__ctas  { gap: var(--space-2); margin-top: var(--space-3); }
  .hero__ctas .btn--lg { min-height: 54px; }
  .route { margin-top: var(--space-5); padding-block: var(--space-4); }
}

/* two CTAs share a row from 400px up; only the narrowest phones stack them */
@media (min-width: 400px) and (max-width: 899px) {
  .hero__ctas .btn { flex: 1 1 0; min-width: 0; }
  .hero__ctas .btn--lg { padding-inline: var(--space-4); font-size: var(--fs-sm); }
}

/* ---- 320px — the narrowest supported width ------------------------------ */
@media (max-width: 359px) {
  .hero__ctas .btn { flex: 1 1 100%; }
  .cat-grid { grid-template-columns: 1fr; }
  .fact__value { font-size: 1.6rem; }
}

/* prototype-only annotation badges: keep them legible while they exist */
.pending { font-size: .72rem; }