/* ── Mobile: < 640px ── */
@media (max-width: 639px) {

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero { padding: 40px 0 36px; }
  .hero-inner { flex-direction: column; gap: 24px; padding: 0 20px; }
  .hero-visual { font-size: 64px; order: -1; width: 200px; max-width: 200px; }
  .hero-h1 { font-size: 30px; }
  .hero-p { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; }

  /* Cards — 1 column */
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Article */
  .article-title { font-size: 26px; }
  .article-outer { padding: 24px 20px 40px; }
  .article-cover-strip { padding: 20px 0 0; }
  .article-cover-frame { border-radius: 0; aspect-ratio: 16/9; }

  /* Container padding */
  .container { padding: 0 20px; }
  .cat-header { padding: 32px 0 28px; }
  .cat-title { font-size: 26px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .site-footer { padding: 36px 20px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Contact page */
  .contact-outer { padding: 24px 20px 40px; }
}

/* ── Tablet: 640px – 1024px — 3 columns (same as desktop) ── */
/* No card grid override needed — 3 columns already match */

@media (max-width: 1024px) and (min-width: 640px) {
  /* Nav: use hamburger on tablet too */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .article-outer { padding: 32px 40px 48px 60px; }
  .article-cover-strip { padding: 24px 24px 0; }
  .hero-h1 { font-size: 36px; }
}