/* lista.css: "Todos os episódios", no início e na página de episódios: a cabeça com a contagem e a busca em
   pílula, os temas em pílulas (na página de episódios), a grade de cartões (cartao-ep.css) e as páginas da lista.
   Também a abertura da página de episódios, com o título grande e a busca.
   Depende de: base.css e cartao-ep.css. Telefone nas regras soltas, computador no @media do fim. */

.todos { scroll-margin-top: calc(var(--altura-topo) + 12px); }

.todos__cabeca { display: grid; gap: 16px; margin-bottom: 20px; }

.todos__filtro { margin-bottom: 24px; }

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

/* ------------------------------------------------------------ a busca */

.busca { position: relative; width: 100%; scroll-margin-top: calc(var(--altura-topo) + 12px); }

.busca__campo {
  width: 100%; min-height: 46px; padding: 0 16px 0 44px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--texto);
  font: inherit; font-size: 15px; box-shadow: var(--sombra);
}
.busca__campo:focus { outline: 0; border-color: var(--dourado); box-shadow: 0 0 0 3px var(--dourado-palido); }

.busca__icone {
  position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; translate: 0 -50%;
  color: var(--texto-suave); pointer-events: none;
}

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

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

.paginacao button {
  min-width: 40px; min-height: 40px; border: 1px solid var(--linha); border-radius: 999px;
  background: var(--branco); color: var(--marinho); font-weight: 600;
}
.paginacao button:hover { border-color: var(--dourado); }
.paginacao button[aria-current="page"] { border-color: var(--marinho); background: var(--marinho); color: var(--branco); }

/* ------------------------------------------------------------ a abertura da página de episódios */

.lista-abertura { padding: 32px 0 8px; }

.lista-abertura__titulo { font-size: 30px; }

.lista-abertura__texto { margin-top: 10px; color: var(--texto-suave); }

.lista-abertura .busca { margin-top: 20px; }

@media (min-width: 900px) {
  .todos__cabeca { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; margin-bottom: 28px; }
  .todos__filtro { margin-bottom: 32px; }
  .lista-abertura { padding: 56px 0 16px; }
  .lista-abertura__titulo { font-size: 40px; }
  .lista-abertura .busca { width: 520px; }
}