/**
 * Блок товара «Окупится быстрее, чем кажется» (block-good-economics.php).
 * Своя вёрстка вместо Zero-блока Tilda (15.11.2026).
 *
 * Размеры сняты с прежней вёрстки на её раскладках:
 *  - от 1200: заголовок 40/48, контент 837 по центру — две плашки 413×154,
 *    ниже цитата с медведем слева и слайдер отзывов 314×382 справа;
 *  - 960–1199: то же, заголовок 30/36;
 *  - 640–959: контент 590, плашки 290×195, слайдер под цитатой по центру,
 *    декоративной стрелки нет;
 *  - уже 640: макет 360px, растянутый по ширине экрана (--u = 1/360 ширины блока).
 * Медведь, белая растушёвка под ним и зелёная подпись накладываются друг на
 * друга, как у Tilda, — поэтому внутри цитаты они стоят абсолютно.
 */

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

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

/* общий CSS Tilda ставит p и h2 «text-wrap: pretty» — переносы были бы другие */
.wsn-geco p,
.wsn-geco h2 { text-wrap: wrap; }

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

.wsn-geco__title {
	margin: 0;
	text-align: center;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: -.5px;
	color: #222937;
}

.wsn-geco__title span { font-weight: 500; }

.wsn-geco__intro {
	max-width: 592px;
	margin: 20px auto 0;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: -.2px;
	color: #000;
	opacity: .8;
}

/* ---------- плашки, цитата, слайдер ---------- */

.wsn-geco__body {
	position: relative;
	width: 837px;
	max-width: 100%;
	margin: 50px auto 0;
}

.wsn-geco__plates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.wsn-geco__plate {
	min-height: 154px;
	padding: 20px 21px 19px;
	border-radius: 24px;
	color: #fff;
}

