/*
Theme Name: wpz
Description: Минимальная блочная тема. Всё оформление задаётся в theme.json, здесь — только то, что через theme.json задать нельзя.
Version: 0.1
Requires at least: 6.5
Tested up to: 7.0
Text Domain: wpz
*/


/* ==========================================================================
   1. ОБХОД РЕГРЕССИИ WP 7.0 — вертикальное выравнивание колонок
   --------------------------------------------------------------------------
   В чём поломка. Ядро WP 7.0 в файле
       wp-includes/blocks/columns/style.min.css
   объявляет правило:
       .wp-block-columns { align-items: normal !important; }
   Оно стоит ПОСЛЕ объявления самого флексбокса и помечено !important.

   А выравнивание, которое пользователь выбирает в редакторе («по верху»,
   «по центру», «по низу»), ядро отдаёт обычными правилами БЕЗ !important:
       .wp-block-columns.are-vertically-aligned-center { align-items: center; }

   Итог: правило без !important всегда проигрывает правилу с !important,
   как бы ни был выше его вес. Настройка вертикального выравнивания в
   редакторе визуально работает (там свой CSS), а на самом сайте — нет:
   колонки всегда растянуты по высоте.

   Как обходим. Повторяем те же три правила ядра, но тоже с !important.
   Вес селектора у нас 0-2-0 (два класса) против 0-1-0 у ядра (один класс),
   поэтому при равном !important побеждаем мы. Плюс style.css темы
   подключается позже стилей блоков — это второй запас прочности.

   Голый .wp-block-columns НЕ трогаем: колонки без выбранного выравнивания
   должны остаться растянутыми (align-items: normal) — это верное поведение
   по умолчанию, ломать его нельзя.

   Когда удалять. Как только ядро выпустит исправление и `!important`
   из .wp-block-columns уйдёт — весь этот блок можно стереть целиком.
   Проверить одной командой:
       grep -o 'align-items:normal!important' \
         wp-includes/blocks/columns/style.min.css
   Ничего не нашлось — блок больше не нужен.
   ========================================================================== */

.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}

.wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}

.wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}


/* ==========================================================================
   2. БАЗОВАЯ ТИПОГРАФИКА
   --------------------------------------------------------------------------
   Здесь только то, чего нет в theme.json нашей темы: межстрочный интервал,
   поведение длинных слов и вертикальные отступы заголовков.

   Что здесь СОЗНАТЕЛЬНО не задано — и почему:

   • text-align: justify (выключка по ширине). Не задаётся нигде и задаваться
     не должно. В вебе нет переносов по слогам и нет управления межбуквенным
     расстоянием, поэтому выключка по ширине рвёт строки «дырами» между
     словами — особенно на узком экране и особенно в русском тексте с его
     длинными словами. Текст остаётся выключенным влево (по умолчанию).
     Если понадобится в одном месте — это настройка блока в редакторе,
     а не правило на всю тему.

   • hyphens (автоматические переносы). Убраны. Словари переносов у браузеров
     разного качества, для русского они то есть, то нет, и результат
     непредсказуем: одна и та же страница в двух браузерах ломается по-разному.
     Лучше ровный левый край без переносов, чем случайные переносы.

   Шрифт здесь НЕ задаётся. Он живёт в theme.json
   (styles.typography.fontFamily) — одной строкой на весь сайт.
   Названий шрифтов в этом файле нет и быть не должно.
   ========================================================================== */

/* Межстрочный интервал основного текста.
   1.6 — читаемый минимум для длинных абзацев; меньше 1.5 строки слипаются,
   больше 1.8 — абзац рассыпается на несвязанные строки. */
body {
	line-height: 1.6;
}

/* Длинные слова и ссылки без пробелов (адреса, артикулы, названия файлов)
   на узком экране вылезают за край и растягивают страницу вбок.
   overflow-wrap разрешает разорвать такое слово в любом месте.

   Это НЕ перенос по слогам: знак переноса не ставится, словарь не нужен,
   поведение одинаково во всех браузерах. Правило страхует вёрстку от
   горизонтальной прокрутки и потому остаётся. */
