/* ==========================================================================
   Responsive — all breakpoints in one place
   ========================================================================== */

@media (max-width: 1024px) {
  /* NOTE: no :root token overrides here — ALL --token values (desktop,
     tablet, mobile) live in base/tokens.css. This file loads last, so a
     token redefined here silently beats tokens.css at every width below
     its breakpoint (that bug froze --title-lg at 64px on phones). */

  .service-cards          { grid-template-columns: 1fr 1fr; }
  .cases__header          { grid-template-columns: 1fr; }
  .cases__title           { text-align: left; }
  /* (Footer styles — all breakpoints — live in components/footer.css) */

  /* Switch to the hamburger/drawer already at tablet — desktop nav (+ mega menu)
     only shows ≥1025px where the cards have room. */
  .primary-nav { display: none; }
}

/* Mobile token overrides are in tokens.css @media (max-width: 767px) */
@media (max-width: 767px) {

  .service-cards { grid-template-columns: 1fr; }
  /* Area cards track — fixed left margin on tablet/mobile (container fills viewport) */
  .area-cards-track {
    padding-left: var(--margin-primary);
    scroll-padding-left: var(--margin-primary);
  }

  /* Header CTA stays visible on mobile (Figma 3190:6939) — compact sizing
     lives in components/header.css. (A dead `.btn--header-cta` hide rule was
     removed here; the button's real class is `header-btn`.) */

  /* Cases */
  .cases__grid { grid-template-columns: 1fr; }

  /* Contact section */
  .section-contact__inner { grid-template-columns: 1fr; }
  .section-contact__left  { grid-column: auto; min-height: auto; }
  .section-contact__right { grid-column: auto; }

  /* Footer mobile styles live in components/footer.css (Figma 3190:9687) */

  /* Case */
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery__item:first-child:nth-last-child(odd) { grid-column: span 1; }
  .case-next__title { font-size: var(--title-xs); }

  /* About / Contact pages */
  .page-hero__title { font-size: var(--title-lg); }
  .about-intro      { grid-template-columns: 1fr; gap: 40px; }
  .about-offices    { grid-template-columns: 1fr; gap: 40px; }
  .contact-page     { grid-template-columns: 1fr; gap: 60px; }
}