/* lista.css: "Todos os episódios", no início e na página de episódios, sobre o céu. No computador, os temas numa
   coluna à esquerda (cada um com a caixinha na cor do seu tema; marcar um filtra a lista) e cada episódio num cartão
   branco: número, título com resumo e a miniatura à direita. No telefone os temas viram pílulas coloridas que correm
   de lado por dentro.
   Depende de: base.css e cartao-ep.css. Telefone nas regras soltas, computador no @media do fim. */

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

/* na página de episódios a lista vem logo depois da busca, no mesmo céu: sem o respiro de faixa nova em cima */
.todos--emendado { padding-top: 8px; }

/* min-width: 0 deixa a fileira de temas correr por dentro em vez de esticar a página no telefone */
.todos__dentro { display: grid; gap: 22px; }
.todos__dentro > * { min-width: 0; }

/* ------------------------------------------------------------ o filtro por tema */

.filtro__titulo { margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }

.filtro__opcoes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }

.filtro__opcao {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 0 16px;
  border: 2px solid transparent; border-radius: 999px; background: var(--cor-do-tema, var(--branco));
  font-size: 15px; font-weight: 700; text-align: left; white-space: nowrap;
}
.filtro__opcao[aria-pressed="true"] { border-color: var(--tinta); background: var(--sol); }

.filtro__caixa { display: none; }

.filtro__total { font-weight: 600; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ a lista */

.todos__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; }

.todos__titulo { font-size: 22px; }

.todos__contagem { font-size: 15px; font-weight: 700; color: var(--tinta-suave); }

.todos__vazio { padding: 32px 0; color: var(--tinta-suave); }

[data-lista="todos"] { display: grid; gap: 12px; }

.linha-ep {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 6px 14px;
  padding: 16px; border-radius: var(--raio); background: var(--branco);
  box-shadow: 0 4px 16px rgba(20, 33, 61, .05);
}

.linha-ep__numero { grid-column: 1 / -1; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--tinta-fraca); }

.linha-ep__titulo { font-size: 19px; }

.linha-ep__titulo a { text-decoration: none; }
.linha-ep__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }

.linha-ep__resumo { margin-top: 8px; color: var(--tinta-suave); font-size: 16px; }

.linha-ep__meta { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-fraca); }

.linha-ep__miniatura { align-self: start; }
.linha-ep__miniatura .miniatura { border-radius: 12px; }
.linha-ep__miniatura .miniatura__numero { font-size: 32px; left: 8px; }
.linha-ep__miniatura .miniatura__tema { display: none; }

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

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

.paginacao button {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: var(--branco);
  color: var(--cobalto); font-weight: 800;
}
.paginacao button[aria-current="page"] { background: var(--sol); color: var(--tinta); }

@media (min-width: 900px) {
  .todos { padding: 96px 0 120px; }
  .todos--emendado { padding-top: 16px; }
  .todos__dentro { grid-template-columns: 210px minmax(0, 1fr); gap: 80px; }
  .filtro__titulo { padding-bottom: 14px; border-bottom: 2px solid var(--linha); }
  .filtro__opcoes { display: grid; gap: 6px; overflow: visible; }
  .filtro__opcao {
    min-height: 0; padding: 6px 0; border: 0; border-radius: 0; background: none;
    font-size: 16px; white-space: normal;
  }
  .filtro__opcao[aria-pressed="true"] { background: none; color: var(--cobalto); }
  .filtro__caixa {
    display: block; flex: none; width: 24px; height: 24px; border: 2px solid transparent; border-radius: 8px;
    background: var(--cor-do-tema, var(--branco));
  }
  .filtro__opcao[aria-pressed="true"] .filtro__caixa { border-color: var(--tinta); background: var(--sol); box-shadow: inset 0 0 0 4px var(--branco); }
  .todos__titulo { font-size: 26px; }
  [data-lista="todos"] { gap: 16px; }
  .linha-ep { grid-template-columns: 112px minmax(0, 1fr) 210px; gap: 0 18px; padding: 22px 24px; }
  .linha-ep__numero { grid-column: auto; padding-top: 6px; line-height: 1.3; }
  .linha-ep__titulo { font-size: 24px; }
  .linha-ep__resumo { font-size: 17px; }
  .linha-ep__miniatura .miniatura__numero { font-size: 54px; left: 12px; }
  .linha-ep__miniatura .miniatura__tema { display: block; }
}