/* =========================================
   SRR Galerie Foto – Clasic (WP Gallery)
   Layout mozaic + Lightbox
   ========================================= */

/* ====== LAYOUT GALERIE CLASICĂ WP ====== */

.gallery {
    --srr-gap: 8px;
    --srr-columns: 3;          /* fallback desktop */
    --srr-tile-ratio: 3 / 4;   /* ok pentru postere (portret) */

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

/* Respectă setarea “Coloane” (gallery-columns-X) */
.gallery.gallery-columns-1 { --srr-columns: 1; }
.gallery.gallery-columns-2 { --srr-columns: 2; }
.gallery.gallery-columns-3 { --srr-columns: 3; }
.gallery.gallery-columns-4 { --srr-columns: 4; }
.gallery.gallery-columns-5 { --srr-columns: 5; }
.gallery.gallery-columns-6 { --srr-columns: 6; }
.gallery.gallery-columns-7 { --srr-columns: 7; }
.gallery.gallery-columns-8 { --srr-columns: 8; }
.gallery.gallery-columns-9 { --srr-columns: 9; }

/* “br clear both” introdus de WP clasic – îl neutralizăm ca să nu spargă flex-ul */
.gallery > br[style*="clear"] {
    display: none !important;
}

/* Tile-ul fiecărui item (în markup e <dl class="gallery-item">) */
.gallery .gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;

    /* WP clasic folosește uneori float/inline-block + width: xx% */
    float: none !important;
    display: block !important;
    width: auto !important;

    flex: 0 0 calc(
            (100% - (var(--srr-columns) - 1) * var(--srr-gap)) / var(--srr-columns)
    );

    aspect-ratio: var(--srr-tile-ratio);
}

/* <dt class="gallery-icon portrait"> */
.gallery .gallery-icon {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 100%;
    height: 100%;
}

/* Link-ul ocupă tot tile-ul */
.gallery .gallery-icon a {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery .gallery-icon img {
    display: block;
    width: 100% !important;
    height: auto !important;     /* păstrează proporțiile */
    max-width: 100% !important;
    object-fit: initial !important; /* nu crop, nu contain, nu cover */
}

/* Caption-ul poate rupe mozaicul; îl ascundem */
.gallery .gallery-caption {
    display: none;
}

/* ====== Mobil / tabletă ====== */
@media (max-width: 768px) {
    .gallery {
        width: 99%;
        --srr-columns: 2; /* default mobil */
    }

    /* dacă ai setat 1 coloană, respectăm */
    .gallery.gallery-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;
    }
}

/* =========================================
   TUNING: fără chenar + aliniere sus
   ========================================= */

/* Scoate chenarul gri / outline / shadow (teme diferite pun în locuri diferite) */
.gallery .gallery-icon a,
.gallery .gallery-icon img,
.gallery .gallery-item img {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Unele teme pun background pe link */
.gallery .gallery-icon a {
    background: transparent !important;
}

/* Aliniere sus: dacă tema face centrare verticală, o anulăm */
.gallery .gallery-item,
.gallery .gallery-icon,
.gallery .gallery-icon a {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/*
 * IMPORTANT:
 * Dacă vrei ca imaginile să fie toate “aliniate sus” dar să NU fie tăiate,
 * folosește contain + height:auto (nu tile uniform).
 */
.gallery .gallery-icon img {
    height: auto !important;
    object-fit: initial !important; /* anulăm contain/cover dacă era setat */
}

/* Dacă tema centrează imaginile cu vertical-align, îl fixăm */
.gallery img {
    vertical-align: top !important;
}

/* (Opțional) Spațiu uniform între item-uri, dacă tema bagă padding/margin */
.gallery .gallery-item {
    padding: 0 !important;
}


.gallery .gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;

    float: none !important;
    display: block !important;
    width: auto !important;

    flex: 0 0 calc(
            (100% - (var(--srr-columns) - 1) * var(--srr-gap)) / var(--srr-columns)
    );

    /* IMPORTANT: fără aspect-ratio => nu mai forțăm înălțime fixă */
}

.gallery .gallery-icon img {
    display: block;
    width: 100% !important;
    height: auto !important;     /* păstrează proporțiile */
    max-width: 100% !important;
    object-fit: initial !important; /* nu crop, nu contain, nu cover */
}