/**
 * O VISOR DE FOTOS do álbum -- 05/11/2026, pedido do Jonh: "uma modal bem moderna, com setas para próximo e
 * anterior, leve, acessível e responsiva", com "miniaturas indicando as próximas e as anteriores" e, ao fechar,
 * um "sombreamento indicando a foto que o usuário fechou". Comportamento em album-visor.js; marcação em
 * multimidia/album.phtml. Só esta página carrega este arquivo.
 *
 * 🔑 É um <dialog> nativo aberto com showModal(). Aqui só o desenho, numa grade de 3 x 3:
 *
 *   computador:  topo     topo     topo          celular:   topo     topo     topo
 *                anterior  FOTO    próxima                  FOTO     FOTO     FOTO
 *                trilho   trilho   trilho                   anterior trilho   próxima
 *
 *   - a foto cabe inteira na caixa, sem cortar (object-fit: contain); 100dvh: a barra do celular não a corta;
 *   - no celular as setas descem para a base, dos lados da faixa de miniaturas (onde o polegar alcança);
 *   - alvos de 48 x 48 px nos botões; foco visível; área segura do iPhone;
 *   - quem pediu menos movimento ao sistema não vê animação nenhuma (aqui e no JS).
 *
 * 🔴 Revisão adversarial de 05/11/2026: os ajustes marcados "revisão" vieram dela.
 */

/* a página atrás não rola enquanto o visor está aberto; a largura da barra de rolagem vira folga, sem pulo */
html.mm-visor-aberto {
    overflow: hidden;
    /*
     * O gesto de "voltar" por arraste horizontal do navegador (overscroll) FECHAVA o visor e zerava o zoom quando a
     * foto ampliada, passeada com o dedo, esbarrava na borda esquerda (medido, 06/11/2026). Quem decide essa navegação
     * é o elemento RAIZ: no <dialog> não adianta, e `contain` não basta -- só `none` no <html>, com o visor aberto.
     * O "voltar" do sistema, o Esc e o X continuam fechando.
     */
    overscroll-behavior-x: none;
}
html.mm-visor-aberto body { padding-right: var(--mm-barra, 0px); }

.mm-visor {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    /* OPACO: com transparência, a página atrás aparecia em fantasma sob a foto e o contador (visto no palco) */
    background: #0b100f;
    color: #fff;
    font-family: inherit;
    overflow: hidden;
    overscroll-behavior: contain;
}
/* fechado, escondido SEMPRE -- sem depender da folha do navegador (num sem <dialog>, a caixa acima cobriria tudo) */
.mm-visor:not([open]) { display: none; }
.mm-visor[open] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "topo     topo  topo"
        "anterior palco proxima"
        "trilho   trilho trilho";
}
/*
 * TRANSPARENTE: o fundo escuro é o do próprio <dialog>, que o JS esmaece ao abrir e ao fechar. Com o ::backdrop
 * opaco (que não esmaece), a página sumia e voltava num corte seco de um quadro (revisão, medido por pixel).
 */
.mm-visor::backdrop { background: transparent; }

