/* =====================================================================
 * LABMU - Estilos da galeria com lightbox
 *
 * Origem: PACOTE_00_GALERIA_LIGHTBOX (GLightbox)
 *         + HOTFIX_DESKTOP_ZOOM
 * Atual:  PACOTE_00_GALERIA_PHOTOSWIPE (PhotoSwipe v5)
 *
 * O sistema antigo .view-imagem em style.css continua presente mas
 * inerte (HTML nao usa mais). Limpeza fica para uma onda futura.
 *
 * Cobre 4 categorias:
 *   - skins   (thumbnail 3:4 + PhotoSwipe com pan/zoom/wheel)
 *   - downloads, ebook, curso (icones de olho + PhotoSwipe)
 * =====================================================================
 */


/* === 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) ============ */
/* Substitui o seletor antigo .icon-size a.glightbox por um seletor
   baseado em data-pswp-link, que e o atributo do PhotoSwipe v5.    */

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

.icon-size a[data-pswp-link]:hover {
    transform: scale(1.15);
    color: #ea183f;
}


/* === PhotoSwipe v5 - Caption custom ================================ */
/* O JS de inicializacao registra um UI element chamado "custom-caption"
   que recebe o texto de data-pswp-caption do <a> ativo. Esta CSS
   posiciona/estiliza esse caption sobre o overlay do lightbox. */

.pswp__custom-caption {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    backdrop-filter: blur(6px);
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.pswp__custom-caption:empty {
    display: none;
}

@media (max-width: 576px) {
    .pswp__custom-caption {
        bottom: 60px;
        font-size: 12px;
        padding: 6px 12px;
        max-width: 90vw;
    }
}


/* === PhotoSwipe v5 - ajustes finos do tema ========================= */
/* Tipografia das UI controls combinando com o site */

.pswp__counter {
    font-family: inherit !important;
    font-weight: 600 !important;
}

/* Cursor no overlay do lightbox - quando nao e zoom, e grab/grabbing
   pra dica visual de "voce pode arrastar". Desktop somente. */
@media (hover: hover) and (pointer: fine) {
    .pswp__zoom-wrap {
        cursor: grab;
    }
    .pswp--zoom-allowed.pswp--dragging .pswp__zoom-wrap,
    .pswp--zoomed-in .pswp__zoom-wrap {
        cursor: grabbing;
    }
}
                                                                                                                                                                                                                                                                                                                                                                                                                                   