/* =========================================================================
   SECTION — Galeria (mosaico + visor)

   Compartilhada pela vitrine da home e pelo mural de `/galeria`. O que é
   exclusivo da página (barra de filtros, botão "ver mais") mora em
   `galeria-page.css`.

   A GRAMÁTICA DESTA SEÇÃO É DIFERENTE DE TODAS AS OUTRAS, E É DE PROPÓSITO
   -------------------------------------------------------------------------
   O resto do site é feito de cards: superfície branca, borda hairline, padding
   generoso, sombra curta. Aqui o conteúdo é a FOTOGRAFIA — e uma moldura branca
   em volta de cada imagem transformaria a prova numa vitrine de produtos, além
   de fazer a quinta seção da home parecer a mesma das quatro anteriores.

   Então não há card. As imagens encostam umas nas outras num mosaico de
   células, separadas por um vão pequeno e constante, com os cantos arredondados
   do sistema. A profundidade vem da própria foto e do "lift" no ponteiro, nunca
   de sombra em volta.

   Mobile-first: duas colunas em 320px (uma coluna só transformaria nove fotos
   em nove telas de rolagem), três no tablet, quatro no desktop.
   ====================================================================== */

.galeria {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-section);
    /* Branco depois da banda cinza da seção Sobre: o mosaico é escuro por
       natureza (são fotos), e um fundo cinza atrás dele deixaria a página
       inteira pesada nesse ponto. */
    background-color: var(--color-bg);
}

/* -------------------------------------------------------------------------
   Mosaico

   Células QUADRADAS, e não a proporção original de cada foto. A decisão é
   editorial: o acervo é feito de fotos de celular em proporções que variam de
   9/16 a 4/3, e respeitá-las produziria uma parede irregular — bonito num
   portfólio de fotógrafo, desorganizado num site cuja identidade é
   "operacional eficiente e minimalista".

   O recorte quadrado uniformiza sem cortar o que importa: `object-position`
   puxa o enquadramento para cima, onde estão os rostos em foto de plateia.
   ---------------------------------------------------------------------- */
.galeria__mosaico {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-8);
}

/* A primeira célula ocupa quatro — é a abertura do bento, a mesma assimetria
   que a agenda e a consultoria usam com blocos de texto. Com nove fotos a
   conta fecha exata em qualquer uma das três larguras (4+8 = 12 células). */
.galeria__mosaico > *:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* No mural do acervo não há célula grande: ali são dezenas de fotos e a
   hierarquia seria arbitrária — por que ESTA foto é a maior? Na home ela existe
   porque a vitrine é uma composição de nove itens escolhidos. */
.galeria__mosaico--acervo > *:first-child {
    grid-column: span 1;
    grid-row: span 1;
}

.galeria__celula {
    display: flex;
    min-width: 0;
}

/* -------------------------------------------------------------------------
   A foto
   ---------------------------------------------------------------------- */
.galeria-foto {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: transform var(--dur-base) var(--ease-spring);
}

.galeria-foto:hover {
    transform: translateY(-4px);
}

.galeria-foto:active {
    transform: scale(0.99);
}

.galeria-foto__quadro {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    /* O cinza por baixo é o que o visitante vê no instante entre o layout e a
       chegada da imagem. Sem ele o buraco é branco, e o mosaico "pisca". */
    background-color: var(--ink-100);
    border-radius: var(--radius-lg);
    /* Hairline por dentro: sem ela, uma foto de fundo claro se dissolve no
       branco da página e a célula perde o contorno. Por DENTRO (e não `border`)
       para não somar 2px ao tamanho da célula do grid. */
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.galeria-foto__quadro img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Acima do centro: em foto de plateia e de mesa de trabalho os rostos ficam
       no terço superior, e o recorte quadrado centralizado corta cabeças. */
    object-position: 50% 42%;
    transition: transform var(--dur-slow) var(--ease-out);
}

.galeria-foto:hover .galeria-foto__quadro img {
    /* Zoom curto. Mais do que isso revela a perda de nitidez da miniatura. */
    transform: scale(1.04);
}

/* A lupa diz que a foto ABRE. Sem ela o mosaico parece decoração e ninguém
   clica — e o acervo inteiro fica atrás de um clique que ninguém dá. */
.galeria-foto__lupa {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--color-text);
    background-color: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-spring);
}

.galeria-foto:hover .galeria-foto__lupa,
.galeria-foto:focus-visible .galeria-foto__lupa {
    opacity: 1;
    transform: none;
}

/* No toque não existe hover: a lupa fica visível o tempo todo, senão a
   affordance simplesmente não existiria no celular — que é onde a maior parte
   deste público navega. */
