/* ── Wrapper ───────────────────────────────────────────── */
.glr-wrap-684211f0 {
    width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   MASONRY  —  CSS column-count approach
   Images keep their natural aspect ratio and stack tightly
   into columns, exactly like a Pinterest/brick masonry.
══════════════════════════════════════════════════════════ */
.glr-masonry-684211f0 {
    column-count: 3;          /* default; overridden by Elementor selectors */
    column-gap: 8px;          /* default; overridden by gap control */
    width: 100%;
    box-sizing: border-box;
}

.glr-masonry-684211f0 .glr-item-684211f0 {
    break-inside: avoid;      /* CRITICAL: prevents image from splitting across columns */
    -webkit-column-break-inside: avoid;
    display: block;
    width: 100%;              /* fills the column width */
    margin-bottom: 8px;       /* default; overridden by gap control */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.glr-masonry-684211f0 .glr-item-684211f0 img {
    width: 100%;
    height: auto;             /* CRITICAL: natural height = true masonry stacking */
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* ══════════════════════════════════════════════════════════
   JUSTIFIED  —  flex rows, equal height per row
══════════════════════════════════════════════════════════ */
.glr-justified-684211f0 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;                 /* default; overridden by gap control */
    width: 100%;
    box-sizing: border-box;
}

.glr-justified-684211f0 .glr-item-684211f0 {
    flex: 1 1 auto;
    min-width: 100px;
    height: 250px;            /* default; overridden by row_height control */
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.glr-justified-684211f0 .glr-item-684211f0 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* ── Hover: Zoom ───────────────────────────────────────── */
.glr-item-684211f0.hover-zoom:hover img {
    transform: scale(1.07);
}

/* ── Hover: Darken ─────────────────────────────────────── */
.glr-item-684211f0.hover-darken::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.glr-item-684211f0.hover-darken:hover::after {
    opacity: 1;
}

/* ── Responsive defaults ───────────────────────────────── */
@media (max-width: 1024px) {
    .glr-masonry-684211f0 { column-count: 2; }
}
@media (max-width: 767px) {
    .glr-masonry-684211f0 { column-count: 1; }
    .glr-justified-684211f0 .glr-item-684211f0 { height: 180px; }
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════ */
.glr-lightbox-684211f0 {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.admin-bar .glr-lightbox-684211f0 {
    top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .glr-lightbox-684211f0 { top: 46px; }
}
.glr-lightbox-684211f0.glr-lb-open {
    opacity: 1;
    visibility: visible;
}
.glr-lb-inner-684211f0 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 92vh;
}
.glr-lb-inner-684211f0 img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    display: block;
}
.glr-lb-close-684211f0 {
    position: absolute;
    top: -48px;
    right: 0;
    width: 36px;
    height: 36px;
    background: none;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}
.glr-lb-close-684211f0:hover { background: rgba(255,255,255,0.15); }
.glr-lb-arrow-684211f0 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
    line-height: 1;
}
.glr-lb-arrow-684211f0:hover { background: rgba(255,255,255,0.3); }
.glr-lb-prev-684211f0 { left: -64px; }
.glr-lb-next-684211f0 { right: -64px; }
@media (max-width: 600px) {
    .glr-lb-prev-684211f0 { left: 6px; }
    .glr-lb-next-684211f0 { right: 6px; }
}