/* ==========================================================================
   STHEFANY — fotos dos eventos
   fotos.css · v0.1.1
   --------------------------------------------------------------------------
   O acervo do site antigo já era organizado por evento: artista, cidade e
   data. Essa tripla é o conteúdo, então ela vira a legenda do cartão — não
   um título inventado por cima da foto.

   Uma célula é maior que as outras. Grade toda igual com foto de qualidade
   irregular achata o acervo; com um destaque, a melhor foto do mês carrega a
   seção e as demais acompanham.
   ========================================================================== */

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

.sp-fotos__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-fotos__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-e-4);
}

/* A primeira ocupa duas colunas e duas fileiras. As demais são quadradas e
   preenchem o resto sozinhas. */
.sp-fotos__grade > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* --- cartão de evento ------------------------------------------------------ */

.sp-evento {
  position: relative;
  display: block;
  color: var(--sp-texto);
  --sp-tinta:   var(--sp-texto);
  --sp-tinta-2: var(--sp-texto-2);
  --sp-tinta-3: var(--sp-texto-3);
}

.sp-evento__foto {
  border-radius: var(--sp-raio-bloco);
  aspect-ratio: 1 / 1;
  height: 100%;
}

.sp-evento__texto {
  position: absolute;
  inset-inline: var(--sp-e-4);
  bottom: var(--sp-e-4);
  z-index: 2;
}

.sp-evento__artista {
  font-family: var(--sp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.15;
}

.sp-evento__onde {
  margin-block-start: var(--sp-e-1);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-mini);
  font-variant-numeric: tabular-nums;
}

.sp-fotos__grade > :first-child .sp-evento__artista { font-size: var(--sp-t-h3); }
.sp-fotos__grade > :first-child .sp-evento__onde { font-size: var(--sp-t-peq); }

.sp-fotos__rodape { margin-block-start: var(--sp-e-6); }

/* Placeholder do protótipo: o tratamento preto e branco dessatura o bloco
   simulado e ele vira um retângulo preto. O filtro próprio devolve tom, com
   variação por célula para a grade não parecer erro de carregamento. Sai
   junto com `sp-foto--simulada` quando as fotos chegarem. */
.sp-fotos .sp-foto--simulada { filter: saturate(1.1); }
.sp-fotos .sp-evento:nth-child(3n+2) .sp-foto--simulada { filter: hue-rotate(-14deg) brightness(1.12); }
.sp-fotos .sp-evento:nth-child(3n) .sp-foto--simulada { filter: hue-rotate(12deg) brightness(.92); }
.sp-fotos .sp-evento:nth-child(4n) .sp-foto--simulada { transform: scaleX(-1); }

@media (max-width: 64rem) {
  .sp-fotos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .sp-fotos__grade { gap: var(--sp-e-3); }
  /* Sem destaque no celular: numa coluna e meia ele vira só uma foto maior
     e empurra o resto para longe. */
  .sp-fotos__grade > :first-child { grid-column: span 2; grid-row: span 1; }
  .sp-evento__artista { font-size: 1rem; }
  .sp-evento__texto { inset-inline: var(--sp-e-3); bottom: var(--sp-e-3); }
}

/* --- variante carrossel -----------------------------------------------------
   A grade com célula em destaque é alta; o carrossel entrega o acervo numa
   faixa só. Serve na página do artista, onde as fotos vêm depois de bio,
   discografia, vídeos e agenda, e a página já é longa. */

.sp-fotos[data-exibicao="grade"] .sp-fotos__carrossel { display: none; }
.sp-fotos[data-exibicao="carrossel"] .sp-fotos__grade { display: none; }

.sp-fotos .sp-carrossel__trilho { --sp-visiveis: 4.3; }

.sp-fotos .sp-carrossel__topo {
  justify-content: flex-end;
  margin-block-end: var(--sp-e-4);
}

.sp-fotos .sp-carrossel__trilho .sp-evento { scroll-snap-align: start; }

/* No trilho a célula é sempre do mesmo tamanho: destaque em carrossel não
   existe, porque a primeira posição já é o destaque. */
.sp-fotos .sp-carrossel__trilho .sp-evento__foto { aspect-ratio: 4 / 5; }

@media (max-width: 48rem) {
  .sp-fotos .sp-carrossel__trilho { --sp-visiveis: 2.2; }
}

/* --- fotos de um show ------------------------------------------------------
   Na página do show as células não têm legenda: todas as fotos são do mesmo
   show, e artista, cidade e data já estão no topo da página. Repetir em cada
   célula é o ruído que a legenda da página do artista já tinha evitado — lá o
   nome do artista sai porque todas as fotos são dele.

   Por isso a célula aqui é só a fotografia, e não o `.sp-evento` do acervo,
   que existe para carregar a legenda. */
/* A largura da célula NÃO é redeclarada aqui: fotos valem 4,3 no carrossel, e
   isso está definido uma vez acima. A primeira versão desta seção repetiu a
   variável com 3,3 — e como é a mesma folha e o mesmo seletor, ela venceu por
   ordem e encolheu junto o carrossel de fotos da página do artista, que
   ninguém tinha pedido para mexer. Valor de escala mora num lugar só. */
.sp-foto-show {
  aspect-ratio: 3 / 2;
  border-radius: var(--sp-raio);
  scroll-snap-align: start;
}



.sp-fotos__aviso {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
}