/* lista.css: "Todos os episódios", no início e na página de episódios. No computador, os temas numa coluna à
   esquerda (marcar um filtra a lista) e cada episódio numa linha: número, título com resumo e a miniatura à direita.
   No telefone os temas viram uma fileira de pílulas que corre de lado.
   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; }

/* 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: 24px; }
.todos__dentro > * { min-width: 0; }

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

.filtro__titulo { margin-bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.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: 38px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--creme); font-size: 15px; text-align: left;
}
.filtro__opcao[aria-pressed="true"] { background: var(--amarelo); }

.filtro__caixa { display: none; }

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

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

.todos__cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--linha);
}

.todos__titulo { font-size: 20px; }

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

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

.linha-ep {
  display: grid; grid-template-columns: 1fr 112px; gap: 6px 16px;
  padding: 20px 0; border-bottom: 1px solid var(--linha);
}

.linha-ep__numero { grid-column: 1 / -1; font-size: 13px; text-transform: uppercase; color: var(--tinta-suave); }

.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; color: var(--tinta-fraca); }

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

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

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

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

@media (min-width: 900px) {
  .todos { padding: 96px 0 120px; }
  .todos__dentro { grid-template-columns: 200px 1fr; gap: 130px; }
  .filtro__titulo { padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
  .filtro__opcoes { display: grid; gap: 4px; overflow: visible; }
  .filtro__opcao { min-height: 0; padding: 6px 0; border-radius: 0; background: none; font-size: 16px; }
  .filtro__opcao[aria-pressed="true"] { background: none; font-weight: 600; }
  .filtro__caixa {
    display: block; flex: none; width: 22px; height: 22px; border: 1px solid var(--linha); border-radius: 5px; background: var(--branco);
  }
  .filtro__opcao[aria-pressed="true"] .filtro__caixa { border-color: var(--tinta); background: var(--amarelo); box-shadow: inset 0 0 0 4px var(--branco); }
  .todos__titulo { font-size: 20px; }
  .linha-ep { grid-template-columns: 90px 1fr 214px; gap: 0 18px; padding: 20px 0; }
  .linha-ep__numero { grid-column: auto; padding-top: 6px; font-size: 13px; line-height: 1.3; }
  .linha-ep__titulo { font-size: 24px; }
  .linha-ep__resumo { font-size: 18px; }
  .linha-ep__miniatura .miniatura__numero { font-size: 56px; right: 12px; }
  .linha-ep__miniatura .miniatura__tema { display: block; }
}