/* Main Container */
.eg-gallery-container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* Flex Grid Layout (Default) */
.eg-layout-grid {
    display: flex;
    flex-wrap: wrap;
}

/* Columns handled dynamically via Elementor controls */
.eg-gallery-item {
    box-sizing: border-box;
    display: block;
    /* Visible by default */
}

/* Item Inner */
.eg-gallery-item-inner {
    height: 100%;
    overflow: hidden;
}

.eg-gallery-image {
    width: 100%;
    height: 100%;
    line-height: 0;
    overflow: hidden;
    /* Vital for border-radius */
}

.eg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* ... existing code ... */

/* Scrollable Filters Mobile (Only triggers on screens < 768px when class is present) */
@media (max-width: 767px) {
    .eg-gallery-filters-wrapper.eg-scrollable-mobile {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
        padding-bottom: 10px;
        /* Space for scrollbar */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #b0b0b0 transparent;
        /* Firefox */
        touch-action: pan-x;
    }

    /* Styled Scrollbar for Webkit */
    .eg-gallery-filters-wrapper.eg-scrollable-mobile::-webkit-scrollbar {
        height: 4px;
        display: block;
    }

    .eg-gallery-filters-wrapper.eg-scrollable-mobile::-webkit-scrollbar-track {
        background: transparent;
    }

    .eg-gallery-filters-wrapper.eg-scrollable-mobile::-webkit-scrollbar-thumb {
        background-color: #b0b0b0;
        border-radius: 10px;
    }

    .eg-gallery-filters-wrapper.eg-scrollable-mobile .eg-gallery-filters {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 100%;
        gap: 10px;
    }

    /* Ensure buttons don't shrink */
    .eg-gallery-filters-wrapper.eg-scrollable-mobile .eg-gallery-filter-btn {
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
    }
}

.eg-gallery-image:hover img {
    transform: scale(1.05);
    /* Zoom effect */
}

/* Filters */
.eg-gallery-filters-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.eg-gallery-filters {
    display: inline-flex;
    /* Ajuste al contenido */
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    /* margin-bottom movido al wrapper */
}

.eg-gallery-filter-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-size: 14px;
    outline: none;
}

.eg-gallery-filter-btn:hover,
.eg-gallery-filter-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Hidden items for filter */
.eg-gallery-item.eg-hidden {
    display: none;
}

/* Carousel */
/* Fix Masonry Layout: Restore natural height */
.eg-layout-masonry .eg-gallery-image {
    height: auto !important;
}

.eg-layout-masonry .eg-gallery-image img {
    height: auto !important;
    object-fit: contain !important;
    /* Disable cover for masonry */
}

/* Fix Carousel Layout */
.eg-layout-carousel .eg-gallery-swiper {
    width: 100%;
}

.eg-layout-carousel .eg-gallery-item {
    width: 100%;
    /* Ensure slide fills container */
}