/**
 * Сквозные блоки редизайна на обычных страницах: добор специфичности (KOY-1664).
 *
 * Шапка, подвал и модалка выводятся на всех страницах сайта, но на обычных
 * рядом с ними остаются стили темы Shopkeeper — на редизайн-шаблоне они
 * сняты. Сброс в redesign.css завёрнут в `:where()` (нулевая специфичность,
 * чтобы стили секций перебивали его без !important), и правила Shopkeeper
 * его перебивают:
 *
 *   .button, button                 → text-transform: uppercase (кнопка капсом)
 *   [type="button"], [type="submit"] → border-radius: 0        (прямые углы)
 *   dl, ol, ul                       → line-height: 1.5/1.6    (шапка выше на 2px)
 *
 * Здесь тот же сброс, но с весом, и только внутри сквозных блоков. На
 * редизайн-шаблоне правила ничего не меняют: там эти значения и так такие.
 */

:is(.sm-header, .sm-footer, .sm-modal) :is(button, [type="button"], [type="submit"]) {
	text-transform: none;
}

:is(.sm-header, .sm-footer, .sm-modal) .sm-btn {
	border-radius: var(--sm-btn-radius);
}

/* Только на самих списках: межстрочная их содержимого задана в секциях. */
:is(.sm-header, .sm-footer, .sm-modal) :is(ul, ol) {
	line-height: inherit;
}

/* ---------- Точечные правки старых страниц ---------- */

/*
 * /print/ (страница 532): у текстового блока с заголовком «Изготовление
 * наружной рекламы» в настройках WPBakery проставлены поля по 60px с боков.
 * На десктопе это нормально, а на телефоне под текст остаётся 270px из 390,
 * и слово «Изготовление» не помещается в строку — браузер рвёт его пополам
 * («Изготовлен / ие»), потому что у заголовка overflow-wrap: break-word.
 * На узком экране поля уменьшаем. Правило привязано к этой странице:
 * такие же поля стоят у карточек, но там текст короткий и всё в порядке.
 */
@media (max-width: 600px) {
	.page-id-532 .vc_custom_1730827027910 {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}
}

/*
 * KOY-1861: /print/ (страница 532) — герой и блок карточек по общей сетке сайта.
 *
 * Было: три верхних ряда собраны в WPBakery как
 * full_width="stretch_row_content_no_spaces", поэтому герой и обе карточных
 * полосы шли от края до края экрана, тогда как на страницах редизайна контент
 * стоит в колонке 1280 с полями 80 (.sm-container).
 *
 * Ширину этих рядов конструктор задаёт инлайновым style (width + box-sizing:
 * border-box), поэтому снаружи её не переопределить — поля добавляем
 * паддингом. Формула повторяет .sm-container: поле 80px, а на экранах шире
 * 1440 растёт так, чтобы контент остался 1280 по центру.
 *
 * Правки только для десктопа (>=769px): на телефоне у героя своя раскладка
 * (стопка с полями 16px внутри .prhero__stage), а карточки идут в столбик
 * во всю ширину — там всё и так в порядке.
 */

@media (min-width: 769px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] {
		padding-right: max(var(--sm-gutter), (100% - var(--sm-content)) / 2);
		padding-left: max(var(--sm-gutter), (100% - var(--sm-content)) / 2);
	}

	/* Воздух между шапкой и героем — как у геро-блоков остальных страниц. */
	.page-id-532 .entry-content > .vc_row[data-vc-full-width]:first-child {
		margin-top: 20px;
	}

	/* Герой — карточка со скруглением 25px, как геро-блок главной. */
	.page-id-532 .prhero {
		border-radius: 25px;
		/*
		 * Сцена внутри сама объявляет --u через 100cqw, поэтому контейнером
		 * для неё должен быть родитель: свои же cq-единицы элемент не видит.
		 */
		container-type: inline-size;
	}

	/*
	 * Карточка формы уезжала за нижний край героя и обрезалась вместе с
	 * согласиями — так было и до этой правки (на 1440 срезало 89px,
	 * на 1920 — 112px). Причина: высота сцены жёстко задана aspect-ratio
	 * 1280/720, а форма лежит в ней absolute и в высоту блока не входит.
	 * Переводим форму в поток, а фиксированную высоту — в min-height, и
	 * поднимаем форму на её же высоту среза: пропорции макета сохраняются
	 * (высота ровно 720/1280 от ширины, фон не подрезается), а если форма
	 * когда-нибудь станет выше — блок дорастёт под неё, а не срежет её.
	 * container-type у сцены меняем на inline-size: при size-контейнере
	 * высота обязана быть определённой, авто-рост был бы невозможен.
	 */
	.page-id-532 .prhero__stage {
		container-type: inline-size;
		aspect-ratio: auto;
		min-height: calc(100cqw * 720 / 1280);
	}

	.page-id-532 .prhero__form {
		position: relative;
		inset: auto;
		margin: calc(176 * var(--u)) 0 calc(24 * var(--u)) calc(40 * var(--u));
	}

	/*
	 * Последний ряд — SEO-текст «Изготовление наружной рекламы». Он не
	 * растянутый, но в настройках блока стоят поля по 60px, поэтому текст шёл
	 * почти во всю ширину экрана и не совпадал с остальными блоками. Ширину
	 * задаём тем же паддингом: коробка .wpb_text_column совпадает по ширине с
	 * .entry-content, поэтому формула та же, что у рядов выше.
	 * !important — поля из настроек WPBakery приходят с !important.
	 */
	.page-id-532 .entry-content > .vc_row:last-of-type .wpb_text_column {
		padding-right: max(var(--sm-gutter), (100% - var(--sm-content)) / 2) !important;
		padding-left: max(var(--sm-gutter), (100% - var(--sm-content)) / 2) !important;
	}
}