.wsn-geco__plate_dark { background: #222937; }
.wsn-geco__plate_blue { background: #3d93ff; padding-left: 20px; }

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

.wsn-geco__plate-text {
	max-width: 365px;
	margin: 11px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -.2px;
	color: #fff;
}

.wsn-geco__decor {
	position: absolute;
	top: 68px;
	left: 809px;
	width: 99px;
	height: auto;
	pointer-events: none;
}

.wsn-geco__lower {
	display: grid;
	grid-template-columns: 473px 314px;
	margin-top: 39px;
}

/* цитата: всё внутри стоит от её левого верхнего угла; порядок слоёв как у
   Tilda — тексты, над ними медведь, растушёвка, зелёная подпись */
.wsn-geco__quote {
	position: relative;
	height: 382px;
}

.wsn-geco__qmark,
.wsn-geco__ask,
.wsn-geco__avg,
.wsn-geco__bear,
.wsn-geco__fade,
.wsn-geco__pill { position: absolute; margin: 0; }

.wsn-geco__qmark { top: 0; left: 1px; width: 20px; height: 17px; }

.wsn-geco__ask {
	top: 27px;
	left: 0;
	width: 182px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -.2px;
}

.wsn-geco__avg {
	top: 93px;
	left: 0;
	width: 224px;
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: -.2px;
}

.wsn-geco__bear { z-index: 1; top: -7px; left: 68px; width: 416px; height: auto; }
.wsn-geco__fade { z-index: 2; top: 349px; left: 159px; width: 340px; height: auto; }

.wsn-geco__pill {
	z-index: 3;
	top: 341px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 354px;
	height: 42px;
	border-radius: 30px;
	background: #5fee88;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -.2px;
	color: #222937;
	text-align: center;
}

/* слайдер */
.wsn-geco__gal {
	position: relative;
	width: 314px;
	height: 382px;
}

.wsn-geco__frame {
	height: 100%;
	border: 1px solid #e2e2e2;
	border-radius: 24px;
	overflow: hidden;
}

.wsn-geco__track {
	display: flex;
	height: 100%;
	transition: transform .5s ease-in-out;
	touch-action: pan-y;
}

.wsn-geco__track img {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	user-select: none;
	-webkit-user-drag: none;
}

.wsn-geco__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #222937;
	color: #fff;
	cursor: pointer;
}

.wsn-geco__arrow svg { display: block; width: 8px; height: 14px; }
.wsn-geco__arrow_prev { left: -49px; }
.wsn-geco__arrow_next { right: -49px; }

/* ---------- 960–1199 ---------- */

@media (max-width: 1199px) {
	.wsn-geco__title { font-size: 30px; line-height: 36px; }
	.wsn-geco__decor { left: 789px; }
}

/* ---------- 640–959: слайдер под цитатой ---------- */

@media (max-width: 959px) {
	.wsn-geco__body { width: 590px; }
	.wsn-geco__plates { gap: 10px; }
	.wsn-geco__plate,
	.wsn-geco__plate_blue { min-height: 195px; padding: 20px; }
	.wsn-geco__plate-text { max-width: 245px; }
	.wsn-geco__plate_blue .wsn-geco__plate-text { max-width: 249px; }
	.wsn-geco__decor { display: none; }

	.wsn-geco__lower { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
	.wsn-geco__quote { height: 428px; }
	.wsn-geco__qmark { top: 57px; left: -4px; }
	.wsn-geco__ask { top: 84px; left: -5px; width: 241px; }
	.wsn-geco__avg { top: 134px; left: -5px; }
	.wsn-geco__bear { top: -9px; left: 205px; }
	.wsn-geco__fade { top: 347px; left: 285px; }
	.wsn-geco__pill { top: 336px; left: -5px; }
	.wsn-geco__gal { justify-self: center; }
}

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

@media (max-width: 639px) {
	/* --u — от ширины блока (cqw); сама секция cqw не видит — отступы у обёртки */
	.wsn-geco {
		container-type: inline-size;
		--u: calc(100cqw / 360);
		padding: 0;
	}
	.wsn-geco__wrap {
		width: 100%;
		max-width: none;
		padding: calc(40 * var(--u)) 0 calc(41 * var(--u));
	}
	.wsn-geco__title {
		max-width: calc(283 * var(--u));
		margin: 0 auto;
		font-size: calc(26 * var(--u));
		line-height: calc(31 * var(--u));
	}
	.wsn-geco__intro {
		max-width: calc(289 * var(--u));
		margin-top: calc(12 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(20 * var(--u));
	}

	.wsn-geco__body { width: calc(296 * var(--u)); margin-top: calc(30 * var(--u)); }
	.wsn-geco__plates { grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--u)); }
	.wsn-geco__plate,
	.wsn-geco__plate_blue {
		min-height: calc(151 * var(--u));
		padding: calc(16 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.wsn-geco__tick { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
	.wsn-geco__plate-text,
	.wsn-geco__plate_blue .wsn-geco__plate-text {
		max-width: calc(264 * var(--u));
		margin-top: calc(14 * var(--u));
		font-size: calc(12 * var(--u));
		line-height: calc(17 * var(--u));
	}
	.wsn-geco__plate_dark .wsn-geco__plate-text { max-width: calc(261 * var(--u)); }

	.wsn-geco__quote { height: calc(308 * var(--u)); }
	.wsn-geco__qmark { top: calc(47 * var(--u)); left: calc(-16 * var(--u)); width: calc(17 * var(--u)); height: calc(15 * var(--u)); }
	.wsn-geco__ask {
		top: calc(74 * var(--u));
		left: calc(-16 * var(--u));
		width: calc(176 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: calc(18 * var(--u));
	}
	.wsn-geco__avg {
		top: calc(138 * var(--u));
		left: calc(-16 * var(--u));
		width: calc(154 * var(--u));
		font-size: calc(12 * var(--u));
		line-height: calc(16 * var(--u));
	}
	.wsn-geco__bear { top: calc(7 * var(--u)); left: calc(91 * var(--u)); width: calc(237 * var(--u)); }
	.wsn-geco__fade { top: calc(200 * var(--u)); left: calc(-22 * var(--u)); width: calc(340 * var(--u)); }
	.wsn-geco__pill {
		top: calc(226 * var(--u));
		left: calc(-16 * var(--u));
		width: calc(328 * var(--u));
		height: calc(42 * var(--u));
		font-size: calc(11 * var(--u));
	}

	.wsn-geco__gal { width: calc(254 * var(--u)); height: calc(328 * var(--u)); }
	.wsn-geco__arrow {
		width: calc(30 * var(--u));
		height: calc(30 * var(--u));
		margin-top: calc(-15 * var(--u));
	}
	.wsn-geco__arrow svg { width: calc(6 * var(--u)); height: calc(11 * var(--u)); }
	.wsn-geco__arrow_prev { left: calc(-35 * var(--u)); }
	.wsn-geco__arrow_next { right: calc(-35 * var(--u)); }
}