/**
 * Блок товара «WEISAN — это качество и высокий уровень сервиса»
 * (block-good-warranty.php). Своя вёрстка вместо Zero-блока Tilda (15.11.2026).
 *
 * Размеры сняты с прежней вёрстки на её четырёх раскладках:
 *  - от 1200px: контейнер 1200, плашки гарантии 393×165, ниже две колонки —
 *    список с бегущей лентой и карточка статьи 393×407, под ними две плашки;
 *  - 960–1199: сетка Tilda фиксированная, контент 920, плашки 300×165;
 *  - 640–959: контент 600, плашки 300 в ряд и «Всегда на связи» на всю
 *    ширину (ряд по ширине контента), всё остальное в столбик;
 *  - уже 640: макет 360px, растянутый по ширине экрана (--u = 1/360 ширины блока).
 * Плашки гарантии без цифры в «Сводной» не выводятся — высота блока считается
 * сама, пустого места под плашками нет.
 */

.wsn-gwar {
	background: #ecf0f5;
	font-family: var(--t-text-font, 'Montserrat'), Arial, sans-serif;
	color: #222937;
	padding: 120px 0;
	overflow: hidden;
}

.wsn-gwar * { box-sizing: border-box; }
.wsn-gwar b { font-weight: 600; }

.wsn-gwar__wrap {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
}

/* ---------- заголовок ---------- */

.wsn-gwar__title {
	text-align: center;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: -.5px;
	text-transform: uppercase;
}

.wsn-gwar__title-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.wsn-gwar__title-row img { display: block; flex: none; width: 122px; height: 43px; }
.wsn-gwar__title-line { display: block; margin-top: 5px; }

.wsn-gwar__sub {
	margin-top: 50px;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 37px;
	letter-spacing: -.5px;
}

/* ---------- плашки гарантии ---------- */

