.tkvb-gallery{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(var(--tkvb-cols, 3), minmax(0,1fr));
}

/* Responsive safety: no more than 2 cols on small screens */
@media (max-width: 768px){
  .tkvb-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .tkvb-gallery{ grid-template-columns: 1fr; }
}

.tkvb-gallery__item{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:inherit;
}

/* 4:3 crop + TOP-CENTER */
.tkvb-gallery__img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  display:block;
}

/* Lightbox overlay */
.tkvb-lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  background:rgba(0,0,0,.86);
  padding:24px;
}
.tkvb-lightbox.is-open{ display:flex; }

/* Panel centrado con ancho máximo 900px */
.tkvb-lightbox__panel{
  position:relative;
  max-width:900px;
  max-height:92vh;
  width:100%;
}

/* Imagen sin deformar */
.tkvb-lightbox__img{
  width:100%;
  max-width:900px;
  max-height:92vh;
  object-fit:contain;
  display:block;
  border-radius: 12px;
  background:rgba(0,0,0,.25);
  margin:0 auto;
}

.tkvb-lightbox__caption{
  margin-top:10px;
  color:#FAFAFF;
  font-size:14px;
  line-height:1.4;
  opacity:.9;
  text-align:center;
}

/* Botones comunes: centrado perfecto con flex */
.tkvb-lightbox__btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  border:0;
  width:48px;
  height:48px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#4DA3FF;
  cursor:pointer;
  font-size:28px;
  z-index:10000;

  display:flex;                 
  align-items:center;           
  justify-content:center;       
}

.tkvb-lightbox__btn:hover{
  background:rgba(255,255,255,.2);
}

/* Flechas fuera del panel */
.tkvb-lightbox__prev{ left:24px; }
.tkvb-lightbox__next{ right:24px; }

/* Botón cerrar arriba a la derecha */
.tkvb-lightbox__close{
  top:24px;
  right:24px;
  transform:none;
  width:42px;
  height:42px;
  font-size:26px;
}

/* En pantallas pequeñas, acercamos los botones */
@media (max-width: 768px){
  .tkvb-lightbox__prev{ left:12px; }
  .tkvb-lightbox__next{ right:12px; }
  .tkvb-lightbox__close{ top:12px; right:12px; }
}