/* =========================================
   SRR Galerie Foto – Blocuri Gutenberg
   Layout mozaic + Lightbox
   ========================================= */

/* ====== LAYOUT GALERIE GUTENBERG ====== */

/* Container galerie – flex, mozaic */
.wp-block-gallery.is-layout-flex {
    --srr-gap: 8px;
    --srr-columns: 3; /* fallback: 3 coloane pe desktop */

    display: flex;
    flex-wrap: wrap;
    gap: var(--srr-gap);
    margin: 1.5em 0;
    padding: 0;
}

/* Setăm nr. de coloane în funcție de clasa columns-X (pusă de Gutenberg) */
.wp-block-gallery.is-layout-flex.columns-1 { --srr-columns: 1; }
.wp-block-gallery.is-layout-flex.columns-2 { --srr-columns: 2; }
.wp-block-gallery.is-layout-flex.columns-3 { --srr-columns: 3; }
.wp-block-gallery.is-layout-flex.columns-4 { --srr-columns: 4; }
.wp-block-gallery.is-layout-flex.columns-5 { --srr-columns: 5; }
.wp-block-gallery.is-layout-flex.columns-6 { --srr-columns: 6; }
.wp-block-gallery.is-layout-flex.columns-7 { --srr-columns: 7; }
.wp-block-gallery.is-layout-flex.columns-8 { --srr-columns: 8; }

/* Tile-ul fiecărei imagini */
.wp-block-gallery.is-layout-flex .wp-block-image {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    flex: 0 0 calc(100% / var(--srr-columns) - var(--srr-gap));
}

/* Imaginile ocupă complet tile-ul */
.wp-block-gallery.is-layout-flex .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====== VARIANTĂ INLINE (scroll orizontal) – opțional
   Adaugi clasa „gallery-inline” galeriei din editor dacă vrei asta ====== */

.wp-block-gallery.gallery-inline.is-layout-flex {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.wp-block-gallery.gallery-inline.is-layout-flex .wp-block-image {
    flex: 0 0 auto;
    width: 180px;
}

/* ====== SPAȚIU + COLOANE PE MOBIL / TABLETĂ ====== */

/* până în 768px: 2 coloane implicit + spațiu lateral */
@media (max-width: 768px) {
    .wp-block-gallery.is-layout-flex {
        /*margin-left: 16px;*/
        /*margin-right: 16px;*/
        width: 99%;
        --srr-columns: 2;   /* 2 coloane pe mobil + tabletă */
    }

    /* dacă autorul a pus columns-1 în editor, respectăm 1 coloană */
    .wp-block-gallery.is-layout-flex.columns-1 {
        --srr-columns: 1;
    }
}

/* =========================================
   LIGHTBOX
   ========================================= */

.rr-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.rr-lightbox-overlay.is-visible {
    display: flex;
}

.rr-lightbox-inner {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

.rr-lightbox-image {
    max-width: 100%;
    max-height: 100vh;
    display: block;
}

/* Butoane navigație */

.rr-lightbox-prev,
.rr-lightbox-next,
.rr-lightbox-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.rr-lightbox-prev {
    left: -48px;
}

.rr-lightbox-next {
    right: -48px;
}

.rr-lightbox-close {
    top: -40px;
    right: 0;
    transform: none;
    font-size: 24px;
}

/* Blochează scrollul paginii când e deschis lightbox-ul */
body.rr-lightbox-open {
    overflow: hidden;
}

/* ===== Fix mobil pentru butoane ===== */

@media (max-width: 768px) {
    .rr-lightbox-prev,
    .rr-lightbox-next {
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 10px;
        font-size: 18px;
    }

    .rr-lightbox-prev {
        left: 8px;
    }

    .rr-lightbox-next {
        right: 8px;
    }

    .rr-lightbox-close {
        top: 8px;
        right: 8px;
        font-size: 22px;
        background: rgba(0,0,0,0.7);
        padding: 4px 8px;
    }
}