/* lista.css: "Todos os episódios", no início e na página de episódios. O título em Anton com a contagem embaixo
   e a busca à direita; as pílulas de tema acima da grade (marcar uma filtra); a grade de cartões (cartao-ep.css);
   e as páginas da lista em quadradinhos.
   Depende de: base.css e cartao-ep.css. Telefone nas regras soltas, computador no @media do fim. */

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

.todos--pagina { padding-top: 40px; }

/* ------------------------------------------------------------ a cabeça: título, contagem e busca */

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

.todos__titulos { display: grid; gap: 8px; }

.todos__contagem { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

.busca { position: relative; width: 100%; }

.busca__campo {
  width: 100%; min-height: 48px; padding: 0 16px 0 46px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
  background: var(--cartao); color: var(--texto); font: inherit; font-size: 16px;
}
.busca__campo::placeholder { color: var(--texto-fraco); }
.busca__campo:hover { border-color: var(--linha-clara); }

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

/* ------------------------------------------------------------ as pílulas de tema */

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

/* o comum preenche os temas dentro desta caixa; display: contents deixa as pílulas na mesma fileira do "Todos" */
.pilulas__temas { display: contents; }

/* ------------------------------------------------------------ vazio e páginas */

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

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

.paginacao button {
  min-width: 44px; min-height: 44px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
  background: var(--cartao); font-weight: 600;
}
.paginacao button:hover { border-color: var(--linha-clara); }
.paginacao button[aria-current="page"] { background: var(--laranja); border-color: var(--laranja); color: var(--tinta-no-laranja); }

@media (min-width: 900px) {
  .todos { padding: 88px 0 0; }
  .todos--pagina { padding-top: 56px; }
  .todos__cabeca { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; gap: 24px; margin-bottom: 28px; }
  .busca__campo { min-height: 52px; }
  .pilulas { margin-bottom: 32px; }
}