/* estante.css: as estantes do início, o traço deste desenho. Uma fileira horizontal de cartões por assunto ("Comece por
   aqui" primeiro, depois uma por tema), cada uma com o título, a contagem, o link "Ver todos" que leva à lista filtrada
   e, no computador, as setas redondas que andam com a fileira. A fileira rola por dentro, de lado, e prende cada cartão
   na borda (a página nunca rola de lado): no telefone ela vai até a beira da tela e deixa o próximo cartão aparecendo.
   Depende de: base.css e cartao-ep.css. Telefone nas regras soltas, computador no @media do fim. */

.estantes { padding: 8px 0 8px; scroll-margin-top: 16px; }

.estantes__temas { display: grid; }

.estante { display: grid; gap: 10px; padding: 20px 0 8px; scroll-margin-top: 16px; }

/* ------------------------------------------------------------ o cabeçalho da estante */

.estante__cabeca { display: flex; align-items: flex-end; gap: 12px; }

.estante__nomes { display: grid; gap: 2px; min-width: 0; margin-right: auto; }

.estante__titulo { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

.estante__nota { font-size: 13px; font-weight: 500; color: var(--texto-suave); }

.estante__ver-todos {
  flex: none; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--texto-suave); text-decoration: none;
}
.estante__ver-todos:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

/* as setas só existem no computador e só quando a fileira tem mais cartões do que cabe */
.estante__setas { display: none; gap: 8px; }

.estante__seta {
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--superficie-alta); color: var(--texto);
}
.estante__seta:hover { background: var(--superficie-apertada); }
.estante__seta:disabled { opacity: .35; cursor: default; }
.estante__seta svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ a fileira que rola de lado */

.fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: var(--vao-da-fileira);
  margin-inline: calc(-1 * var(--margem)); padding: 4px var(--margem) 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.fileira::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .estantes { padding: 16px 0 8px; scroll-margin-top: 72px; }
  .estante { padding: 28px 0 8px; scroll-margin-top: 72px; }
  .estante__titulo { font-size: 24px; }
  .estante__ver-todos { font-size: 14px; }
  .estante__setas { display: flex; }
  /* três cartões e meio à vista: a fileira com mais de três já mostra que continua */
  .fileira {
    grid-auto-columns: calc((100% - 3 * var(--vao-da-fileira)) / 3.6);
    margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0;
  }
}