/* lista.css: "Todos os episódios", no fim do início e na página de episódios. Os chips de tema numa fileira que rola
   por dentro ("Todos" e o tema escolhido ficam verdes, com texto preto), a lista em linhas como a de episódios de um
   aplicativo de podcast (miniatura, título, resumo em duas linhas, número, data, duração e temas, e o play redondo à
   direita), a contagem, o aviso de busca vazia e as páginas da lista. Uma coluna no telefone, duas no computador.
   O .chip também marca os temas na Descrição do episódio. Depende de: base.css e cartao-ep.css (a .miniatura).
   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: 28px; }

.todos__ajuda { margin: -6px 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: 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: 32px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--superficie-alta);
  font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.chip:hover { background: var(--superficie-apertada); }
.chip[aria-pressed="true"] { background: var(--verde); color: var(--sobre-o-verde); font-weight: 700; }

/* ------------------------------------------------------------ as linhas */

.linhas { display: grid; grid-template-columns: minmax(0, 1fr); }

.linha-ep { min-width: 0; border-bottom: 1px solid var(--linha); }

.linha-ep__link {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 8px; margin-inline: -8px; border-radius: var(--raio); text-decoration: none;
}
.linha-ep__link:hover { background: var(--superficie); }

.linha-ep .miniatura { border-radius: 4px; box-shadow: none; }
.linha-ep .miniatura__rotulo { display: none; }
.linha-ep .miniatura__numero { left: 8px; font-size: 34px; }
.linha-ep .miniatura__duracao { display: none; }

.linha-ep__texto { display: grid; gap: 4px; min-width: 0; }

.linha-ep__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.3;
}

.linha-ep__resumo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 13px; line-height: 1.45; color: var(--texto-suave);
}

.linha-ep__pe { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

.linha-ep__meta { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.linha-ep__meta [data-campo="duracao"] { white-space: nowrap; }

/* o play redondo é só enfeite (a linha inteira é o link); fica verde quando o mouse passa */
.linha-ep__play {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--texto); color: var(--sobre-o-verde);
}
.linha-ep__play svg { width: 14px; height: 14px; fill: currentColor; }
.linha-ep__link:hover .linha-ep__play { background: var(--verde); }

.todos__vazio { padding: 24px 0; color: var(--texto-suave); }

.todos__ver-todos { margin-top: 24px; text-align: center; }

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

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

.paginacao button {
  min-width: 40px; min-height: 40px; border: 0; border-radius: 50%;
  background: var(--superficie-alta); font-weight: 700;
}
.paginacao button:hover { background: var(--superficie-apertada); }
.paginacao button[aria-current="page"] { background: var(--verde); color: var(--sobre-o-verde); }

@media (min-width: 900px) {
  .todos { padding: 44px 0 24px; scroll-margin-top: 72px; }
  .todos--pagina { padding-top: 32px; }
  .todos--pagina .secao__titulo { font-size: 34px; }
  .chips { scroll-margin-top: 72px; }
  .linhas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .linha-ep__link { grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 14px 10px; margin-inline: -10px; }
  .linha-ep .miniatura__numero { font-size: 48px; }
  .linha-ep__titulo { font-size: 16px; }
}