/* ==========================================================================
   STHEFANY — artistas
   artistas.css · v0.2.0
   --------------------------------------------------------------------------
   Grade de fotografias. Sem moldura, sem sombra, sem fundo: a foto é o card e
   o nome vive sobre o véu. Catorze cartões emoldurados viram planilha.

   A grade é fluida por `auto-fill`, não por número fixo de colunas. O artistas
   muda com o tempo e a última fileira não pode depender de a conta fechar.

   Variante carrossel: mesma célula, em trilho com encaixe.
   ========================================================================== */

.sp-artistas {
  padding-block: var(--sp-secao-meia);
}

.sp-artistas__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-e-4);
  margin-block-end: var(--sp-e-7);
}



.sp-artistas__conta {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
  font-variant-numeric: tabular-nums;
}

.sp-artistas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-e-5);
}

/* --- variante carrossel ---------------------------------------------------- */

.sp-artistas[data-exibicao="carrossel"] .sp-artistas__grade { display: none; }
.sp-artistas[data-exibicao="grade"] .sp-artistas__carrossel { display: none; }

/* Três inteiras e um pedaço da quarta. Com 4,3 o cartão ficava pequeno demais
   para a foto do artista, que é o conteúdo da célula. */
.sp-artistas .sp-carrossel__trilho { --sp-visiveis: 3.3; }

.sp-artistas .sp-carrossel__topo {
  justify-content: flex-end;
  margin-block-start: calc(var(--sp-e-6) * -1 - var(--sp-e-2));
  margin-block-end: var(--sp-e-4);
}

.sp-artistas .sp-artista { scroll-snap-align: start; }

/* --- placeholder do protótipo ---------------------------------------------
   Enquanto não há fotografia do artistas, cada célula recebe um tom diferente
   para a grade não parecer um erro de carregamento. Sai quando as fotos
   chegarem, junto com a classe `sp-foto--simulada`. */

/* A etiqueta sobe para o topo: no rodapé ela cai em cima do nome. */
.sp-artistas .sp-foto__rotulo { top: var(--sp-e-3); bottom: auto; }

.sp-artistas .sp-foto--simulada { filter: hue-rotate(0deg); }
.sp-artistas .sp-artista:nth-child(3n+2) .sp-foto--simulada { filter: hue-rotate(-12deg) brightness(1.1); }
.sp-artistas .sp-artista:nth-child(3n+3) .sp-foto--simulada { filter: hue-rotate(10deg) brightness(.9); }
.sp-artistas .sp-artista:nth-child(4n+1) .sp-foto--simulada { transform: scaleX(-1); }

@media (max-width: 48rem) {
  .sp-artistas__grade {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--sp-e-4);
  }
  .sp-artistas .sp-artista__nome { font-size: 1.0625rem; }
  .sp-artistas .sp-artista__texto { inset-inline: var(--sp-e-3); bottom: var(--sp-e-3); }
  .sp-artistas .sp-carrossel__trilho { --sp-visiveis: 1.8; }
}