/* ==========================================================================
   Galeria — filtros, grade, esqueleto e foto ampliada
   ========================================================================== */

/* --- Filtros: fila com rolagem horizontal no mobile, chip ativo visível --- */
.filters {
  position: relative;
  margin-block: var(--space-8);
}
.filters__scroller {
  display: flex; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-1) var(--space-inline);
  margin-inline: calc(var(--space-inline) * -1);
  scroll-snap-type: x proximity;
}
.filters__scroller::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .filters__scroller { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
  min-height: 44px; padding: 0 var(--space-4);
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 400;
  white-space: nowrap; cursor: pointer;
  scroll-snap-align: center;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.chip:hover { border-color: var(--page-accent); color: var(--page-accent); }
.chip:active { transform: scale(.97); }

/* Ativo: cor + peso 600 + ícone de marcação — nunca só cor */
.chip[aria-selected="true"] {
  background: var(--page-accent);
  color: var(--color-on-primary);
  border-color: var(--page-accent);
  font-weight: 600;
}
.chip__check { width: 0; height: 16px; opacity: 0; overflow: hidden; transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.chip[aria-selected="true"] .chip__check { width: 16px; opacity: 1; }
.chip__count { font-size: var(--fs-small); opacity: .7; font-variant-numeric: tabular-nums; }

/* --- Grade --------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--space-card-gap);
  grid-template-columns: 1fr;
  /* altura estável durante a troca de filtro: a página não salta sob o dedo */
  min-height: var(--gallery-min-h, auto);
  transition: opacity 200ms var(--ease-out);
}
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery.is-swapping { opacity: 0; }

.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-primary-surface);
  box-shadow: var(--shadow-1);
  /* 4:3 e nao 4:5: as fotos do salao sao horizontais, e o arco de baloes ocupa
     a largura toda. Em 4:5 o object-fit:cover comia as duas pontas do arco --
     que e justamente o trabalho que a foto precisa mostrar. */
  aspect-ratio: 4 / 3;              /* declarado: sem isso a grade pula ao carregar */
  cursor: zoom-in;
  border: 0; padding: 0;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.shot:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-enter) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.shot:hover img { transform: scale(1.05); }
.shot img[data-loaded="false"] { opacity: 0; }

.shot__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(31,27,46,.82), rgba(31,27,46,0));
  color: #fff; text-align: left;
  font-size: var(--fs-small); line-height: 1.35;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.shot:hover .shot__caption, .shot:focus-visible .shot__caption { opacity: 1; transform: none; }
@media (hover: none) { .shot__caption { opacity: 1; transform: none; } }
.shot__tag {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.22);
  font-size: 12px; font-weight: 600;
}

/* --- Esqueleto: reserva a altura antes das fotos chegarem ---------------- */
.skeleton {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg,
    var(--color-primary-surface) 20%,
    #F7F3FD 40%,
    var(--color-primary-surface) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* --- Estados vazio e de erro --------------------------------------------- */
.gallery-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-muted-foreground);
}
.gallery-state h3 { margin-bottom: var(--space-2); }
.gallery-state .btn { margin-top: var(--space-6); }

.gallery-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-12); }
.gallery-more__count { font-size: var(--fs-small); color: var(--color-muted-foreground); }

/* --- Foto ampliada ------------------------------------------------------- */
/* `display:grid` abaixo sobrescreveria o `display:none` que o navegador
   aplica a <dialog> fechado — por isso a regra explícita primeiro. */
.lightbox:not([open]) { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; place-items: center;
  padding: var(--space-4);
  border: 0;
  background: transparent;
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(20,16,32,.88); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in var(--dur-base) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(100%, 900px);
  max-height: calc(100dvh - var(--space-8));
  background: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  /* cresce a partir da miniatura clicada: mantém a continuidade espacial */
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  animation: lb-grow var(--dur-base) var(--ease-out);
}
@keyframes lb-grow { from { transform: scale(.88); opacity: .4; } to { transform: none; opacity: 1; } }

.lightbox__figure { position: relative; margin: 0; background: #14101F; flex: 1; min-height: 0; }
.lightbox__figure img {
  width: 100%; height: 100%;
  max-height: calc(100dvh - 260px);
  object-fit: contain;
}
.lightbox__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}
.lightbox__meta { min-width: 0; }
.lightbox__meta b { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
.lightbox__meta span { font-size: var(--fs-small); color: var(--color-muted-foreground); }

.lightbox__close, .lightbox__nav {
  position: absolute;
  /* .lightbox__figure é posicionada e vem depois no DOM: sem z-index
     explícito ela pinta por cima das setas. */
  z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: var(--radius-full);
  background: rgba(255,255,255,.94);
  color: var(--color-foreground);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover { background: #fff; }
.lightbox__close:active, .lightbox__nav:active { transform: scale(.94); }
.lightbox__close { top: var(--space-3); right: var(--space-3); z-index: 2; }
.lightbox__nav svg, .lightbox__close svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:active { transform: translateY(-50%) scale(.94); }
.lightbox__nav--next:active { transform: translateY(-50%) scale(.94); }
.lightbox__nav:disabled { opacity: .35; cursor: default; }

.lightbox__counter {
  position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(20,16,32,.6);
  color: #fff; font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}