/* ==========================================================
   Imàtica Suite — Masonry Gallery
   Layout: CSS columns — gaps are pure CSS, no JS rounding.
   column-gap (horizontal) == margin-bottom (vertical) always.
   ========================================================== */

/* ----------------------------------------------------------
   WRAPPER
   ---------------------------------------------------------- */
.emlb-msnry-widget {
    width: 100%;
}

/* ----------------------------------------------------------
   FILTER PILLS
   ---------------------------------------------------------- */
.emlb-msnry-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.emlb-msnry-btn {
    display: inline-block;
    padding: 6px 16px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, border-color .22s ease;
    line-height: 1.4;
}

/* Active/hover state — Elementor color controls override this */
.emlb-msnry-btn.active,
.emlb-msnry-btn:hover {
    background-color: #1d2327;
    border-color: #1d2327;
    color: #fff;
}

/* ----------------------------------------------------------
   MASONRY GRID — CSS columns
   Gaps are 100% CSS: column-gap (H) == margin-bottom (V).
   Elementor responsive control sets `columns: N;`.
   ---------------------------------------------------------- */
.emlb-msnry-grid {
    columns: 3;
    column-gap: var( --emlb-msnry-gap, 12px );
    /* No display:grid, no grid-auto-rows, no JS math */
}

/* ----------------------------------------------------------
   ITEM
   ---------------------------------------------------------- */
.emlb-msnry-item {
    display: block;          /* required inside CSS columns */
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var( --emlb-msnry-gap, 12px );
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: opacity .28s ease, transform .28s ease;
}

/* Fade-out while filtering */
.emlb-msnry-item.emlb-msnry-hiding {
    opacity: 0;
    transform: scale( 0.95 );
    pointer-events: none;
}

/* Removed from flow after transition completes */
.emlb-msnry-item.emlb-msnry-hidden {
    display: none;
}

.emlb-msnry-item img {
    display: block;
    width: 100%;
    height: auto;          /* natural aspect ratio — no JS needed */
    transition: transform .4s ease, filter .3s ease;
}

/* ----------------------------------------------------------
   HOVER EFFECTS
   ---------------------------------------------------------- */

/* Zoom */
.emlb-hover-zoom .emlb-msnry-item:hover img {
    transform: scale( 1.07 );
}

/* Darken */
.emlb-hover-darken .emlb-msnry-item .emlb-hover-overlay,
.emlb-hover-icon   .emlb-msnry-item .emlb-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba( 0, 0, 0, 0 );
    transition: background .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emlb-hover-darken .emlb-msnry-item:hover .emlb-hover-overlay,
.emlb-hover-icon   .emlb-msnry-item:hover .emlb-hover-overlay {
    background: rgba( 0, 0, 0, .38 );
}

/* Icon */
.emlb-hover-icon .emlb-msnry-item .emlb-zoom-icon {
    font-size: 28px;
    opacity: 0;
    transform: scale( 0.7 );
    transition: opacity .3s ease, transform .3s ease;
}

.emlb-hover-icon .emlb-msnry-item:hover .emlb-zoom-icon {
    opacity: 1;
    transform: scale( 1 );
}

/* ----------------------------------------------------------
   BALANCE COLUMNS — flexbox wrappers (JS switches to display:flex)
   ---------------------------------------------------------- */
.emlb-msnry-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
   EMPTY / PLACEHOLDER
   ---------------------------------------------------------- */
.emlb-msnry-placeholder {
    padding: 32px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 8px;
    color: #999;
}