/**
 * EmMemoria — Lightbox de mídia (componente reutilizável)
 *
 * Extraído de module-9-memorial-publico/assets/css/memorial-publico.css —
 * ver assets/js/lightbox.js para a convenção de markup (.emm-lightbox-trigger
 * + data-lightbox-group). Complementa design-tokens.css (nunca duplica
 * variáveis), mesma regra do restante do projeto.
 */

/* Cursor e efeito hover em qualquer imagem clicável */
.emm-lightbox-trigger {
    cursor: zoom-in;
    transition: filter 0.15s ease;
}

.emm-lightbox-trigger:hover {
    filter: brightness(0.88);
}

/* Overlay */
.emm-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.85);
    /* column, não row: fechar/setas/reações são todos position:fixed (fora
       do fluxo), então os únicos filhos em fluxo normal são a mídia
       (imagem OU vídeo, nunca as duas) e a legenda — column empilha a
       legenda logo abaixo da mídia sem precisar de um wrapper extra. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--emm-espaco-sm);
    padding: var(--emm-espaco-md);
}

.emm-lightbox--ativo {
    display: flex;
}

/* Imagem ampliada — só max-width/max-height (sem width/height fixos): a
   caixa do <img> acompanha a proporção real da imagem, então
   object-fit:contain nunca precisa "sobrar" espaço letterboxed dentro da
   própria caixa. Um width/height fixos e independentes da proporção (ex:
   uma caixa quase quadrada) faziam esse vazio ficar visível como moldura
   ao redor da foto — o box-shadow/border-radius abaixo desenham a caixa
   inteira, inclusive a parte letterboxed sem conteúdo. */
.emm-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--emm-radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    /* impede que o clique na imagem propague para o overlay e feche */
    pointer-events: none;
}

/* Vídeo ampliado (embed YouTube/Vimeo) — mesmo overlay da foto, alternado
   via [hidden] conforme o tipo do item atual (ver mostrarItemAtual() em
   lightbox.js). Sem pointer-events:none — precisa receber clique pra
   controlar o player (diferente da imagem, que deixa o clique "vazar" pro
   overlay fechar). */
.emm-lightbox__iframe {
    width: min(90vw, 960px);
    height: min(50.625vw, 540px); /* proporção 16:9 */
    border: none;
    border-radius: var(--emm-radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.emm-lightbox__iframe[hidden] {
    display: none;
}

/* Vídeo próprio auto-hospedado (exceção legada — arquivo, não embed, ver
   data-video-tipo="arquivo" em lightbox.js) — mesmo dimensionamento do
   iframe acima, pra não pular de tamanho ao navegar entre um vídeo embed e
   um vídeo arquivo dentro do mesmo grupo. Regra [hidden] explícita por
   precaução (armadilha recorrente já documentada em
   .specs/07-licoes-aprendidas.md — "[hidden] perdendo para regra de autor
   em empate de especificidade CSS"), mesmo esta regra hoje não declarar
   nenhum `display` que competisse com o [hidden] nativo. */
.emm-lightbox__video {
    width: min(90vw, 960px);
    max-height: 80vh;
    border: none;
    border-radius: var(--emm-radius-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    background-color: #000;
}

.emm-lightbox__video[hidden] {
    display: none;
}

/* Legenda opcional (hoje só a Galeria de Fotos preenche data-legenda) — fica
   em fluxo normal, logo abaixo da mídia (ver flex-direction: column acima).
   Estilo discreto: tom claro da paleta Oliva & Mel (--emm-mel-claro) em vez
   de branco puro, para não competir com a imagem. Não precisa de regra
   [hidden] própria — sem display próprio declarado aqui, a regra nativa do
   navegador ([hidden] { display: none }) já basta. */
.emm-lightbox__legenda {
    max-width: min(80vw, 900px);
    margin: 0;
    color: var(--emm-mel-claro);
    font-family: var(--emm-fonte-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

/* Barra de reação do item atual (Foto/Vídeo) — flutua fixa na base do
   overlay, igual ao botão fechar/setas, pra funcionar com imagem ou vídeo
   de qualquer altura sem depender do fluxo normal do layout. Só aparece em
   páginas que injetam data-reacao-html nos triggers (hoje só o memorial
   público) — sem esse atributo a barra fica vazia e oculta. */
.emm-lightbox__reacoes {
    position: fixed;
    bottom: var(--emm-espaco-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px;
    border-radius: var(--emm-radius-lg);
    max-width: calc(100vw - 2 * var(--emm-espaco-md));
}

.emm-lightbox__reacoes[hidden] {
    display: none;
}

/* O mesmo HTML injetado aqui também é usado inline na miniatura (com o
   modificador --canto, position:absolute) — dentro do lightbox ele precisa
   voltar ao fluxo normal, senão se ancoraria no canto do overlay inteiro
   (o container fixed mais próximo), não centralizado nesta barra. Classes
   .emm-reacao--canto/.emm-reacao-resumo vêm de memorial-publico.css — sem
   ele carregado (ex: painel de gerenciamento) estas duas regras ficam
   simplesmente sem efeito, sem quebrar nada. */
.emm-lightbox__reacoes .emm-reacao--canto {
    position: static;
}

.emm-lightbox__reacoes .emm-reacao-resumo {
    background-color: rgba(255, 255, 255, 0.92);
}

/* Botão fechar */
.emm-lightbox__fechar {
    position: fixed;
    top: var(--emm-espaco-md);
    right: var(--emm-espaco-md);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--emm-fundo-card);
    font-size: 1.4rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    pointer-events: auto;
}

.emm-lightbox__fechar:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Setas de navegação — ocultas via [hidden] quando o conjunto atual (ver
   data-lightbox-group em lightbox.js) tem só 1 imagem. 44px (não 40px como
   o botão fechar) para bater com a área de toque mínima recomendada já
   usada no resto do projeto. */
.emm-lightbox__seta {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--emm-fundo-card);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    pointer-events: auto;
}

.emm-lightbox__seta:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* display:flex acima (regra de autor) vence [hidden] { display: none }
   (UA stylesheet) na cascata, mesmo com o atributo presente — mesma
   armadilha já documentada em auth.css (.emmemoria-senha-aviso-padrao).
   Precisa desta regra explícita para o .hidden do JS funcionar de verdade. */
.emm-lightbox__seta[hidden] {
    display: none;
}

.emm-lightbox__seta--anterior {
    left: var(--emm-espaco-md);
}

.emm-lightbox__seta--proxima {
    right: var(--emm-espaco-md);
}