/* ========================================
   RESET DEL MÓDULO PADRE
======================================== */

.masonry_sub {
    padding: 0 !important;
}

.masonry_sub .et_pb_module_inner {
    overflow: visible !important;
}

/* ========================================
   MASONRY GALLERY – BASE
======================================== */

.masonry-sub-wrapper {
    width: 100%;
}

/* ======================================================
   GRID 
====================================================== */

.masonry-sub-grid {
    width: 100%;
    column-gap: 15px;
}

/* ========================================
   ITEM (controlado por Item Styling del padre)
======================================== */

.masonry-sub-item {
    position: relative;
    overflow: hidden !important;
    margin-bottom: 15px;

    /* Controladores del padre */
    border-style: solid;
    border-width: var(--ms-item-border-width, 0px);
    border-color: var(--ms-item-border-color, transparent);
    border-radius: var(--ms-item-border-radius, 0px);

    /* 🔥 Fuerza a que imagen + overlay respeten EXACTAMENTE la forma */
    clip-path: inset(0 round var(--ms-item-border-radius, 0px));
}

.masonry-sub-img-wrap {
    overflow: hidden !important;
    border-radius: inherit !important;
}

.masonry-sub-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    border-radius: inherit !important;
}

/* ========================================
   GLOBAL SMOOTH TRANSITIONS
======================================== */

.masonry-sub-item,
.masonry-sub-image,
.masonry-sub-overlay {
    transition:
        opacity .6s cubic-bezier(0.25, 0.1, 0.25, 1),
        transform .6s cubic-bezier(0.25, 0.1, 0.25, 1),
        filter .6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* ========================================
   OVERLAY
======================================== */

.masonry-sub-overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    background-color: var(--overlay-color, rgba(0,0,0,.35));
    z-index: 5;
    border-radius: inherit !important;
}

.masonry-sub-item:hover .masonry-sub-overlay {
    opacity: 1;
}

/* ========================================
   FIX – evitar opacity heredado del tema
======================================== */

.masonry-sub-link-lightbox,
.masonry-sub-link-lightbox:hover {
    opacity: 1 !important;
}

/* ========================================
   TEXT POSITION
======================================== */

.masonry-sub-wrapper.text-pos-bottom-left   .masonry-sub-overlay { justify-content: flex-end; align-items: flex-start; text-align: left; }
.masonry-sub-wrapper.text-pos-bottom-center .masonry-sub-overlay { justify-content: flex-end; align-items: center;     text-align: center; }
.masonry-sub-wrapper.text-pos-bottom-right  .masonry-sub-overlay { justify-content: flex-end; align-items: flex-end;   text-align: right; }

.masonry-sub-wrapper.text-pos-center-left   .masonry-sub-overlay { justify-content: center; align-items: flex-start; text-align: left; }
.masonry-sub-wrapper.text-pos-center        .masonry-sub-overlay { justify-content: center; align-items: center;     text-align: center; }
.masonry-sub-wrapper.text-pos-center-right  .masonry-sub-overlay { justify-content: center; align-items: flex-end;   text-align: right; }

.masonry-sub-wrapper.text-pos-top-left      .masonry-sub-overlay { justify-content: flex-start; align-items: flex-start; text-align: left; }
.masonry-sub-wrapper.text-pos-top-center    .masonry-sub-overlay { justify-content: flex-start; align-items: center;     text-align: center; }
.masonry-sub-wrapper.text-pos-top-right     .masonry-sub-overlay { justify-content: flex-start; align-items: flex-end;   text-align: right; }

/* ========================================
   EFFECTS
======================================== */

/* Zoom In */
.masonry-sub-wrapper.effect-zoom_in.effect-mode-on_hover .masonry-sub-item:hover .masonry-sub-image {
    transform: scale(1.08);
}
.masonry-sub-wrapper.effect-zoom_in.effect-mode-invert .masonry-sub-image {
    transform: scale(1.08);
}

/* Zoom Out */
.masonry-sub-wrapper.effect-zoom_out.effect-mode-on_hover .masonry-sub-item:hover .masonry-sub-image {
    transform: scale(0.92);
}
.masonry-sub-wrapper.effect-zoom_out.effect-mode-invert .masonry-sub-image {
    transform: scale(0.92);
}

/* Blur (1px) */
.masonry-sub-wrapper.effect-blur.effect-mode-on_hover .masonry-sub-item:hover .masonry-sub-image {
    filter: blur(1px);
}
.masonry-sub-wrapper.effect-blur.effect-mode-invert .masonry-sub-image {
    filter: blur(1px);
}

/* Grayscale */
.masonry-sub-wrapper.effect-grayscale.effect-mode-on_hover .masonry-sub-item:hover .masonry-sub-image {
    filter: grayscale(50%);
}
.masonry-sub-wrapper.effect-grayscale.effect-mode-invert .masonry-sub-image {
    filter: grayscale(50%);
}
.masonry-sub-wrapper.effect-grayscale.effect-mode-invert .masonry-sub-item:hover .masonry-sub-image {
    filter: none !important;
}

/* ========================================
   BOX GRID MODE + RATIOS
======================================== */

.masonry-sub-wrapper.layout-mode-box .masonry-sub-img-wrap {
    width: 100%;
}

.masonry-sub-wrapper.layout-mode-box.ratio-original .masonry-sub-img-wrap {
    aspect-ratio: auto;
}

.masonry-sub-wrapper.layout-mode-box:not(.ratio-original) .masonry-sub-img-wrap {
    width: 100%;
}

.masonry-sub-wrapper.layout-mode-box:not(.ratio-original) .masonry-sub-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.masonry-sub-wrapper.layout-mode-box.ratio-1_1  .masonry-sub-img-wrap { aspect-ratio: 1/1; }
.masonry-sub-wrapper.layout-mode-box.ratio-4_3  .masonry-sub-img-wrap { aspect-ratio: 4/3; }
.masonry-sub-wrapper.layout-mode-box.ratio-3_2  .masonry-sub-img-wrap { aspect-ratio: 3/2; }
.masonry-sub-wrapper.layout-mode-box.ratio-16_9 .masonry-sub-img-wrap { aspect-ratio: 16/9; }
.masonry-sub-wrapper.layout-mode-box.ratio-2_1  .masonry-sub-img-wrap { aspect-ratio: 2/1; }

/* ========================================
   RESPONSIVE COLUMNS
======================================== */

.masonry-sub-wrapper[data-columns="1"] .masonry-sub-grid { column-count: 1; }
.masonry-sub-wrapper[data-columns="2"] .masonry-sub-grid { column-count: 2; }
.masonry-sub-wrapper[data-columns="3"] .masonry-sub-grid { column-count: 3; }
.masonry-sub-wrapper[data-columns="4"] .masonry-sub-grid { column-count: 4; }
.masonry-sub-wrapper[data-columns="5"] .masonry-sub-grid { column-count: 5; }
.masonry-sub-wrapper[data-columns="6"] .masonry-sub-grid { column-count: 6; }

@media (max-width: 980px) {
    .masonry-sub-grid { column-count: 2 !important; }
}

@media (max-width: 600px) {
    .masonry-sub-grid { column-count: 1 !important; }
}

/* ========================================
   LIGHTBOX WIDTH 85%
======================================== */

.masonry-sub-mfp img.mfp-img {
    max-width: 85% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.masonry-sub-mfp .mfp-bottom-bar {
    width: 85% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
}