/* ==========================================================================
   Galería de miniaturas + visor en ventana · dansv.com
   Se usa en las páginas de cada novela (Xerhon-Ra y Besay).
   · El color de acento de cada página se define con --gal-accent.
   · Altura de las miniaturas: --gal-h (cámbiala en .gal-grid).
   · El visor (.lb) lo crea /assets/js/gallery.js.
   ========================================================================== */

/* ---------- Miniaturas: filas justificadas, sin recortar las fotos ---------- */
.gal-grid{--gal-h:140px;display:flex;flex-wrap:wrap;gap:10px;}
.gal-grid--lg{--gal-h:200px;}                      /* para galerías con pocas fotos */
.gal-grid::after{content:"";flex-grow:1000000;}    /* la última fila no se estira */

.gal-item{margin:0;height:var(--gal-h);min-width:0;
  flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--gal-h));}   /* --r = ancho / alto de la foto */

.gal-link{position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);cursor:zoom-in;}
.gal-link img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(25%);transition:transform .4s ease,filter .4s ease;}
.gal-link:hover,.gal-link:focus-visible{border-color:var(--gal-accent,var(--accent-bright));}
.gal-link:hover img,.gal-link:focus-visible img{transform:scale(1.06);filter:none;}
.gal-link:focus-visible{outline:2px solid var(--gal-accent,var(--accent-bright));outline-offset:2px;}

@media (max-width:860px){
  .gal-grid{--gal-h:110px;gap:8px;}
  .gal-grid--lg{--gal-h:150px;}
}
@media (max-width:480px){
  .gal-grid{--gal-h:96px;}
  .gal-grid--lg{--gal-h:130px;}
}

/* ---------- Visor: ventana que se superpone y se ajusta a cada foto ---------- */
html.lb-lock{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(5,7,6,0.92);}
.lb.open{display:flex;}
.lb-win{position:relative;max-width:100%;background:var(--surface,#121815);
  border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,0.65);}
.lb-stage{position:relative;overflow:hidden;background:#050706;touch-action:pan-y;}
.lb-stage img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .2s ease;}
.lb-stage img.is-loading{opacity:0;}
.lb-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 16px;border-top:1px solid var(--line);
  font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted,#9CA79C);}
.lb-cap{margin:0;color:var(--text,#F3F1EA);}
.lb-count{white-space:nowrap;}

.lb-btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;
  background:rgba(8,12,10,0.72);border:1px solid var(--line);border-radius:2px;
  color:var(--text,#F3F1EA);font-size:18px;line-height:1;cursor:pointer;}
.lb-btn:hover,.lb-btn:focus-visible{border-color:var(--gal-accent,var(--accent-bright));
  color:var(--gal-accent,var(--accent-bright));outline:none;}
.lb-close{top:10px;right:10px;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);}
.lb-prev{left:10px;}
.lb-next{right:10px;}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-count{display:none;}

@media (max-width:600px){
  .lb{padding:8px;}
  .lb-btn{width:38px;height:38px;}
  .lb-bar{padding:10px 12px;font-size:11px;}
}