/* ============================================================
   BlogSphere AI — responsive.css
   Extra breakpoint refinements not already covered inline in
   style.css. Loaded after style.css on every page.
   ============================================================ */

@media (max-width: 1080px) {
  .container { padding: 0 var(--sp-3); }
  h1 { font-size: var(--fs-4xl); }
}

@media (max-width: 720px) {
  .logo { font-size: var(--fs-2xl); }
  .section { padding: var(--sp-6) 0; }
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .hero-lead img { height: 280px; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .masthead-date { display: none; }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .nav-tools .btn { width: auto; }
  .card-title { font-size: var(--fs-base); }
}

/* Print styles — used by the article "Print" button */
@media print {
  .site-nav, .masthead, .site-footer, .newsletter-box,
  .icon-btn, .toast-wrap, .reading-progress, [data-no-print] {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  .container { max-width: 100%; padding: 0; }
}