body {
	overflow-wrap: break-word;
}

/* Размер, насыщенность и межстрочный интервал заголовков здесь НЕ задаются.
   Они переехали в theme.json, секция styles.elements — там же, где задана
   вся шкала h1…h6.

   Почему их нельзя держать в двух местах — важно понимать точно, потому что
   ловушка тихая. Из styles.elements WordPress 7.0 печатает правила с ГОЛЫМ
   селектором элемента:

       h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
       h1 { font-size: ...; line-height: 1.1; }

   Вес такого селектора — 0-0-1, ровно как у правила `h1, h2, …` в этом
   файле. При равном весе побеждает тот, кто идёт позже, а этот файл
   подключается ПОСЛЕ inline-стилей ядра (в готовой странице global-styles
   стоит выше по документу). То есть строка line-height, оставленная здесь,
   молча перебила бы весь замысел: все шесть уровней получили бы один
   интервал, а разные значения из theme.json (1.1 у h1, 1.15 у h2, 1.35
   у h5 и h6) просто не сработали бы. Симптом — «правлю theme.json, ничего
   не меняется».

   Поэтому: размер, вес, интервал, регистр и межбуквенное расстояние
   заголовков правятся ТОЛЬКО в theme.json.

   Здесь остаются вертикальные отступы. Они не конфликтуют: в
   styles.elements их не задано вовсе, а считать их от шкалы spacingSizes
   удобнее одним правилом на шесть уровней, чем дублировать значения
   в каждом из шести. */

/* ОТСТУПЫ ЗАГОЛОВКОВ — единственное место в теме, где они задаются.
   --------------------------------------------------------------------------
   Задача: сверху у заголовка просвет в 2–3 раза больше, чем снизу. Тогда
   заголовок зрительно принадлежит тексту ПОД собой, а не висит между двумя
   одинаковыми пустотами. Это самое дешёвое средство сделать длинную
   страницу читаемой.

   Почему это НЕ в theme.json, хотя styles.elements.hN.spacing.margin
   существует. Проверено экспериментом: из такой записи ядро печатает

       h2 { margin-top: 99px; margin-bottom: 11px; }

   вес 0-0-1, свойства ФИЗИЧЕСКИЕ. А раскладка ядра печатает

       :root :where(.is-layout-constrained) > * {
           margin-block-start: 24px; margin-block-end: 0; }

   вес 0-1-0, свойства ЛОГИЧЕСКИЕ. Логическое и физическое свойство,
   указывающие на одну сторону блока, конфликтуют по обычным правилам
   каскада — и правило ядра выигрывает по весу. Итог: любые margin
   у заголовков из theme.json молча проглатываются, каждый блок получает
   ровно 24px сверху и 0 снизу. Именно так и выглядел сайт до этой правки:
   просвет сверху равен просвету снизу.

   Отсюда два следствия, оба учтены ниже:

   1) Селектор должен весить БОЛЬШЕ 0-1-0. Берём форму самого ядра:
      `:root :where(.is-layout-flow, .is-layout-constrained) > h2` — это
      0-1-0 от :root плюс 0-0-1 от тега, итого 0-1-1. И свойства пишем
      логические, теми же именами, что ядро, — так конфликт разрешается
      предсказуемо, а не зависит от порядка подключения файлов.

   2) Просвет СНИЗУ нельзя задать нижним отступом самого заголовка.
      Соседние отступы в потоке схлопываются, берётся больший из двух,
      а у следующего блока сверху стоят те же 24px от ядра. Сколько ни
      уменьшай margin-block-end у заголовка, зазор останется 24px.
      Поэтому у заголовка низ обнулён, а расстояние до текста задаётся
      верхним отступом СЛЕДУЮЩЕГО элемента — правила вида `> h2 + *`.

   Значения — из шкалы spacingSizes (theme.json), а не числами: поправишь
   шкалу, и отступы заголовков поедут вместе с ней. Чем крупнее уровень,
   тем больше воздуха сверху:

       уровень   сверху          снизу           отношение
       h1        70 (4→6.5rem)   40 (1.5→2rem)   2.7–3.3
       h2        60 (3→4.5rem)   30 (1→1.5rem)   3.0
       h3        50 (2→3rem)     20 (0.75→1rem)  2.7–3.0
       h4        40 (1.5→2rem)   20 (0.75→1rem)  2.0
       h5, h6    40 (1.5→2rem)   10 (0.5→0.75rem) 2.7–3.0
   ========================================================================== */

