/* ===========================================================================
   Video Image Gallery JP V3 — public.css
   =========================================================================== */

/* Arranca invisible (sin visibility:hidden) */
.vigjp-gallery {
  opacity: 0;
}
/* ======================================================
   GRID (layout con CSS Grid)
   ====================================================== */
.vigjp-gallery[data-style="grid"] {
  display: grid;
  /* grid-template-columns se inyecta desde JS */
  /* gap se inyecta desde JS */
}

.vigjp-gallery[data-style="grid"] .vigjp-item {
  width: 100%;          /* cada celda ocupa todo el ancho de la fracción */
  overflow: hidden;
  /* aspect-ratio se inyecta desde JS */
}

.vigjp-gallery[data-style="grid"] .vigjp-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================
   MASONRY (layout absoluto con Masonry.js)
   ====================================================== */
.vigjp-gallery[data-style="masonry"] {
  position: relative;
}

/* Masonry: animar el cambio de altura cuando igualamos la última fila */
.vigjp-gallery[data-style="masonry"] .vigjp-item {
  transition: height .25s ease;
  position: absolute;
  overflow: hidden;
}

.vigjp-gallery[data-style="masonry"] .vigjp-item img {
  width: 100%;
  height: auto;
  display: block;
}

.vigjp-gallery[data-style="masonry"] .vigjp-item.vigjp-equalized img {
  height: 100%;
  object-fit: cover;
}

/* ======================================================
   OVERLAY & OTROS
   ====================================================== */
/* El item será el contenedor del overlay */
.vigjp-item {
  position: relative;  /* asegura que el overlay absolute inset:0 se acote al item */
  cursor: pointer;
}

/* ESCRITORIO: hover real permitido */
@media (hover: hover) and (pointer: fine) {
  .vigjp-item:hover .vigjp-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TÁCTILES (móvil/tablet): sin hover; overlay solo con .is-active */
@media (hover: none), (pointer: coarse) {
  .vigjp-item.is-active .vigjp-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

.vigjp-item {
  cursor: pointer;
}

.vigjp-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .4s ease, opacity .4s ease;
  z-index: 1;
}

.vigjp-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vigjp-overlay-color);
  opacity: var(--vigjp-overlay-opacity, 0.5);
  z-index: 1;
}

.vigjp-overlay .vigjp-item-title,
.vigjp-overlay .dashicons {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  pointer-events: auto;
  text-align: center;
}

.vigjp-overlay .vigjp-item-title {
  order: 1;
  margin: 0;
  color: var(--vigjp-title-color);
  font-size: 1em;
}

.vigjp-overlay .vigjp-item-title { 
	white-space: normal; 
	display: block; 
}

.vigjp-overlay .dashicons {
  font-size: 2em;
  color: var(--vigjp-icon-color);
  order: 2;
}
.vigjp-overlay .dashicons {
  /* convertir en contenedor flex para centrar el icono */
  display: flex !important;
  align-items: center;
  justify-content: center;

  /* forzar un cuadrado */
  width: 1.5em;
  height: 1.5em;

  /* separación interna (reduce si quieres un círculo más pequeño) */
  padding: 0 !important;

  border-radius: 50%;              /* círculo perfecto */
  background-color: rgba(255,255,255,0.15) !important;
  transition: background-color .2s ease;
}

.vigjp-overlay .dashicons:hover {
  background-color: rgba(255,255,255,0.25) !important;
}


/* Modal general */
#vigjp-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vigjp-modal-overlay-bg, rgba(0, 0, 0, 0.85));
  z-index: 9999;
  overflow: hidden;
}

/*—————————————————————————————————————————
   1) El modal se encoge al contenido
—————————————————————————————————————————*/
#vigjp-modal {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--vigjp-modal-bg-color, #000) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  margin:60px auto !important;
  max-height: calc(100vh - 120px) !important;
}

/*—————————————————————————————————————————
   2) El body solo envuelve la imagen y la centra
—————————————————————————————————————————*/
#vigjp-modal-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;       /* 24px fijos: franjas negras */
  background: #000 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/*—————————————————————————————————————————
   3) Imagen siempre contenida sin recortes
—————————————————————————————————————————*/
#vigjp-modal-body .vigjp-image-wrap {
  display: block !important;
  padding: 0 !important;
  background: none !important;
}

#vigjp-modal-body .vigjp-image-wrap img {
  display: block !important;
  max-width: calc(100vw - 120px - 48px) !important;
  max-height: calc(100vh - 120px - 48px - 60px) !important;
     /* descontamos leyenda de ~60px */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ——————————————————————————————————————————
   SHRINK-TO-FIT VÍDEOS (y sólo vídeos)
——————————————————————————————————————————*/
#vigjp-modal-body .vigjp-video-wrap {
  display: inline-block !important;  
  margin: 0 auto !important;
  padding: 12px !important;               /* franjas negras */
  background: #000 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9;

  /* ancho = el menor de (viewport–48px) ó (altura disponible ×16/9) */
  width: min(
    80vw,
    calc((100vh - 210px) * (16/9))
  ) !important;
  height: auto !important;
}

/* el iframe ocupa todo ese wrapper */
#vigjp-modal-body .vigjp-video-wrap iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/*—————————————————————————————————————————
   4) Leyenda siempre visible debajo
—————————————————————————————————————————*/
#vigjp-modal-caption {
  display: block !important;
  padding: 0 24px 24px !important;
  background: #000 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.vigjp-caption-title {
  margin: 4px 0 !important;
  text-align: left;
  font-size: 1.1em;
  color: var(--vigjp-title-color);
}

.vigjp-caption-description {
  text-align: left;
  margin: 4px 0 !important;
  color: var(--vigjp-description-color);
}

#vigjp-modal-wrapper {
  position: relative;
}

/* Botón de cierre */
#vigjp-modal-close {
  position: fixed !important;
  top: 30px !important;    /* distancia desde el borde superior del viewport */
  right: 30px !important;  /* distancia desde el borde derecho del viewport */
  font-size: 36px !important;
  padding: 8px !important; /* zona clicable más cómoda */
  z-index: 90000 !important;/* por encima de todo */
  cursor: pointer !important;
}

/* ======================================================
   RESPONSIVE (móvil: 1 columna en todas las galerías)
   ====================================================== */
@media (max-width: 768px) {
  /* Modal ocupa full ancho, con márgenes */
  #vigjp-modal {
    width: 90vw !important;
    max-height: 80vh !important;
    margin: 20px auto !important;
  }
  #vigjp-modal-body {
    padding: 16px !important;
  }
  #vigjp-modal-body .vigjp-image-wrap,
  #vigjp-modal-body .vigjp-video-wrap {
    padding: 16px !important;
    max-width: 100% !important;
    max-height: 70vh !important;
  }

  /* Gallery Grid: 1 sola columna */
  .vigjp-gallery[data-style="grid"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Gallery Masonry: items apilados */
  .vigjp-gallery[data-style="masonry"] .vigjp-item {
    position: static !important;
    width: 100% !important;
  }
}