/* ==========================================================================
   STHEFANY — álbum de fotos de um show
   cobertura.css · v0.2.0
   --------------------------------------------------------------------------
   A página que o acervo, a home e a página do artista abrem quando se clica
   numa fotografia. Até a 0.67.0 elas levavam para a página do SHOW, que fala
   de horário, ingresso e como chegar — informação de quem vai, não de quem
   está olhando as fotos de uma data que já passou.

   **Não é uma entidade nova.** Continua sendo o show, numa segunda rota
   (`/show/…/fotos/`): artista, cidade e data são lidos do dono. O que mudou
   foi a tela, não o modelo — e é por isso que o nome do arquivo não é
   `album`, que já é o DISCO na discografia, nem `galeria`, que já é a vitrine
   de uma peça da loja.

   `sp-cobertura` é o termo que a produção usa para o trabalho do fotógrafo
   numa data, e não colide com nada no projeto.
   ========================================================================== */

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

/* --- cabeçalho -------------------------------------------------------------- */

.sp-cobertura__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3) var(--sp-e-5);
  margin-block-start: var(--sp-e-4);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

.sp-cobertura__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
}

.sp-cobertura__meta i { font-size: 1.125rem; color: var(--sp-acento-texto); }

.sp-cobertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
  margin-block-start: var(--sp-e-5);
}

.sp-cobertura__conta {
  margin-block-end: var(--sp-e-4);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
  font-variant-numeric: tabular-nums;
}

/* --- a grade ----------------------------------------------------------------
   Sem célula em destaque, ao contrário do acervo. Lá o destaque existe porque
   a qualidade é irregular entre eventos e a melhor foto carrega a seção; aqui
   são todas do mesmo show, do mesmo fotógrafo, na mesma luz — eleger uma
   seria arbitrário.

   Proporção igual em todas, também de propósito: um álbum é para percorrer, e
   altura variável faz o olho parar em cada linha em vez de correr. */

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

.sp-cobertura__foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--sp-raio);
  transition: transform var(--sp-transicao-foto);
}

/* SEM preto e branco por padrão, ao contrário de toda foto de célula no resto
   do site — e a razão é o propósito da tela. Em qualquer outro lugar a
   fotografia é ilustração de um link e o tratamento cria unidade; aqui a
   fotografia É o conteúdo, e dessaturar por padrão a página inteira é filtrar
   justamente aquilo que a pessoa veio ver.

   Foi também o que quebrou a tela na 0.69.0: o bloco simulado do protótipo é
   um degradê vermelho escuro, e `grayscale(1)` o transforma em retângulo
   preto. Das dezoito células só a primeira tinha arquivo, então a grade
   inteira virou um paredão preto e a página lia como carregamento falhado.
   `fotos.css` já registrava exatamente esse risco desde a 0.48.0 e compensava
   com filtro próprio; esta folha nasceu sem a compensação porque a seção não
   é `.sp-fotos`.

   O que ficou no lugar do preto e branco é aproximação no hover: diz que a
   célula responde ao ponteiro sem tocar na cor da fotografia. */
@media (hover: hover) and (pointer: fine) {
  .sp-cobertura__foto img,
  .sp-cobertura__foto .sp-foto--simulada {
    transition: transform var(--sp-transicao-foto);
  }
  .sp-cobertura__foto:hover img,
  .sp-cobertura__foto:hover .sp-foto--simulada,
  .sp-cobertura__foto:focus-visible img,
  .sp-cobertura__foto:focus-visible .sp-foto--simulada {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-cobertura__foto img,
  .sp-cobertura__foto .sp-foto--simulada { transition: none; }
  .sp-cobertura__foto:hover img,
  .sp-cobertura__foto:hover .sp-foto--simulada { transform: none; }
}

/* Variação de tom célula a célula, só enquanto as fotos são simuladas. Sem
   ela dezoito degradês idênticos lado a lado leem como erro de repetição —
   mesma razão e mesma técnica do acervo. Sai junto com `sp-foto--simulada`. */
.sp-cobertura__foto:nth-child(3n+2) .sp-foto--simulada { filter: hue-rotate(-14deg) brightness(1.12); }
.sp-cobertura__foto:nth-child(3n)   .sp-foto--simulada { filter: hue-rotate(12deg) brightness(.92); }
.sp-cobertura__foto:nth-child(5n+3) .sp-foto--simulada { filter: hue-rotate(-6deg) brightness(1.05); }
.sp-cobertura__foto:nth-child(7n+5) .sp-foto--simulada { filter: hue-rotate(20deg) brightness(1.02); }
/* A variação NÃO usa `transform`: a aproximação no hover é transform, e uma
   apagaria a outra. Tom e brilho não colidem com nada. */

/* --- rodapé do álbum --------------------------------------------------------
   Paginação por link, não rolagem infinita: cada página tem endereço, o
   navegador guarda no histórico e o resultado continua cacheável. Mesma
   decisão dos filtros de arquivo. */

.sp-cobertura__mais {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sp-e-6);
}

/* O acervo é público e as fotos circulam. Dizer o que pode e o que não pode
   aqui evita a mensagem que a produção receberia depois. */
.sp-cobertura__uso {
  max-width: 62ch;
  margin-block-start: var(--sp-e-7);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

/* Duas colunas no celular, não uma. Uma coluna dava dezoito fotografias de
   largura inteira e 7.000px de rolagem — e desde que o visor existe a célula
   não precisa mais ser grande para ser vista: ela é a miniatura, e quem quer
   olhar toca. */
@media (max-width: 48rem) {
  .sp-cobertura__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-e-2);
  }
}