/* ============================================================
   LOOMAH MOSAICO — Frontend CSS v1.7.1
   ============================================================ */

/* ── Wrapper do shortcode ─────────────────────────────────────── */
.lmos-shortcode-wrap {
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Altura explícita → grid preenche totalmente */
.lmos-shortcode-wrap[style*="height"] .lmos-mosaico { height: 100%; }

/* ── Modo cobertura via shortcode (sem scroll) ────────────────── */
/* A altura vem do campo "Altura" aplicado inline pelo shortcode.
   height:100% funciona porque o pai (wrap) tem altura definida via inline style. */
.lmos-cobertura {
    width: 100%;
    overflow: hidden;
}
.lmos-cobertura-tela { height: 100vh; height: 100dvh; }

.lmos-cobertura .lmos-mosaico { height: 100%; }

/* Células preenchem a fila inteira; a proporção configurada é ignorada
   para garantir cobertura exata sem deixar buracos nem gerar scroll. */
.lmos-cobertura .lmos-formato-grade,
.lmos-cobertura .lmos-formato-circulo {
    height: 100%;
    grid-auto-rows: 1fr;
    align-content: stretch;
}
.lmos-cobertura .lmos-item {
    height: 100%;
    aspect-ratio: auto !important;
    min-height: 0;
}
.lmos-cobertura .lmos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lmos-cobertura .lmos-formato-masonry { height: 100%; }

/* ── Base do mosaico ──────────────────────────────────────────── */
.lmos-mosaico { width: 100%; box-sizing: border-box; }

/* ── Grade uniforme ────────────────────────────────────────────── */
.lmos-formato-grade {
    display: grid;
    grid-template-columns: repeat(var(--lmos-cols, 4), 1fr);
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: var(--lmos-gap, 8px);
}

.lmos-tamanho-min.lmos-formato-grade {
    grid-template-columns: repeat(auto-fit, minmax(var(--lmos-cell-min, 120px), 1fr));
}

.lmos-formato-grade .lmos-item {
    overflow: hidden;
    line-height: 0;
    min-height: 0;    /* permite células menores que o conteúdo */
}

.lmos-formato-grade .lmos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--lmos-radius, 4px);
}

/* Proporção explícita — quando sem altura forçada, o item rege a altura da linha */
.lmos-formato-grade .lmos-item[style*="--lmos-ratio"],
.lmos-formato-grade .lmos-item {
    aspect-ratio: var(--lmos-ratio, auto);
}

/* ── Masonry ───────────────────────────────────────────────────── */
.lmos-formato-masonry {
    column-count: var(--lmos-cols, 4);
    column-gap: var(--lmos-gap, 8px);
    overflow: hidden;
}

.lmos-tamanho-min.lmos-formato-masonry {
    column-width: var(--lmos-cell-min, 120px);
    column-count: auto;
}

.lmos-formato-masonry .lmos-item {
    break-inside: avoid;
    margin-bottom: var(--lmos-gap, 8px);
    line-height: 0;
    overflow: hidden;
}

.lmos-formato-masonry .lmos-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--lmos-radius, 4px);
}

/* ── Círculo ───────────────────────────────────────────────────── */
.lmos-formato-circulo {
    display: grid;
    grid-template-columns: repeat(var(--lmos-cols, 4), 1fr);
    grid-auto-rows: 1fr;
    align-content: stretch;
    gap: var(--lmos-gap, 8px);
}

.lmos-tamanho-min.lmos-formato-circulo {
    grid-template-columns: repeat(auto-fit, minmax(var(--lmos-cell-min, 120px), 1fr));
}

.lmos-formato-circulo .lmos-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
    min-height: 0;
}

.lmos-formato-circulo .lmos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Proporção nas células de grade ───────────────────────────── */
/* A variável --lmos-ratio é definida inline no wrapper;
   cada .lmos-item herda via CSS custom property cascade.
   aspect-ratio: auto quando proporção = 'auto'. */
