/* Mana Auto Gallery CSS */

.mana-lightbox {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.mana-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(66, 65, 65, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.mana-gallery-item:hover .mana-overlay {
    opacity: 1;
}

.glightbox-clean .gclose {
        padding: 10px !important;
		width: 65px !important;
		height: 45px !important;
    }

/* Mobile - Overlay sempre visível e setas customizadas */
@media (max-width: 768px) {
    .mana-overlay {
        opacity: 1;
    }
    
    /* Customizar as setas do GLightbox no mobile */
    .glightbox-clean .gprev {
        position: absolute !important;
        top: 50% !important;
        left: 15px !important;
        width: 10px !important;
        height: 50px !important;
        padding: 0px 20px !important;
    }
    
    .glightbox-clean .gnext {
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        width: 10px !important;
        height: 50px !important;
        padding: 0px 20px !important;
    }

    .glightbox-clean .gclose {
        padding: 10px !important;
    }
}

/* Variações de grid */
.mana-gallery.columns-1 { grid-template-columns: 1fr; }
.mana-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.mana-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.mana-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.mana-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }

/* Gaps personalizados */
.mana-gallery.gap-small { gap: 8px; }
.mana-gallery.gap-medium { gap: 15px; }
.mana-gallery.gap-large { gap: 25px; }

/* Sem bordas arredondadas */
.mana-gallery.no-radius .mana-gallery-item {
    border-radius: 0;
}

/* Efeito fade no hover */
.mana-gallery.hover-fade .mana-gallery-item:hover img {
    opacity: 0.8;
    transform: none;
}

/* Masonry layout (opcional) */
.mana-gallery.masonry {
    display: block;
    column-count: 3;
    column-gap: 15px;
}

.mana-gallery.masonry .mana-gallery-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    break-inside: avoid;
}

@media (max-width: 768px) {
    .mana-gallery.masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .mana-gallery.masonry {
        column-count: 1;
    }
}