/* ==========================================================================
   Galeria premium do imóvel — botões flutuantes + visualizador em tela cheia
   (estilo Airbnb/Loft/Apple). Vanilla, sem libs. Usa os tokens --roxo/--laranja
   definidos em style.css (com fallback).
   ========================================================================== */

/* ---------- Mosaico: layout principal ---------- */
.galeria-imovel {
  gap: 4px !important;
  height: 520px !important;
  grid-template-columns: 2.1fr 1fr !important;
  border-radius: 16px;
  overflow: hidden;
}

/* 5 imagens: 1 grande à esquerda + grade 2×2 à direita (estilo Airbnb/Zillow) */
.galeria-imovel.galeria-n5 {
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}
/* 4 imagens: 1 grande + 3 (uma em cima larga, duas embaixo) */
.galeria-imovel.galeria-n4 {
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}
.galeria-n4 .galeria-item:nth-child(2) { grid-column: 2 / 4 !important; }

/* Itens do grid: bordas arredondadas apenas nos cantos externos */
.galeria-item {
  border-radius: 0 !important;
}

/* Cantos do mosaico: só os extremos */
.galeria-imovel .galeria-item:first-child {
  border-radius: 16px 0 0 16px !important;
}
.galeria-imovel .galeria-item:nth-child(2) {
  border-radius: 0 16px 0 0 !important;
}

/* Último item do grid (5a foto ou última visível) */
.galeria-n5 .galeria-item:last-of-type {
  border-radius: 0 0 16px 0 !important;
}
.galeria-n4 .galeria-item:last-of-type {
  border-radius: 0 0 16px 0 !important;
}
.galeria-n3 .galeria-item:last-of-type {
  border-radius: 0 0 16px 0 !important;
}
.galeria-n2 .galeria-item:last-of-type {
  border-radius: 0 16px 16px 0 !important;
}

/* Cantos na grade 2×2 do n5: 2ª tile (topo-meio) sem canto; 3ª = topo-direito */
.galeria-n5 .galeria-item:nth-child(2) { border-radius: 0 !important; }
.galeria-n5 .galeria-item:nth-child(3) { border-radius: 0 16px 0 0 !important; }

/* Hover mais suave */
.galeria-item img {
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .3s ease !important;
}
.galeria-item:hover img {
  transform: scale(1.04) !important;
  filter: brightness(1.03);
}

