/**
 * Блок товара «Хотите заглянуть на производство WEISAN?» (block-good-production.php).
 * Своя вёрстка вместо Zero-блока Tilda (15.11.2026).
 *
 * Размеры сняты с прежней вёрстки:
 *  - от 1200px: контейнер 1200, заголовок слева 40/48, обложка справа 714×369
 *    (радиус 30), стрелка под заголовком; отступы сверху и снизу 70;
 *  - 960–1199: контент 920, заголовок 30/36, обложка 595×308;
 *  - 640–959: всё по центру столбиком — заголовок, под ним обложка 461×239,
 *    стрелка слева повёрнута на 111°;
 *  - уже 640: макет 360px, растянутый по ширине экрана (--u = 1/360 ширины блока),
 *    обложка 301×156 радиус 18, стрелка повёрнута на 138°.
 * Обложка — ссылка #popup_video: её ловит скрипт попапа видео (baner-popup-video.php).
 */

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

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

.wsn-gprod__wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 714px;
	align-items: start;
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
}

.wsn-gprod__title {
	grid-column: 1;
	grid-row: 1;
	max-width: 458px;
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: -.5px;
	text-wrap: wrap;   /* общий CSS Tilda ставит h2 «pretty» — строки рвались бы иначе */
	color: #222937;
}

.wsn-gprod__arrow {
	position: absolute;
	top: 93px;
	left: 220px;
	width: 200px;
	height: auto;
	pointer-events: none;
}

.wsn-gprod__cover {
	grid-column: 2;
	grid-row: 1;
	display: block;
	height: 369px;
	border-radius: 30px;
	overflow: hidden;
}

.wsn-gprod__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

@media (max-width: 1199px) {
	.wsn-gprod__wrap { grid-template-columns: minmax(0, 1fr) 595px; max-width: 920px; }
	.wsn-gprod__title { max-width: 285px; font-size: 30px; line-height: 36px; }
	.wsn-gprod__arrow { top: 73px; left: 107px; }
	.wsn-gprod__cover { height: 308px; }
}

/* ---------- 640–959: по центру столбиком ---------- */

@media (max-width: 959px) {
	.wsn-gprod__wrap { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
	.wsn-gprod__title { max-width: 407px; margin: 0 auto; text-align: center; }
	.wsn-gprod__arrow { top: 27px; left: -40px; width: 157px; transform: rotate(111deg); }
	.wsn-gprod__cover {
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: 461px;
		max-width: 100%;
		height: 239px;
		margin-top: 40px;
	}
}

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

@media (max-width: 639px) {
	/* --u — от ширины блока (cqw); сама секция cqw не видит — отступы у обёртки */
	.wsn-gprod {
		container-type: inline-size;
		--u: calc(100cqw / 360);
		padding: 0;
	}
	.wsn-gprod__wrap {
		width: 100%;
		max-width: none;
		padding: calc(70 * var(--u)) 0 calc(28 * var(--u));
	}
	.wsn-gprod__title {
		max-width: calc(243 * var(--u));
		font-size: calc(26 * var(--u));
		line-height: calc(31 * var(--u));
	}
	.wsn-gprod__arrow {
		top: calc(112 * var(--u));
		left: calc(10 * var(--u));
		width: calc(104 * var(--u));
		transform: rotate(138deg);
	}
	.wsn-gprod__cover {
		width: calc(301 * var(--u));
		height: calc(156 * var(--u));
		margin-top: calc(30 * var(--u));
		border-radius: calc(18 * var(--u));
	}
}