/* Низ у всех заголовков обнуляем — расстояние вниз задают правила `+ *`. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0;
}

/* Просвет НАД заголовком, по уровням. */
:root :where(.is-layout-flow, .is-layout-constrained) > h1 {
	margin-block-start: var(--wp--preset--spacing--70);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h4,
:root :where(.is-layout-flow, .is-layout-constrained) > h5,
:root :where(.is-layout-flow, .is-layout-constrained) > h6 {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Просвет ПОД заголовком = верхний отступ следующего за ним элемента.
   Эти правила стоят ПОСЛЕ предыдущих намеренно: вес у них одинаковый
   (0-1-1), и при связке «заголовок сразу под заголовком» (h2, затем h3)
   побеждает то, что ниже по файлу, — то есть маленький зазор. Так и надо:
   подзаголовку под заголовком большой отбивки не нужно. */
:root :where(.is-layout-flow, .is-layout-constrained) > h1 + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h2 + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h3 + *,
:root :where(.is-layout-flow, .is-layout-constrained) > h4 + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
:root :where(.is-layout-flow, .is-layout-constrained) > h5 + *,
:root :where(.is-layout-flow, .is-layout-constrained) > h6 + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Первый заголовок в контейнере (шапка статьи, карточка, колонка) не должен
   отталкиваться от верхнего края: отступ там уже задан самим контейнером,
   иначе получается двойной провал.

   У ядра такое правило есть, но весит 0-1-0 и нашим 0-1-1 перебивается —
   поэтому восстанавливаем его сами. Вес здесь 0-2-1 (:root + :first-child
   как псевдокласс + тег), выигрывает у всего, что выше. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}


/* ==========================================================================
   3. КНОПКИ
   --------------------------------------------------------------------------
   Три состояния: обычная, наведение/фокус, вторичная (стиль «Контурная»
   в редакторе — is-style-outline, регистрируется ядром).

   Цвета берутся ТОЛЬКО из переменных палитры вида
       var(--wp--preset--color--slug)
   Эти переменные WordPress генерирует сам из settings.color.palette
   в нашем theme.json. Правило простое: поменял #hex в theme.json —
   кнопки поменялись вместе со всем сайтом. Хардкода цветов здесь нет
   и быть не должно.

   Про селектор. Пишем `.wp-block-button > .wp-block-button__link`
   (вес 0-2-0), а не просто `.wp-block-button__link` (0-1-0). Причина:
   ядро отдаёт свои умолчания для кнопок через
       :root :where(.wp-block-button__link) { ... }
   Псевдокласс :where() обнуляет вес того, что внутри, поэтому вес
   всего селектора — 0-1-0 (его даёт только :root). При равном весе
   победил бы тот, кто идёт позже, а порядок подключения inline-стилей
   ядра и файла темы зависит от версии WP. Лишний класс снимает вопрос.
   Инлайновые стили самой кнопки (пользователь покрасил её в редакторе)
   всё равно выигрывают у нас — так и задумано.
   ========================================================================== */

/* Обычная кнопка: заливка акцентом, текст — цветом для тёмного фона. */
.wp-block-button > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse);
	border: 1px solid var(--wp--preset--color--accent);
	text-decoration: none;
	/* Плавный переход только по цветам. `transition: all` дёргал бы
	   ещё и геометрию при любом изменении раскладки. */
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Наведение и клавиатурный фокус — одно и то же состояние.
   :focus-visible, а не :focus: подсветка нужна тем, кто идёт табом,
   и не нужна тем, кто щёлкнул мышью.
   Уходим на второй акцент — кнопка светлеет, но остаётся тёмной. */
.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--inverse);
}

