/* Mosaico de fotos con lightbox: lo usan galeria.html (fotos de un encuentro)
   y viajes.html (fotos de un país del blog de viajes). Hereda estilo.css e
   inscripcion.css (nav, footer y el estado "vacío" ya están definidos ahí). */

.gal-ev-head{ max-width:64ch; padding-bottom:clamp(20px,3vw,32px); border-bottom:1px solid var(--line); }
.gal-ev-head h1{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin:8px 0 0; }
.gal-ev-head .sub{ color:var(--ink-2); margin:12px 0 0; }

/* Columnas al estilo mosaico: las fotos vienen en dos formatos (alto/ancho)
   y esto las acomoda sin forzar un recorte que ya vino hecho por la herramienta. */
.gal-ev-grid{ margin-top:clamp(24px,3.5vw,40px);
              columns:3 240px; column-gap:clamp(12px,1.6vw,20px); }
.gal-ev-item{ position:relative; margin:0 0 clamp(12px,1.6vw,20px); break-inside:avoid; }
.gal-ev-item img{ width:100%; display:block; }
.gal-ev-item figcaption{ margin-top:6px; font-size:.8rem; color:var(--ink-2); }
.gal-ev-btn{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
@media (max-width:640px){ .gal-ev-grid{ columns:2 160px; } }

/* ---------- lightbox: la foto en grande, con flechas a los lados ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(24,29,17,.96);
           display:flex; align-items:center; justify-content:center; padding:clamp(16px,5vw,60px);
           opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.open{ opacity:1; pointer-events:auto; }
body.lb-abierta{ overflow:hidden; }
.lb-fig{ margin:0; max-width:100%; max-height:100%; }
.lb-img{ display:block; max-width:100%; max-height:82vh; margin-inline:auto; object-fit:contain; }
.lb-cred{ margin-top:14px; text-align:center; color:var(--band-ink-2); font-size:.82rem; }
.lb-x,.lb-prev,.lb-next{ position:absolute; border:0; background:none; color:var(--band-ink);
                          cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-x{ top:18px; right:calc(var(--gut) - 8px); font-size:30px; line-height:1; padding:8px; opacity:.75; }
.lb-x:hover{ opacity:1; }
.lb-prev,.lb-next{ top:50%; translate:0 -50%; width:52px; height:52px; border-radius:50%;
                    font-size:22px; background:rgba(241,239,228,.08); transition:background .25s var(--ease); }
.lb-prev:hover,.lb-next:hover{ background:rgba(241,239,228,.18); }
.lb-prev{ left:clamp(8px,3vw,34px); }
.lb-next{ right:clamp(8px,3vw,34px); }
@media (max-width:640px){
  .lb-prev,.lb-next{ width:42px; height:42px; font-size:18px; }
  .lb-x{ top:10px; right:10px; }
}