/* ==========================================================================
   Harbor — Seção: Moments that make every day special (Figma 21066:853)
   Grade de 4 colunas alimentada por assets/img/gallery/index.json,
   com lightbox em <dialog>.
   ========================================================================== */

.gallery {
  background: var(--color-bg-surface);
  padding-block: var(--space-20);
}

.gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.gallery__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.gallery__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h2);
  line-height: 1.1;
  color: var(--color-primary-700);
}

/* --------------------------------------------------------------------------
   Grade — 4 x 279px com calhas de 35 e 32 (Figma)
   -------------------------------------------------------------------------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 35px;
  row-gap: var(--space-8);
  margin-top: var(--space-10);
}

/* Só duas linhas ficam à mostra até o visitante pedir o resto. O corte
   acompanha o número de colunas de cada breakpoint: 4x2, 3x2 e 2x2.
   As três regras apenas somam ocultações, então não brigam entre si. */
.gallery__grid:not([data-expanded]) .gallery__item:nth-child(n + 9) {
  display: none;
}

.gallery__button {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  aspect-ratio: 279 / 205;
  cursor: zoom-in;
}

.gallery__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.gallery__button:hover img,
.gallery__button:focus-visible img {
  transform: scale(1.05);
}

.gallery__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

/* --------------------------------------------------------------------------
   Lightbox
   <dialog> traz backdrop, foco preso e fechar no Esc sem JS extra.
   -------------------------------------------------------------------------- */
.lightbox {
  /* Medidas fixas de propósito: os controles são posicionados a partir daqui,
     e um palco que encolhesse junto com a foto faria as setas saltarem de
     lugar a cada troca entre retrato e paisagem. */
  width: min(92vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgb(10 37 64 / 0.88);
}

.lightbox__figure {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  /* Mesma razão da largura: os controles se posicionam a partir deste bloco,
     então a altura precisa ser a mesma para qualquer foto. A primeira linha
     recebe altura fixa (o teto da imagem) e o contador fica na segunda —
     com min-height no bloco inteiro, o contador ainda empurrava a borda para
     baixo nas fotos em paisagem. */
  grid-template-rows: 82vh auto;
}

.lightbox__image {
  /* width/height automáticos: o <img> carrega os atributos width e height da
     foto, e sem o auto os dois máximos recortam cada eixo por conta própria —
     a caixa perdia a proporção e o fundo aparecia como tarjas ao lado das
     fotos verticais. Com auto, os limites reduzem preservando a proporção e
     a caixa fica do tamanho exato da imagem. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-brand-blue-deep);
  color: var(--color-text-on-dark);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  background: var(--color-primary-700);
  color: var(--color-brand-yellow);
}

.lightbox__close {
  top: -20px;
  right: -20px;
}

.lightbox__nav--prev {
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav svg,
.lightbox__close svg {
  width: 20px;
  height: 20px;
}

.lightbox__counter {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-25);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-6);
  }

  .gallery__grid:not([data-expanded]) .gallery__item:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 640px) {
  .gallery {
    padding-block: var(--space-12);
  }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-3);
  }

  .gallery__grid:not([data-expanded]) .gallery__item:nth-child(n + 5) {
    display: none;
  }

  /* Fora da imagem não há espaço: os controles vêm para dentro. */
  .lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
  }

  .lightbox__nav--prev {
    left: var(--space-2);
  }

  .lightbox__nav--next {
    right: var(--space-2);
  }
}

/* Cumpriu seu papel: sem mais fotos para revelar, o botão sai. */
.gallery__cta[hidden] {
  display: none;
}