/* ---------- Overlay "+N fotos" (última miniatura) ---------- */
.galeria-mais {
  background: rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.galeria-mais svg {
  width: 28px !important;
  height: 28px !important;
  opacity: .85;
  margin-bottom: 2px;
}
.galeria-mais strong {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.galeria-mais span {
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.galeria-item:hover .galeria-mais {
  background: rgba(0, 0, 0, .62) !important;
}

/* ---------- Menu de compartilhar: destaque para profissionais ---------- */
.share-menu-pro { min-width: 268px !important; max-width: 300px; }
.share-pro-nota {
  padding: 11px 12px 12px;
  margin: -8px -8px 6px;      /* encosta nas bordas do .share-menu (padding 8px) */
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #f6efFB, #fbf8fd);
  border-bottom: 1px solid #efe7f4;
}
.share-pro-nota strong { display: block; font-size: .9rem; font-weight: 700; color: var(--roxo, #3c004f); }
.share-pro-nota span { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.35; color: #6b5b77; }

/* ---------- Botões flutuantes sobre o hero ---------- */
/* Estrutura base (restaurada): posicionamento + ícones dimensionados.
   Sem isto os SVGs renderizam gigantes ("ícones sem estilo"). */
.galeria-acoes {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 72%;
}
.galeria-acao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  color: #2a052f;
}
.galeria-acao svg { width: 17px; height: 17px; flex: 0 0 auto; }
.galeria-acao.btn-favorito.ativo,
.galeria-acao.btn-favorito.favoritado { color: var(--laranja, #ff6633); }
.galeria-acao.btn-favorito.ativo svg,
.galeria-acao.btn-favorito.favoritado svg { fill: var(--laranja, #ff6633); stroke: var(--laranja, #ff6633); }
.galeria-contador svg,
.galeria-ver-todas svg { width: 16px; height: 16px; flex: 0 0 auto; }

.galeria-acoes {
  top: 16px !important;
  right: 16px !important;
  gap: 6px !important;
}
.galeria-acao {
  border-radius: 10px !important;
  padding: 9px 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  font-size: .82rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all .2s ease !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
}
.galeria-acao:hover {
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Botão "Ver todas as fotos" ---------- */
.galeria-ver-todas {
  right: 16px !important;
  bottom: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  font-size: .88rem !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
}
.galeria-ver-todas:hover {
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Contador de fotos ---------- */
.galeria-contador {
  background: rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
  padding: 9px 16px !important;
  font-size: .84rem !important;
}

/* ---------- Badges ---------- */
.galeria-badges {
  top: 16px !important;
  left: 16px !important;
}
.badge-imovel {
  font-size: .75rem !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ==========================================================================
   Visualizador em tela cheia (.vg)
   ========================================================================== */
.vg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  background: #000 !important;
  opacity: 0;
  transition: opacity .25s ease !important;
}
.vg.aberta { opacity: 1; }
.vg[hidden] { display: none !important; }

/* ----- Estrutura do corpo/palco (restaurado) ----- */
.vg-corpo { position: relative; overflow: hidden; }
.vg-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vg-palco[hidden], .vg-media[hidden] { display: none !important; }
.vg-viewport {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; cursor: zoom-in;
}
.vg-viewport.vg-arrastando { cursor: grabbing; }
.vg-media { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.vg-mapa-acoes { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vg-mapa-acoes a { padding: 9px 18px; border-radius: 999px; background: var(--laranja, #ff6633); color: #fff; font-weight: 600; font-size: .85rem; text-decoration: none; }
.vg-mapa-acoes a + a { background: rgba(255, 255, 255, .14); }
.vg-legenda { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 80%; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .82rem; text-align: center; }
.vg-legenda[hidden] { display: none; }
/* Garante que a foto caiba no palco (sem estourar/ficar gigante) */
.vg-foto { max-height: 100% !important; object-fit: contain !important; }
/* Ícones/imagens/iframes do visualizador com tamanho correto (restaurado) */
.vg-fechar svg { width: 20px; height: 20px; }
.vg-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-mini.ativa { opacity: 1 !important; border-color: var(--laranja, #ff6633) !important; }
.vg-embed { width: min(1100px, 94%); aspect-ratio: 16 / 9; max-height: 100%; overflow: hidden; border-radius: 14px; background: #000; }
.vg-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ----- Cabeçalho ----- */
.vg-topo {
  padding: 14px 20px !important;
  background: rgba(0, 0, 0, .95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  color: #fff !important;              /* itens do cabeçalho brancos (X, título, abas) */
}
.vg-fechar {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  color: #fff !important;              /* ícone X visível no fundo escuro */
  transition: all .2s ease !important;
}
.vg-fechar:hover {
  background: rgba(255, 255, 255, .18) !important;
}
.vg-titulo strong {
  font-size: 1.05rem !important;
  color: #fff !important;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-contador {
  font-size: .82rem !important;
  color: rgba(255, 255, 255, .5) !important;
}

/* ----- Abas ----- */
.vg-aba {
  padding: 9px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  color: rgba(255, 255, 255, .85) !important;   /* aba inativa (ex.: "Mapa") visível */
  background: transparent !important;
  font-size: .84rem !important;
  transition: all .2s ease !important;
}
.vg-aba:hover { color: #fff !important; }
.vg-aba:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .25) !important;
}
.vg-aba.ativa {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* ----- Imagem principal ----- */
.vg-foto {
  max-width: 90% !important;
  border-radius: 6px !important;
  transition: opacity .25s ease, transform .2s ease !important;
}

/* ----- Setas de navegação ----- */
.vg-seta {
  width: 54px !important;
  height: 54px !important;
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;                    /* seta (SVG currentColor) visível no fundo escuro */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all .2s ease !important;
}
.vg-seta:hover {
  background: rgba(255, 255, 255, .28) !important;
  transform: translateY(-50%) scale(1.06) !important;
}
.vg-seta svg {
  width: 26px !important;
  height: 26px !important;
  color: #fff !important;
}
.vg-seta.prev { left: 20px !important; }
.vg-seta.next { right: 20px !important; }

/* ----- Régua de miniaturas ----- */
.vg-reguas {
  padding: 14px 0 18px !important;
  background: rgba(0, 0, 0, .95) !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
}
.vg-miniaturas {
  gap: 8px !important;
  padding: 0 20px !important;
}
.vg-mini {
  width: 96px !important;
  height: 66px !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  opacity: .45 !important;
  transition: all .2s ease !important;
}
.vg-mini:hover {
  opacity: .75 !important;
  border-color: rgba(255, 255, 255, .25) !important;
  transform: scale(1.04);
}
.vg-mini.ativa {
  opacity: 1 !important;
  border-color: #fff !important;
  transform: scale(1.02);
}

/* ----- Legenda ----- */
.vg-legenda {
  background: rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: .84rem !important;
}

/* ----- Embed (vídeo/tour/mapa) ----- */
.vg-embed {
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6) !important;
}

/* ----- Ações do mapa ----- */
.vg-mapa-acoes a {
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: .88rem !important;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* Tablet landscape (< 1024px) */
@media (max-width: 1024px) {
  .galeria-imovel {
    height: 420px !important;
    border-radius: 12px !important;
  }
  .galeria-imovel .galeria-item:first-child { border-radius: 12px 0 0 12px !important; }
  .galeria-imovel .galeria-item:nth-child(2) { border-radius: 0 12px 0 0 !important; }
  .galeria-n5 .galeria-item:last-of-type,
  .galeria-n4 .galeria-item:last-of-type,
  .galeria-n3 .galeria-item:last-of-type { border-radius: 0 0 12px 0 !important; }

  .vg-seta { width: 46px !important; height: 46px !important; }
  .vg-seta.prev { left: 14px !important; }
  .vg-seta.next { right: 14px !important; }
}

/* Mobile (< 700px) - vira carrossel horizontal */
@media (max-width: 700px) {
  .galeria-imovel {
    height: auto !important;
    border-radius: 0 !important;
    gap: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .galeria-imovel.galeria-n5 {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding-bottom: 0 !important;
  }
  .galeria-imovel.galeria-n5::-webkit-scrollbar { display: none; }

  .galeria-imovel.galeria-n5 .galeria-item {
    flex: 0 0 88% !important;
    height: 260px !important;
    scroll-snap-align: center !important;
    border-radius: 0 !important;
    margin-right: 4px;
  }
  .galeria-imovel.galeria-n5 .galeria-item:first-child {
    grid-column: auto !important;
    grid-row: auto !important;
    border-radius: 0 !important;
  }

  .galeria-acoes {
    top: auto !important;
    bottom: 56px !important;
    right: 12px !important;
    flex-direction: row !important;
  }
  .galeria-acao {
    padding: 9px !important;
    border-radius: 50% !important;
  }
  .galeria-acao span { display: none !important; }
  .galeria-acao svg { width: 18px !important; height: 18px !important; }

  .galeria-ver-todas {
    position: static !important;
    margin: 4px auto 0 !important;
    width: fit-content !important;
    display: flex !important;
    border-radius: 10px !important;
  }

  .galeria-badges {
    max-width: 78% !important;
    top: 12px !important;
    left: 12px !important;
  }

  .galeria-contador {
    bottom: 12px !important;
    left: 12px !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: .78rem !important;
  }

  /* Viewer mobile */
  .vg-topo {
    padding: 12px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .vg-abas {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .vg-titulo strong {
    font-size: .92rem !important;
    max-width: 200px;
  }
  .vg-fechar { width: 38px !important; height: 38px !important; }
  .vg-seta {
    width: 42px !important;
    height: 42px !important;
  }
  .vg-seta.prev { left: 8px !important; }
  .vg-seta.next { right: 8px !important; }
  .vg-seta svg { width: 20px !important; height: 20px !important; }
  .vg-foto { max-width: 100% !important; border-radius: 0 !important; }
  .vg-mini {
    width: 76px !important;
    height: 54px !important;
    border-radius: 6px !important;
  }
  .vg-embed { border-radius: 10px !important; width: 100% !important; }
  .vg-reguas { padding: 10px 0 14px !important; }
  .vg-miniaturas { padding: 0 14px !important; }
  .vg-aba { padding: 7px 14px !important; font-size: .78rem !important; }
}

/* Very small screens */
@media (max-width: 480px) {
  .galeria-imovel.galeria-n5 .galeria-item {
    flex: 0 0 92% !important;
    height: 230px !important;
  }
}

/* Large screens (> 1400px) */
@media (min-width: 1400px) {
  .galeria-imovel {
    height: 560px !important;
  }
}

/* Extra-large screens (> 1800px) */
@media (min-width: 1800px) {
  .galeria-imovel {
    height: 620px !important;
  }
}

/* Print: hide gallery actions */
@media print {
  .galeria-acoes,
  .galeria-ver-todas,
  .galeria-contador { display: none !important; }
  .galeria-imovel { height: auto !important; }
  .galeria-item img { break-inside: avoid; }
}