/* ═══════════════════════════════════════════════════════════════════
   rwe-gallery — CSS de la galería con lightbox
   R1: sacado del <style> inline (#uid scope). El más ramificado:
   3 layouts × 3 hovers + lightbox. Resuelto con clases modificadoras.

   El id del wrapper (#uid) y el del lightbox (#uid-lb, -lb-img, -lb-cap,
   -lb-counter) SE MANTIENEN porque el JS engancha por ellos. La clase fija
   .rwg-item también se mantiene (el JS hace '#uid .rwg-item[data-lb-index]').

   Clases modificadoras en el wrapper .rwe-gallery:
     LAYOUT:  .gl-grid / .gl-masonry / .gl-justified
     HOVER:   .gl-hover-zoom / .gl-hover-darken / .gl-hover-icon
   El lightbox (.rwe-gallery-lb) va SIEMPRE en el CSS (no molesta si no se usa).

   Variables atómicas (inyectadas en el wrapper):
     --gl-cols / --gl-cols-t / --gl-cols-m   columnas por breakpoint
     --gl-gap        separación px
     --gl-radius     radio px
     --gl-jheight    altura de fila justified px
     --gl-pb         padding-bottom del ratio (grid), % con unidad
     --gl-cursor     pointer/default según lightbox
   Variable en el lightbox:
     --gl-lb-bg      color de fondo del visor
   ═══════════════════════════════════════════════════════════════════ */

/* ── Contenedor: según layout ── */
.rwe-gallery.gl-grid{
    display:grid;
    grid-template-columns:repeat(var(--gl-cols,3),1fr);
    gap:var(--gl-gap,8px);
}
.rwe-gallery.gl-masonry{
    column-count:var(--gl-cols,3);
    column-gap:var(--gl-gap,8px);
}
.rwe-gallery.gl-justified{
    display:flex;
    flex-wrap:wrap;
    gap:var(--gl-gap,8px);
}
@media (max-width:1024px){
    .rwe-gallery.gl-grid{ grid-template-columns:repeat(var(--gl-cols-t,2),1fr); }
    .rwe-gallery.gl-masonry{ column-count:var(--gl-cols-t,2); }
}
@media (max-width:767px){
    .rwe-gallery.gl-grid{ grid-template-columns:repeat(var(--gl-cols-m,1),1fr); }
    .rwe-gallery.gl-masonry{ column-count:var(--gl-cols-m,1); }
}

/* ── Item: base común ── */
.rwe-gallery .rwg-item{
    overflow:hidden;
    border-radius:var(--gl-radius,6px);
    cursor:var(--gl-cursor,pointer);
    position:relative;
}
/* Item por layout */
.rwe-gallery.gl-masonry .rwg-item{ break-inside:avoid; margin-bottom:var(--gl-gap,8px); display:block; }
.rwe-gallery.gl-justified .rwg-item{ flex:1 0 auto; height:var(--gl-jheight,200px); }
.rwe-gallery.gl-grid .rwg-item{ padding-bottom:var(--gl-pb,100%); height:0; }

/* Imagen por layout */
.rwe-gallery.gl-grid .rwg-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rwe-gallery.gl-masonry .rwg-item img{ width:100%; height:auto; display:block; transition:transform .4s ease; }
.rwe-gallery.gl-justified .rwg-item img{ width:100%; height:var(--gl-jheight,200px); object-fit:cover; display:block; transition:transform .4s ease; }

/* ── Hover zoom ── */
.rwe-gallery.gl-hover-zoom .rwg-item:hover img{ transform:scale(1.06); }

/* ── Overlay (base) ── */
.rwe-gallery .rwg-item .rwg-overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,0);
    transition:background .3s;
    border-radius:var(--gl-radius,6px);
    display:flex; align-items:center; justify-content:center;
}
.rwe-gallery.gl-hover-darken .rwg-item:hover .rwg-overlay,
.rwe-gallery.gl-hover-icon   .rwg-item:hover .rwg-overlay{ background:rgba(0,0,0,0.35); }

.rwe-gallery .rwg-item .rwg-overlay svg{
    opacity:0; transform:scale(0.7);
    transition:opacity .25s, transform .25s;
    color:#fff;
}
.rwe-gallery.gl-hover-icon .rwg-item:hover .rwg-overlay svg{ opacity:1; transform:scale(1); }

/* ═══════════════ Lightbox (siempre presente) ═══════════════ */
.rwe-gallery-lb{
    display:none;
    position:fixed; inset:0; z-index:99999;
    background:var(--gl-lb-bg,rgba(0,0,0,0.92));
    align-items:center; justify-content:center;
    flex-direction:column;
    padding:20px;
    -webkit-tap-highlight-color:transparent;
}
.rwe-gallery-lb.open{ display:flex; }

.rwe-gallery-lb img{
    max-width:92vw; max-height:82vh;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 8px 40px rgba(0,0,0,0.6);
    user-select:none;
}
.rwe-gallery-lb .lb-caption{
    margin-top:14px;
    font-family:'Nunito Sans',sans-serif;
    font-size:14px; color:rgba(255,255,255,0.75);
    text-align:center; max-width:700px;
}
.rwe-gallery-lb .lb-close,
.rwe-gallery-lb .lb-prev,
.rwe-gallery-lb .lb-next{
    position:fixed;
    background:rgba(255,255,255,0.12);
    border:none; cursor:pointer; color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    transition:background .2s;
    -webkit-tap-highlight-color:transparent;
}
.rwe-gallery-lb .lb-close:hover,
.rwe-gallery-lb .lb-prev:hover,
.rwe-gallery-lb .lb-next:hover{ background:rgba(255,255,255,0.25); }

.rwe-gallery-lb .lb-close{ top:20px; right:20px; width:44px; height:44px; }
.rwe-gallery-lb .lb-prev{ left:16px; top:50%; transform:translateY(-50%); width:48px; height:48px; }
.rwe-gallery-lb .lb-next{ right:16px; top:50%; transform:translateY(-50%); width:48px; height:48px; }

.rwe-gallery-lb .lb-counter{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600;
    color:rgba(255,255,255,0.5); letter-spacing:2px;
}

@media (max-width:600px){
    .rwe-gallery-lb .lb-prev{ left:6px; width:40px; height:40px; }
    .rwe-gallery-lb .lb-next{ right:6px; width:40px; height:40px; }
}