/*
 * Галерея снимков: значок на странице и слой просмотра.
 *
 * ЧИСЛА СНЯТЫ С ЭТАЛОНА ЗАМЕРОМ, А НЕ ВЗЯТЫ НА ГЛАЗ. Fancybox 6.1.14 объявляет их своими
 * переменными, и они прочитаны у него в браузере: длительность .25s и кривая ease-out, кнопка
 * панели 46x46, стрелка 50x50 кругом и в 32 точках от края, подложка rgba(24,24,27,.95), цвет
 * органов #ddd, миниатюра 94x76 с углом 4 и просветом 8, узкая доля 54, крутилка 50x50 с
 * обводкой 4. Разбор и адреса замеров - в `docs/galereya-etalon.md`.
 *
 * КОД ЗДЕСЬ СВОЙ. Вендорить Fancybox нельзя: его соглашение запрещает распространение, а мы
 * копируем тему на установку каждого клиента. Повторяется ПОВЕДЕНИЕ и геометрия, а не файлы.
 */

/* --- ЗНАЧОК НА СТРАНИЦЕ ------------------------------------------------------- */

/*
 * Значок ставится на РОДИТЕЛЯ снимка: у `<img>` нет потомков, и значку негде встать. В режиме правки этой разметки нет вовсе - её ставит и снимает скрипт.
 */
.ls-zoom {
	position: relative;
}

/*
 * КУРСОР ЗОВЁТ НАЖАТЬ, И ЗОВЁТ ИМЕННО ЛУПОЙ.
 *
 * Владелец: «при наведении надо чтоб курсор менялся». `pointer` сказал бы «здесь ссылка» - а
 * перехода не будет; `zoom-in` говорит ровно то, что случится, и совпадает со значком, который
 * в этот же миг проявляется. У эталона у картинок-входов стоит он же.
 *
 * Правило на САМОЙ картинке, а не на гнезде: нажатие ловится по ней, а гнездо бывает шире
 * снимка - подпись рядом не должна притворяться нажимаемой. Значок нажатий не берёт вовсе
 * (`pointer-events: none`), поэтому под ним курсор остаётся тем же.
 */
.ls-zoom > img {
	cursor: zoom-in;
}
/*
 * ЗНАЧОК «РАЗВЕРНУТЬ» В УГЛУ, БЕЗ ЗАТЕМНЕНИЯ И БЕЗ ЛУПЫ - РЕШЕНИЕ ВЛАДЕЛЬЦА 14.10.2026: «убрать
 * отовсюду затемнение и лупу и сделать вот такой расширитель в углу... а то нет единообразия». Вид
 * один с углом галереи (`.ls-gal__zoom` в `site-gallery.css`): место, размер, скругление по
 * лестнице Roundness, чернильная плашка. Затемнение прятало сам снимок, а лупа по центру
 * закрывала его середину; у галереи их не было, и на одной странице жили два разных обещания.
 *
 * Значок РИСУНОК, а не лигатура: шрифт значков у посетителя складывается не всегда, и
 * несложившаяся лигатура печатается словом (записанная грабля).
 *
 * Показ - только по наведению и клавиатурному фокусу (решение владельца того же дня).
 */
