/* ==========================================================================
   BELMARK — Responsividade (mobile-first)
   Base (< 600px): celular. Breakpoints progressivos:
     sm 600px  — celulares grandes / tablets em retrato
     md 768px  — tablets
     lg 1024px — notebooks (sidebar fixa aparece aqui)
     xl 1280px — desktops
   ========================================================================== */

@media (min-width: 600px) {
  :root { --gutter: var(--space-5); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field--full { grid-column: 1 / -1; }
  .options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions { flex-direction: row; }
  .toast-region { left: auto; width: 380px; }
  .modal { place-items: center; padding: var(--space-5); }
  .modal__dialog { max-width: 620px; border-radius: var(--radius-lg); }
  .auth__card { padding: var(--space-7) var(--space-6); }
  .org-flow__row { grid-template-columns: 150px 1fr; }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .site-header__actions .btn--ghost { display: inline-flex; }
}

@media (min-width: 768px) {
  :root { --text-2xl: 2rem; }
  .overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-grid > .detail__section--full { grid-column: 1 / -1; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page { padding-top: var(--space-6); }
  .grid--3, .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .metric-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
  .filters--5 { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); }
  .filters .search { grid-column: auto; }
  .founder { grid-template-columns: 320px 1fr; gap: var(--space-8); }
  .funnel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
  .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ebook { grid-template-columns: 110px 1fr; }
}

@media (min-width: 1024px) {
  .site-nav { display: flex; gap: var(--space-6); }
  .site-header__menu-btn { display: none; }
  .mobile-nav { display: none !important; }
  .hero { padding: var(--space-10) 0; }
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* shell: sidebar fixa, sem drawer */
  .app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; width: var(--sidebar-width); transform: none; box-shadow: none; }
  .sidebar__close, .topbar__menu, .topbar__logo, .sidebar-backdrop { display: none !important; }
  .mode-banner { display: inline-flex; }
  .page { padding-left: var(--space-7); padding-right: var(--space-7); }

  .dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
}

@media (min-width: 1200px) {
  .detail { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-7); }
  .detail__aside { position: sticky; top: calc(var(--topbar-height) + var(--space-5)); order: 2; }
  .toc { display: block; }
  .toc-mobile-hint { display: none; }
}

@media (min-width: 1280px) {
  :root { --text-2xl: 2.25rem; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile: tabela vira lista de cards quando marcada com .table--stack */
@media (max-width: 767px) {
  .table--stack { min-width: 0; }
  .table--stack thead { display: none; }
  .table--stack tr { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--belmark-border); }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border: 0; text-align: right; }
  .table--stack td::before { content: attr(data-label); color: var(--belmark-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; }
  .table--stack td .row { flex-wrap: wrap; justify-content: flex-end; }
  .btn-row-mobile-stack { flex-direction: column; align-items: stretch; }
  .btn-row-mobile-stack .btn { width: 100%; }
}

@media print {
  .sidebar, .topbar, .toast-region, .site-header, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
}