/* 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 num cartão branco de cantos bem redondos: número, título com
   resumo e a miniatura à direita. No telefone os temas viram uma fileira de pílulas que corre 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; }

/* 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; color: var(--vinho); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; 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: 40px; padding: 0 16px;
  border: 1px solid var(--rosa-cha); border-radius: 999px; background: var(--branco); color: var(--vinho);
  font-size: 15px; font-weight: 500; text-align: left;
}
.filtro__opcao[aria-pressed="true"] { border-color: var(--vinho); background: var(--vinho); color: var(--branco); }

.filtro__caixa { display: none; }

.filtro__total { opacity: .7; }

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

.todos__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin-bottom: 18px;
}

.todos__titulo { font-size: 24px; }

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

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

.todos__linhas { display: grid; gap: 12px; }

/* no telefone a miniatura fica ao lado do número e do título, e o resumo usa a largura toda embaixo: o bloco
   de texto "se desfaz" (display: contents) pra cada parte achar a sua área na grade */
.linha-ep {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 14px;
  grid-template-areas: "numero mini" "titulo mini" "resumo resumo" "meta meta";
  padding: 18px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco);
}

.linha-ep__texto { display: contents; }

.linha-ep__numero { grid-area: numero; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-fraca); }

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

.linha-ep__titulo a { text-decoration: none; }
.linha-ep__titulo a:hover { text-decoration: underline; text-decoration-color: var(--rosa-cha); text-underline-offset: 4px; }

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

.linha-ep__meta { grid-area: meta; margin-top: 4px; font-size: 14px; color: var(--tinta-fraca); }

.linha-ep__miniatura { grid-area: mini; align-self: start; }
.linha-ep__miniatura .miniatura { border-radius: 16px; }
.linha-ep__miniatura .miniatura__numero { font-size: 34px; right: 9px; }
.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: 44px; min-height: 44px; border: 1px solid var(--rosa-cha); border-radius: 999px; background: var(--branco);
  color: var(--vinho); font-weight: 700;
}
.paginacao button[aria-current="page"] { border-color: var(--vinho); background: var(--vinho); color: var(--branco); }

@media (min-width: 900px) {
  .todos { padding: 96px 0 120px; }
  .todos__dentro { grid-template-columns: 210px minmax(0, 1fr); gap: 80px; }
  .filtro__titulo { padding-bottom: 14px; border-bottom: 2px solid var(--rosa-cha); }
  .filtro__opcoes { display: grid; gap: 4px; overflow: visible; }
  .filtro__opcao { min-height: 0; padding: 7px 0; border: 0; border-radius: 0; background: none; color: var(--tinta); font-size: 16px; }
  .filtro__opcao[aria-pressed="true"] { background: none; color: var(--vinho); font-weight: 700; }
  .filtro__caixa {
    display: block; flex: none; width: 22px; height: 22px; border: 1px solid var(--rosa-cha); border-radius: 50%; background: var(--branco);
  }
  .filtro__opcao[aria-pressed="true"] .filtro__caixa { border-color: var(--vinho); background: var(--vinho); box-shadow: inset 0 0 0 4px var(--branco); }
  .todos__titulo { font-size: 28px; }
  .todos__linhas { gap: 16px; }
  .linha-ep { grid-template-columns: 96px minmax(0, 1fr) 220px; grid-template-areas: "numero texto mini"; gap: 0 24px; padding: 22px 22px 22px 28px; border-radius: 32px; }
  .linha-ep__texto { display: block; grid-area: texto; }
  .linha-ep__numero { padding-top: 6px; font-size: 13px; line-height: 1.3; }
  .linha-ep__titulo { font-size: 24px; }
  .linha-ep__resumo { margin-top: 8px; font-size: 17px; }
  .linha-ep__meta { margin-top: 10px; }
  .linha-ep__miniatura .miniatura { border-radius: 22px; }
  .linha-ep__miniatura .miniatura__numero { font-size: 60px; right: 14px; }
  .linha-ep__miniatura .miniatura__tema { display: block; }
}