/* =====================================================
   CORE FILE — breakpoint overrides only. Component base
   styles live in main.css; this file adjusts layout at
   smaller widths.
   ===================================================== */

/* Tablet and below: collapse desktop nav into the mobile menu */
@media (max-width: 900px) {
    .primary-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .hero { grid-template-columns: 1fr; }
}

/* Small tablet */
@media (max-width: 700px) {
    .container { padding-inline: var(--space-2); }
    h1 { margin-block-end: var(--space-2); }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Phones */
@media (max-width: 480px) {
    .site-header__inner { gap: var(--space-2); }
    .site-footer__inner { align-items: flex-start; }
    .card-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .tool-container .btn { width: auto; }
}