/*
 * Блок «Шоурум і склад».
 *
 * Перенос из макета (bShowroom) один в один по классам — иначе сверка
 * с утверждённым видом перестаёт быть механической. Отличие одно:
 * правила заскоуплены под .uhl-home вместо body.ux-skin.
 *
 * Фото здесь 16:9, а не 5:4 как в остальных блоках редизайна. Перепутать
 * легко, поэтому пропорция задана в CSS, а не только размерами ресайза.
 */

.uhl-home .ux-shop .ux-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

/* Фото справа — перестановка колонок, а не второй набор разметки. */
.uhl-home .ux-shop .ux-in.is-flip .ux-shop__ph {
	order: 2;
}

.uhl-home .ux-shop__ph {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #0f1b33;
}

/* Тёплое покрытие поверх снимка — из макета. Тянется от нижнего левого
   угла и гаснет к 72%: снимок фасада сам по себе холодный, и без него
   блок выпадал из золотисто-синей гаммы страницы.
   pointer-events НЕ перехватываем: под ним ссылка. */
.uhl-home .ux-shop__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(to top right,
		rgba(247, 181, 0, .26) 0%,
		rgba(247, 181, 0, .10) 42%,
		rgba(247, 181, 0, 0) 72%);
}

.uhl-home .ux-shop__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.uhl-home .ux-shop__tx {
	position: relative;
	padding-left: clamp(0px, 3vw, 40px);
}

/* Вертикальный разделитель между колонками. На узких экранах исчезает
   вместе с самими колонками. */
@media (min-width: 861px) {
	.uhl-home .ux-shop__tx::before {
		content: "";
		position: absolute;
		left: 0;
		top: 6px;
		bottom: 6px;
		width: 1px;
		background: #e4e8ef;
	}
}

/* Отступа сверху нет: его уже даёт нижний отступ заголовка. Раньше
   стояли лишние 18px, и список отъезжал от шапки блока.
   Сетка с зазором 2px — из макета: строки разделены волоском, и без
   зазора соседние волоски вставали слишком плотно. */
.uhl-home .ux-shop__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.uhl-home .ux-shop__list a,
.uhl-home .ux-shop__list div {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 4px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--uxc-line3);
	/* Переход только по цвету и фону: анимировать раскладку нельзя. */
	transition: color var(--ux-dur-base) var(--ux-ease), background var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-shop__list li:last-child a,
.uhl-home .ux-shop__list li:last-child div {
	border-bottom: 0;
}

.uhl-home .ux-shop__list a:hover {
	color: var(--uxc-blue);
	background: var(--uxc-tint);
}

/* Строка-ссылка обязана быть тач-целью. 44px — минимум, ниже начинаются
   промахи; визуально это не меняет ничего, потому что отступы уже такие. */
.uhl-home .ux-shop__list a {
	min-height: 44px;
}

/* Ведущий значок строки КРУПНЕЕ базовых 18px. Шеврон справа — это
   тоже .ux-ic, но своё правило ниже перебивает размер обратно на 18. */
.uhl-home .ux-shop__list .ux-ic {
	width: 24px;
	height: 24px;
	color: var(--uxc-blue);
}

.uhl-home .ux-shop__list span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.uhl-home .ux-shop__list b {
	font-weight: 600;
}

.uhl-home .ux-shop__list small {
	margin-top: 2px;
	font-size: 12.5px;
	/* 1.35, а не общие 1.5: подпись под строкой набрана плотнее, и на
	   общем междустрочии строка списка становилась на два пикселя выше. */
	line-height: 1.35;
	/* На сером #f6f6f6 прежний #6b7688 давал 4.25 при норме 4.5.
	   На белом он проходил — потому и не замечался. */
	color: #677183;
}

.uhl-home .ux-ic.ux-shop__go {
	margin-left: auto;
	width: 18px;
	height: 18px;
	/* Цвет подобран под САМУЮ ТЁМНУЮ из трёх подложек, на которых он
	   встречается: белой карточки, #f7f9fc секции и #f6f6f6 темы.
	   Подбирать под белую мало: замерено, прежнее значение давало
	   ровно норму на белом и проваливалось на двух других. */
	color: #8190a7;
}

@media (max-width: 860px) {
	.uhl-home .ux-shop .ux-in {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* На одной колонке перестановка теряет смысл: фото всегда сверху. */
	.uhl-home .ux-shop .ux-in.is-flip .ux-shop__ph {
		order: 0;
	}

	.uhl-home .ux-shop__tx {
		padding-left: 0;
	}
}

/* --------------------------------------------------- сверено с макетом */

/* Заголовок шоурума не имеет верхнего отступа: над ним надзаголовок
   с иконкой, а под ним сразу список — воздух нужен только снизу. */
.uhl-home .ux-shop__tx .ux-h2 { margin: 0 0 18px; }

/* Иконка надзаголовка здесь крупнее базовых 18px. */
.uhl-home .ux-shop__tx .ux-eyebrow .ux-ic { width: 24px; height: 24px; }