/* ════════════════════════════════════════════════════
   Просмотр документов — копия photo-viewer.css с alexlisovoy.ru (10.11.2026, вне Claude Design — CHANGES-OUTSIDE-DESIGN.md п. 9)
   На МТБ — авторское свидетельство в «Доказательной базе и статусе».
   Разметку создаёт photo-viewer.js
   при первом открытии — до клика в странице её нет.

   • стрелки и счётчик «2 / 4» видны на всех ширинах;
   • на телефоне стрелки лежат поверх краёв картинки на тёмной плашке,
     чтобы их было видно и на белом документе;
   • приближение двумя пальцами — штатное приближение страницы:
     touch-action не ограничен, viewport масштабирование не запрещает.
   Tokens: colors_and_type.css МТБ (те же имена, что у дизайн-системы alexlisovoy.ru)
   ════════════════════════════════════════════════════ */

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: rgba(31, 27, 23, 0.94);
  color: var(--text-light);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.photo-viewer[data-open="true"] {
  display: flex;
  animation: photo-viewer-fade var(--dur) var(--ease-out);
}
@keyframes photo-viewer-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Сцена с картинкой ── */
.photo-viewer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-20) var(--space-3);
  overflow: hidden;
  cursor: zoom-out;
}
.photo-viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity var(--dur) var(--ease);
}
.photo-viewer__img[data-loading="true"] { opacity: 0.35; }
.photo-viewer__img.is-dragging { transition: none; }

/* ── Кнопки: закрыть, назад, вперёд ── */
.photo-viewer__close,
.photo-viewer__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 27, 23, 0.55);
  color: var(--text-light);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.photo-viewer__close svg,
.photo-viewer__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.photo-viewer__close:hover,
.photo-viewer__nav:hover {
  background: rgba(245, 241, 236, 0.16);
  color: var(--surface);
}
.photo-viewer__close { top: var(--space-3); right: var(--space-3); }
.photo-viewer__nav { top: 50%; transform: translateY(-50%); }
.photo-viewer__nav--prev { left: var(--space-4); }
.photo-viewer__nav--next { right: var(--space-4); }
.photo-viewer[data-single="true"] .photo-viewer__nav,
.photo-viewer[data-single="true"] .photo-viewer__counter { display: none; }

/* ── Подпись и счётчик ── */
.photo-viewer__bar {
  flex: none;
  padding: var(--space-2) var(--space-6) var(--space-5);
  text-align: center;
}
.photo-viewer__counter {
  display: block;
  font: 500 14px/1 var(--font-body);
  letter-spacing: 1.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.photo-viewer__caption {
  max-width: 720px;
  margin: var(--space-2) auto 0;
  font: 400 13px/1.5 var(--font-body);
  letter-spacing: 0.3px;
  color: rgba(245, 241, 236, 0.85);
}
.photo-viewer__caption:empty { display: none; }

/* ── Телефон: картинка во всю ширину, стрелки поверх её краёв ── */
@media (max-width: 760px) {
  .photo-viewer__stage { padding: var(--space-16) var(--space-2) var(--space-2); }
  .photo-viewer__nav {
    width: 44px;
    height: 44px;
    background: rgba(31, 27, 23, 0.72);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  .photo-viewer__nav--prev { left: var(--space-2); }
  .photo-viewer__nav--next { right: var(--space-2); }
  .photo-viewer__close { width: 44px; height: 44px; top: var(--space-2); right: var(--space-2); }
  .photo-viewer__bar { padding: var(--space-2) var(--space-4) var(--space-4); }
  .photo-viewer__counter { font-size: 15px; }
  .photo-viewer__caption { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer[data-open="true"] { animation: none; }
  .photo-viewer__img { transition: none; }
}