/* lista.css: "Todos os episódios", no início e na página de episódios: os chips de tema roláveis acima da grade (como
   os chips de um canal no modo escuro: o marcado em violeta, os outros em grafite), a grade de cartões (1 por linha no telefone,
   3 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: 20px; }
.todos--pagina .secao__titulo { font-size: 24px; }

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

/* ------------------------------------------------------------ os chips */

/* a fileira rola por dentro no telefone, sem barra de rolagem à vista */
.chips { display: flex; gap: 8px; margin-bottom: 20px; padding-bottom: 4px; overflow-x: auto; scroll-margin-top: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

/* a lista que o comum preenche entra na mesma fileira que o "Todos" */
.chips__temas { display: contents; }

.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: var(--raio-pequeno); background: var(--bloco-claro);
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.chip:hover { background: var(--bloco-aceso); }
.chip[aria-pressed="true"] { background: var(--violeta); color: var(--sobre-violeta); font-weight: 600; }
.chip[aria-pressed="true"]:hover { background: var(--violeta-aceso); }

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

.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 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-claro); font-weight: 600; }
.paginacao button:hover { background: var(--bloco-aceso); }
.paginacao button[aria-current="page"] { background: var(--texto); color: var(--noite); }

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