/* =============================================================
   PIARNYA — Case Hero Gallery (крупное фото + миниатюры кейса)
   Используется в template-parts/case-detail.php (single-cases.php).
   Только фото-часть — блок данных (.case-detail__*) вынесен в case-single.css.
   Зависит от: variables.css, base.css
   ============================================================= */

.case-hero-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* ── ГЛАВНОЕ ФОТО ────────────────────────────────────────────── */
.case-gallery__carousel {
	position: relative;
}

.case-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: var(--radius-xl);
}

.case-gallery__track::-webkit-scrollbar {
	display: none;
}

.case-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 16 / 9;
	max-height: 480px;
}

.case-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-gallery__single,
.case-gallery__placeholder {
	aspect-ratio: 16 / 9;
	max-height: 480px;
	overflow: hidden;
	border-radius: var(--radius-xl);
}

.case-gallery__single img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
}

.case-gallery__placeholder img {
	opacity: .5;
}

.case-gallery__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .9);
	color: var(--hh-text);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

.case-gallery__arrow:hover { background: #fff; }
.case-gallery__arrow[disabled] { opacity: .35; pointer-events: none; }
.case-gallery__arrow--prev { left: var(--sp-4); }
.case-gallery__arrow--next { right: var(--sp-4); }

@media (min-width: 1100px) {
	.case-gallery__arrow {
		display: flex;
	}
}

/* ── МИНИАТЮРЫ ───────────────────────────────────────────────── */
.case-gallery__thumbs {
	display: flex;
	gap: var(--sp-3);
}

.case-gallery__thumb {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	max-width: 180px;
	height: 90px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	background: var(--hh-text);
	opacity: .7;
	cursor: pointer;
	transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.case-gallery__thumb:hover {
	opacity: .9;
}

.case-gallery__thumb.is-active {
	border-color: var(--brand-solid);
	opacity: 1;
}

.case-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-gallery__thumb-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--sp-1) var(--sp-2);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	background: linear-gradient(0deg, rgba(21, 10, 36, .55), transparent);
	text-align: center;
}

/* ── ANIMATION-FREE ДЛЯ prefers-reduced-motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
	.case-gallery__track {
		scroll-behavior: auto !important;
	}
}

/* ══ МОБИЛЬНЫЕ ЭЛЕМЕНТЫ: в DOM всегда, видимы только ≤767px ══════ */
.case-gallery__counter,
.case-gallery__dots,
.case-gallery__hint {
	display: none;
}

/* ══ MOBILE ≤767px — макет Claude Design, фрейм 3b ═══════════════ */
@media (max-width: 767px) {

	.case-hero-gallery {
		gap: 12px;
	}

	/* фикс-высота вместо aspect-ratio/max-height (десктопные значения не трогаем) */
	.case-gallery__slide,
	.case-gallery__single,
	.case-gallery__placeholder {
		aspect-ratio: auto;
		height: 232px;
		max-height: none;
	}

	.case-gallery__track,
	.case-gallery__single,
	.case-gallery__placeholder {
		border-radius: 18px;
	}

	/* стрелки — показываем и на мобильном (десктопный display:flex ≥1100px не трогаем) */
	.case-gallery__arrow {
		display: flex;
		background: rgba(250, 250, 252, .94);
		box-shadow: 0 4px 14px -6px rgba(21, 10, 36, .5);
	}

	.case-gallery__arrow--prev { left: 10px; }
	.case-gallery__arrow--next { right: 10px; }

	/* счётчик N / M — оверлей на фото */
	.case-gallery__counter {
		display: block;
		position: absolute;
		top: 12px;
		right: 14px;
		padding: 6px 11px;
		border-radius: var(--radius-full);
		background: rgba(21, 10, 36, .55);
		color: #fff;
		font-weight: 600;
		font-size: 11px;
		line-height: 1;
	}

	/* точки — отдельный ряд под фото (не поверх, в отличие от .case__dots каталога) */
	.case-gallery__dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
	}

	.case-gallery__dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-full);
		background: var(--case-pill-line);
		cursor: pointer;
		transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
	}

	.case-gallery__dot.is-active {
		width: 22px;
		background: var(--brand-solid);
	}

	.case-gallery__hint {
		display: block;
		text-align: center;
		font-weight: 500;
		font-size: 11px;
		color: var(--case-text-4);
	}

	/* миниатюр на мобильном нет — заменены точками+счётчиком */
	.case-gallery__thumbs {
		display: none;
	}
}