/* =====================================================
   TROPICAL MOLDURAS — galeria.css
   Complementa style.css (não substitui)
   Dependência externa: Fancybox 5
   ===================================================== */

/* ══════════════════════════════════════════════════════
   PAGE HEADER — ajuste de padding para a navbar fixa
   ══════════════════════════════════════════════════════ */
.galeria-page-header {
  padding-top: calc(72px + 52px);
  padding-bottom: 52px;
}

/* ══════════════════════════════════════════════════════
   FILTROS
   ══════════════════════════════════════════════════════ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}

.filtro-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border-radius: 100px;               /* pílula */
  border: 1.5px solid var(--ivory-dark);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.filtro-btn:hover {
  border-color: var(--gold);
  color: var(--green-deep);
}

.filtro-btn.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--gold-light);
  box-shadow: var(--shadow-sm);
}

/* Contador de itens por categoria (opcional, adicionado via JS) */
.filtro-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  font-size: 0.65rem;
  background: rgba(0,0,0,0.08);
  color: inherit;
}
.filtro-btn.active .filtro-btn__count {
  background: rgba(226,201,126,0.25);
}

/* ══════════════════════════════════════════════════════
   GALERIA GRID  — layout masonry-like em CSS columns
   ══════════════════════════════════════════════════════ */
.galeria-grid {
  columns: 3 280px;         /* máx. 3 colunas, mín. 280 px cada */
  column-gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Item individual ── */
.galeria-item {
  position: relative;
  display: inline-block;    /* necessário para column layout */
  width: 100%;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--ivory-dark);
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
  transition: transform var(--transition), box-shadow var(--transition);
}

.galeria-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Imagem real */
.galeria-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s ease;
}
.galeria-item:hover img {
  transform: scale(1.05);
}

/* Placeholder (enquanto não há imagem real) */
.galeria-item--placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory-dark);
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* Alturas variadas para efeito masonry com placeholders */
.galeria-item:nth-child(3n+1) .galeria-item--placeholder { aspect-ratio: 3 / 4; }
.galeria-item:nth-child(3n+2) .galeria-item--placeholder { aspect-ratio: 4 / 3; }
.galeria-item:nth-child(3n+3) .galeria-item--placeholder { aspect-ratio: 1 / 1; }

/* ── Overlay com info ── */
.galeria-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 58, 47, 0.88) 0%,
    rgba(30, 58, 47, 0.30) 45%,
    transparent 70%
  );
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition);
}

.galeria-item:hover .galeria-item__overlay {
  opacity: 1;
}

.galeria-item__info {
  transform: translateY(8px);
  transition: transform var(--transition);
}
.galeria-item:hover .galeria-item__info {
  transform: translateY(0);
}

.galeria-item__cat {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.galeria-item__name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  line-height: 1.3;
}

/* Ícone de lupa (aparece no hover) */
.galeria-item__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition), transform var(--transition);
}
.galeria-item:hover .galeria-item__zoom {
  opacity: 1;
  transform: scale(1);
}
.galeria-item__zoom svg {
  width: 16px;
  height: 16px;
  stroke: var(--white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Estado vazio (nenhum item na categoria) ── */
.galeria-vazia {
  display: none;
  text-align: center;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.galeria-vazia svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.35;
  stroke: var(--green-mid);
  fill: none;
  stroke-width: 1.5;
}
.galeria-vazia.visivel { display: block; }

/* ── Animação de entrada dos itens (fade ao filtrar) ── */
@keyframes fadeInItem {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.galeria-item.aparecendo {
  animation: fadeInItem 0.3s ease both;
}

/* ══════════════════════════════════════════════════════
   FANCYBOX 5 — customizações de tema
   Sobrepõe variáveis CSS do Fancybox usando os tokens do site
   ══════════════════════════════════════════════════════ */

/* Container principal */
.fancybox__container {
  --fancybox-bg: rgba(30, 58, 47, 0.95);
  --fancybox-accent-color: var(--gold);
}

/* Barra de ferramentas (botões topo) */
.fancybox__toolbar {
  background: linear-gradient(to bottom, rgba(30,58,47,0.8), transparent);
  padding: 8px 12px;
}

/* Botões (fechar, zoom, etc.) */
.fancybox__button {
  color: var(--ivory);
  transition: color var(--transition);
}
.fancybox__button:hover { color: var(--gold); }

/* Legenda / caption */
.fancybox__caption {
  background: linear-gradient(to top, rgba(30,58,47,0.9), transparent);
  padding: 20px 24px;
}
.fancybox__caption p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ivory);
  text-align: center;
  letter-spacing: 0.02em;
}
.fancybox__caption strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-light);
  display: block;
  margin-bottom: 4px;
}

/* Setas de navegação */
.carousel__button.is-prev,
.carousel__button.is-next {
  color: var(--ivory);
  background: rgba(30,58,47,0.55);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
}
.carousel__button.is-prev:hover,
.carousel__button.is-next:hover {
  background: rgba(30,58,47,0.9);
  color: var(--gold);
}

/* Miniaturas (thumbnail strip) */
.fancybox__thumbs .carousel__slide .fancybox__thumb {
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb {
  border-color: var(--gold);
}

/* Contador de slides */
.fancybox__infobar {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(247,243,236,0.65);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .galeria-grid {
    columns: 2 240px;
  }
}

@media (max-width: 540px) {
  .galeria-grid {
    columns: 1;
  }

  .filtros {
    gap: 8px;
  }

  .filtro-btn {
    padding: 8px 16px;
    font-size: 0.7rem;
  }

  .galeria-item__overlay {
    /* Em mobile sempre visível (sem hover) */
    opacity: 1;
    background: linear-gradient(
      to top,
      rgba(30, 58, 47, 0.75) 0%,
      transparent 55%
    );
  }
  .galeria-item__info { transform: translateY(0); }
  .galeria-item__zoom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-item,
  .galeria-item img,
  .galeria-item__overlay,
  .galeria-item__info,
  .galeria-item__zoom { transition: none !important; animation: none !important; }
}