/* ==========================================================================
   Gallery — composição justificada + lightbox.

   Dentro de uma faixa, cada moldura recebe flex-grow igual à sua proporção
   real (--ratio, vindo do template). Como a altura de cada uma é
   largura / proporção, todas terminam com a mesma altura e nenhuma foto
   precisa ser cortada: as larguras é que variam.

   O agrupamento em faixas vem de services/gallery.py, que também informa
   a soma das proporções (--soma) e quantas fotos há (--n). Com esses dois
   números o CSS calcula, sem medir nada, a largura que a faixa pode ter
   sem estourar uma altura máxima — e é daí que sai o recuo lateral das
   faixas altas, o respiro entre os blocos e o ritmo do álbum.

   O respiro e a diferença de altura entre as faixas fazem a hierarquia;
   o azul entra só como moldura e brilho, nunca sobre a fotografia.
   ========================================================================== */

.gallery {
  display: grid;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
}

.gallery__band {
  display: flex;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
}

/* --- Moldura ------------------------------------------------------------
   flex-basis 0 + flex-grow proporcional = larguras na razão das proporções.
   aspect-ratio garante a altura antes de a imagem carregar, sem salto. */
.gallery__figure {
  flex: var(--ratio, 1) 1 0;
  aspect-ratio: var(--ratio, 1);
  margin: 0;
  min-width: 0;
}

.gallery__trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--serenity-pale);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: box-shadow var(--transition-base),
    transform var(--transition-base);
}

.gallery__trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Interação contida: a foto respira dentro da moldura, a moldura mal se
   move. Nada de rotação, brilho ou overlay — o assunto é a fotografia. */
.gallery__trigger:hover,
.gallery__trigger:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.gallery__trigger:hover img,
.gallery__trigger:focus-visible img {
  transform: scale(1.025);
}

/* ==========================================================================
   Desktop — o álbum editorial

   Acima de 900px a galeria deixa de ser uma sequência de faixas cheias e
   passa a ter largura própria por faixa. A conta é uma só:

     altura = (largura - gaps) / soma das proporções

   invertida para achar a largura máxima que respeita uma altura máxima.
   Faixa de poucas fotos verticais fica alta e recuada; faixa de muitas,
   ou com panorâmica, ocupa a largura toda e fica baixa. O contraste entre
   as duas é o ritmo — e ele nasce dos dados, não de regras por foto.
   ========================================================================== */

@media (min-width: 901px) {
  .gallery {
    /* Entre fotos da mesma faixa: apertado o bastante para lê-las como
       um conjunto. */
    --gallery-gap: clamp(1rem, 1.4vw, 1.5rem);

    /* Teto de altura de uma faixa, e a única trava contra torres: com
       ele, uma vertical sozinha fica estreita em vez de crescer sem fim.
       Acompanha a janela — um pouco acima dela, para que numa tela baixa
       a faixa alta não fique espremida — com piso e teto em rem para não
       virar miniatura nem monumento. */
    --gallery-altura-max: clamp(26rem, 104vh, 52rem);

    /* Entre faixas: maior que o gap interno, para os blocos se lerem
       como blocos. */
    gap: clamp(var(--space-5), 2.4vw, var(--space-7));
  }

  .gallery__band {
    gap: var(--gallery-gap);
    /* A largura que esta faixa precisa para chegar à altura máxima. Se
       for maior que o container, o container vence e a faixa fica mais
       baixa — que é o caso das faixas de muitas fotos.

       Nenhum piso de largura aqui: forçar uma faixa a ser mais larga do
       que esta conta é o mesmo que deixá-la mais alta que o teto, e uma
       vertical sozinha viraria uma torre de rolagem. */
    max-width: calc(
      var(--soma, 1) * var(--gallery-altura-max) +
        (var(--n, 1) - 1) * var(--gallery-gap)
    );
    margin-inline: auto;
    width: 100%;
  }

  /* A foto de destaque fica sozinha na faixa e ganha um pouco mais de
     altura — é a pausa do álbum. */
  .gallery__band--destaque {
    --gallery-altura-max: clamp(30rem, 100vh, 58rem);
  }
}

/* --- Largura útil: a galeria é a seção que mais precisa de espaço ------- */
@media (min-width: 1024px) {
  .section--gallery .container {
    max-width: 1400px;
    /* Margens laterais maiores que as do resto do site: a galeria fica
       mais larga sem que as fotos encostem na borda da janela. */
    padding-inline: clamp(2rem, 4vw, 4rem);
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(var(--space-4), 4vw, var(--space-7));
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-veil);
  backdrop-filter: blur(6px);
  animation: fade-in var(--transition-base);
}

.lightbox__dialog {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: min(1100px, 100%);
  max-height: 100%;
}

.lightbox__figure {
  margin: 0;
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  animation: fade-up var(--transition-base);
}

.lightbox__image {
  max-width: 100%;
  /* Desconta o espaço do contador e das margens para a foto nunca
     ultrapassar a altura da janela. */
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Só aparece quando a foto da vez tem legenda — sem legenda, nenhum
   espaço vazio sob a foto. */
.lightbox__caption[hidden] {
  display: none;
}

.lightbox__caption {
  max-width: 60ch;
  text-align: center;
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0.88;
}

.lightbox__counter {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}

/* --- Controles ---------------------------------------------------------- */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark);
  background-color: var(--surface-on-dark);
  color: var(--text-on-dark);
  line-height: 1;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background-color: var(--serenity-medium);
  border-color: var(--serenity-light);
  transform: scale(1.06);
}

.lightbox__close {
  top: calc(-1 * var(--space-6));
  right: 0;
  font-size: var(--fs-xl);
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  /* Corpo fixo: a escala de display cresceu para acomodar a serifa e
     aqui estouraria o botão de 44px. */
  font-size: 2rem;
}

.lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox__nav--prev {
  left: calc(-1 * var(--space-7));
}

.lightbox__nav--next {
  right: calc(-1 * var(--space-7));
}