/* responsive.css — mobile-first overrides and layout tweaks */

@media (max-width: 479px) {
  .container { padding: 0 12px; }
  .hero-text h1 { font-size: 22px; }
  .hero { padding: 24px 0; }
  .header-inner { height: 56px; }
  .article-hero h1 { font-size: 20px; }
  .cards { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .header-actions .search { display: none; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero-text h1 { font-size: 26px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet and desktop */
@media (min-width: 768px) {
  .container { padding: 0 24px; }
  .hero-text h1 { font-size: 40px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: 220px 1fr; gap: 32px; }
  .toc { display: block; }
  .header-actions .search { display: block; }
}

/* Large screens */
@media (min-width: 1400px) {
  .container { max-width: 1400px; }
  .hero-text h1 { font-size: 56px; }
}