/* ====================================================================
   GALLERY.CSS — Estilos para galerías WordPress transformadas (.wg-*)
   
   AISLADO de .ly-gallery (single-projects) — sin contacto.
   ==================================================================== */

/* ── Contenedor raíz ── */
.wg-gallery {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
}

/* ── Grilla de miniaturas — siempre visible ── */
.wg-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  width: 100%;
}

.wg-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
}

.wg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  pointer-events: none;
}

.wg-thumb:hover img { transform: scale(1.04); }

/* ── Modal fullscreen ── */
.wg-modal {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
  display: none;
  overflow: hidden !important;
}

.wg-modal.open { display: block !important; }

body.wg-modal-open { overflow: hidden !important; }

/* ── Barra superior ── */
.wg-bar {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 32px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%) !important;
}

.wg-logo {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.wg-count {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.5) !important;
}

.wg-cur {
  font-style: normal !important;
  color: rgba(255,255,255,.9) !important;
}

.wg-close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  transition: color .2s !important;
  display: flex !important;
  align-items: center !important;
}
.wg-close:hover { color: #fff !important; background: none !important; }

/* ── Strip: scroll horizontal snapped (igual que ly-gallery__strip) ── */
.wg-strip {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  touch-action: pan-x !important;
}
.wg-strip::-webkit-scrollbar { display: none !important; }

/* ── Item: cada slide ── */
.wg-item {
  width: 100vw !important;
  height: 100vh !important;
  scroll-snap-align: start !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: pan-x !important;
}

.wg-item.wg-zoomed {
  touch-action: none !important;
}

.wg-item img {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  touch-action: none !important;
  pointer-events: none !important;
}

/* ── Flechas de navegación ── */
.wg-nav {
  position: fixed !important;
  top: 50% !important;
  z-index: 10 !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.35) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 24px 20px !important;
  transition: color .2s !important;
  transform: translateY(-50%) !important;
}
.wg-prev { left: 0 !important; }
.wg-next { right: 0 !important; }
.wg-nav:hover { color: #fff !important; background: none !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .wg-thumbs { grid-template-columns: repeat(2, 1fr); }
}