@media (pointer: coarse) {
    .galeria-foto__lupa {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   Legenda sobreposta

   DENTRO do quadro, e não abaixo dele. A razão é de layout antes de ser de
   estilo: a maior parte do acervo não tem legenda, e uma linha de texto abaixo
   da foto — presente em uma célula de cada dez — estica a altura da FILEIRA
   inteira do mosaico. A parede ganha degraus, e o degrau chama mais atenção do
   que a fotografia.

   Sobreposta, ela não ocupa espaço nenhum no layout: a célula é sempre
   quadrada, com legenda ou sem.

   O véu escuro cobre só o rodapé da imagem e só existe enquanto o ponteiro
   está sobre ela. É o contrário do véu permanente, que escureceria justamente
   o que a seção existe para mostrar.
   ---------------------------------------------------------------------- */
.galeria-foto__texto {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-6) var(--space-3) var(--space-3);
    color: #fff;
    background: linear-gradient(to top,
        rgba(12, 9, 9, 0.82) 0%,
        rgba(12, 9, 9, 0.55) 45%,
        rgba(12, 9, 9, 0) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.galeria-foto:hover .galeria-foto__texto,
.galeria-foto:focus-visible .galeria-foto__texto {
    opacity: 1;
    transform: none;
}

/* No toque não existe hover, e uma legenda que só aparece no ponteiro seria
   uma legenda que metade do público nunca vê. Aqui ela fica visível — e o véu
   é mais curto, para cobrir menos da foto. */
@media (pointer: coarse) {
    .galeria-foto__texto {
        opacity: 1;
        transform: none;
        padding-block-start: var(--space-5);
    }
}

.galeria-foto__legenda {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
    /* Duas linhas no máximo. A legenda é etiqueta, não parágrafo — o texto
       inteiro está no visor, onde há espaço para lê-lo. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.galeria-foto__meta {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* A célula grande da home comporta uma legenda maior, e precisa dela: sozinha
   naquele tamanho, a foto pede um rótulo à altura. */
.galeria__mosaico > *:first-child .galeria-foto__legenda {
    font-size: var(--fs-md);
}

/* -------------------------------------------------------------------------
   Ações
   ---------------------------------------------------------------------- */
.galeria__acoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.galeria__contagem {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Entrada escalonada

   O atraso vem do índice da célula, limitado a oito passos: numa página de
   oitenta fotos, um atraso proporcional faria a última entrar quatro segundos
   depois da primeira — e quem rolou até lá veria a tela vazia esperando.
   ---------------------------------------------------------------------- */
.js .galeria-foto[data-reveal] {
    --delay: calc(min(var(--i, 0), 8) * 45ms);
}

/* =========================================================================
   O VISOR

   `<dialog>` nativo: foco preso, Esc fecha, `::backdrop` próprio e camada
   acima de qualquer `z-index` — ver o cabeçalho de `partials/galeria-visor.php`.
   ====================================================================== */
.galeria-visor {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    /* O `<dialog>` nasce com margem automática e borda: os dois viram nada,
       porque aqui ele ocupa a tela inteira. */
    margin: 0;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.galeria-visor::backdrop {
    /* Quase preto, e com desfoque: a página continua reconhecível atrás — o
       que ancora o visitante — sem competir com a foto por atenção. */
    background-color: rgba(12, 9, 9, 0.86);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.galeria-visor[open] {
    display: grid;
}

.js .galeria-visor[open] {
    animation: visor-in var(--dur-base) var(--ease-out);
}

@keyframes visor-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.galeria-visor__caixa {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100vw;
    /* `dvh` acompanha a barra de endereços do Safari iOS ao recolher; sem ele o
       rodapé da legenda fica atrás da barra durante a rolagem. */
    height: 100dvh;
    padding: max(var(--space-4), env(safe-area-inset-top))
             var(--space-4)
             max(var(--space-4), env(safe-area-inset-bottom));
}

/* -------------------------------------------------------------------------
   O palco
   ---------------------------------------------------------------------- */
.galeria-visor__palco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    /* `min-height: 0` é o que permite à imagem encolher dentro do grid em vez
       de estourar a altura da tela — sem ele o `max-height` do `<img>` não tem
       efeito nenhum em contêiner de grade. */
    min-height: 0;
    max-width: min(1200px, 100%);
    margin: 0;
}

.galeria-visor__foto {
    max-width: 100%;
    /* Sobra reservada para a legenda e para as áreas seguras do aparelho. */
    max-height: calc(100dvh - 12rem);
    object-fit: contain;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.galeria-visor__pe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    width: 100%;
    text-align: center;
}

.galeria-visor__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.galeria-visor__texto strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
}

.galeria-visor__texto small {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.66);
}

/* Vazio não ocupa espaço: sem esta regra, uma foto sem legenda deixaria um
   bloco em branco empurrando a imagem para cima. */
.galeria-visor__texto strong:empty,
.galeria-visor__texto small:empty {
    display: none;
}

.galeria-visor__contador {
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
   Controles

   Vidro sobre a foto, no mesmo material do header. Alvo de 48px em qualquer
   tela: são os únicos controles do site que a pessoa aciona com o polegar
   enquanto segura o aparelho com uma mão só.
   ---------------------------------------------------------------------- */
.galeria-visor__fechar,
.galeria-visor__seta {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring);
}

.galeria-visor__fechar:hover,
.galeria-visor__seta:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.galeria-visor__fechar:active,
.galeria-visor__seta:active {
    transform: scale(0.94);
}

.galeria-visor__fechar {
    inset-block-start: max(var(--space-4), env(safe-area-inset-top));
    inset-inline-end: var(--space-4);
}

.galeria-visor__seta--anterior {
    inset-inline-start: var(--space-3);
}

.galeria-visor__seta--proxima {
    inset-inline-end: var(--space-3);
}

/* No celular as setas descem para a base, lado a lado: nas laterais elas
   cobririam a foto (a tela é estreita) e ficariam fora do alcance do polegar. */
@media (max-width: 767px) {
    .galeria-visor__seta {
        inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    }

    .galeria-visor__seta--anterior {
        inset-inline-start: calc(50% - 60px);
    }

    .galeria-visor__seta--proxima {
        inset-inline-end: calc(50% - 60px);
    }

    .galeria-visor__foto {
        max-height: calc(100dvh - 16rem);
    }
}

/* Uma foto só: as setas não têm para onde levar. */
.galeria-visor[data-unica] .galeria-visor__seta {
    display: none;
}

/* -------------------------------------------------------------------------
   Tablet e desktop
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
    .galeria__mosaico {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
        margin-top: var(--space-10);
    }
}

@media (min-width: 1024px) {
    .galeria__mosaico {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .galeria__mosaico--acervo {
        gap: var(--space-3);
    }

    .galeria__acoes {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-5);
    }
}