/* ============================================================
   BAZA · Просмотрщик изображений (.lb)
   Нативный <dialog>: Esc, возврат фокуса и inert-фон — от браузера.
   Подложка тёмная в обеих темах (см. --c-lb-* в tokens.css).
   ============================================================ */

.lb {
	/* Ширину/высоту JS пиньт к фактической видимой области после блокировки
	   прокрутки (см. open() в lightbox.js) — 100vw/100dvh тут фолбэк. */
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-lb-ink);
	overflow: hidden;
	overscroll-behavior: contain;
	/* ⚠️ СИНЕВА ПРИ ЛИСТАНИИ: без этого клик/тап/протяжка по фото выделяет его,
	   и браузер красит выделение синим ПОВЕРХ картинки (в canvas-замер не попадает,
	   поэтому баг долго не ловился). Гасим выделение, тап-подсветку и перетаскивание
	   на всём просмотрщике. */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.lb * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.lb__img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	user-select: none;
	pointer-events: auto;
}

.lb::backdrop {
	background: var(--c-lb-scrim);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.lb[open] {
	display: flex;
	flex-direction: column;
	animation: lb-in var(--t) var(--ease-out);
}

@keyframes lb-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Сцена с картинкой ───────────────────────────────────────
   flex, а не grid: у диалога высота задана (100dvh), значит у сцены высота
   определённая — и max-height:100% на картинке наконец работает, без
   арифметики в vh (которая ломалась при смене отступов на мобиле). */
.lb__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px var(--s-4) 64px;
	touch-action: pan-y;
}

.lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--r-sm);
	/* Никакого фона: полупрозрачные PNG и момент подмены кадра красились
	   в синий. Кадр меняется только когда следующий уже загружен, поэтому
	   ни подложка, ни притухание не нужны. */
	background: none;
}

/* Курсор-лупа только там, где увеличивать реально есть что */
.lb.is-zoomable .lb__img { cursor: zoom-in; }

.lb__error {
	display: none;
	max-width: 32ch;
	text-align: center;
	font-size: var(--fs-md);
	color: var(--c-lb-ink-soft);
}

.lb.is-error .lb__img { display: none; }
.lb.is-error .lb__error { display: block; }

/* ── Масштаб 1:1 с перетаскиванием ───────────────────────────
   display:block в скроллящемся контейнере — единственная раскладка, которая
   надёжно даёт прокрутку по обеим осям; плюс drag мышью (JS). */
.lb.is-zoom .lb__stage {
	display: block;
	padding: 0;
	overflow: auto;
	cursor: grab;
	touch-action: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.lb.is-zoom .lb__stage.is-panning { cursor: grabbing; }

.lb.is-zoom .lb__img {
	max-width: none;
	max-height: none;
	margin: auto;
	border-radius: 0;
	cursor: inherit;
}

/* ── Кнопки ────────────────────────────────────────────────── */
.lb__btn {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--c-lb-surface);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--c-lb-ink);
	cursor: pointer;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease);
}

.lb__btn:hover {
	background: color-mix(in srgb, var(--c-lb-ink) 22%, transparent);
	border-color: color-mix(in srgb, var(--c-lb-ink) 30%, transparent);
}

.lb__btn:focus-visible {
	outline: 2px solid var(--c-lb-ink);
	outline-offset: 2px;
}

.lb__btn svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.lb__close {
	top: var(--s-3);
	right: var(--s-3);
}

.lb__prev { left: var(--s-3); top: 50%; transform: translateY(-50%); }
.lb__next { right: var(--s-3); top: 50%; transform: translateY(-50%); }

/* Один кадр в группе — стрелки не нужны */
.lb.is-single .lb__prev,
.lb.is-single .lb__next { display: none; }

/* ── Нижняя строка ─────────────────────────────────────────── */
.lb__bar {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	font-size: var(--fs-sm);
	line-height: 1.3;
	color: var(--c-lb-ink-soft);
	text-align: center;
	pointer-events: none;
}

.lb__bar > * { pointer-events: auto; }

.lb__count {
	flex: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-lb-ink);
}

.lb__cap {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb__cap:empty { display: none; }

.lb__file {
	flex: none;
	color: var(--c-lb-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lb__file:hover { color: var(--c-lb-ink); }

.lb__file:focus-visible {
	outline: 2px solid var(--c-lb-ink);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* ── Курсор-подсказка на кликабельной картинке в тексте ────── */
.entry-content a[data-lb],
.prose a[data-lb],
.passport__cover-link[data-lb] {
	cursor: zoom-in;
}

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Нижний отступ учитывает строку счётчика (58) и ряд стрелок (48):
	   картинка вписывается НАД кнопками; max-height:100% подхватит это сам. */
	.lb__stage {
		padding: 52px var(--s-2) 106px;
	}

	.lb__prev,
	.lb__next {
		top: auto;
		bottom: 58px;
		transform: none;
	}
}

@media (max-width: 480px) {
	.lb__bar {
		gap: var(--s-2);
		font-size: var(--fs-xs);
	}

	.lb__file { display: none; }
}

/* ── Меньше движения ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lb[open] { animation: none; }
	.lb__btn { transition: none; }
}