/* =========================================================
   AQUAG · GALERIA
   Prévia em mosaico (1 foto grande + 2 menores, a última com
   "+N fotos"), modal com a grade completa e o visualizador.
   ========================================================= */

/* --- Prévia em mosaico --- */

.aq-gallery-mosaic {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.aq-gallery-mosaic .aq-gallery-tile { aspect-ratio: 1 / 1; }
.aq-gallery-mosaic .aq-gallery-tile--main { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .aq-gallery-mosaic {
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .aq-gallery-mosaic .aq-gallery-tile--main {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }

  /* Com só 2 fotos, as duas ficam lado a lado do mesmo tamanho. */
  .aq-gallery-mosaic[data-count="2"] { grid-template-columns: 1fr 1fr; }
  .aq-gallery-mosaic[data-count="2"] .aq-gallery-tile--main { grid-row: auto; aspect-ratio: 1 / 1; }

  /* Com só 1 foto, ela ocupa a largura toda num formato mais baixo. */
  .aq-gallery-mosaic[data-count="1"] { grid-template-columns: 1fr; }
  .aq-gallery-mosaic[data-count="1"] .aq-gallery-tile--main { grid-row: auto; aspect-ratio: 16 / 9; }
}

/* --- Bloco de foto (usado na prévia e no modal) --- */

.aq-gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--aq-navy-800);
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .85);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* Contorno sutil por cima da foto (dá acabamento às bordas arredondadas). */
.aq-gallery-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
  z-index: 3;
}

.aq-gallery-tile img,
.aq-gallery-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--aq-ease), filter .4s;
}

/* Fundo do quadro enquanto a foto carrega; quando termina, ela surge. */
.aq-gallery-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aq-navy-800);
}

.aq-gallery-tile img { opacity: 0; transition: opacity .6s var(--aq-ease), transform .9s var(--aq-ease); }
.aq-gallery-tile img.is-loaded { opacity: 1; }

.aq-gallery-tile:hover img,
.aq-gallery-tile:focus-visible img { transform: scale(1.07); }

.aq-gallery-tile:focus-visible { outline: 2px solid var(--aq-cyan-300); outline-offset: 3px; }

.aq-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aq-gradient-sky);
  color: rgba(3, 12, 30, .55);
}

/* Lupa que aparece ao passar o mouse. */
.aq-gallery-hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(to top, rgba(2, 6, 23, .55), rgba(2, 6, 23, .08));
  opacity: 0;
  transition: opacity .35s var(--aq-ease);
}

.aq-gallery-hover svg {
  width: 50px;
  height: 50px;
  padding: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(8px);
  transform: scale(.8);
  transition: transform .35s var(--aq-ease);
}

.aq-gallery-tile:hover .aq-gallery-hover { opacity: 1; }
.aq-gallery-tile:hover .aq-gallery-hover svg { transform: scale(1); }

@media (hover: none) {
  .aq-gallery-hover { display: none; }
}

/* "+N fotos" na última foto da prévia. */
.aq-gallery-more {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color .35s;
}

.aq-gallery-more strong {
  font-family: var(--aq-font-heading);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.aq-gallery-more span {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.aq-gallery-tile:hover .aq-gallery-more { background: rgba(2, 6, 23, .42); }

/* Legenda (só aparece se a foto tiver descrição no admin). */
.aq-gallery-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  color: #fff;
  background: rgba(2, 6, 23, .6);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Modal "Todas as fotos" --- */

/* O modal também tem a classe .aq-lightbox (reaproveita o fundo escuro e o
   abrir/fechar), e a regra .aq-lightbox vem mais abaixo neste arquivo. Por
   isso o seletor duplo: sem ele, o z-index 400 do visualizador valia também
   para o modal, e o modal (que vem depois no HTML) cobria a foto ampliada. */
.aq-lightbox.aq-gallery-all-modal {
  z-index: 390;
  align-items: flex-start;
  padding: 24px 16px;
  overflow-y: auto;
}

.aq-gallery-all-card {
  width: 100%;
  max-width: 1120px;
  margin: 20px auto;
  background: var(--aq-navy-900);
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius-lg);
  padding: 26px clamp(16px, 3vw, 32px) 32px;
  transform: translateY(16px) scale(.98);
  transition: transform .4s var(--aq-ease);
}

.aq-gallery-all-modal.aq-open .aq-gallery-all-card { transform: none; }

.aq-gallery-all-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.aq-gallery-all-top .aq-lightbox-close { position: static; flex-shrink: 0; }

.aq-gallery-all-title {
  font-family: var(--aq-font-heading);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--aq-white);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.aq-gallery-all-count {
  font-family: var(--aq-font-body);
  font-size: .78rem;
  font-weight: 700;
  color: var(--aq-slate-300);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}

.aq-gallery-uniform {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) { .aq-gallery-uniform { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .aq-gallery-uniform { grid-template-columns: repeat(4, 1fr); } }

.aq-gallery-uniform .aq-gallery-tile {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

@media (max-width: 640px) {
  .aq-lightbox.aq-gallery-all-modal { padding: 12px; }
  .aq-gallery-all-card { margin: 8px auto; padding: 20px 14px 22px; }
  .aq-gallery-tile { border-radius: 16px; }
}

/* --- Visualizador (lightbox) --- */

.aq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(2, 6, 14, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--aq-ease);
}

.aq-lightbox.aq-open { opacity: 1; pointer-events: auto; }

.aq-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

.aq-lightbox-content {
  max-width: min(920px, 92vw);
  border-radius: var(--aq-radius-md);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}

.aq-lightbox-content img {
  display: block;
  width: auto;
  max-width: min(920px, 92vw);
  max-height: calc(100svh - 190px);
  object-fit: contain;
}

.aq-lightbox-content svg { width: 100%; height: 100%; }

.aq-lightbox-content.aq-lightbox-in { animation: aq-lightbox-in .45s var(--aq-ease) both; }

@keyframes aq-lightbox-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.aq-lightbox-caption {
  font-size: .9rem;
  font-weight: 600;
  color: var(--aq-slate-300);
  text-align: center;
  max-width: 640px;
}

.aq-lightbox-caption:empty { display: none; }

.aq-lightbox-counter {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--aq-white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  font-variant-numeric: tabular-nums;
}

.aq-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aq-white);
  transition: background-color .2s, transform .2s var(--aq-ease);
}

.aq-lightbox-close:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }

.aq-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aq-white);
  transition: background-color .2s;
}

.aq-lightbox-nav:hover { background: rgba(255, 255, 255, .2); }

.aq-lightbox-prev { left: 20px; }
.aq-lightbox-next { right: 20px; }

/* No celular as setas vão para baixo da foto (o dedo também troca). */
@media (max-width: 640px) {
  .aq-lightbox { padding: 64px 12px 96px; }
  .aq-lightbox-content, .aq-lightbox-content img { max-width: calc(100vw - 24px); }
  .aq-lightbox-content img { max-height: calc(100svh - 190px); }
  .aq-lightbox-nav { top: auto; bottom: 26px; transform: none; width: 48px; height: 48px; }
  .aq-lightbox-prev { left: calc(50% - 60px); }
  .aq-lightbox-next { right: calc(50% - 60px); }
  .aq-lightbox-counter { top: 22px; left: 16px; }
  .aq-lightbox-close { top: 16px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .aq-lightbox-content.aq-lightbox-in, .aq-gallery-all-card { animation: none; transition: none; }
}