/* ==========================================================================
   Responsive breakpoints: 1280 / 1024 / 768 / 480 (mobile-first overrides)
   ========================================================================== */

@media (max-width: 1280px) {
  .container { max-width: 1024px; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  #popular .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .header-search { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-search-toggle { display: inline-flex; }
  .nav-wrap { padding: 20px 16px; }
  .brand-logo { height: 46px; margin: 4px 0; }
  .category-grid { grid-template-columns: 1fr !important; }
  .category-card { padding: 16px; }
  .category-card .cat-icon { width: 36px; height: 36px; font-size: 0.95rem; }
  .category-card h3 { font-size: 1rem; }
  .category-card p { font-size: 0.85rem; margin-bottom: 8px; }
  .category-card ul { max-height: 180px !important; }
  .category-card ul a,
  .category-card .meta { font-size: 0.85rem; }
  .tool-grid { grid-template-columns: 1fr; }
  #popular .tool-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .hero { padding: 32px 0 28px; }
  .section { padding: 30px 0; }
  .hero-stats { gap: 18px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  h1 { font-size: 1.55rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-search-box { flex-direction: column; align-items: stretch; }
  .hero-search-box .btn { width: 100%; }
  .calc-actions .btn { flex: 1; }
  .brand span:last-child { display: none; }
}