/* ==========================================================================
   Листание фото в карточке объявления — «как на Авито» (30.09.2026).
   Разметка — components/main/item.blade.php (.pg), поведение —
   assets/js/card-gallery.js, фото — App\Support\ItemGallery.

   Слой .pg лежит поверх главного фото карточки (z-index 1 — под лёгкой
   подложкой ::after и значками «Продвинуто», флагом Китая, просмотрами).
   ПК: лента кадров без прокрутки, кадр выбирает скрипт по положению мыши;
   точки видны при наведении. Телефон/касание: лента листается пальцем
   (scroll-snap), точки видны всегда.
   ========================================================================== */

/* без этого файла слой остаётся скрытым (атрибут hidden в разметке) */
.post-item-image .pg[hidden] {
	display: block;
}

.post-item-image .pg {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	border-radius: inherit;
}

.pg-track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	scrollbar-width: none;
}

.pg-track::-webkit-scrollbar {
	display: none;
}

.pg-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
}

.post-item-image .pg-slide img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	background: var(--light);
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* последний кадр, если фото больше пяти */
.pg-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: rgb(22 14 24 / 48%);
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.pg-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.pg-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(255 255 255 / 55%);
	box-shadow: 0 0 3px rgb(0 0 0 / 35%);
}

.pg-dots i.on {
	background: var(--white);
}

.post-item-image:hover .pg-dots {
	opacity: 1;
}

/* касание: листать пальцем, точки всегда */
@media (hover: none), (pointer: coarse) {
	.pg-track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.pg-slide {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.pg-dots {
		opacity: 1;
	}
}