/* Кольцо фокуса поверх заливки — чтобы кнопка была видна на клавиатуре
   даже там, где цвет фона страницы совпал с цветом кнопки. */
.wp-block-button > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Вторичная кнопка — стиль «Контурная» в редакторе.
   Прозрачный фон, рамка и текст основным цветом. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* Вторичная при наведении заливается основным цветом —
   становится похожа на обычную, это подсказка «сюда можно нажать». */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--inverse);
}


/* ==========================================================================
   4. ДЕКОР СТРАНИЦЫ /wm2/ — префикс wm-
   --------------------------------------------------------------------------
   Этот раздел обслуживает ТОЛЬКО посадочную страницу Whale Motors (`/wm2/`).
   Всё, что можно было задать настройками блоков ядра, там и задано; сюда
   вынесено ровно то, чего в блоках нет вообще. Классы проставлены в поле
   «Дополнительный класс CSS» у блока, инлайновых стилей на странице нет.

   Правило раздела: ни одного #hex и ни одного шрифта. Цвета — только
   var(--wp--preset--color--slug), расстояния — var(--wp--preset--spacing--NN).
   Собственные числа допускаются лишь там, где речь о геометрии декора
   (угол среза, размер фоновой цифры, скругление) — в шкалах темы таких
   величин нет и быть не должно.

   ВАЖНО про имена. На сайте есть ещё одна страница — /whale-motors/, первая
   попытка того же макета. В её разметке уже заняты классы wm-hero, wm-adv и
   wm-card. Пока действовала тема tt5-child, они описывались её файлом; сейчас
   активна wpz, и правил у них нет — страница показывается без декора, так и
   задумано, её оставили для сравнения. Поэтому здесь взяты ДРУГИЕ имена:
   wm-screen, wm-adv-cell, wm-card-auto. Если назвать их как там, правила
   этого раздела молча перекрасят соседнюю страницу, а сравнивать станет нечего.

   Если страницу /wm2/ уберут — весь раздел удаляется целиком, на остальной
   сайт он не влияет: все селекторы начинаются с класса wm-.
   ========================================================================== */

/* --- 4.1. Первый экран -----------------------------------------------------
   У core/group нет настройки минимальной высоты. Она есть у core/cover, но
   cover тянет за собой слой затемнения и картинку-фон, а фотографий пока нет.
   100svh (small viewport height), а не 100vh: на телефоне vh считается по
   экрану без адресной строки и первый экран уезжает под неё. */
.wm-screen {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- 4.2. Косые срезы между секциями ---------------------------------------
   В макете тёмные секции срезаны по диагонали. Настройки формы краёв у блоков
   ядра нет вообще — только clip-path.

   Угол задан в vw, а не в градусах или пикселях: срез должен сохранять
   пропорцию на любой ширине, иначе на телефоне он превращается в почти
   прямую линию, а на широком мониторе — в резкий клин.

   margin -1px гасит белую нитку между секциями: браузер округляет дробную
   границу clip-path и оставляет просвет в полпикселя. */
.wm-cut-bottom {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vw));
	margin-block-end: -1px;
}

.wm-cut-top {
	clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
	margin-block-start: -1px;
}

/* --- 4.3. Крупные цифры-слои в «Преимуществах» -----------------------------
   Цифра 1–4 лежит ПОД текстом отдельным слоем. Блока «фоновая цифра» в ядре
   нет; сделать это настройками нельзя, поэтому цифра — обычный абзац
   с классом, выведенный из потока.

   isolation: isolate на родителе обязателен. Без него z-index:-1 у цифры
   считается относительно всей страницы, и цифра проваливается под фон секции,
   то есть исчезает совсем. */
.wm-adv-cell {
	position: relative;
	isolation: isolate;
	padding-block-start: var(--wp--preset--spacing--40);
}

.wm-adv__num {
	position: absolute;
	inset-inline-start: -0.12em;
	inset-block-start: -0.34em;
	z-index: -1;
	margin: 0;
	font-size: clamp(6rem, 11vw, 10rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--inverse);
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
}

