/* responsive.css — larger-screen enhancements (base styles in style.css are mobile-first) */

@media (min-width: 600px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.55rem; }
  .container { padding: 0 24px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 2.5rem; }
  .toc ol { columns: 2; column-gap: 2rem; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .section { padding: 3.4rem 0; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 4rem 0; }
  .hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: center; }
  .hero-card { margin-top: 0; }
  .hero h1 { font-size: 2.9rem; }
  .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer-about { grid-column: auto; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }

  /* Desktop navigation */
  .nav-toggle { display: none; }
  .site-nav { display: flex !important; width: auto; padding: 0; align-items: center; gap: 1.2rem; }
  .site-nav ul { display: flex; gap: .2rem; }
  .site-nav li a { border: 0; padding: .5em .7em; border-radius: 6px; font-size: .95rem; }
  .site-nav li a:hover { background: var(--soft); }
  .nav-actions { padding: 0; flex-wrap: nowrap; }
}