/* episodios.css: a lista de episódios do desenho 04. No telefone, o quadro amarelo da busca e dos filtros em cima
   e as faixas embaixo; no computador, os filtros numa coluna fixa à esquerda e a grade de programação à direita. Depende de: base.css. */

/* ------------------------------------------------------------ a página */

.lista { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }

.lista__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lista__titulo { font: 34px/1 var(--letra-display); }
.lista__contagem {
  margin: 0; padding: 5px 14px; border-radius: 999px;
  background: var(--preto); color: var(--amarelo);
  font-weight: 800; font-size: 15px;
}

/* ------------------------------------------------------------ busca e filtros, no quadro amarelo */

.lista__filtros {
  display: grid; gap: 16px;
  padding: 18px 16px;
  border: var(--contorno); border-radius: 26px;
  background:
    radial-gradient(rgba(23, 19, 14, .09) 1.2px, transparent 1.6px) 0 0 / 11px 11px,
    var(--amarelo);
  box-shadow: 6px 6px 0 var(--preto);
}

.busca { display: grid; gap: 8px; }
.busca__rotulo { font-weight: 800; }
.busca__caixa { position: relative; display: block; }
.busca__lupa { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none; }
.busca__campo {
  width: 100%; min-height: 56px; padding: 10px 18px 10px 48px;
  border: var(--contorno); border-radius: 999px;
  background: var(--branco); color: var(--preto);
  font: 700 17px var(--letra-texto);
}
.busca__campo::placeholder { color: #6b5f51; font-weight: 400; }

.filtro__titulo { margin: 0 0 10px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.filtro__opcoes { display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 4px; }
.adesivos--soltos { display: contents; }
.filtro .adesivo { min-height: 42px; padding: 6px 14px; font-size: 15px; }
.adesivo--todos { --cor-adesivo: var(--branco); --giro: 0deg; }

/* ------------------------------------------------------------ o resultado */

.lista__vazio {
  margin: 0; padding: 22px;
  border: 3px dashed var(--preto); border-radius: 22px;
  background: var(--branco); font-weight: 700;
}

.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.paginacao button {
  width: 54px; height: 54px; border-radius: 50%;
  border: var(--contorno); background: var(--branco);
  font: 20px/1 var(--letra-display); cursor: pointer;
  box-shadow: var(--sombra-dura);
}
.paginacao button:hover { background: var(--amarelo-claro); }
.paginacao button[aria-current="page"] { background: var(--preto); color: var(--amarelo); box-shadow: 4px 4px 0 var(--coral); }

/* ------------------------------------------------------------ computador */

@media (min-width: 900px) {
  .lista {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-areas: "cabeca cabeca" "filtros resultado";
    align-items: start;
    gap: 22px 40px;
    padding-top: 14px;
  }
  .lista__cabeca { grid-area: cabeca; }
  .lista__titulo { font-size: 48px; }
  .lista__contagem { font-size: 17px; }

  .lista__filtros { grid-area: filtros; position: sticky; top: 16px; gap: 22px; padding: 22px 20px; }
  .lista__resultado { grid-area: resultado; }

  .faixas--programacao { gap: 16px; }
  .faixa--programa { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 22px; padding: 16px 20px; }
  .faixa--programa .faixa__numero { grid-row: auto; width: 64px; height: 64px; font-size: 24px; }
  .faixa--programa .faixa__titulo { font-size: 20px; }
  .faixa--programa .faixa__resumo { -webkit-line-clamp: 1; }
  .faixa--programa .faixa__atalhos { grid-column: 3; flex-direction: column; align-items: stretch; margin-top: 0; }
  .faixa--programa .atalho { justify-content: center; }
}