/* ============================================================
   RESPONSIVE.CSS — breakpoints layered on top of style.css
   Breakpoints: 1024px (tablet), 768px (large mobile), 480px (small mobile)
============================================================ */

/* ----------------------------- 1024px: tablet ----------------------------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .review-hero-inner { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 200px 1fr; gap: var(--space-6); }
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------- 768px: nav collapses ----------------------------- */
@media (max-width: 768px) {
  .main-nav { position: fixed; inset: 72px 0 0 0; background: var(--bg-page); z-index: 890; padding: var(--space-6) var(--space-5); transform: translateX(100%); transition: transform var(--transition-base); }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: var(--space-5); }
  .main-nav a { font-size: 1.1rem; }
  .mobile-nav-toggle { display: flex; }
  .nav-search { display: none; }

  .card-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { flex: 1; min-width: 0; }

  .review-layout { grid-template-columns: 1fr; }
  .review-toc { position: static; order: 2; margin-bottom: var(--space-6); }
  .review-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); border-left: none; gap: var(--space-2); }
  .toc-link { border-left: none; padding-left: 0; border-bottom: 2px solid transparent; }
  .toc-link.active { border-left: none; border-bottom-color: var(--color-signal); }

  .pros-cons-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .pricing-row { grid-template-columns: 1fr 1fr; }
  .pricing-row span:last-child { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-muted); }

  .sticky-cta { display: block; }
  .footer-inner { flex-direction: column; gap: var(--space-6); }
  .footer-nav { gap: var(--space-6); flex-wrap: wrap; }
}

/* ----------------------------- 480px: small mobile ----------------------------- */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-7); }
  .hero { padding-block: var(--space-7) var(--space-6); }
  .hero-stats { flex-wrap: wrap; gap: var(--space-4); }
  .hero-actions .btn { width: 100%; }
  .verdict-card { width: 100%; }
  .header-inner { height: 64px; }
  .logo-text { display: none; }
  .review-hero-actions .btn { width: 100%; }
  .quick-verdict-box { flex-direction: column; text-align: center; }
  .author-box { flex-direction: column; }
  .footer-nav { flex-direction: column; gap: var(--space-5); }
  .newsletter-section { border-radius: var(--radius-md); }
}