/*
 * Просмотр фото (PhotoSwipe): значения vendor-CSS заменены токенами темы. Подключается после photoswipe.css.
 * Ссылка-миниатюра: data-pswp-width/height задаёт inc/lightbox.php; без JS это обычная ссылка на файл.
 */

.op-js a[data-pswp-width] {
  cursor: zoom-in;
}

.op-lightbox {
  display: block;
}

.pswp {
  --pswp-bg: var(--color-text);
  --pswp-placeholder-bg: var(--color-text-muted);
  --pswp-preloader-color: var(--color-overlay);
  --pswp-preloader-color-secondary: var(--color-on-primary);
  --pswp-icon-color: var(--color-on-primary);
  --pswp-icon-color-secondary: var(--color-text);
  --pswp-icon-stroke-color: var(--color-text);
  --pswp-error-text-color: var(--color-on-primary);
  font-family: var(--font-body);
}

/* Кольцо фокуса из base.css тёмное: на тёмной подложке нужно светлое */
.pswp :focus-visible {
  outline: var(--focus-width) solid var(--color-focus-on-dark);
  outline-offset: var(--focus-offset);
}

.pswp__op-caption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-overlay);
  color: var(--color-on-primary);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  text-align: center;
  pointer-events: none;
}

.pswp__op-caption[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pswp,
  .pswp *,
  .pswp::before,
  .pswp::after {
    transition: none !important;
    animation: none !important;
  }
}