/**
 * Галерея и слайдер.
 * Одна и та же разметка: пока элементов не больше, чем колонок, — сетка;
 * больше — лента со стрелками. Число колонок приходит из шаблона
 * в --pb-cols-desktop и режется на узких экранах.
 */

.pb-gallery {
	--pb-cols-desktop: 4;
	--pb-cols: var(--pb-cols-desktop);
	--pb-gap: 20px;

	display: flex;
	flex-wrap: wrap;
	/* start, а не stretch: иначе одна высокая плитка тянет за собой весь ряд. */
	align-items: flex-start;
	gap: var(--pb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pb-gallery__item {
	flex: 0 0 auto;
	inline-size: calc((100% - (var(--pb-cols) - 1) * var(--pb-gap)) / var(--pb-cols));
}

/*
 * Кадр задаём контейнеру, а не картинке: тогда все плитки ряда
 * одной высоты, даже пока фотографии ещё грузятся.
 */
.pb-gallery__link,
.pb-gallery__item {
	display: block;
	overflow: hidden;
}

/* Кадр держит и плитка, и ссылка внутри — тогда ряд ровный
   ещё до того, как загрузились фотографии. */
.pb-gallery[style*="--pb-ratio"] .pb-gallery__item,
.pb-gallery[style*="--pb-ratio"] .pb-gallery__link {
	aspect-ratio: var(--pb-ratio);
}

/*
 * Без заданного кадра высоту держит само изображение: у тега есть
 * width/height, и браузер резервирует место до загрузки файла.
 * Явная высота это резервирование ломает, поэтому включаем её
 * только там, где кадр задан.
 */
.pb-gallery__img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: auto;
	object-fit: cover;
	background: #f0f2f5;
	transition: transform .45s ease;
}

.pb-gallery[style*="--pb-ratio"] .pb-gallery__img {
	block-size: 100%;
	aspect-ratio: var(--pb-ratio);
}

.pb-gallery__link:hover .pb-gallery__img,
.pb-gallery__link:focus-visible .pb-gallery__img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.pb-gallery__img {
		transition: none;
	}

	.pb-gallery__link:hover .pb-gallery__img {
		transform: none;
	}
}

/* --------------------------------------------------------------- *
 * Режим слайдера
 * --------------------------------------------------------------- */

.pb-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pb-slider__track {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	padding-block-end: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.pb-slider__track .pb-gallery__item {
	scroll-snap-align: start;
}

.pb-slider__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	padding: 0;
	border: 1px solid var(--pb-line, #e4e9e8);
	border-radius: 50%;
	background: #fff;
	color: var(--pb-dark, #141c1a);
	line-height: 0;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

/* Иконка — квадратная и по центру: без этого стрелка уезжала вбок. */
.pb-slider__nav svg {
	display: block;
	inline-size: 22px;
	block-size: 22px;
}

.pb-slider__nav--prev svg {
	margin-inline-end: 2px;
}

.pb-slider__nav--next svg {
	margin-inline-start: 2px;
}

.pb-slider__nav:hover:not(:disabled),
.pb-slider__nav:focus-visible:not(:disabled) {
	border-color: var(--pb-accent, #007cd6);
	background: var(--pb-accent, #007cd6);
	color: #fff;
}

.pb-slider__nav:disabled {
	opacity: .3;
	cursor: default;
}

.pb-slider--static .pb-slider__nav {
	display: none;
}

/* --------------------------------------------------------------- *
 * Адаптив: колонок не больше, чем задано в шаблоне
 * --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.pb-gallery {
		--pb-cols: min(3, var(--pb-cols-desktop));
	}
}

@media (max-width: 767px) {
	.pb-gallery {
		--pb-cols: min(2, var(--pb-cols-desktop));
		--pb-gap: 14px;
	}

	.pb-slider__nav {
		display: none;
	}
}

@media (max-width: 420px) {
	.pb-gallery {
		--pb-cols: 1;
	}
}