/**
 * Блок товара «Советуем также рассмотреть модели с электронной гитарой» —
 * своя вёрстка вместо t396 (Tilda). Подключается только на страницах товара
 * (см. functions.php), показывается только токарным без гитары (page-good.php).
 *
 * У Tilda это был артборд с абсолютными координатами и четырьмя высотами
 * (608 / 607 / 799 / 1101 px). Здесь — две колонки и обычный поток, высота
 * считается сама. Размеры шрифтов оставлены ровно те же, что были у артборда:
 * заголовок 40 / 30 / 26, лид 16 / 13, плашки 14 / 13, отзыв 14, подпись 12,
 * жёлтая плашка 14.
 *
 * Строка карточек под текстом использует общие классы .wsn-eqrow из
 * good-equipment.css — там же прокрутка, номера страниц и стрелки.
 */

.wsn-rel {
	background: var(--uc-color-color-uzQ6QSHo, #ecf0f5);
	padding: 56px 0 44px;
	font-family: 'Montserrat', Arial, sans-serif;
	color: var(--uc-color-color-fRWotIFb, #222937);
	box-sizing: border-box;
}

.wsn-rel * { box-sizing: border-box; }

.wsn-rel__cont {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ------------------------------------------------- верх: текст и фотография */

/* У Tilda фото стояло справа и вылезало за колонку. Держим ту же пропорцию:
   текст занимает около 60 % ширины, фото — остальное. */
.wsn-rel__top {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.wsn-rel__text { flex: 1 1 620px; min-width: 0; }

.wsn-rel__media {
	position: relative;
	flex: 0 1 580px;
	min-width: 0;
	align-self: stretch;
}

/* ------------------------------------------------------------- тексты слева */

.wsn-rel__title {
	margin: 0 0 20px;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

/* вторая строка заголовка была потолще — этим и держится акцент */
.wsn-rel__title span { font-weight: 500; }

.wsn-rel__lead {
	max-width: 660px;
	margin: 0 0 28px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.2px;
	opacity: .9;
}

.wsn-rel__lead b { font-weight: 600; }

/* --------------------------------------------------------- две белые плашки */

.wsn-rel__facts {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
}

/* у Tilda плашки были 286×135 фиксированные; здесь тянутся поровну,
   а высота выравнивается растяжкой — текст в них разной длины */
.wsn-rel__fact {
	flex: 1 1 0;
	min-width: 0;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.2px;
}

.wsn-rel__tick {
	display: block;
	width: 19px;
	height: 19px;
	margin-bottom: 14px;
}

/* -------------------------------------------------------------------- отзыв */

.wsn-rel__quote { margin: 0; }

.wsn-rel__quote-mark {
	display: block;
	width: 20px;
	height: auto;
	margin-bottom: 8px;
}

.wsn-rel__quote-text {
	max-width: 605px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.4;
	letter-spacing: -0.3px;
}

/* подпись у Tilda прижата к правому краю колонки отзыва */
.wsn-rel__quote-author {
	max-width: 605px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.2px;
	text-align: right;
}

/* -------------------------------------------------- фотография и «мечта» */

.wsn-rel__photo {
	display: block;
	width: 100%;
	max-width: 579px;
	height: auto;
	margin-left: auto;
}

/* жёлтая плашка сидела поверх нижнего правого угла фотографии */
.wsn-rel__dream {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 269px;
	min-height: 97px;
	padding: 14px 106px 14px 16px;   /* справа место под медведя */
	border-radius: 24px;
	background: var(--uc-color-color-pIBDQY4BAZ, #ffd24a);
}

.wsn-rel__dream-tick {
	width: 14px;
	height: 14px;
	margin-bottom: 8px;
}

.wsn-rel__dream-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.3px;
}

.wsn-rel__dream-text b { font-weight: 600; }

/* медведь выходит за правый край плашки, как и было у Tilda */
.wsn-rel__bear {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 106px;
	height: auto;
}

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

/* Карточка не переопределяется ни одним правилом: заказчик просил один в один
   с каталогом, поэтому здесь только отступ строки от текста. Сама строка лежит
   вне .wsn-rel__cont и ширину берёт у .wsn-eqrow .t-container — ровно ту же,
   что «Дополнительная оснастка» и каталог. */
.wsn-rel__row { margin-top: 44px; }

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

@media (max-width: 1279px) {
	.wsn-rel__title { font-size: 30px; }
}

@media (max-width: 1023px) {
	/* фото уходит под текст: в одну строку колонки уже не помещаются */
	.wsn-rel__top { flex-direction: column; gap: 32px; }
	.wsn-rel__media { align-self: stretch; width: 100%; }
	.wsn-rel__photo { margin: 0 auto; }
}

@media (max-width: 639px) {
	.wsn-rel { padding: 40px 0 32px; }
	.wsn-rel__title { font-size: 26px; }
	.wsn-rel__lead { font-size: 13px; }

	/* плашки встают друг под друга, углы чуть меньше — как на мобильной Tilda */
	.wsn-rel__facts { flex-direction: column; }
	.wsn-rel__fact { font-size: 13px; border-radius: 18px; }

	/* «мечта» перестаёт наезжать на фото: места под неё уже нет.
	   position:relative, а не static — иначе медведь внутри неё
	   отсчитывался бы от колонки с фотографией и уехал бы наверх. */
	.wsn-rel__dream {
		position: relative;
		width: 100%;
		max-width: 270px;
		margin: 16px auto 0;
	}
	.wsn-rel__bear { right: 0; bottom: 0; }

	.wsn-rel__row { margin-top: 32px; }
}