/* Ниже 1200 поля ужимаются до 40px — как в .sm-container редизайна. */
@media (min-width: 769px) and (max-width: 1200px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] {
		padding-right: 40px;
		padding-left: 40px;
	}

	.page-id-532 .entry-content > .vc_row:last-of-type .wpb_text_column {
		padding-right: 40px !important;
		padding-left: 40px !important;
	}
}

/*
 * Карточки услуг: текст лежит прямо на фотографии, без подложки и без
 * ограничения по ширине, поэтому строки уезжали на «занятую» часть снимка
 * (штендер, конверт с ножницами, постер в руках) и не читались. Сами снимки —
 * фон колонки (`background-image` в настройках WPBakery), поменять их местами
 * с текстом нельзя, поэтому:
 *   1) под текстом лежит светлая вуаль, растворяющаяся к правому краю —
 *      предмет на снимке остаётся видимым, текст получает контрастный фон;
 *   2) текст не доезжает до правого края карточки и переносится раньше.
 *
 * Вуаль — псевдоэлемент на .vc_column-inner (именно на нём фон), содержимое
 * поднято над ней z-index'ом, иначе кнопки «Узнать больше» ушли бы под вуаль
 * и перестали нажиматься. `vc_col-has-fill` есть только у карточек — колонка
 * героя под правило не попадает.
 */

.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill > .vc_column-inner {
	position: relative;
}

.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill > .vc_column-inner::before {
	content: '';
	/*
	 * display обязателен: у темы на .vc_column-inner висит клирфикс
	 * ::before { content:" "; display:table }, а absolute-таблица с auto-шириной
	 * сжимается по содержимому — вуаль получалась нулевой ширины и не видна.
	 */
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.88) 58%,
		rgba(255, 255, 255, 0.4) 80%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill > .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 1;
}

@media (min-width: 769px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill > .vc_column-inner::before {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(255, 255, 255, 0.86) 42%,
			rgba(255, 255, 255, 0.42) 66%,
			rgba(255, 255, 255, 0) 82%
		);
	}
}

/*
 * Поле справа у текста карточек — только там, где колонки достаточно широкие
 * (от 1201px). Ниже колонки сами по себе узкие, и лишнее поле начало бы рвать
 * заголовки. Проценты, а не пиксели: колонки резиновые.
 */
@media (min-width: 1201px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-sm-6 .wpb_text_column {
		padding-right: 15%;
	}

	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-sm-4 .wpb_text_column {
		padding-right: 18%;
	}

	/*
	 * Заголовки не рвём переносом внутри слова: у темы стоит
	 * overflow-wrap: break-word, и «Изготовление» превращалось в
	 * «Изготовлен/ие». Только на широких колонках — ниже 1201px слово
	 * действительно может не поместиться, и перенос там меньшее зло.
	 */
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill .wpb_text_column :is(h1, h2, h3, h4, p) {
		overflow-wrap: normal;
		word-break: normal;
	}
}

/*
 * 769–1200px: колонки заметно уже (после того как ряды встали в общую сетку),
 * а поле слева в настройках карточек — 65px под полноэкранную ширину. На трёх
 * колонках под текст оставалось ~200px, и «Сувенирная» / «Изготовление» уже не
 * помещались в строку. Поле уменьшаем ступенями. !important — поля из настроек
 * WPBakery приходят с ним; кнопки двигаем вместе с текстом, чтобы не разъехались.
 */
@media (min-width: 993px) and (max-width: 1200px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill :is(.wpb_text_column, .vc_btn3-container) {
		padding-left: 45px !important;
	}

	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill .wpb_text_column {
		padding-right: 10%;
	}

	/*
	 * Заголовок в три колонки: 28px рассчитаны на карточку 427px. На узкой
	 * колонке «Изготовление» (265px) в строку уже не влезает и рвётся пополам,
	 * поэтому кегль уменьшаем вместе с колонкой.
	 */
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-sm-4 .wpb_text_column h3 {
		font-size: 24px;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill :is(.wpb_text_column, .vc_btn3-container) {
		padding-left: 25px !important;
	}

	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-has-fill .wpb_text_column {
		padding-right: 6%;
	}

	.page-id-532 .entry-content > .vc_row[data-vc-full-width] .vc_col-sm-4 .wpb_text_column h3 {
		font-size: 20px;
	}
}