/* =========================================================
   My Opinion Panel — Responsive (responsive.css)
   Breakpoints: 320, 375, 414, 768, 1024, 1440+
   ========================================================= */

@media (max-width: 1024px) {
  .section { padding: 68px 0; }
  .hero-grid { gap: 34px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  /* Mobile navigation */
  .nav-links { display: none; }
  #authActions { display: none; }
  .nav-toggle { display: inline-flex; }

  .mobile-drawer {
    display: block; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 999;
    background: #fff; padding: 22px; transform: translateX(100%); transition: transform .3s ease;
    overflow-y: auto; border-top: 1px solid var(--line);
  }
  body.nav-open .mobile-drawer { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .mobile-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
  .mobile-drawer a.mlink {
    display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-radius: 12px;
    font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); border: 1px solid transparent;
  }
  .mobile-drawer a.mlink:hover, .mobile-drawer a.mlink.active { background: var(--brand-soft); color: var(--brand-700); }
  .mobile-drawer a.mlink svg { width: 18px; height: 18px; color: var(--muted-2); }
  .mobile-drawer .m-actions { display: flex; flex-direction: column; gap: 12px; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-cta { }
  .cta-band { padding: 40px 30px; }
  .cta-flex { flex-direction: column; align-items: flex-start; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dev-card { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .section { padding: 54px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .auth-aside { display: none; }
  .form-card { padding: 28px 22px; }
  .cta-band { padding: 32px 22px; }
  .dev-card { padding: 28px 22px; }
  .prose .toc ul { columns: 1; }
  .flow-strip { gap: 4px; }
  .flow-chip { font-size: .82rem; padding: 8px 12px; }
  .dash-welcome { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .brand-text { font-size: 1rem; }
  h1 { font-size: 1.85rem; }
  .btn { padding: 12px 18px; }
  .container { padding: 0 16px; }
  .flow-strip .flow-arrow { display: none; }
}