/*
 * Продукция в интерьере.
 *
 * Значения из макета, из КОНЕЧНЫХ правил `#uxStage .ux-blk[data-key=lifestyle]`:
 * сетка 3 колонки с зазором 14px, фото 5:4, точка 26px синяя с белой обводкой
 * 4px, карточка 250px с радиусом 14px. В файле макета лежат ещё два варианта
 * с дорожкой и другой пропорцией — они не используются.
 */

.uhl-home .ux-lookgrid {
	display: grid;
	grid-template-columns: repeat(var(--uhl-cols, 3), minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.uhl-home .ux-look {
	position: relative;
	aspect-ratio: 5 / 4;
	/* Карточка выходит за фото и вверх, и вбок — так задумано: она висит
	   над точкой и иначе закрывала бы ровно то, на что указывает.

	   Плитка её НЕ ограничивает. Такую попытку делали (2.56.0, дотяг
	   через --hs-dx) и отменили: прижатая к краю плитки карточка
	   перестаёт «смотреть» на свою точку и уезжает в угол. Единственная
	   граница — край ОКНА, и она не про красоту, а про то, чтобы не
	   появилась горизонтальная прокрутка всей страницы; ставит её
	   place() в frontend.js.

	   overflow здесь visible именно поэтому: обрезка съела бы вылет,
	   который нужен. */
	overflow: visible;
}

.uhl-home .ux-look__ph {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #dde5f0;
}

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

.uhl-home .ux-look__cap { display: block; margin-top: 11px; }
.uhl-home .ux-look__cap b { display: block; font-size: 15px; font-weight: 700; color: var(--uxc-ink); }
.uhl-home .ux-look__cap i { display: block; font-style: normal; font-size: 13px; color: var(--uxc-mut); margin-top: 2px; }

/* 52ch, а не 640px: ширина строки в знаках, а не в пикселях — подсказка
   остаётся одинаково читаемой и при другом кегле. */
.uhl-home .ux-hot-hint {
	margin: 6px 0 0;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.4;
	/* На сером #f6f6f6 прежний #6b7688 давал 4.25 при норме 4.5.
	   На белом он проходил — потому и не замечался. */
	color: #677183;
}

/* ------------------------------------------------------------------ точка */

.uhl-home .ux-hot {
	position: absolute;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: var(--uxc-blue);
	border: 4px solid #fff;
	box-shadow: 0 2px 9px rgba(0, 0, 0, .4);
	cursor: pointer;
	transform: translate(-50%, -50%);
	z-index: 4;
	transition: transform var(--ux-dur-fast) var(--ux-ease-hover);
	/* Четыре цикла, а не бесконечность.

	   Пульсация нужна, чтобы точку ЗАМЕТИЛИ, а не чтобы она мигала всё
	   время. На фото с шестью точками бесконечная анимация — шесть
	   источников постоянного движения в кадре, и внимание уходит с самой
	   мебели, ради которой снимок и стоит на странице.

	   forwards, чтобы точка осталась в конечном состоянии, а не прыгнула
	   обратно в исходное на последнем кадре. */
	animation: uhl-pulse 3.2s ease-out 4 forwards;
}

/* Зона нажатия 44px невидимым слоем. Вид точки не меняется — меняется
   только вероятность попасть по ней пальцем. */
.uhl-home .ux-hot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
}

.uhl-home .ux-hot:hover,
.uhl-home .ux-hot[aria-expanded="true"] { transform: translate(-50%, -50%) scale(1.15); }

.uhl-home .ux-hot:focus-visible { outline: 3px solid var(--uxc-gold); outline-offset: 3px; }

@keyframes uhl-pulse {
	0%   { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 0 rgba(31, 79, 158, .5); }
	60%  { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 14px rgba(31, 79, 158, 0); }
	100% { box-shadow: 0 2px 9px rgba(0, 0, 0, .4), 0 0 0 0 rgba(31, 79, 158, 0); }
}

/* --------------------------------------------------------------- карточка */

.uhl-home .ux-hot__card {
	position: absolute;
	z-index: 5;
	min-width: 214px;
	width: 250px;
	padding: 13px;
	background: #fff;
	border: 1px solid #edf1f7;
	border-radius: 14px;
	box-shadow: 0 20px 44px -16px rgba(13, 25, 45, .42), 0 2px 6px rgba(13, 25, 45, .10);
	display: flex;
	gap: 11px;
	/* Над точкой, по центру. У края ОКНА перекидчики переключают эти
	   сдвиги — чтобы карточка не вышла за экран и не дала горизонтальную
	   прокрутку. Выбирает их place() в frontend.js, там же и почему. */
	transform: translate(-50%, calc(-100% - 22px));

	/* Прокрутка не «пробивает» карточку наружу: докрутив её до края,
	   человек иначе продолжает листать страницу под ней, и карточка
	   уезжает вместе с фото. */
	overscroll-behavior: contain;
}

.uhl-home .ux-hot__card.is-flip-left  { transform: translate(-14px, calc(-100% - 22px)); }
.uhl-home .ux-hot__card.is-flip-right { transform: translate(calc(-100% + 14px), calc(-100% - 22px)); }
.uhl-home .ux-hot__card.is-below      { transform: translate(-50%, 22px); }

.uhl-home .ux-hot__thumb { flex: 0 0 auto; }
.uhl-home .ux-hot__thumb img { width: 74px; height: 74px; object-fit: contain; display: block; border-radius: 8px; background: #f5f8fc; }

.uhl-home .ux-hot__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uhl-home .ux-hot__meta b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--uxc-ink); }

.uhl-home .ux-hot__meta .pr {
	font-family: 'Geologica', 'Onest', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--uxc-ink2);
	font-variant-numeric: tabular-nums;
}

.uhl-home .ux-hot__meta .pr s { font-size: 12px; font-weight: 400; color: #9aa6b8; }

/* Действие одно, поэтому оно и оформлено как основное: контурная кнопка
   в одиночестве читается как недоделанная карточка. */
.uhl-home .ux-hot__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin-top: 7px;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--uxc-blue);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

.uhl-home .ux-hot__go:hover { background: #17417f; color: #fff; }

.uhl-home .ux-hot__stub { margin: 0; font-size: 12.5px; color: var(--uxc-mut); }

/* Скелетон на время запроса: пустой белый прямоугольник читается как поломка. */
.uhl-home .ux-hot__card.is-loading .ux-hot__stub { opacity: .55; }

.uhl-home .ux-hot__err { margin: 0; font-size: 12.5px; color: #e03131; }

/* ---------------------------------------------------- панель под фото */

.uhl-home .ux-look__panel {
	display: none;
	margin-top: 10px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--uxc-line2);
	border-radius: 12px;
	gap: 11px;
}

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

@media (max-width: 900px) {
	.uhl-home .ux-lookgrid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	/*
	 * Всплывающая карточка 250px над фото шириной ~343px закрывает 73 %
	 * кадра — то есть ровно то, на что указывает точка. На узких экранах
	 * карточка не всплывает, а выезжает панелью ПОД фото.
	 */
	.uhl-home .ux-hot__card { display: none !important; }
	.uhl-home .ux-look__panel[data-open="1"] { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.uhl-home .ux-hot { animation: none; transition: none; }
	.uhl-home .ux-hot:hover,
	.uhl-home .ux-hot[aria-expanded="true"] { transform: translate(-50%, -50%); }
}