/* SEO Fixlist — responsive behavior */

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 960px) {
  /* Sidebar becomes drawer */
  .sidebar { transform: translateX(-100%); transition: transform var(--t-base); box-shadow: none; }
  body.drawer-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-main { margin-left: 0; }
  .menu-btn { display: inline-flex; }

  .grid-main-side, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* Public nav collapses */
  .public-nav .nav-links, .public-nav .nav-actions { display: none; }
  .nav-burger { display: inline-flex; margin-left: auto; }
  .section { padding-top: var(--s-10); padding-bottom: var(--s-10); }
}

@media (max-width: 720px) {
  .page { padding: var(--s-4); }
  .topbar { padding: 0 var(--s-4); }
  .page-head { flex-direction: column; }
  .page-head .page-actions { width: 100%; }
  .page-head .page-actions .btn { flex: 1; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }

  /* Responsive card-tables: rows become stacked cards */
  .table-cards table, .table-cards thead, .table-cards tbody,
  .table-cards tr, .table-cards th, .table-cards td { display: block; }
  .table-cards thead { display: none; }
  .table-cards tr {
    border: 1px solid var(--border); border-radius: var(--r-md);
    margin-bottom: var(--s-3); background: var(--surface); padding: var(--s-2) 0;
  }
  .table-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    border-bottom: 0; padding: var(--s-2) var(--s-4); text-align: right;
  }
  .table-cards td::before {
    content: attr(data-th);
    font-size: var(--fs-11); font-weight: 500; color: var(--slate);
    text-transform: uppercase; letter-spacing: 0.04em; text-align: left;
  }
  .table-cards td:first-child { font-weight: 500; }

  .modal { max-width: 100%; }
  .toast-stack { left: var(--s-4); right: var(--s-4); max-width: none; }

  .hero h1 { font-size: var(--fs-28); }
  .hero .hero-input { flex-direction: column; }
  .hero .hero-input .btn { width: 100%; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stepper .step-label { display: none; }
  .stepper .step.active .step-label { display: inline; }
  .auth-card { padding: var(--s-6); }
  .demo-switcher { bottom: var(--s-2); left: var(--s-2); }
}