/* ------------------------------------------------------------------ topo */
.mm-visor__topo {
    grid-area: topo;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
.mm-visor__contador {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/* ------------------------------------------------------------------ botões */
.mm-visor__botao {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.mm-visor__botao:hover { background: rgba(255, 255, 255, .22); }
.mm-visor__botao:focus-visible {
    outline: 3px solid var(--lima, #a8e61e);
    outline-offset: 2px;
}
.mm-visor__botao:disabled {
    opacity: .3;
    cursor: default;
}
.mm-visor__botao:disabled:hover { background: rgba(255, 255, 255, .1); }

.mm-visor__seta { align-self: center; }
.mm-visor__seta--anterior { grid-area: anterior; margin: 0 8px 0 max(16px, env(safe-area-inset-left)); }
.mm-visor__seta--proxima  { grid-area: proxima;  margin: 0 max(16px, env(safe-area-inset-right)) 0 8px; }

/* ------------------------------------------------------------------ a foto */
/*
 * Foto e legenda centradas JUNTAS: com `minmax(0, 1fr) auto`, a foto ficava no meio de uma linha alta e a legenda
 * descia para perto da faixa, a até 233 px dela (revisão). A foto continua no mesmo tamanho -- a linha dela
 * cresce até o espaço que sobra e a foto cabe nela.
 */
.mm-visor__palco {
    grid-area: palco;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, auto) auto;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 8px 8px;
    /* o deslizar horizontal é do visor; rolar e a pinça de zoom continuam do navegador */
    touch-action: pan-y pinch-zoom;
}
/*
 * AMPLIADO pela pinça (o JS marca, pelo visualViewport): o arraste de um dedo passeia pela foto, para todos os
 * lados, em vez de trocar de foto -- antes, a foto ampliada ficava presa no ponto da pinça (medido no palco).
 */
.mm-visor--ampliado { overscroll-behavior: auto; }
.mm-visor--ampliado .mm-visor__palco { touch-action: manipulation; }
.mm-visor__foto {
    align-self: center;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    -webkit-user-drag: none;
    user-select: none;
    transition: opacity .2s ease;
}
/* a foto que já não é a do contador (rajada de trocas, ou a nova ainda chegando) esmaece -- não engana ninguém */
.mm-visor__foto--trocando { opacity: .35; }
.mm-visor__legenda {
    max-width: 70ch;
    margin: 0;
    padding: 10px 0 0;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    color: #fff;
}
.mm-visor__erro {
    align-self: center;
    max-width: 36ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}
.mm-visor__erro a { color: #fff; font-weight: 700; text-decoration: underline; }
.mm-visor__erro a:focus-visible { outline: 3px solid var(--lima, #a8e61e); outline-offset: 2px; }

/* o "carregando" só aparece se a foto demora (o JS espera 180 ms), por cima de onde ela vai entrar */
.mm-visor__carregando {
    position: absolute;
    top: calc(50% - 22px);
    left: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mm-visor-girar .8s linear infinite;
}

/* ------------------------------------------------------------------ a faixa de miniaturas */
.mm-visor__trilho {
    grid-area: trilho;
    min-width: 0;
    padding: 6px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.mm-visor__miniaturas {
    position: relative;               /* o offsetLeft das miniaturas passa a contar a partir daqui */
    display: flex;
    gap: 6px;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
/* centraliza quando cabem todas, sem cortar a primeira quando não cabem (o `justify-content: center` cortaria) */
.mm-visor__miniaturas > li:first-child { margin-left: auto; }
.mm-visor__miniaturas > li:last-child  { margin-right: auto; }
.mm-visor__miniaturas > li { flex: 0 0 auto; }

.mm-visor__miniatura {
    display: block;
    width: 64px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease;
}
.mm-visor__miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}
.mm-visor__miniatura:hover { opacity: .9; }
.mm-visor__miniatura[aria-current="true"] {
    opacity: 1;
    border-color: var(--lima, #a8e61e);
}
.mm-visor__miniatura:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 1px;
    opacity: 1;
}

/* `display` declarado acima venceria o `hidden` do navegador -- aqui ele volta a mandar */
.mm-visor__foto[hidden],
.mm-visor__carregando[hidden],
.mm-visor__erro[hidden],
.mm-visor__legenda[hidden] { display: none; }

@keyframes mm-visor-girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ celular */
@media (max-width: 767.98px) {
    .mm-visor[open] {
        grid-template-areas:
            "topo     topo   topo"
            "palco    palco  palco"
            "anterior trilho proxima";
    }
    .mm-visor__palco { padding: 0 8px 6px; }
    .mm-visor__seta { margin-bottom: max(12px, env(safe-area-inset-bottom)); }
    .mm-visor__seta--anterior { margin-left: max(12px, env(safe-area-inset-left)); margin-right: 4px; }
    .mm-visor__seta--proxima  { margin-right: max(12px, env(safe-area-inset-right)); margin-left: 4px; }
    .mm-visor__trilho { padding: 6px 0 max(12px, env(safe-area-inset-bottom)); }
    /* 44 x 33: duas vizinhas inteiras de cada lado em 390 px (com 52 x 40, só uma -- revisão) */
    .mm-visor__miniatura { width: 44px; height: 33px; }
    .mm-visor__legenda { padding-inline: 8px; font-size: 14px; }
}

/* tela BAIXA (celular deitado): topo, botões e faixa mais justos -- a foto tinha só ~240 px de altura (palco) */
@media (max-height: 540px) {
    /* 5 px, e não 4: o anel de foco do Fechar (3 px + 2 de afastamento) saía 1 px cortado no topo (revisão, 06/11/2026) */
    .mm-visor__topo { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 4px; }
    .mm-visor__botao { width: 44px; height: 44px; font-size: 20px; }
    .mm-visor__palco { padding-bottom: 4px; }
    .mm-visor__trilho { padding-top: 2px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
    /* a faixa mantém os 4 px de folga: com 2, o contorno de foco da miniatura (3 px + 1) saía cortado (revisão) */
    .mm-visor__miniatura { width: 44px; height: 33px; }
    .mm-visor__legenda { padding-top: 4px; font-size: 13px; }
}

/* ------------------------------------------------------------------ a grade da página: a foto que estava aberta */
/*
 * Ao fechar, a miniatura da última foto vista ganha um anel e uma sombra -- "para não se perder" (pedido do Jonh).
 * Anel DUPLO de propósito: o lima sozinho some no fundo branco (1,5:1); o verde-escuro por fora dá o contraste de
 * 3:1 que o WCAG pede para indicador gráfico (1.4.11). O foco do teclado também volta para ela.
 */
.mm-album-grade__item--vista { position: relative; z-index: 1; }
.mm-album-grade__item--vista > a {
    box-shadow: 0 0 0 4px var(--lima, #a8e61e), 0 0 0 7px var(--verde-escuro, #214138), 0 0 24px 8px rgba(168, 230, 30, .5), 0 16px 34px rgba(33, 65, 56, .55);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: no-preference) {
    .mm-album-grade__item--vista > a { animation: mm-visor-vista 1.1s ease-out 2; }
}
@keyframes mm-visor-vista {
    0%   { box-shadow: 0 0 0 4px var(--lima, #a8e61e), 0 0 0 7px var(--verde-escuro, #214138), 0 0 0 7px rgba(168, 230, 30, .75); }
    70%  { box-shadow: 0 0 0 4px var(--lima, #a8e61e), 0 0 0 7px var(--verde-escuro, #214138), 0 0 0 20px rgba(168, 230, 30, 0); }
    100% { box-shadow: 0 0 0 4px var(--lima, #a8e61e), 0 0 0 7px var(--verde-escuro, #214138), 0 0 24px 8px rgba(168, 230, 30, .5), 0 16px 34px rgba(33, 65, 56, .55); }
}

/*
 * O FOCO do teclado na grade tem desenho PRÓPRIO, diferente do destaque: um contorno verde-escuro solto, por fora
 * do anel (8 px de afastamento + 3 de traço = 11, dentro do vão de 12 px da grade). Sem ele, a grade só tinha o
 * anel fino do navegador, e o destaque -- mais forte e na cor de foco do site -- parecia ser o foco: quem voltava
 * com Tab achava que ainda estava na foto vista (revisão).
 */
.mm-album-grade__item > a:focus-visible {
    outline: 3px solid var(--verde-escuro, #214138);
    outline-offset: 8px;
}
/*
 * Foto vista COM o foco do teclado: a elevação de 3 px sai. Com ela, o vão até a foto de cima caía para 9 px, e o
 * contorno (11 px) invadia 2 px da base dela (medido, 06/11/2026). O anel e o brilho continuam; só a elevação some.
 */
.mm-album-grade__item--vista > a:focus-visible { transform: none; }

/* ------------------------------------------------------------------ preferências do sistema */
@media (prefers-reduced-motion: reduce) {
    .mm-visor__botao,
    .mm-visor__foto,
    .mm-visor__miniatura { transition: none; }
    .mm-visor__carregando { animation: none; border-top-color: rgba(255, 255, 255, .7); }
}

/* alto contraste do Windows: bordas, foco e a miniatura atual ganham as cores do sistema */
@media (forced-colors: active) {
    .mm-visor__botao { border-color: ButtonText; }
    .mm-visor__botao:focus-visible,
    .mm-visor__miniatura:focus-visible { outline-color: Highlight; }
    .mm-visor__botao:disabled { border-color: GrayText; color: GrayText; opacity: 1; }
    .mm-visor__miniatura[aria-current="true"] { border-color: Highlight; }
    /*
     * As sombras somem neste modo: o destaque vira um contorno no ITEM (<li>), e o foco fica com o do link, mais
     * afastado -- os dois aparecem juntos na foto recém-fechada, que recebe o foco.
     */
    .mm-album-grade__item--vista { outline: 4px solid Highlight; outline-offset: 2px; }
    .mm-album-grade__item--vista > a { transform: none; }
    .mm-album-grade__item > a:focus-visible { outline-color: CanvasText; }
}