/* --- 4.4. Карточка автомобиля ----------------------------------------------
   Три блока карточки (фото, название, характеристики) должны стоять вплотную
   и обрезаться общим скруглением. Раскладка ядра ставит между соседями
   отступ 24px, а скругление к группе применяется только вместе с рамкой,
   поэтому и то и другое — здесь. */
.wm-card-auto {
	overflow: hidden;
	border-radius: 8px;
}

.wm-card-auto > * {
	margin-block: 0;
}

.wm-card-auto figure {
	margin: 0;
}

/* Подпись под фотографией внутри карточки. Пока фотографий нет, подпись
   объясняет, что за снимок сюда встанет; когда снимки появятся, подписи
   уберут вместе с заглушками, и это правило можно будет удалить. */
.wm-card-auto figcaption {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wm-card-auto img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 4.5. Карточка марки в «Заказе деталей» --------------------------------
   Рамку и скругление можно задать в редакторе, но там они пишутся в блок
   пикселями и hex-кодом. Здесь то же самое ссылками на палитру. */
.wm-brand {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	height: 100%;
}

.wm-brand img {
	display: block;
	margin-inline: auto;
}

.wm-brand figcaption {
	text-align: center;
}

/* --- 4.6. Полоса-фотография во всю ширину ----------------------------------
   Картинка в блоке ядра не растягивается: ей выставлен max-width:100%, но не
   width. На мониторе шире самой картинки полоса перестала бы доходить до края,
   ради чего секция и сделана «во всю ширину без ограничения содержимого». */
.wm-band img {
	display: block;
	width: 100%;
	height: auto;
}

.wm-band figcaption {
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}

/* --- 4.7. Телефон ----------------------------------------------------------
   На узком экране срез и фоновая цифра мельчают, иначе срез съедает строку
   текста, а цифра вылезает за карточку. */
@media (max-width: 781px) {
	.wm-screen {
		min-height: auto;
	}

	.wm-cut-bottom {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
	}

	.wm-cut-top {
		clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 100%);
	}

	.wm-adv__num {
		font-size: clamp(4rem, 18vw, 6rem);
	}
}


/* WM3-START ================================================================
   5. ДЕКОР СТРАНИЦЫ /wm3/ — префикс wm3-
   --------------------------------------------------------------------------
   Вёрстка макета Whale Motors, вторая попытка. Правится только вместе
   со страницей /wm3/; на остальной сайт не влияет — все селекторы начинаются
   с wm3-. Классы wm- (страница /wm2/) намеренно не переиспользуются: у тех
   двух страниц разные макетные решения, общие имена связали бы их.

   Цвета — только из палитры: navy (#021631) и marine (#074582) добавлены
   в theme.json пипеткой из макета, остальные были. Кодов цвета здесь нет.
   Числа, которые есть, — геометрия декора: угол среза, размер иконки,
   размер фоновой цифры. В шкалах темы таких величин нет.
   ========================================================================== */

/* --- 5.1. Первый экран: фото на весь экран, текст поверх ------------------ */
.wm3-screen {
	/* В макете первый экран занимает 749 px при ширине окна 1440 — это 52 %
	   ширины. Держим пропорцию, а не высоту окна: иначе на длинном мониторе
	   экран растягивается и раскладка перестаёт совпадать с макетом. */
	min-height: 52vw;
	display: flex;
	flex-direction: column;
	/* В макете текст и логотип стоят в ВЕРХНЕЙ части экрана: нижнюю треть
	   занимают автомобили на фотографии. Поэтому контент прижат к верху,
	   а не отцентрован по высоте. */
	justify-content: flex-start;
	background-position: center;
	background-size: cover;
}

/* Шапка макета лежит ПОВЕРХ фото и своего фона не имеет. Она внутри этой
   секции, а не в parts/header.html: тот общий для всего сайта. */
.wm3-topbar {
	padding-block: var(--wp--preset--spacing--30);
}

.wm3-topbar .wp-block-image img {
	width: 190px;
	height: auto;
}

.wm3-nav {
	gap: 0 !important;
}

.wm3-nav p {
	margin: 0;
	padding-inline: 1.15rem;
	border-inline-start: 1px solid;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	line-height: 1.2;
}

