/**
 * PhotoSwipe Custom Styles - GUEBEL A+D
 * Personalización del lightbox para adaptarlo al diseño del sitio
 */

/* Importar PhotoSwipe base desde archivo local */
@import url('photoswipe.min.css');

/* Caption personalizado */
.pswp__custom-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  text-align: center;
  pointer-events: none;
}

.pswp__caption__title {
  font-family: var(--font-primary, 'WorkSans', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pswp__caption__description {
  font-family: var(--font-primary, 'WorkSans', sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

/* Botones en tema del sitio */
.pswp__button {
  transition: opacity 0.2s ease;
}

.pswp__button:hover {
  opacity: 1 !important;
}

/* Contador de imágenes */
.pswp__counter {
  font-family: var(--font-primary, 'WorkSans', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Badge para enlaces externos */
.external-link-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-accent, #4a9eff);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.external-link-badge::before {
  content: '🔗';
  font-size: 0.875rem;
}

/* Indicador de carga */
.pswp__preloader__icn {
  width: 40px;
  height: 40px;
}

/* Adaptación para tema oscuro/claro */
[data-theme="dark"] .pswp__custom-caption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

[data-theme="light"] .pswp__bg {
  background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .pswp__custom-caption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

/* Responsive */
@media (max-width: 600px) {
  .pswp__caption__title {
    font-size: 1rem;
  }

  .pswp__caption__description {
    font-size: 0.875rem;
  }

  .pswp__custom-caption {
    padding: 16px;
  }
}

/* Animación de entrada suave */
.pswp__img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: contain !important;
}

/* Cursor para indicar zoom disponible */
.pswp__img--placeholder {
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--zoomed-in .pswp__img:active {
  cursor: grabbing;
}