/* lista.css: as prateleiras de episódios, no início e na página de episódios (a guia das categorias em cima mora
   no guia.css): a grade de miniaturas (uma linha por episódio no
   telefone, 4 por linha no computador), a contagem, o aviso de busca vazia e as páginas da lista. O .chip também
   marca os temas na Descrição do episódio. Depende de: base.css e cartao-ep.css. Telefone nas regras soltas, computador no @media do fim. */

.todos { padding: 32px 0 16px; scroll-margin-top: 16px; }

.todos--pagina { padding-top: 24px; }

.todos__ajuda { margin: -6px 0 16px; max-width: 70ch; font-size: 14px; color: var(--texto-suave); }

/* ------------------------------------------------------------ o chip dos temas na Descrição do episódio */

.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--bloco);
  font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.chip:hover { background: var(--bloco-escuro); }

/* ------------------------------------------------------------ a grade */

.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.todos__vazio { padding: 24px 0; color: var(--texto-suave); }

.todos__ver-todos { margin-top: 28px; text-align: center; }

/* ------------------------------------------------------------ as páginas da lista */

.paginacao { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.paginacao button { min-width: 40px; min-height: 40px; border: 0; border-radius: 50%; background: var(--bloco); font-weight: 700; }
.paginacao button:hover { background: var(--bloco-escuro); }
.paginacao button[aria-current="page"] { background: var(--preto); color: var(--branco); }

@media (min-width: 900px) {
  .todos { padding: 40px 0 24px; scroll-margin-top: 72px; }
  .todos--pagina { padding-top: 28px; }
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
}