.wm3-nav p:first-child {
	border-inline-start: 0;
}

/* Активный пункт в макете подчёркнут. */
.wm3-nav p:first-child {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.wm3-hero-row {
	align-items: flex-start;
	margin-block-start: 1.2vw;
}

/* Заголовок начинается ниже логотипа — в макете логотип поднят над ним. */
.wm3-hero-row > .wp-block-column:first-child {
	padding-block-start: 7.5vw;
}

.wm3-hero-row p {
	max-width: 30rem;
}

/* В макете заголовок стоит в ОДНУ строку и занимает 493 px. Пресет xx-large
   (56 px) даёт в Montserrat 546 px — строка ломается пополам. */
.wm3-screen h1 {
	font-size: 3.2rem;
}

/* Кнопка в макете прямоугольная; ядро скругляет кнопки по умолчанию. */
.wm3-screen .wp-block-button__link {
	border-radius: 0;
	padding-block: 0.95rem;
	padding-inline: 1.6rem;
}

.wm3-herologo img {
	/* min(): без него max-width в пикселях перебивает max-width:100% ядра,
	   и на телефоне логотип растягивает страницу вбок. */
	max-width: min(440px, 100%);
	margin-inline: auto;
	display: block;
}

.wm3-hero-row > .wp-block-column:last-child {
	padding-block-start: 0;
}

/* --- 5.2. Косые срезы. Направления замерены по макету --------------------
   Граница «тёмная секция → каталог»: слева ниже, справа выше — линия идёт
   ВВЕРХ направо, перепад 119 px оригинала при ширине 2830, то есть 4.2 %.
   Граница «каталог → отзывы»: зеркально, ВНИЗ направо, тот же перепад.
   Граница «отзывы → детали»: снова вверх направо.
   Отсюда две формы ниже. -1px гасит белую нитку от округления clip-path. */
.wm3-cut-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.2vw), 0 100%);
	margin-block-end: -1px;
	padding-block: var(--wp--preset--spacing--60);
}

.wm3-cut-both {
	clip-path: polygon(0 0, 100% 4.2vw, 100% calc(100% - 4.2vw), 0 100%);
	margin-block: -1px;
	/* Срез съедает по 4.2vw сверху и снизу — на столько же отодвигаем
	   содержимое, иначе заголовок уезжает под косую кромку. Отступы заданы
	   ЗДЕСЬ, а не в блоке: в блоке они стали бы инлайновым стилем и
	   перебили бы эту прибавку. */
	padding-block:
		calc(4.2vw + var(--wp--preset--spacing--60))
		calc(4.2vw + var(--wp--preset--spacing--70));
}

/* --- 5.3. Преимущества: сетка 2x2, иконка слева, цифра позади ------------- */
.wm3-advblock {
	background-position: center;
	background-size: cover;
}

/* В макете сетка 2x2 начинается заметно ниже верхнего края карточки формы:
   слева воздуха больше. */
.wm3-advblock > .wp-block-columns > .wp-block-column:first-child {
	padding-block-start: 8vw;
}

.wm3-adv {
	position: relative;
	isolation: isolate;
	padding-block-start: 2.2rem;
}

.wm3-adv__num {
	position: absolute;
	inset-inline-start: -0.1em;
	inset-block-start: -0.36em;
	z-index: -1;
	margin: 0;
	font-size: clamp(5rem, 9vw, 9.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--inverse);
	opacity: 0.11;
	pointer-events: none;
	user-select: none;
}

/* Текст преимущества с контурной иконкой слева. Иконка — маска, поэтому
   красится обычным color и наследует цвет секции. Отдельного блока под неё
   нет: лишний блок сдвинул бы строку. */
.wm3-adv__text {
	position: relative;
	margin: 0;
	padding-inline-start: 4.1rem;
	min-height: 2.6rem;
}

