/* ============================================================
   Souper Image Bento — Frontend Styles  v2.0.0
   ============================================================ */

.sib-gallery {
    display: grid;
    grid-template-columns: repeat(var(--sib-cols, 3), 1fr);
    grid-auto-rows: var(--sib-row, 200px);
    gap: var(--sib-gap, 12px);
}

/* ── Bento size classes ───────────────────────────────────── */
.sib-s1 { grid-column: span 1; grid-row: span 1; }
.sib-s2 { grid-column: span 1; grid-row: span 2; }
.sib-s3 { grid-column: span 2; grid-row: span 1; }
.sib-s4 { grid-column: span 2; grid-row: span 2; }
.sib-s5 { grid-column: span 1; grid-row: span 3; }
.sib-s6 { grid-column: span 2; grid-row: span 3; }
.sib-uniform .sib-item { grid-column: span 1 !important; grid-row: span 1 !important; }

/* ── Item base ────────────────────────────────────────────── */
.sib-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--sib-radius, 12px);
}
.sib-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sib-item img[src$=".svg"] { object-fit: contain; padding: 6px; }
.sib-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ── Hover overlay ────────────────────────────────────────── */
.sib-overlay {
    position: absolute;
    inset: 0;
    background: var(--sib-overlay, rgba(0,0,0,0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.sib-item:hover .sib-overlay { opacity: 1; }

/* ── Hover zoom ───────────────────────────────────────────── */
.sib-zoom img { transition: transform 0.35s ease; }
.sib-zoom:hover img { transform: scale(1.05); }
.sib-nozoom img,
.sib-nozoom:hover img { transform: none !important; transition: none !important; }

/* ── Suppress download buttons ───────────────────────────── */
.sib-no-dl .souper-download-overlay,
.sib-no-dl .souper-download-btn,
.sib-no-dl .souper-dl-icon,
.sib-no-dl .souper-dl-label { display: none !important; }

.sib-empty { padding: 20px; color: #888; font-style: italic; }

@media (max-width: 768px) {
    .sib-gallery { grid-auto-rows: 130px; }
    .sib-s3, .sib-s4, .sib-s6 { grid-column: span 1; }
}
@media (max-width: 480px) {
    .sib-gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 110px; }
    .sib-s1,.sib-s2,.sib-s3,.sib-s4,.sib-s5,.sib-s6 { grid-column: span 1; grid-row: span 1; }
}

/* ── Lightbox trigger — invisible sibling overlay ─────────── */
.sib-lb-trigger {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: zoom-in;
    display: block;
    text-decoration: none;
}

/* ── GLightbox white background, no shadow ────────────────── */
.glightbox-container .goverlay {
    background: #fff !important;
}
.glightbox-container .gslide-media,
.glightbox-container .ginner-container {
    background: #fff !important;
}
.glightbox-clean .gslide-media {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}