/* ════════════════════════════════════════════════════════════════
   Galería de fotos del blog (shortcode [galeria]) + lightbox
   Añadir al final de blog.css (o incluir como /blog/css/galeria.css).
   Las columnas se controlan por artículo con las variables:
     --qld-gal-c   (columnas escritorio)
     --qld-gal-cm  (columnas móvil)
   ════════════════════════════════════════════════════════════════ */

.qld-galeria{
  display:grid;
  /* minmax(0,1fr): las columnas pueden encoger -> la galería NUNCA desborda
     el div que la contiene y se adapta a su ancho real. */
  grid-template-columns:repeat(var(--qld-gal-c,3),minmax(0,1fr));
  gap:.75rem;
  margin:1.5rem 0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:768px){
  .qld-galeria{ grid-template-columns:repeat(var(--qld-gal-cm,1),minmax(0,1fr)); }
}

.qld-galeria__item{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:.5rem;
  line-height:0;
  background:#eef0f2;
  aspect-ratio:1/1;            /* miniaturas uniformes y limpias */
  min-width:0;                 /* permite que el ítem encoja dentro del grid */
}
.qld-galeria *{ box-sizing:border-box; }
.qld-galeria__item img{
  width:100%; height:100%;
  max-width:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.qld-galeria__item:hover img{ transform:scale(1.06); }
.qld-galeria__item::after{      /* lupa al pasar el ratón */
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85a1 1 0 0 0-.115-.098M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat center;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.qld-galeria__item:hover::after{ background-color:rgba(0,0,0,.25); opacity:1; }

/* ── Lightbox ─────────────────────────────────────────────── */
.qld-lb{
  position:fixed; inset:0; z-index:1080;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,18,22,.92);
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.qld-lb.is-open{ opacity:1; visibility:visible; }
.qld-lb__img{
  max-width:92vw; max-height:82vh;
  object-fit:contain; border-radius:.35rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.qld-lb__cap{
  position:absolute; left:0; right:0; bottom:18px;
  text-align:center; color:#e9ecef; font-size:.95rem; padding:0 1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.qld-lb__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.qld-lb__btn:hover{ background:rgba(255,255,255,.25); }
.qld-lb__prev{ left:18px; }
.qld-lb__next{ right:18px; }
.qld-lb__close{ top:18px; right:18px; transform:none; width:42px; height:42px; font-size:1.3rem; }
.qld-lb__count{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  color:#ced4da; font-size:.85rem; letter-spacing:.03em;
}
@media (max-width:576px){
  .qld-lb__btn{ width:40px; height:40px; font-size:1.3rem; }
  .qld-lb__prev{ left:8px; } .qld-lb__next{ right:8px; }
}
.qld-lb-noscroll{ overflow:hidden; }