.lmos-formato-grade .lmos-item,
.lmos-formato-masonry .lmos-item {
    aspect-ratio: var(--lmos-ratio, auto);
}

/* ── Transição base das imagens ───────────────────────────────── */
.lmos-item img {
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: transform, opacity;
}

/* ── Crossfade de duas camadas (formatos de célula uniforme) ───── */
/* Cada slot rotativo recebe duas <img> sobrepostas; a troca cruza
   a opacidade entre elas, sem nunca exibir vazio entre uma e outra. */
.lmos-xfade {
    position: relative;
    display: block;
}

.lmos-xfade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform-origin: center center;
    transition: opacity var(--lmos-fade, 850ms) cubic-bezier(0.37, 0, 0.34, 1),
                transform var(--lmos-fade, 850ms) cubic-bezier(0.37, 0, 0.34, 1);
}

.lmos-xfade img.lmos-ativo {
    opacity: 1;
}

/* A camada de cima (ativa) recebe o clique; a de baixo é inerte. */
.lmos-xfade img:not(.lmos-ativo) {
    pointer-events: none;
}

/* ── Modo background ───────────────────────────────────────────── */
.lmos-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Garante que o mosaico preencha 100% do wrapper no modo background */
.lmos-bg-wrapper .lmos-mosaico {
    width: 100%;
    height: 100%;
}

.lmos-bg-wrapper .lmos-formato-grade,
.lmos-bg-wrapper .lmos-formato-circulo {
    height: 100%;
    grid-auto-rows: 1fr;
    align-content: stretch;
}

.lmos-bg-wrapper .lmos-formato-masonry {
    height: 100%;
    overflow: hidden;
}

/* No fundo a grade preenche a altura (proporção ignorada, como na cobertura);
   o círculo mantém 1/1 herdado da base. As filas que não cabem na altura são
   ocultadas pelo JS (ajustarEstatico), evitando células em tira e transbordo. */
.lmos-bg-wrapper .lmos-item {
    height: 100%;
    min-height: 0;
}
.lmos-bg-wrapper .lmos-formato-grade .lmos-item {
    aspect-ratio: auto !important;
}
.lmos-bg-wrapper .lmos-formato-grade .lmos-item img,
.lmos-bg-wrapper .lmos-formato-circulo .lmos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lmos-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Animação: Hover Zoom ──────────────────────────────────────── */
.lmos-mosaico[data-lmos-acao] .lmos-item,
.lmos-animacao-hover-zoom .lmos-item { cursor: pointer; }

.lmos-mosaico[data-lmos-acao] .lmos-item:hover img,
.lmos-animacao-hover-zoom .lmos-item:hover img {
    transform: scale(1.05);
}

/* ── Animação: Deriva (sutil) ──────────────────────────────────── */
@keyframes lmos-drift {
    0%   { transform: scale(1.015) translate(0px,    0px); }
    30%  { transform: scale(1.025) translate(0.8px, -0.6px); }
    60%  { transform: scale(1.018) translate(-0.5px, 0.7px); }
    100% { transform: scale(1.015) translate(0px,    0px); }
}

.lmos-animacao-drift .lmos-item { overflow: hidden; }

.lmos-animacao-drift .lmos-item img {
    animation: lmos-drift 8s ease-in-out infinite;
    transform-origin: center center;
}

/* Ritmos variados para parecer orgânico */
.lmos-animacao-drift .lmos-item:nth-child(2n)  img { animation-duration: 10s;  animation-delay: -1.5s; }
.lmos-animacao-drift .lmos-item:nth-child(3n)  img { animation-duration: 7s;   animation-delay: -3.2s; }
.lmos-animacao-drift .lmos-item:nth-child(4n)  img { animation-duration: 11s;  animation-delay: -0.8s; }
.lmos-animacao-drift .lmos-item:nth-child(5n)  img { animation-duration: 9s;   animation-delay: -4.1s; }
.lmos-animacao-drift .lmos-item:nth-child(7n)  img { animation-duration: 12s;  animation-delay: -2.0s; }
.lmos-animacao-drift .lmos-item:nth-child(11n) img { animation-duration: 8.5s; animation-delay: -5.0s; }

