/*
 * Lightbox nativo — substitui o magnific-popup na VARIANTE 2 (kitsparana).
 * Par de `app/lightboxNativo.js`. Os outros 17 seguem no magnific-popup pela
 * variante 1, entao este arquivo e o `magnific-popup.css` nunca convivem.
 *
 * Prefixo `lbn-` de proposito: nao reaproveita `mfp-*` para nao dar a impressao
 * de que o plugin ainda esta ali, e para que uma sobra de marcacao `mfp-*` fique
 * visivelmente sem estilo em vez de meio funcionando.
 */

/* O <dialog> ja nasce `display:none`; `[open]` e quem liga. O seletor `.lbn-aberto`
   cobre o modo de reserva (div comum) para browser sem <dialog>. */
.lbn,
.lbn.lbn-reserva {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    background: transparent;
    overflow: hidden;
}

.lbn[open],
.lbn.lbn-reserva.lbn-aberto {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modo de reserva: sem <dialog> nao ha ::backdrop nem posicionamento automatico. */
.lbn.lbn-reserva {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    background: rgba(11, 11, 11, 0.85);
}

.lbn::backdrop {
    background: rgba(11, 11, 11, 0.85);
}

.lbn-conteudo {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lbn-img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

/* 16:9 com altura limitada pela viewport, sem depender de aspect-ratio (que o
   Chrome so ganhou em 2021 e este front ainda atende browser antigo). */
.lbn-moldura {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    height: 0;
    padding-bottom: 50.625%; /* 56.25% de 90vw */
    max-height: 88vh;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

.lbn-moldura iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lbn-botao {
    position: fixed;
    z-index: 2;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: 0.75;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    padding: 0 10px;
}

.lbn-botao:hover,
.lbn-botao:focus {
    opacity: 1;
    outline: none;
}

.lbn-fechar {
    top: 6px;
    right: 12px;
    font-size: 34px;
}

.lbn-prev,
.lbn-prox {
    top: 50%;
    margin-top: -30px;
    font-size: 52px;
}

.lbn-prev { left: 8px; }
.lbn-prox { right: 8px; }

.lbn-contador {
    position: fixed;
    top: 12px;
    left: 16px;
    color: #ccc;
    font-size: 13px;
    z-index: 2;
}

/* Some com as setas e o contador quando a galeria tem um item so. */
.lbn-unico .lbn-prev,
.lbn-unico .lbn-prox,
.lbn-unico .lbn-contador {
    display: none;
}

/* Equivalente ao `mainClass: "mfp-fade"`. `prefers-reduced-motion` respeitado. */
.lbn[open] .lbn-conteudo,
.lbn.lbn-aberto .lbn-conteudo {
    animation: lbn-entrada 0.22s ease-out;
}

@keyframes lbn-entrada {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lbn[open] .lbn-conteudo,
    .lbn.lbn-aberto .lbn-conteudo {
        animation: none;
    }
}

/* O <body> nao pode rolar por tras do lightbox. O <dialog> modal ja bloqueia a
   interacao, mas nao o scroll. */
body.lbn-travado {
    overflow: hidden;
}