/* Responsivo por media query (docs/07-mobile.md): sidebar some abaixo de 1024, header 64 e cards full-bleed abaixo de 768 */
@media (max-width: 1100px) { .container, .header-inner { padding: 0 16px; } }
@media (max-width: 1024px) { .sidebar { display: none; } .main { width: 100%; } }
@media (max-width: 768px) {
  :root { --header-h: 120px; --content-top: 16px; }
  .header { box-shadow: var(--shadow-header); }
  .header-inner { padding: 0; }
  .header-row { height: 64px; padding: 0 16px; }
  .header-search, .header .hide-mobile { display: none; }
  .header .hide-desktop { display: inline-grid; }
  .header-row { position: relative; }
  /* ☰: o menu de comunidades ocupa a tela abaixo da linha do cabeçalho */
  /* Lupa: a busca cobre a linha do cabeçalho até fechar no ✕ */
  .header.is-searching .header-search { display: flex; position: absolute; inset: 8px 16px; z-index: 5; max-width: none; margin-left: 0; height: auto; padding-right: 4px; }
  .header-search-close { flex: none; }
  /* Nome da comunidade onde couber: a marca encolhe, o nome quebra para a 2ª linha e a altura fixa o esconde
     inteiro, sobrando só o ícone. Nunca corta com reticências (05/10/2026). */
  .header .brand { flex: 0 1 auto; min-width: 32px; height: 32px; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
  .header .brand-name { line-height: 32px; }
  .header-actions { gap: 0; }
  .brand-icon { width: 32px; height: 32px; border-radius: 6px; }
  .brand-name { font-weight: 700; }
  .header .btn-secondary { border: 0; padding: 0 8px; }
  .tabs { height: 56px; overflow-x: auto; scrollbar-width: none; padding-left: 16px; gap: 8px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { font-size: 18px; padding: 0 8px; }
  .tabs a:first-child { padding-left: 0; }
  .header--compact { height: 64px; } .page--compact { padding-top: 80px; }
  .container { padding: 0; }
  .card:not(.auth-card), .composer, .member-card, .about-card { border-radius: 0; border-left: 0; border-right: 0; }
  .composer { margin: 0 12px 16px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: 18px; }
  /* Como no Skool: só as pills rolam; o botão de ordenar fica fixo e redondo à direita */
  .category-row { padding: 0 12px; }
  .category-row .btn-icon.outlined { flex: none; }
  .feed-order__period { padding: 0 10px; }  /* período do Topo enxuto: as categorias rolam ao lado */
  .member-filters { padding: 0 12px; }
  .about-card, .card--editorial { padding: 16px; }
  .member-row > .btn-sm { display: none; }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}