/*
 * Galeria de fotos do anúncio (public/js/galeria-fotos.js, partials/galeria-fotos.blade.php) e a entrada para ela
 * que fica junto da foto da página: o selo "▦ 3 / 12" no canto da foto (o "Ver N fotos" saiu em 01/11/2026 à noite).
 * Decisões: processo/reunioes/2026-11-01-galeria-de-fotos/final.md e processo/reunioes/2026-11-01-galeria-v2/final.md.
 *
 * <dialog> com showModal(): fica na camada de cima (por cima da faixa DEV, do aviso de consentimento e do detalhe do
 * /mapa), deixa o resto da página inerte (foco preso sem plugin) e o Esc vira "cancel". Fundo preto neutro — nenhuma
 * cor de marca nem de preço (cor no LarBH só quer dizer barato↔caro; aqui tudo é branco/cinza e marcação por forma).
 */
html.galeria-aberta { overflow: hidden; }
.galeria:focus { outline: none; }
.galeria {
    position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: rgba(11,11,11,.96); color: #fff; overflow: hidden;
}
.galeria::backdrop { background: rgba(11,11,11,.96); }
.galeria[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) auto; }
.galeria[open].galeria--lista { grid-template-rows: 56px minmax(0, 1fr); }

.galeria__topo { display: flex; align-items: center; padding: 0 16px; gap: 12px; min-width: 0; }
.galeria__contador { font-size: 15px; font-weight: 650; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "12 fotos · Apartamento em Guarani": o bairro longo corta com "…" em vez de quebrar a barra (412 px). */
.galeria__titulo { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 650; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeria__fechar, .galeria__voltar {
    flex: 0 0 auto; height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 15px; font-weight: 650;
}
.galeria__fechar { margin-left: auto; }
.galeria__fechar:hover, .galeria__voltar:hover { background: rgba(255,255,255,.2); }

.galeria__palco { position: relative; min-height: 0; padding: 0 88px; display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.galeria__img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.galeria__erro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 15px; }
.galeria__seta {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff;
}
.galeria__seta:hover { background: rgba(255,255,255,.24); }
.galeria__seta--ant { left: 20px; }
.galeria__seta--prox { right: 20px; }
/* Nas pontas a seta some sem tirar o lugar dela (visibility), para a foto não pular. */
.galeria__seta.is-oculta { visibility: hidden; }
.galeria__fechar:focus-visible, .galeria__voltar:focus-visible, .galeria__seta:focus-visible, .galeria__mini:focus-visible,
.galeria__item:focus-visible, .galeria__saida:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.galeria__tira {
    display: flex; gap: 8px; overflow-x: auto; min-width: 0; scrollbar-width: thin;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); justify-content: safe center;
}
.galeria__mini { flex: 0 0 auto; width: 72px; height: 54px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; opacity: .55; }
.galeria__mini[aria-current="true"] { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }

/* A LISTA de fotos (v2): altura total, rola na vertical. 2 colunas no celular, 3 a partir de 900 px (até 1200 px),
   quadro 4:3. minmax(0,1fr): no Android (Chromium) uma coluna `1fr` cresce até a largura natural da foto e estoura a
   tela (a mesma armadilha da grade do anúncio, 2026-09). */
.galeria__lista { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px calc(16px + env(safe-area-inset-bottom)); }
.galeria__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 1200px; margin: 0 auto; }
.galeria__item { display: block; padding: 0; border: 0; background: rgba(255,255,255,.06); cursor: zoom-in; aspect-ratio: 4 / 3; min-width: 0; border-radius: 2px; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
/* A foto em que a pessoa estava: anel branco duplo (forma, sem cor) — o vão escuro entre os dois anéis separa o anel
   de uma foto clara. */
.galeria__item[aria-current="true"] { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px rgba(11,11,11,.9); }
.galeria__item[aria-current="true"] img { padding: 6px; }
.galeria__fim { max-width: 1200px; margin: 0 auto; padding: 24px 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.galeria__credito { margin: 0; font-size: 13px; color: rgba(255,255,255,.65); }
.galeria__saida {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.85); color: #fff; font-size: 15px; font-weight: 650; text-decoration: none;
}
.galeria__saida:hover { background: rgba(255,255,255,.1); }

@media (min-width: 900px) {
    .galeria__lista { padding: 0 24px 24px; }
    .galeria__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 700px) {
    .galeria__palco { padding: 0; }
    .galeria__seta { width: 44px; height: 44px; background: rgba(0,0,0,.45); }
    .galeria__seta--ant { left: 8px; }
    .galeria__seta--prox { right: 8px; }
    .galeria__tira { gap: 6px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .galeria__mini { width: 60px; height: 45px; }
    .galeria__topo { padding: 0 8px 0 12px; gap: 8px; }
    .galeria__fechar, .galeria__voltar { height: 44px; padding: 0 12px 0 10px; }
}

/* ── Entradas na página ──
   Selo no canto de baixo à ESQUERDA da foto (longe da seta ›, onde está o dedo de quem passa fotos): "▦ 3 / 12"; tocar
   abre a lista (a foto também). Sempre compacto — o texto "Ver 12 fotos" ao passar depressa saiu (dono, 01/11 à noite:
   "our space on details is limited"). O botão tem 44 px de altura (toque) e é
   transparente; a pílula desenhada dentro dele tem 32 px. */
.fotos-selo {
    position: absolute; left: 6px; bottom: 6px; z-index: 3;
    height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; font: inherit; color: #fff;
}
.fotos-selo__pilula {
    height: 32px; padding: 0 10px; border-radius: 999px; display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.62); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.fotos-selo:hover .fotos-selo__pilula { background: rgba(0,0,0,.78); }
.fotos-selo:focus-visible { outline: none; }
.fotos-selo:focus-visible .fotos-selo__pilula { outline: 2px solid #fff; outline-offset: 2px; }

/* "Ver a rua" (reunião 2026-11-02-fotos-streetview-e-voltar): pílula igual ao "Fechar", à esquerda dele, vão de 8 px.
   Mesmo fundo neutro — cor no site é preço. No 412 o título encurta para "57 fotos" para os dois caberem. */
.galeria__rua {
    flex: 0 0 auto; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 20px; cursor: pointer; margin-left: auto;
    display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
}
.galeria__rua:hover { background: rgba(255,255,255,.2); }
.galeria__rua:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.galeria__rua + .galeria__fechar { margin-left: -4px; }   /* gap 12 − 4 = 8 px */
@media (max-width: 700px) {
    .galeria__rua { height: 44px; }
    .galeria__rua + .galeria__fechar { margin-left: 0; }   /* o gap já é 8 aqui */
    .galeria__titulo--curto .galeria__titulo-resto { display: none; }
}