.wm3-adv__text::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -0.15em;
	width: 2.6rem;
	height: 2.6rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wm3-i-shield::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7.5%203v5.2c0%204.7-3.2%208.4-7.5%2010.5C7.7%2019.6%204.5%2015.9%204.5%2011.2V6z%27%2F%3E%3Cpath%20d%3D%27M8.8%2011.8l2.3%202.3%204.1-4.4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7.5%203v5.2c0%204.7-3.2%208.4-7.5%2010.5C7.7%2019.6%204.5%2015.9%204.5%2011.2V6z%27%2F%3E%3Cpath%20d%3D%27M8.8%2011.8l2.3%202.3%204.1-4.4%27%2F%3E%3C%2Fsvg%3E"); }
.wm3-i-doc::before    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.5%202.8h6.2l4%204v14.4h-10.2z%27%2F%3E%3Cpath%20d%3D%27M13.7%202.8v4h4%27%2F%3E%3Cpath%20d%3D%27M10%2012.2h5.5%27%2F%3E%3Cpath%20d%3D%27M10%2015.8h5.5%27%2F%3E%3Cpath%20d%3D%27M10%208.6h2.2%27%2F%3E%3C%2Fsvg%3E");    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.5%202.8h6.2l4%204v14.4h-10.2z%27%2F%3E%3Cpath%20d%3D%27M13.7%202.8v4h4%27%2F%3E%3Cpath%20d%3D%27M10%2012.2h5.5%27%2F%3E%3Cpath%20d%3D%27M10%2015.8h5.5%27%2F%3E%3Cpath%20d%3D%27M10%208.6h2.2%27%2F%3E%3C%2Fsvg%3E"); }
.wm3-i-deal::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2011.5%206%208l3.2%202.1%202.3-1.2%202.3%201.2L17%208l4.5%203.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2011.5v3.2l5.2%204.4%202.6-1.8%202.4%201.8%202.6-1.8%202.6%201.8%204.1-4.4v-3.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2010.1%2012%2012.4l2.8-2.3%27%2F%3E%3C%2Fsvg%3E");   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%2011.5%206%208l3.2%202.1%202.3-1.2%202.3%201.2L17%208l4.5%203.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2011.5v3.2l5.2%204.4%202.6-1.8%202.4%201.8%202.6-1.8%202.6%201.8%204.1-4.4v-3.2%27%2F%3E%3Cpath%20d%3D%27M9.2%2010.1%2012%2012.4l2.8-2.3%27%2F%3E%3C%2Fsvg%3E"); }
.wm3-i-case::before   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206.5V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v1.5%27%2F%3E%3Cpath%20d%3D%27M3.5%206.5h17v13a1.5%201.5%200%200%201-1.5%201.5H5a1.5%201.5%200%200%201-1.5-1.5z%27%2F%3E%3Cpath%20d%3D%27M10.7%2012.6h2.6%27%2F%3E%3Cpath%20d%3D%27M3.5%2012h17%27%2F%3E%3C%2Fsvg%3E");   mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206.5V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v1.5%27%2F%3E%3Cpath%20d%3D%27M3.5%206.5h17v13a1.5%201.5%200%200%201-1.5%201.5H5a1.5%201.5%200%200%201-1.5-1.5z%27%2F%3E%3Cpath%20d%3D%27M10.7%2012.6h2.6%27%2F%3E%3Cpath%20d%3D%27M3.5%2012h17%27%2F%3E%3C%2Fsvg%3E"); }

/* --- 5.4. Заглушка формы ------------------------------------------------- */
.wm3-form {
	position: relative;
	border: 1px solid;
	border-color: color-mix(in srgb, var(--wp--preset--color--inverse) 38%, transparent);
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--wp--preset--color--inverse) 7%, transparent);
	min-height: 600px;
}

/* Поля формы намечены линиями: карточка должна повторять силуэт макета,
   а самой формы ещё нет — плагин не выбран. */
.wm3-form::before {
	content: "";
	position: absolute;
	inset: 2.6rem 2.2rem 7rem;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 3.05rem,
		currentColor 3.05rem 3.1rem);
	opacity: 0.3;
}

.wm3-form::after {
	content: "";
	position: absolute;
	inset-inline: 2.2rem;
	inset-block-end: 2.4rem;
	height: 3.2rem;
	border-radius: 4px;
	background-color: var(--wp--preset--color--inverse);
	opacity: 0.9;
}

