/* =====================================================================
 * LABMU - Estilos da galeria com lightbox
 * Adicionado por: PACOTE_00_GALERIA_LIGHTBOX
 *
 * Substitui o sistema antigo .view-imagem (que continua no DOM mas
 * inerte). Novo padrao: GLightbox + thumbnails dimensionados.
 *
 * Cobre 4 categorias:
 *   - skins   (thumbnail 3:4 + lightbox com carrossel)
 *   - downloads, ebook, curso (icones de olho + lightbox)
 * =====================================================================
 */


/* === Skin thumbnail (cards de skins) ============================== */

.lb-skin-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.03);
}

.lb-skin-thumb .lb-skin-link {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    text-decoration: none;
}

.lb-skin-thumb .lb-skin-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.lb-skin-thumb .lb-skin-link:hover .lb-skin-img {
    transform: scale(1.05);
}

.lb-skin-thumb .lb-skin-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    line-height: 1.4;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.lb-skin-thumb .lb-skin-empty {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #ccc;
    font-size: 3rem;
    border-radius: 7px;
}

/* Fallback para browsers MUITO antigos sem suporte a aspect-ratio.
   (Safari < 15, Chrome < 88, Firefox < 89). Mantido por seguranca. */
@supports not (aspect-ratio: 3 / 4) {
    .lb-skin-thumb .lb-skin-link,
    .lb-skin-thumb .lb-skin-empty {
        height: 0;
        padding-top: 133.33%;
        position: relative;
    }
    .lb-skin-thumb .lb-skin-link > .lb-skin-img,
    .lb-skin-thumb .lb-skin-empty > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


/* === Icone de olho clicavel (downloads / ebook / curso) ============ */
/* Mantem compatibilidade visual com o icon-size existente,
   apenas troca o trigger de .imagem-preview para .glightbox.       */

.icon-size a.glightbox {
    display: inline-block;
    margin: 0 4px;
    color: inherit;
    transition: transform 0.2s ease, color 0.2s ease;
    cursor: zoom-in;
}

.icon-size a.glightbox:hover {
    transform: scale(1.15);
    color: #ea183f;
}


/* === Pequenos ajustes no tema do GLightbox ========================= */
/* GLightbox usa "clean" theme por padrao. Ajustamos so a tipografia
   pra combinar com o resto do site.                                 */

.glightbox-clean .gslide-title {
    font-family: inherit;
    font-weight: 600;
}

.glightbox-clean .gslide-description {
    font-family: inherit;
}

/* No mobile, da um respiro maior nas setas */
@media (max-width: 576px) {
    .gnext, .gprev {
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 50% !important;
    }
}


/* =====================================================================
 * HOTFIX_DESKTOP_ZOOM (adicionado posteriormente ao pacote base)
 *
 * Resolve 2 problemas observados no DESKTOP apos o pacote base:
 *   1. Imagens grandes (downloads/ebook/curso) estourando o viewport
 *      e sendo cortadas no desktop. Mobile nao tem o problema porque
 *      o viewport mobile e menor que a imagem por design.
 *   2. Imagens pequenas (skins) ficam centralizadas mas sem como dar
 *      zoom para ver detalhes - mobile usa pinch-zoom nativo, desktop
 *      precisa de click-to-zoom (implementado em JS no layout).
 * ===================================================================== */

/* (1) CONSTRAIN: toda imagem do lightbox respeita o viewport.
   max 92vw/92vh deixa uma margem para nao colar nas bordas e nem
   ficar atras das setas de navegacao. */
.glightbox-container .gslide-image img {
    max-width: 92vw !important;
    max-height: 92vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* (2) CLICK-TO-ZOOM: apenas em dispositivos com mouse real.
   @media (hover: hover) and (pointer: fine) cobre desktop com
   mouse/trackpad e exclui mobile/tablets touch. */
@media (hover: hover) and (pointer: fine) {
    .glightbox-container .gslide-image img {
        cursor: zoom-in;
        transition: transform 0.3s ease;
        transform-origin: 50% 50%;
    }
    .glightbox-container .gslide-image img.lb-zoomed {
        cursor: zoom-out;
    }
}