.ls-zoom__ic {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	inline-size: 36px;
	block-size: 36px;
	border-radius: calc(18px * var(--ls-r-k, 1));
	background-color: var(--ls-ink, #111);
	opacity: 0;
	transition: opacity var(--ls-dur-fast, 200ms) ease-out;
	pointer-events: none;
	display: grid;
	place-items: center;
}
.ls-zoom__ic::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background-color: var(--ls-paper, #fff);
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z"/></svg>');
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-120v-320h80v184l504-504H520v-80h320v320h-80v-184L256-200h184v80H120Z"/></svg>');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}
/*
 * ПРОЯВЛЯЕТСЯ ПО НАВЕДЕНИЮ И ПО КЛАВИАТУРНОМУ ФОКУСУ - НО НЕ ПО ЛЮБОМУ.
 *
 * `:focus-within` оставлял снимок с проявленным значком после закрытия просмотрщика: фокус
 * возвращается на гнездо (обещание `placeFocusBack`). `:focus-visible` отличает фокус, поставленный
 * кодом, от фокуса, до которого человек дошёл клавишами (замерено).
 */
.ls-zoom:hover .ls-zoom__ic,
.ls-zoom:focus-visible .ls-zoom__ic {
	opacity: 1;
}

/* --- СТРАНИЦА ПОД СЛОЕМ ------------------------------------------------------- */

/*
 * Прокрутка запирается, пока слой открыт (`hideScrollbar: true` у эталона), а ширина исчезнувшей
 * полосы возвращается отступом: без этого страница под слоем прыгает на её ширину, и прыжок
 * видно на краю в тот же миг. Число считает скрипт - оно у каждого браузера своё.
 */
.ls-lb-on {
	overflow: hidden;
	padding-inline-end: var(--ls-lb-pad, 0);
}

/* --- СЛОЙ --------------------------------------------------------------------- */

.ls-lb {
	--ls-lb-btn: 46px;
	--ls-lb-arrow: 50px;
	--ls-lb-arrow-pos: 32px;
	--ls-lb-ink: #ddd;
	--ls-lb-ink-hi: #fff;
	--ls-lb-btn-bg: rgba(54, 54, 54, .75);
	--ls-lb-arrow-bg: rgba(54, 54, 54, .65);
	--ls-lb-dur: 250ms;
	--ls-lb-ease: ease-out;

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-rows: 1fr auto auto;
	/*
	 * ШРИФТ СЛОЯ - СИСТЕМНЫЙ, И ЭТО РЕШЕНИЕ, А НЕ УПУЩЕНИЕ. Гарнитуры сайта объявлены на
	 * бумаге (`--ls-text-face` на `.ls-page`), а слой лежит прямо в `body` и её потомком не
	 * является - переменная до него не долетает, и ссылка на неё была бы мёртвой индирекцией.
	 * По существу так и верно: панель просмотра - оснастка инструмента, а не текст сайта;
	 * у эталона она тоже набрана системным гротеском.
	 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/*
	 * ГАСНЕТ ПРОЗРАЧНОСТЬЮ, А НЕ `display`. Записанная грабля: `display` не анимируется ничем,
	 * и приход слоя выглядел бы рывком. `visibility` при этом обязателен - без него закрытый
	 * слой держит фокус, виден диктору и ГЛОТАЕТ НАЖАТИЯ по всей странице, - и уходит он с
	 * задержкой в длину перехода.
	 */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ls-lb-dur) var(--ls-lb-ease), visibility 0s var(--ls-lb-dur);
}
.ls-lb[data-on="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ls-lb-dur) var(--ls-lb-ease), visibility 0s;
}
.ls-lb__back {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(24, 24, 27, .95);
	/* Протяжка на закрытие гасит подложку вместе с уходом кадра: число ставит скрипт. */
	opacity: var(--ls-lb-fade, 1);
}
.ls-lb:fullscreen {
	background-color: rgba(24, 24, 27, 1);
}

/*
 * АДМИН-ПОЛОСА WORDPRESS СТОИТ ВЫШЕ ЛЮБОГО НАШЕГО СЛОЯ, И СПОРИТЬ С НЕЙ НЕЛЬЗЯ.
 *
 * У неё `z-index: 99999`, у нас 9999, и поднимать своё число значило бы закрыть человеку
 * выход из собственной админки. ЗАМЕРЕНО: нажатие по кнопке «миниатюры» в верхнем правом
 * углу попало в её меню и увело со страницы на профиль пользователя.
 *
 * Поэтому слой начинается ПОД полосой - ровно так же, как это делает сам WordPress со
 * страницей. Посетителя это не касается: класса `admin-bar` у него нет вовсе. Числа 32 и 46
 * - ядровые, они объявлены в его же стилях вместе с порогом 782.
 */
body.admin-bar .ls-lb {
	inset-block-start: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .ls-lb {
		inset-block-start: 46px;
	}
}

/* --- КНОПКИ ------------------------------------------------------------------- */

.ls-lb__btn {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	inline-size: var(--ls-lb-btn);
	block-size: var(--ls-lb-btn);
	display: grid;
	place-items: center;
	background-color: var(--ls-lb-btn-bg);
	color: var(--ls-lb-ink);
	cursor: pointer;
	transition: color var(--ls-lb-dur) var(--ls-lb-ease), background-color var(--ls-lb-dur) var(--ls-lb-ease), opacity var(--ls-lb-dur) var(--ls-lb-ease);
}
.ls-lb__btn:hover {
	color: var(--ls-lb-ink-hi);
}
.ls-lb__btn[aria-disabled="true"] {
	opacity: .5;
	cursor: default;
}
.ls-lb__btn svg {
	inline-size: 24px;
	block-size: 24px;
	fill: currentColor;
	/* Тень значка повторяет эталон: на светлом снимке белый значок иначе теряется. */
	filter: drop-shadow(0 1px 1px rgba(24, 24, 27, .35));
}
.ls-lb__btn:focus-visible {
	outline: 1px solid rgba(255, 255, 255, .75);
	outline-offset: 0;
}

/* --- ПАНЕЛЬ ------------------------------------------------------------------- */

/*
 * Панель лежит ПОВЕРХ сцены, а не отнимает у неё высоту: так у эталона (`has-absolute-toolbar`),
 * и это не украшение - иначе на телефоне снимку остаётся полоска между панелью и миниатюрами.
 */
.ls-lb__bar {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 8px;
	pointer-events: none;
}
.ls-lb__side {
	display: flex;
	pointer-events: auto;
}
.ls-lb__count {
	color: var(--ls-lb-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: var(--ls-lb-btn);
	padding-inline: 10px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
	cursor: default;
	user-select: none;
}

/* --- СТРЕЛКИ ------------------------------------------------------------------ */

.ls-lb__nav {
	position: absolute;
	inset-block-start: 50%;
	/* rtl-ok: подъём на половину собственной высоты, ось поперечная и направления не имеет. */
	transform: translate(0, -50%);
	z-index: 20;
	inline-size: var(--ls-lb-arrow);
	block-size: var(--ls-lb-arrow);
	border-radius: 50%;
	background-color: var(--ls-lb-arrow-bg);
}
.ls-lb__nav--prev {
	inset-inline-start: var(--ls-lb-arrow-pos);
}
.ls-lb__nav--next {
	inset-inline-end: var(--ls-lb-arrow-pos);
}
/* Стрелка «назад» смотрит в начало строки, а в правописьменном языке начало справа. */
.ls-lb[data-dir="rtl"] .ls-lb__nav svg {
	/* rtl-ok: это и есть зеркалирование значка, ради которого правило написано. */
	transform: scaleX(-1);
}
.ls-lb[data-one="yes"] .ls-lb__nav,
.ls-lb[data-one="yes"] .ls-lb__thumbs {
	display: none;
}

/* --- СЦЕНА -------------------------------------------------------------------- */

.ls-lb__stage {
	position: relative;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
.ls-lb__track {
	position: absolute;
	inset: 0;
	transition: transform var(--ls-lb-dur) var(--ls-lb-ease);
}
.ls-lb__slide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 8px;
}
.ls-lb__pan {
	display: grid;
	place-items: center;
	max-inline-size: 100%;
	max-block-size: 100%;
	transition: transform var(--ls-lb-dur) var(--ls-lb-ease);
	will-change: transform;
}
.ls-lb__img {
	display: block;
	/*
	 * РАЗМЕР СТАВИТ СКРИПТ, И ПОТОЛКА ЗДЕСЬ БОЛЬШЕ НЕТ НАМЕРЕННО. `max-block-size: 100%`
	 * считался от родителя с автоматической высотой и разрешался в «нет потолка» - снимок
	 * вылезал под полосу миниатюр. Два хозяина у одного размера разошлись бы и дальше:
	 * от вписанного числа зависят предел сдвига и кратность приближения.
	 */
	max-inline-size: none;
	user-select: none;
	-webkit-user-drag: none;
}

/*
 * КАРТА КУРСОРОВ СНЯТА У ЭТАЛОНА ЦЕЛИКОМ, и порядок правил здесь содержателен: специфичность
 * у первых трёх одинаковая, побеждает последнее подошедшее. Приблизить можно - `zoom-in`
 * сильнее `grab`, потому что человек чаще целится приблизить, чем подвинуть.
 */
.ls-lb__slide[data-zoom="out"] .ls-lb__img {
	cursor: zoom-out;
}
.ls-lb__slide[data-drag="yes"] .ls-lb__img {
	cursor: grab;
}
.ls-lb__slide[data-zoom="in"] .ls-lb__img {
	cursor: zoom-in;
}
.ls-lb[data-grip="true"] .ls-lb__stage,
.ls-lb[data-grip="true"] .ls-lb__img {
	cursor: grabbing;
}

/* --- КРУТИЛКА И ОТКАЗ --------------------------------------------------------- */

.ls-lb__spin {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	/* rtl-ok: центровка на половину собственного размера, а не направленный сдвиг. */
	transform: translate(-50%, -50%);
	inline-size: 50px;
	block-size: 50px;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, .2);
	border-block-start-color: rgba(255, 255, 255, .8);
	animation: ls-lb-spin 1s linear infinite;
	opacity: 0;
	pointer-events: none;
}
.ls-lb__slide[data-busy="true"] .ls-lb__spin {
	opacity: 1;
}
@keyframes ls-lb-spin {
	/* rtl-ok: вращение по кругу зеркалить не нужно и нельзя - круг у обеих письменностей один. */
	to { transform: translate(-50%, -50%) rotate(360deg); }
}
.ls-lb__slide[data-busy="error"] .ls-lb__img {
	opacity: 0;
}
.ls-lb__slide[data-busy="error"]::after {
	content: attr(data-error);
	color: #fff;
	background-color: #333;
	padding: 16px 20px;
	/* Плашка отказа - оснастка просмотрщика, а не содержимое сайта.
	   kit-free: лестнице Roundness она не подчиняется по тому же доводу, что круг значка. */
	border-radius: 4px;
	font-size: 15px;
}

/* --- ПОДПИСЬ ------------------------------------------------------------------ */

.ls-lb__cap {
	margin: 0;
	padding: 16px 8px;
	color: #dbdbdb;
	line-height: 1.375;
	text-align: center;
	font-size: 15px;
}
.ls-lb__cap:empty {
	display: none;
}

/* --- МИНИАТЮРЫ ---------------------------------------------------------------- */

/*
 * ПОЛОСА «КАК В ФОТОАЛЬБОМЕ», и это замер, а не вкус: у эталона каждая миниатюра нарисована во
 * всю ширину (94x76), но видна узкой долей в 54 точки, и раскрывается до полной ТОЛЬКО
 * выбранная. Полоса подвинута так, чтобы выбранная стояла посередине.
 *
 * Доли и просвет объявлены переменными, потому что их читает СКРИПТ: он раскладывает миниатюры
 * превращением, а не потоком, - иначе раскрытие дёргало бы соседей пересчётом раскладки.
 */
.ls-lb__thumbs {
	--ls-lb-thumb-w: 94px;
	--ls-lb-thumb-h: 76px;
	--ls-lb-thumb-slim: 54px;
	--ls-lb-thumb-gap: 8px;

	position: relative;
	block-size: calc(var(--ls-lb-thumb-h) + 16px);
	padding-block: 8px;
	overflow: hidden;
	transition: block-size .3s var(--ls-lb-ease), opacity .3s var(--ls-lb-ease);
}
.ls-lb[data-thumbs="off"] .ls-lb__thumbs {
	block-size: 0;
	padding-block: 0;
	opacity: 0;
}
.ls-lb__strip {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 50%;
	block-size: var(--ls-lb-thumb-h);
	transition: transform var(--ls-lb-dur) var(--ls-lb-ease);
}
.ls-lb__thumb {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	block-size: var(--ls-lb-thumb-h);
	inline-size: var(--ls-lb-thumb-slim);
	/* Угол миниатюры замерен у эталона и равен 4 при любой лестнице сайта.
	   kit-free: полоса просмотра принадлежит инструменту, а не странице клиента. */
	border-radius: 4px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: rgba(255, 255, 255, .08);
	cursor: pointer;
	transition: inline-size var(--ls-lb-dur) var(--ls-lb-ease), transform var(--ls-lb-dur) var(--ls-lb-ease), box-shadow var(--ls-lb-dur) var(--ls-lb-ease);
}
.ls-lb__thumb img {
	inline-size: var(--ls-lb-thumb-w);
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
}
.ls-lb__thumb[aria-current="true"] {
	box-shadow: inset 0 0 0 2px #fff;
}
.ls-lb__thumb:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
	outline: 0;
}

/* --- УЗКАЯ ШИРИНА ------------------------------------------------------------- */

/*
 * Порог тот же, что у всей вёрстки сайта, и спрашивается он у ОКНА, а не у бумаги: слой лежит
 * прямо в `body` и ничьим потомком по ширине не является - контейнерного запроса ему не с чего
 * задать. Это объявленное исключение из правила «медиазапросов к окну в вёрстке сайта нет».
 */
@media (max-width: 700px) {
	.ls-lb {
		--ls-lb-arrow-pos: 8px;
		--ls-lb-arrow: 44px;
	}

	.ls-lb__thumbs {
		--ls-lb-thumb-w: 74px;
		--ls-lb-thumb-h: 60px;
		--ls-lb-thumb-slim: 42px;
	}

	.ls-lb__cap {
		padding: 10px 8px;
		font-size: 14px;
	}
}