/* ============================================================
   SUKATA — Responsivo
   Breakpoints: 1920 · 1440 · 1366 · 1024 · 768 · 430 · 390
   ============================================================ */

/* 1920+: folga lateral já garantida pelo --content-max */

/* 1440 / 1366 — barras intermediárias */
@media (max-width: 1500px) {
  .hero-art .chip-1 { left: 4px; }
  .hero-art .chip-2 { right: 4px; }
}

@media (max-width: 1366px) {
  :root { --fs-34: 30px; }
}

/* 1024 — colapsa sidebar p/ ícones (ver layout.css para drawer <1024) */
@media (max-width: 1280px) {
  .workbench { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* tablet / mobile */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-5); }
  .hero-art { max-width: 560px; }
  .workbench { grid-template-columns: 1fr; }
  .status-panel { position: static; }
  .settings-grid { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { min-height: 100vh; }
}

@media (max-width: 768px) {
  :root {
    --fs-34: 26px;
    --fs-26: 22px;
  }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .search-box .search-kbd { display: none; }
  .search-box input { padding-left: 36px; }
  .caps { grid-template-columns: 1fr 1fr; }
  .item-meta .item-date { display: none; }
  .modal { margin: auto var(--sp-3); }
  .overlay { padding: var(--sp-4) var(--sp-2); }
}

@media (max-width: 560px) {
  .caps { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { align-self: flex-start; }
  .submit-row .btn { flex: 1 1 auto; }
  .card-head, .card-body, .card-foot, .pane-body { padding-inline: var(--sp-4); }
  .hero { padding-top: var(--sp-4); }
  .hero h1 { letter-spacing: -0.025em; }
  .hero .hero-cta .btn { flex: 1 1 auto; }
  .inst-card { align-items: flex-start; }
  .proj-grid { grid-template-columns: 1fr; }
  .hero-art .chip-1 { top: 8px; left: 8px; }
  .hero-art .chip-2 { right: 8px; }
  .hero-art .chip-3 { left: 12px; }
  .fb-widget .fb-comment { flex-basis: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  /* tabs nunca cortam no mobile: quebram em linhas em vez de rolagem invisível */
  .tabs { flex-wrap: wrap; gap: 0; }
  .tab {
    flex: 1 1 auto;
    min-width: 40%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    padding: 12px var(--sp-2);
  }
  .composer .tabs .tab { min-width: 46%; }
  .auth-tabs { width: 100%; }
  .auth-tabs .tab { flex: 1 1 50%; min-width: 0; }
}

/* 430 / 390 — foco no formulário, toques >= 44px */
@media (max-width: 430px) {
  .topbar-actions .hide-sm { display: none; }
  .drawer-body { padding: var(--sp-4); }
  .drawer-foot { padding-inline: var(--sp-4); }
  .page { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .nav-item, .tab, .btn, .chip, .icon-btn, .menu-item, .switch input {
    min-height: 44px;
  }
  .btn-sm { min-height: 36px; }
  .tab { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .toast { width: 100%; }
  #toast-root { left: var(--sp-3); right: var(--sp-3); }
  .badge { white-space: normal; }
}