/* lista.css: "Todos os episódios", no início e na página de episódios, como a grade de programação completa: os chips
   de tema em caixa alta numa fileira que rola (o marcado em azul cheio), a lista em linhas de guia (.linha-ep--larga,
   do grade.css) debaixo de um fio marinho, uma coluna no telefone e duas 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 grade.css (vem depois dele: o separador das linhas daqui troca o de lá).
   Telefone nas regras soltas, computador no @media do fim. */

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

.todos--pagina { padding-top: 24px; }
.todos--pagina .secao__titulo { font-size: 34px; }

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

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

/* a fileira rola por dentro no telefone, sem barra de rolagem à vista */
.chips { display: flex; gap: 6px; margin-bottom: 16px; 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: 34px; padding: 0 12px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--branco); color: var(--marinho);
  font-family: var(--letra-titulo); font-size: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: var(--branco); }

/* ------------------------------------------------------------ a lista em linhas de guia */

.lista-tv { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--fio) solid var(--marinho); }

/* aqui cada linha fecha com o fio de baixo, pra as duas colunas do computador ficarem iguais */
.lista-tv > .linha-ep { border-top: 0; border-bottom: 1px solid var(--linha); }

.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: 6px; margin-top: 24px; }

.paginacao button {
  min-width: 40px; min-height: 40px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--branco); color: var(--marinho);
  font-family: var(--letra-titulo); font-size: 18px; font-weight: 600;
}
.paginacao button:hover { border-color: var(--azul); color: var(--azul); }
.paginacao button[aria-current="page"] { border-color: var(--azul); background: var(--azul); color: var(--branco); }

@media (min-width: 900px) {
  .todos { padding: 48px 0 24px; scroll-margin-top: 80px; }
  .todos--pagina { padding-top: 32px; }
  .todos--pagina .secao__titulo { font-size: 42px; }
  .chips { scroll-margin-top: 80px; }
  .lista-tv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}