/* ==========================================================================
   STHEFANY — visor de fotos
   visor.css · v0.2.0
   --------------------------------------------------------------------------
   A ampliação que abre quando se clica numa fotografia. Vale no álbum e no
   carrossel de fotos da página do show.

   A regra do projeto, a partir daqui, é uma só e vale nas seis telas que
   mostram fotografia:

     célula de EVENTO — tem legenda (artista, cidade, data)  → abre o ÁLBUM
     célula de FOTO   — não tem legenda, é só a imagem       → abre o VISOR

   Até a 0.69.0 a célula de foto da página do show também levava ao álbum, e
   no álbum ela não levava a lugar nenhum: o `href` apontava para `#foto-1`,
   uma âncora que não existe, com `aria-label` prometendo "ampliar". O clique
   não fazia nada e o rótulo mentia.

   `<dialog>` nativo, não div com `position: fixed`. Vem de graça: fundo
   inerte, Esc fechando, foco preso dentro e foco devolvido ao elemento que
   abriu. Escrever isso à mão é onde este componente costuma errar.
   ========================================================================== */

.sp-visor {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}

/* Quase opaco, e desfoque por cima: com fundo translúcido a página continuava
   legível atrás da fotografia e o olho não sabia onde pousar. */
.sp-visor::backdrop {
  background: rgba(6, 3, 3, .97);
  backdrop-filter: blur(6px);
}

/* O corpo não rola enquanto o visor está aberto. `<dialog>` sozinho não faz
   isso — ele prende o foco, não a rolagem. */
html:has(.sp-visor[open]) { overflow: hidden; }

.sp-visor__caixa {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: var(--sp-e-3) var(--sp-e-4);
  gap: var(--sp-e-2);
}

/* --- topo: contador e fechar ---------------------------------------------- */

.sp-visor__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-e-4);
}

.sp-visor__conta {
  font-size: var(--sp-t-peq);
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}

.sp-visor__fechar,
.sp-visor__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background var(--sp-transicao), border-color var(--sp-transicao);
}

.sp-visor__fechar:hover,
.sp-visor__seta:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .4);
}

.sp-visor__fechar i,
.sp-visor__seta i { font-size: 1.25rem; }

/* --- palco ----------------------------------------------------------------
   `min-height: 0` porque a linha é `1fr` dentro de grade: sem ele o conteúdo
   define a altura e o palco transborda a janela em vez de caber nela. */

.sp-visor__palco {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-e-3);
  min-height: 0;
  margin: 0;
}

.sp-visor__quadro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  border-radius: var(--sp-raio);
  overflow: hidden;
}

/* A fotografia cabe inteira: `contain`, nunca `cover`. Cortar no visor é o
   oposto do que a pessoa pediu ao clicar. */
.sp-visor__quadro img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--sp-raio);
}

/* O bloco simulado do protótipo não tem arquivo: ocupa o palco com proporção
   fixa para o enquadramento não mudar de foto para foto. `max-height` junto
   com `aspect-ratio` faz o mesmo que `object-fit: contain` faria numa imagem
   de verdade — encolhe pelos dois lados sem deformar.

   Tinha um teto de 62rem aqui, e ele não tinha razão de ser: o palco já é o
   teto. Sai junto com `sp-foto--simulada` quando as fotos chegarem. */
.sp-visor__quadro .sp-foto--simulada {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--sp-raio);
}

.sp-visor__legenda {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--sp-t-peq);
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
}

.sp-visor__legenda b { color: rgba(255, 255, 255, .92); font-weight: 600; }

/* --- rodapé --------------------------------------------------------------- */

.sp-visor__rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-e-3);
  flex-wrap: wrap;
}

.sp-visor__uso {
  font-size: var(--sp-t-mini);
  color: rgba(255, 255, 255, .5);
}

/* --- celular ---------------------------------------------------------------
   As setas saem da linha da fotografia e viram uma barra embaixo: em 390px
   elas comiam um terço da largura útil da imagem. O gesto de arrastar continua
   valendo, e as setas ficam como alternativa acessível a ele. */

@media (max-width: 48rem) {
  .sp-visor__palco { grid-template-columns: minmax(0, 1fr); }
  .sp-visor__seta { position: static; }
  .sp-visor__rodape { order: 3; }
  .sp-visor__setas-toque {
    display: flex;
    gap: var(--sp-e-4);
  }
}

@media (min-width: 48.0625rem) {
  .sp-visor__setas-toque { display: none; }
}

@media (max-width: 48rem) {
  .sp-visor__palco > .sp-visor__seta { display: none; }
}

/* --- a lupa na célula ------------------------------------------------------
   A afordância que faltava: sem ela nada na grade diz que a fotografia abre.
   Ícone do Phosphor em data URI e não em `<use>` porque seriam 18 repetições
   do mesmo `<svg>` no HTML de uma página só. */

.sp-visor-alvo { cursor: zoom-in; }

.sp-visor-alvo::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--sp-e-3);
  inset-block-end: var(--sp-e-3);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgba(11, 5, 5, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M152,112a8,8,0,0,1-8,8H120v24a8,8,0,0,1-16,0V120H80a8,8,0,0,1,0-16h24V80a8,8,0,0,1,16,0v24h24A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.125rem;
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity var(--sp-transicao), transform var(--sp-transicao);
  pointer-events: none;
}

.sp-visor-alvo:hover::after,
.sp-visor-alvo:focus-visible::after { opacity: 1; transform: none; }

/* No toque não existe hover, e sem isso a lupa nunca apareceria no celular —
   que é onde a dúvida "isso abre?" é maior. Fica visível o tempo todo. */
@media (hover: none), (pointer: coarse) {
  .sp-visor-alvo::after { opacity: .85; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-visor-alvo::after { transition: none; }
}