/* ==========================================================================
   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); }

  /* O gênero cabe em UMA linha, ou não cabe.
     -----------------------------------------------------------------------
     "Música católica popular" quebrava em três linhas dentro de um cartão de
     pouco mais de 150px. Como o bloco de texto é ancorado pelo rodapé, ele
     crescia para CIMA e passava por cima do nome — a informação mais
     importante do cartão ficava ilegível por causa da menos importante.

     Uma linha com reticências resolve sem esconder: quem quiser o gênero
     inteiro abre a página do artista, onde ele está por extenso. */
  .sp-artistas .sp-artista__genero {
    font-size: var(--sp-t-mini);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* O cartão do artista é 4/5, mais alto que largo. Com 2,3 visíveis num
     telefone ele passa de 190px de altura útil, que é o suficiente para o
     rosto e o nome respirarem. */
  .sp-artistas .sp-artista__foto { aspect-ratio: 3 / 4; }
  /* Dois artistas inteiros e um pedaço do terceiro.
     ------------------------------------------------------------------------
     Estava em 1,8 — um cartão inteiro e quase todo o segundo. O "quase todo"
     é o pior dos mundos: parece um cartão cortado por engano, e não uma faixa
     que continua. Com 2,3 o corte é claramente intencional e o polegar tem
     para onde arrastar. */
  .sp-artistas .sp-carrossel__trilho {
    --sp-visiveis: 2.15;

  }
}