/* ==================================================================
   Blocksee Gallery 2.0
   Никаких фиксированных высот и процентов — только соотношение сторон.
   Картинки видны сразу, без opacity-переходов и таймеров.
   ================================================================== */

.bswg{
	--bswg-ratio: 4 / 3;
	--bswg-thumbs: 4;
	--bswg-gap: 10px;
	--bswg-radius: 8px;
	--bswg-accent: #482728;
	--bswg-border: #e8e0d6;
	--bswg-bg: #fff;

	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.bswg *,
.bswg *::before,
.bswg *::after{
	box-sizing: border-box;
}

/* ---------- Сцена: главное фото ---------- */

.bswg__stage{
	position: relative;
	width: 100%;
	background: var(--bswg-bg);
	border-radius: var(--bswg-radius);
	overflow: hidden;
}

.bswg__viewport{
	position: relative;
	width: 100%;
	aspect-ratio: var(--bswg-ratio);
	overflow: hidden;
	/* вертикальный скролл страницы остаётся за браузером, горизонталь — наша */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* Запасной вариант для браузеров без aspect-ratio */
@supports not (aspect-ratio: 4 / 3){
	.bswg__viewport{
		height: 0;
		padding-bottom: 75%;
	}
}

.bswg__track{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.bswg--dragging .bswg__track{
	transition: none;
}

.bswg__slide{
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.bswg__link{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	text-decoration: none;
	outline: none;
	-webkit-user-drag: none;
}

.bswg .bswg__img{
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.bswg--fit-cover .bswg__img{
	object-fit: cover;
}

/* ---------- Стрелки ---------- */

.bswg__nav{
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--bswg-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	color: var(--bswg-accent);
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bswg__nav:hover{
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.bswg__nav:active{
	transform: translateY(-50%) scale(.94);
}

.bswg__nav svg{
	display: block;
	width: 20px;
	height: 20px;
}

.bswg__nav--prev{ left: 12px; }
.bswg__nav--next{ right: 12px; }

/* ---------- Точки ---------- */

.bswg__dots{
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 64px;
	pointer-events: none;
}

.bswg__dot{
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bswg-accent);
	border-radius: 50%;
	background: rgba(255, 255, 255, .75);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color .2s ease, transform .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bswg__dot:hover{
	background: var(--bswg-accent);
}

.bswg__dot.is-active{
	background: var(--bswg-accent);
	transform: scale(1.2);
}

/* ---------- Миниатюры ---------- */

.bswg__thumbs{
	position: relative;
	display: flex;
	gap: var(--bswg-gap);
	margin-top: var(--bswg-gap);
	padding-bottom: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--bswg-border) transparent;
	-webkit-overflow-scrolling: touch;
}

.bswg__thumbs::-webkit-scrollbar{
	height: 4px;
}

.bswg__thumbs::-webkit-scrollbar-thumb{
	border-radius: 2px;
	background: var(--bswg-border);
}

.bswg__thumb{
	flex: 0 0 calc((100% - (var(--bswg-thumbs) - 1) * var(--bswg-gap)) / var(--bswg-thumbs));
	max-width: calc((100% - (var(--bswg-thumbs) - 1) * var(--bswg-gap)) / var(--bswg-thumbs));
	aspect-ratio: var(--bswg-ratio);
	margin: 0;
	padding: 4px;
	border: 1px solid var(--bswg-border);
	border-radius: calc(var(--bswg-radius) - 2px);
	background: var(--bswg-bg);
	cursor: pointer;
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

@supports not (aspect-ratio: 4 / 3){
	.bswg__thumb{ height: 96px; }
}

.bswg__thumb:hover{
	opacity: 1;
}

.bswg__thumb.is-active{
	opacity: 1;
	border-color: var(--bswg-accent);
}

.bswg .bswg__thumb-img{
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

.bswg--fit-cover .bswg__thumb-img{
	object-fit: cover;
}

/* Один кадр — прячем всю обвязку */
.bswg--single .bswg__nav,
.bswg--single .bswg__dots,
.bswg--single .bswg__thumbs{
	display: none;
}

/* ---------- Запасной лайтбокс (если fancybox не подключён) ---------- */

.bswg-lb{
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 15, 14, .93);
	opacity: 0;
	transition: opacity .2s ease;
}

.bswg-lb.is-open{
	opacity: 1;
}

.bswg-lb__img{
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.bswg-lb__btn{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bswg-lb__btn:hover{
	background: rgba(255, 255, 255, .28);
}

.bswg-lb__close{ top: 16px; right: 16px; font-size: 26px; }
.bswg-lb__prev{ top: 50%; left: 16px; margin-top: -24px; }
.bswg-lb__next{ top: 50%; right: 16px; margin-top: -24px; }

/* ---------- Адаптив ---------- */

@media (max-width: 990px){
	.bswg{
		--bswg-gap: 8px;
		--bswg-radius: 6px;
	}

	.bswg__nav{
		width: 36px;
		height: 36px;
	}

	.bswg__nav svg{
		width: 16px;
		height: 16px;
	}

	.bswg__nav--prev{ left: 6px; }
	.bswg__nav--next{ right: 6px; }

	.bswg__dots{
		bottom: 8px;
		gap: 6px;
		padding: 0 48px;
	}

	.bswg__dot{
		width: 8px;
		height: 8px;
	}

	.bswg-lb__btn{
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}

@media (max-width: 600px){
	.bswg{
		--bswg-thumbs: 4;
	}
}

/* Пользователь просил не анимировать — не анимируем */
@media (prefers-reduced-motion: reduce){
	.bswg__track,
	.bswg__nav,
	.bswg__dot,
	.bswg__thumb,
	.bswg-lb{
		transition: none;
	}

	.bswg__thumbs{
		scroll-behavior: auto;
	}
}