.wsn-gwar__plates {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.wsn-gwar__plate {
	position: relative;
	/* плашки делят ряд поровну: три — по трети (393 при 1200, как у Tilda),
	   две — по половине, одна — половина по центру. Не уже трети, не шире
	   половины (просьба 15.11.2026) */
	flex: 1 1 0;
	min-width: calc((100% - 20px) / 3);
	max-width: calc(50% - 5px);
	height: 165px;
	padding: 20px;
	border-radius: 24px;
	background: #fff;
	overflow: hidden;
}

.wsn-gwar__plate_machine { background: #3d93ff; color: #fff; }
.wsn-gwar__plate_belts { background: #5fee88; }

.wsn-gwar__icon { display: block; width: 24px; height: 24px; }

.wsn-gwar__years {
	margin-top: 18px;
	font-size: 30px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: -.5px;
}

.wsn-gwar__name {
	margin-top: 28px;
	font-size: 20px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -.2px;
}

.wsn-gwar__text {
	position: relative;
	max-width: 333px;
	margin-top: 11px;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: -.2px;
	opacity: .8;
}

.wsn-gwar__phone {
	position: absolute;
	right: 47px;
	bottom: 0;
	width: 116px;
	height: auto;
}

/* ---------- список, лента, карточка, нижние плашки ---------- */

.wsn-gwar__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 393px;
	grid-template-areas: "left card" "bottom bottom";
	column-gap: 10px;
	row-gap: 50px;
	margin-top: 80px;
}

.wsn-gwar__left { grid-area: left; min-width: 0; }

.wsn-gwar__sub_left { margin-top: 0; text-align: left; }

.wsn-gwar__list {
	display: grid;
	grid-auto-rows: 50px;
	row-gap: 25px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.wsn-gwar__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.wsn-gwar__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
}

.wsn-gwar__dot img { display: block; width: 20px; height: 20px; }

.wsn-gwar__list li > span:last-child {
	max-width: 523px;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -.2px;
}

.wsn-gwar__list li:nth-child(2) > span:last-child { max-width: 464px; }

/* лента: окно с мягкими краями (у Tilda края закрывали размытые фигуры цвета фона) */
.wsn-gwar__strip {
	width: 796px;
	max-width: calc(100% + 10px);
	height: 112px;
	margin-top: 28px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 7px, #000 25px, #000 calc(100% - 18px), transparent);
	mask-image: linear-gradient(90deg, transparent 7px, #000 25px, #000 calc(100% - 18px), transparent);
}

.wsn-gwar__track {
	--run: -4000px;
	display: flex;
	gap: 10px;
	width: max-content;
}

.wsn-gwar__track img { display: block; flex: none; width: 1290px; height: 112px; }

/* как у Tilda: один проход за 60 секунд и остановка */
.wsn-gwar.is-run .wsn-gwar__track { animation: wsn-gwar-run 60s linear forwards; }

@keyframes wsn-gwar-run {
	to { transform: translateX(var(--run)); }
}

@media (prefers-reduced-motion: reduce) {
	.wsn-gwar.is-run .wsn-gwar__track { animation: none; }
}

/* карточка — целиком ссылка на статью */
.wsn-gwar__card {
	grid-area: card;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 407px;
	padding: 19px 19px 20px;
	border: 1px solid #e2e2e2;
	border-radius: 24px;
	background: #ecf0f5;
	color: #222937;
	text-decoration: none;
	overflow: hidden;
}

.wsn-gwar__card:hover { color: #222937; }

.wsn-gwar__card-title,
.wsn-gwar__card-text { position: relative; z-index: 1; display: block; }

.wsn-gwar__card-title {
	max-width: 298px;
	font-size: 24px;
	font-weight: 500;
	line-height: 33px;
	letter-spacing: -.5px;
}

.wsn-gwar__card-text {
	max-width: 320px;
	margin-top: 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -.2px;
}

.wsn-gwar__bear {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 255px;
	height: auto;
}

.wsn-gwar__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 177px;
	height: 50px;
	margin-top: auto;
	border-radius: 30px;
	background: #222937;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -.1px;
	transition: transform .1s ease;
}

.wsn-gwar__btn:hover { transform: scale(.98); }

.wsn-gwar__bottom {
	grid-area: bottom;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.wsn-gwar__note {
	position: relative;
	padding: 18px 20px;
	border-radius: 24px;
	background: #fff;
	color: #222937;
}

.wsn-gwar__note_blue { background: #3d93ff; color: #fff; }

.wsn-gwar__note-text {
	position: relative;
	z-index: 1;
	max-width: 519px;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: -.2px;
}

.wsn-gwar__note_blue .wsn-gwar__note-text { max-width: 473px; }

.wsn-gwar__note-icon {
	position: absolute;
	top: 17px;
	right: 20px;
	width: 85px;
	height: 85px;
}

/* ---------- 960–1199: фиксированная сетка Tilda, контент 920 ---------- */

@media (max-width: 1199px) {
	.wsn-gwar__wrap { max-width: 920px; }
	.wsn-gwar__title { font-size: 30px; line-height: 36px; }
	/* логотип (43px) выше строки (36px) — первая строка 43, вторая через 5px */
	.wsn-gwar__title-line { margin-top: 5px; }

	.wsn-gwar__plate_machine .wsn-gwar__text { max-width: 268px; }
	.wsn-gwar__phone { right: 15px; width: 90px; }

	.wsn-gwar__list li > span:last-child { max-width: 354px; }
	.wsn-gwar__list li:nth-child(2) > span:last-child { max-width: 436px; }
	.wsn-gwar__list li:nth-child(3) > span:last-child { max-width: 448px; }

	/* лента доходит до карточки и уходит под неё */
	.wsn-gwar__strip { width: calc(100% + 10px); max-width: none; }

	.wsn-gwar__note-text { max-width: 362px; }
	.wsn-gwar__note_blue .wsn-gwar__note-text { max-width: 357px; }
	.wsn-gwar__note-icon { top: 38px; right: 15px; }
}

/* ---------- 640–959: всё в столбик, контент 600 ---------- */

@media (max-width: 959px) {
	.wsn-gwar__wrap { max-width: 600px; }
	.wsn-gwar__sub { margin-top: 48px; font-size: 18px; line-height: 28px; }

	/* плашки гарантии: две по половине в ряд, «Всегда на связи» под ними во всю
	   ширину. Ряд ровно по ширине контента (у Tilda был 610 при контенте 600 —
	   вылезал вправо, отступ справа выходил меньше левого; исправлено 15.11.2026) */
	.wsn-gwar__plates {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
	.wsn-gwar__plate { flex: none; width: auto; min-width: 0; max-width: none; }
	.wsn-gwar__plate_contact { grid-column: 1 / -1; }
	/* одна гарантийная плашка — на всю строку, как «Всегда на связи»: место
	   занимаем по максимуму (просьба 15.11.2026, было 300px по центру) */
	.wsn-gwar__plates_2 .wsn-gwar__plate:first-child { grid-column: 1 / -1; }
	.wsn-gwar__years { margin-top: 31px; font-size: 24px; line-height: 24px; }
	.wsn-gwar__plate_machine .wsn-gwar__text,
	.wsn-gwar__plate_belts .wsn-gwar__text { margin-top: 10px; font-size: 14px; line-height: 18px; }
	.wsn-gwar__name { margin-top: 27px; }
	.wsn-gwar__plate_contact .wsn-gwar__text { margin-top: 12px; }
	.wsn-gwar__phone { right: 32px; bottom: 2px; width: 119px; }

	.wsn-gwar__body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "left" "bottom" "card";
		row-gap: 10px;
		margin-top: 50px;
	}
	.wsn-gwar__sub_left { margin-top: 0; font-size: 24px; line-height: 37px; }
	.wsn-gwar__list { grid-auto-rows: auto; row-gap: 20px; }
	.wsn-gwar__list li:nth-child(3) > span:last-child { max-width: 523px; }

	.wsn-gwar__strip {
		width: 605px;
		max-width: none;
		margin-top: 52px;
		margin-bottom: 40px;
		-webkit-mask-image: linear-gradient(90deg, transparent 27px, #000 45px, #000 calc(100% - 18px), transparent);
		mask-image: linear-gradient(90deg, transparent 27px, #000 45px, #000 calc(100% - 18px), transparent);
	}

	.wsn-gwar__bottom { grid-template-columns: minmax(0, 1fr); }
	.wsn-gwar__note:not(.wsn-gwar__note_blue) { padding-bottom: 16px; }
	.wsn-gwar__note-text { max-width: 446px; }
	.wsn-gwar__note_blue .wsn-gwar__note-text { max-width: 464px; }
	.wsn-gwar__note-icon { top: 27px; right: 20px; }
	.wsn-gwar__note_blue .wsn-gwar__note-icon { top: 17px; }

	.wsn-gwar__card { height: 377px; }
	.wsn-gwar__card-title { max-width: 249px; font-size: 20px; line-height: 27px; }
	.wsn-gwar__card-text { margin-top: 10px; font-size: 14px; line-height: 18px; }
	.wsn-gwar__bear { width: 317px; }
}

/* ---------- уже 640: макет 360px, растянутый по ширине экрана ---------- */

@media (max-width: 639px) {
	/* --u — от ширины блока (cqw), не окна: 100vw включает полосу прокрутки.
	   Сама секция cqw в своих свойствах не видит, поэтому отступы — у обёртки. */
	.wsn-gwar {
		container-type: inline-size;
		--u: calc(100cqw / 360);
		padding: 0;
	}
	.wsn-gwar__wrap {
		width: calc(328 * var(--u));
		max-width: none;
		padding: calc(100 * var(--u)) 0;
	}

	.wsn-gwar__title {
		text-align: left;
		font-size: calc(26 * var(--u));
		line-height: calc(31 * var(--u));
	}
	.wsn-gwar__title-row { flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); }
	.wsn-gwar__title-row img { width: calc(122 * var(--u)); height: calc(43 * var(--u)); }
	.wsn-gwar__title-line { margin-top: calc(1 * var(--u)); }

	.wsn-gwar__sub {
		margin-top: calc(40 * var(--u));
		text-align: left;
		font-size: calc(16 * var(--u));
		line-height: calc(25 * var(--u));
		letter-spacing: -.2px;
	}

	.wsn-gwar__plates {
		display: flex;
		flex-direction: column;
		gap: calc(10 * var(--u));
		width: 100%;
		margin-top: calc(10 * var(--u));
	}
	.wsn-gwar__plate,
	.wsn-gwar__plate_contact {
		width: auto;
		height: auto;
		padding: calc(16 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.wsn-gwar__icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
	.wsn-gwar__years { margin-top: calc(16 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
	.wsn-gwar__name { margin-top: calc(16 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(18 * var(--u)); }
	.wsn-gwar__text,
	.wsn-gwar__plate_machine .wsn-gwar__text,
	.wsn-gwar__plate_belts .wsn-gwar__text {
		margin-top: calc(10 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(17 * var(--u));
	}
	.wsn-gwar__plate_machine .wsn-gwar__text { max-width: calc(268 * var(--u)); }
	.wsn-gwar__plate_contact .wsn-gwar__text { margin-top: calc(14 * var(--u)); }
	.wsn-gwar__phone { right: calc(27 * var(--u)); bottom: 0; width: calc(96 * var(--u)); }

	.wsn-gwar__body { row-gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); }
	.wsn-gwar__sub_left {
		max-width: calc(225 * var(--u));
		margin-top: 0;
		padding-left: calc(4 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(23 * var(--u));
	}
	.wsn-gwar__list { row-gap: calc(21 * var(--u)); margin-top: calc(20 * var(--u)); }
	.wsn-gwar__list li { gap: calc(10 * var(--u)); }
	.wsn-gwar__dot { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(5 * var(--u)); }
	.wsn-gwar__dot img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
	.wsn-gwar__list li > span:last-child,
	.wsn-gwar__list li:nth-child(2) > span:last-child,
	.wsn-gwar__list li:nth-child(3) > span:last-child {
		max-width: calc(276 * var(--u));
		margin-top: 0;
		font-size: calc(13 * var(--u));
		line-height: calc(16 * var(--u));
	}

	.wsn-gwar__strip {
		width: calc(332 * var(--u));
		height: calc(95 * var(--u));
		/* 46: у Tilda 50 считались от кружка последнего пункта, а текст ниже его на 4 */
		margin: calc(46 * var(--u)) 0 calc(10 * var(--u)) calc(-13 * var(--u));
		-webkit-mask-image: linear-gradient(90deg, transparent calc(22 * var(--u)), #000 calc(40 * var(--u)), #000 calc(100% - 18 * var(--u)), transparent);
		mask-image: linear-gradient(90deg, transparent calc(22 * var(--u)), #000 calc(40 * var(--u)), #000 calc(100% - 18 * var(--u)), transparent);
	}
	.wsn-gwar__track { --run: calc(-4000 * var(--u)); gap: calc(8 * var(--u)); }
	.wsn-gwar__track img { width: calc(1092 * var(--u)); height: calc(95 * var(--u)); }

	.wsn-gwar__note {
		padding: calc(16 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.wsn-gwar__note-text,
	.wsn-gwar__note_blue .wsn-gwar__note-text {
		max-width: calc(288 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(17 * var(--u));
	}
	.wsn-gwar__note_blue .wsn-gwar__note-text { max-width: calc(261 * var(--u)); }
	.wsn-gwar__note-icon,
	.wsn-gwar__note_blue .wsn-gwar__note-icon {
		top: auto;
		right: calc(2 * var(--u));
		bottom: calc(2 * var(--u));
		width: calc(85 * var(--u));
		height: calc(85 * var(--u));
	}

	.wsn-gwar__card {
		height: calc(319 * var(--u));
		padding: calc(15 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.wsn-gwar__card-title { max-width: calc(220 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
	.wsn-gwar__card-text { max-width: calc(236 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); }
	.wsn-gwar__bear { width: calc(230 * var(--u)); }
	.wsn-gwar__btn { width: calc(177 * var(--u)); height: calc(50 * var(--u)); font-size: calc(14 * var(--u)); }
}