/* ── Animação: Rotativo — troca (masonry, camada única) ────────── */
/* Masonry tem altura variável e não comporta sobreposição absoluta,
   então usa um dissolve suave: a foto esmaece parcialmente, troca no
   ponto baixo e reaparece. Não cai a zero, evitando "piscada". */
.lmos-animacao-rotativo.lmos-formato-masonry .lmos-item img {
    transition: opacity var(--lmos-fade, 800ms) cubic-bezier(0.37, 0, 0.34, 1),
                transform var(--lmos-fade, 800ms) cubic-bezier(0.37, 0, 0.34, 1);
}

.lmos-animacao-rotativo.lmos-formato-masonry .lmos-item--trocando img {
    opacity: 0.08;
}

.lmos-animacao-rotativo.lmos-formato-masonry.lmos-transicao-zoom .lmos-item--trocando img {
    transform: scale(1.05);
}

/* ── Lightbox ──────────────────────────────────────────────────── */
#lmos-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#lmos-lightbox.lmos-lb-ativo { opacity: 1; pointer-events: all; }
#lmos-lightbox img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
.lmos-lb-nome { position:absolute; bottom:32px; left:0; width:100%; text-align:center; color:#fff; font-size:15px; opacity:.8; }
.lmos-lb-fechar { position:absolute; top:20px; right:24px; color:rgba(255,255,255,.6); font-size:32px; cursor:pointer; background:none; border:none; padding:0; transition:color .15s; }
.lmos-lb-fechar:hover { color:#fff; }

/* ── Widget Elementor — modo cover ──────────────────────────────── */
/* A altura é definida pelos controles responsivos do Elementor via selectors.
   Sem position:absolute: height:100% funciona com pai de altura definida. */
.lmos-widget-cover {
    position: relative;          /* âncora para o overlay absoluto */
    width: 100%;
    overflow: hidden;
}
.lmos-widget-cover .lmos-mosaico { height: 100%; }
.lmos-widget-cover .lmos-formato-grade,
.lmos-widget-cover .lmos-formato-circulo {
    height: 100%;
    grid-auto-rows: 1fr;
    align-content: stretch;
}
.lmos-widget-cover .lmos-item {
    height: 100%;
    aspect-ratio: auto !important;
    min-height: 0;
}
.lmos-widget-cover .lmos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lmos-widget-cover .lmos-formato-masonry { height: 100%; overflow: hidden; }

/* Overlay do widget (cover): fica sobre o mosaico, abaixo do conteúdo da página.
   O CSS de cor/gradiente é gerado pelo Elementor via Group_Control_Background.
   No modo "fundo de seção" o overlay usa .lmos-overlay (já definido no bloco bg-wrapper). */
.lmos-widget-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Carregamento progressivo ────────────────────────────────────── */
/* O PHP sempre emite lmos-carregando; o JS remove a classe após as imagens
   do viewport estarem prontas, ativando a transição de entrada. */
.lmos-mosaico.lmos-carregando { opacity: 0; }
.lmos-mosaico { transition: opacity 0.5s ease; }

/* ── Vazio e erro ─────────────────────────────────────────────── */
.lmos-vazio, .lmos-erro { padding:20px; border-radius:6px; font-size:14px; }
.lmos-vazio { background:#f5f5f5; border:1px dashed #ccc; color:#666; text-align:center; }
.lmos-erro  { background:#fce9e6; border:1px solid #f0c0b8; color:#a33; }

/* ── Acessibilidade: movimento reduzido ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lmos-animacao-drift .lmos-item img { animation: none; }
    .lmos-xfade img,
    .lmos-item img { transition: opacity 0.2s linear; }
    .lmos-mosaico[data-lmos-acao] .lmos-item:hover img,
    .lmos-animacao-hover-zoom .lmos-item:hover img { transform: none; }
}