/* sumario.css: a lista de todos os episódios como sumário de revista. A busca como uma linha com filete, e cada
   episódio numa entrada: o número em serifa grande à esquerda; o título com uma linha pontilhada que corre até a
   duração, alinhada à direita; o resumo e a data embaixo. As páginas da lista, quando sobram, em números simples.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.sumario { scroll-margin-top: 16px; }

.sumario__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 18px; }

.sumario__contagem { font-style: italic; font-size: 15px; color: var(--cinza-tinta); }

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

.busca { position: relative; margin-top: 16px; }

.busca__campo {
  width: 100%; min-height: 46px; padding: 0 40px 0 0;
  border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; background: transparent;
  font: inherit; font-size: 17px; font-style: italic; color: var(--tinta);
}
.busca__campo::placeholder { color: var(--cinza-tinta); }
.busca__campo:focus { outline: 0; border-bottom-color: var(--tijolo); border-bottom-width: 2px; }

.busca__botao {
  position: absolute; right: 0; top: 4px; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; background: none; color: var(--tinta);
}
.busca__botao svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ as entradas */

.sumario__lista { margin-top: 10px; }

.sumario__item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px;
  padding: 20px 0; border-bottom: 1px solid var(--filete);
}

.sumario__numero {
  font-family: var(--letra-titulo); font-size: 40px; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}

.sumario__texto { display: grid; gap: 8px; min-width: 0; }

/* o título, a linha pontilhada e a duração: a linha enche o que sobra e assenta na base da última linha do título */
.sumario__linha { display: flex; align-items: flex-end; gap: 0; font-size: 19px; font-weight: 600; line-height: 1.2; }

.sumario__titulo { min-width: 0; text-decoration: none; }
.sumario__titulo:hover { color: var(--tijolo); }

.sumario__pontilhado { flex: 1 1 24px; min-width: 24px; margin: 0 8px 0.3em; border-bottom: 2px dotted var(--filete-escuro); }

.sumario__duracao { flex: none; font-family: var(--letra-corpo); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--cinza-tinta); white-space: nowrap; }

.sumario__resumo { font-size: 16px; color: var(--cinza-tinta); }

.sumario__meta { font-size: 14px; font-style: italic; color: var(--cinza-tinta); }

.sumario__vazio { padding: 32px 0; font-style: italic; color: var(--cinza-tinta); }

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

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

.paginacao button {
  min-width: 40px; min-height: 40px; border: 1px solid var(--filete-escuro); border-radius: var(--raio); background: transparent;
  font-family: var(--letra-titulo); font-weight: 600;
}
.paginacao button[aria-current="page"] { border-color: var(--tijolo); background: var(--tijolo); color: var(--papel-claro); }

@media (min-width: 900px) {
  .sumario__cabeca { margin-top: 24px; }
  .busca__campo { font-size: 19px; }
  .sumario__item { grid-template-columns: 76px minmax(0, 1fr); gap: 0 22px; padding: 26px 0; }
  .sumario__numero { font-size: 56px; }
  .sumario__linha { font-size: 24px; }
  .sumario__duracao { font-size: 16px; }
  .sumario__resumo { font-size: 17px; }
}