/* --- 5.5. Карточка каталога. Углы В МАКЕТЕ ОСТРЫЕ — скругления нет -------- */
.wm3-card > * {
	margin-block: 0;
}

/* Кегль плашек снят с макета: строка «Mazda CX-5 2025, белый - 3,3 млн. руб»
   занимает там 255 px, то есть около 13 px на знак. Пресета такого размера
   в теме нет, а при ближайшем (small, 16 px) строка переносится и карточка
   вырастает с 322 до 380 px. */
.wm3-card p {
	font-size: 0.9rem;
	/* Плашки в макете 48 и 40 px высотой. Межстрочный интервал темы (1.6)
	   раздувает их до 56: у однострочной плашки он не нужен. */
	line-height: 1.35;
}

.wm3-card figure {
	margin: 0;
}

.wm3-card img {
	display: block;
	width: 100%;
	height: auto;
}

.wm3-price {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- 5.6. Карточка марки: рамка, внутри вторая рамка с фото --------------- */
.wm3-brand {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	height: 100%;
	/* В макете карточка марки 254x347 — заметно вытянута по вертикали. */
	min-height: 24vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wm3-brand__frame {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.wm3-brand__frame figure,
.wm3-brand img {
	margin: 0;
}

.wm3-brand img {
	display: block;
	width: 100%;
	height: auto;
}

.wm3-brand__logo img {
	max-width: 170px;
	margin-inline: auto;
}

/* --- 5.7. Подвал: три колонки, тонкая линия, копирайт слева --------------- */
.wm3-foot-logo img {
	width: 200px;
	height: auto;
}

.wm3-contacts p {
	position: relative;
	margin: 0;
	padding-inline-start: 2.6rem;
	min-height: 1.8rem;
}

.wm3-contacts p::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 1.6rem;
	height: 1.6rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wm3-i-send::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.6%202.4%202.6%209.1l7.6%203%203%207.6z%27%2F%3E%3Cpath%20d%3D%27M21.6%202.4%2010.2%2012.1%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.6%202.4%202.6%209.1l7.6%203%203%207.6z%27%2F%3E%3Cpath%20d%3D%27M21.6%202.4%2010.2%2012.1%27%2F%3E%3C%2Fsvg%3E"); }
.wm3-i-mail::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.8%205.5h18.4v13H2.8z%27%2F%3E%3Cpath%20d%3D%27m2.8%206.2%209.2%206.4%209.2-6.4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.8%205.5h18.4v13H2.8z%27%2F%3E%3Cpath%20d%3D%27m2.8%206.2%209.2%206.4%209.2-6.4%27%2F%3E%3C%2Fsvg%3E"); }
.wm3-i-pin::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19.5%2010.2c0%205-5.3%209.7-7%2011.2a.9.9%200%200%201-1.1%200c-1.7-1.5-7-6.2-7-11.2a7.5%207.5%200%200%201%2015%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.8%27%2F%3E%3C%2Fsvg%3E");  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19.5%2010.2c0%205-5.3%209.7-7%2011.2a.9.9%200%200%201-1.1%200c-1.7-1.5-7-6.2-7-11.2a7.5%207.5%200%200%201%2015%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.8%27%2F%3E%3C%2Fsvg%3E"); }

.wm3-rule {
	border-block-start: 1px solid;
	border-color: color-mix(in srgb, var(--wp--preset--color--inverse) 14%, transparent);
}

/* --- 5.8. Телефон -------------------------------------------------------- */
@media (max-width: 781px) {
	.wm3-screen {
		min-height: auto;
	}

	.wm3-cut-bottom {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
	}

	.wm3-cut-both {
		clip-path: polygon(0 0, 100% 8vw, 100% calc(100% - 8vw), 0 100%);
	}

	.wm3-adv__num {
		font-size: clamp(4rem, 18vw, 6rem);
	}

	.wm3-form {
		min-height: 460px;
	}

	.wm3-herologo img {
		margin-inline: auto;
	}
}
/* WM3-END ================================================================= */