/* Mobile styles live in components.css as the default (mobile-first).
   These breakpoints layer on tablet/desktop behavior. */

/* Footer: stack on small screens */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .contact-links { display: none; }
  .hero { min-height: 82vh; }
}

/* Tablet and up: reveal desktop nav, hide hamburger/drawer triggers */
@media (min-width: 960px) {
  .main-nav { display: block; }
  .header-cta { display: flex; }
  .nav-toggle, .mobile-drawer, .drawer-scrim { display: none; }
}

@media (max-width: 959px) {
  .header-cta .btn-ghost { display: none; }
}

/* Card grid: fewer columns on very small screens for readability */
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}