/* ============================================================================================
   Компоненты дизайн-системы «AvtoGates Mobile» (UX-2.4): стили блоков WordPress и перекраска разметки родителя.
   Подключается ПОСЛЕ style.css темы (на сайте — wp_enqueue_scripts, в редакторе — add_editor_style).

   Правила файла:
   - только переменные: псевдонимы из style.css (--surface, --ink, --sp-12, --radius-lg …) и токены theme.json
     (--wp--preset--*, --wp--custom--*); цветовых литералов, !important и внешних адресов здесь нет;
   - тени — только две из токенов: --focus-ring и --shadow-segment;
   - имена стилей блоков (класс is-style-<имя>) заданы в inc/block-styles.php, паттерны — в patterns/;
   - селекторы групп начинаются с .wp-block-group, чтобы перебить раскладку блока (margin-block у потомков, отступы группы)
     без !important.
   ============================================================================================ */

/* ---------- 0. Общее: сброс внешних отступов потомков и кольцо фокуса ---------- */
.wp-block-group:is(.is-style-ag-card, .is-style-ag-section, .is-style-ag-slab, .is-style-ag-price, .is-style-ag-scope) { box-sizing: border-box; }
.wp-block-group:is(.is-style-ag-card, .is-style-ag-section, .is-style-ag-slab, .is-style-ag-price, .is-style-ag-scope) > * { margin-block: 0; }
/* Кольцо фокуса ДС вместо контура: прозрачный outline остаётся видимым в режиме высокой контрастности. */
:is(.wp-block-button__link, .wp-element-button, .portfolio-filter button, .case-more, .kit-switch-item a, .coverage-zone-list li, .is-style-ag-faq > summary, .avtogates-form-more > summary):focus-visible {
  box-shadow: var(--focus-ring); outline: 2px solid transparent;
}

/* ---------- 1. Карточка (Card) ---------- */
.wp-block-group.is-style-ag-card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); color: var(--ink);
  display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-16) var(--sp-14);
}

/* ---------- 2. Раздел (SectionCard) ---------- */
.wp-block-group.is-style-ag-section {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-2xl); color: var(--ink);
  display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--ds-pad-y) var(--ds-pad);
}
.is-style-ag-section :is(h2, h3) { font-size: 16px; font-weight: 700; line-height: 22px; margin: 0; }
.is-style-ag-section > p:not([class]) { color: var(--ink-soft); font-size: 14px; line-height: 21px; }
:is(.is-style-ag-section, .is-style-ag-card) .eyebrow {
  color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 16px; margin: 0; text-transform: uppercase;
}
@media (min-width: 721px) {
  .is-style-ag-section :is(h2, h3) { font-size: 22px; line-height: 28px; }
}

/* ---------- 3. Тёмная плашка (InfoSlab) ---------- */
.wp-block-group.is-style-ag-slab {
  align-items: center; background: var(--slab); border-radius: var(--radius-lg); color: var(--on-slab);
  display: flex; flex-direction: row; gap: var(--sp-12); justify-content: space-between; padding: var(--sp-14) var(--sp-16);
}
.ag-slab-text { font-size: 14px; line-height: 19px; margin: 0; }
.ag-slab-text span { color: var(--on-slab-muted); display: block; }
.ag-slab-price { font-family: var(--font-numeric); font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 20px; margin: 0; white-space: nowrap; }

/* ---------- 4. Блок цены (PriceBlock) ---------- */
.wp-block-group.is-style-ag-price { display: flex; flex-direction: column; gap: var(--sp-4); }
.ag-price-label { color: var(--ink-muted); font-size: 13px; line-height: 18px; margin: 0; }
.ag-price-value { color: var(--ink); font-family: var(--font-numeric); font-size: 32px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 32px; margin: 0; }
.ag-price-note { color: var(--ink-muted); font-size: 12px; line-height: 16px; margin: 0; }
/* Размеры цены: по умолчанию XL (32), L — 28, M — 19. */
.is-style-ag-price.ag-price--l .ag-price-value { font-size: 28px; line-height: 28px; }
.is-style-ag-price.ag-price--m .ag-price-value { font-size: 19px; line-height: 24px; }
/* На тёмной плашке и на тёмном первом экране цена светлая. */
:is(.is-style-ag-slab, .is-style-ag-hero, .ag-on-slab) .is-style-ag-price .ag-price-value { color: var(--on-slab); }
:is(.is-style-ag-slab, .is-style-ag-hero, .ag-on-slab) .is-style-ag-price :is(.ag-price-label, .ag-price-note) { color: var(--on-slab-muted); }

/* ---------- 5. Плитка состава (ScopeTile) ---------- */
/* Лента плиток: горизонтальная прокрутка на телефоне; номер плитки считает CSS-счётчик. */
.ag-scope-strip { counter-reset: ag-scope; display: flex; gap: var(--sp-8); overflow-x: auto; padding-bottom: var(--sp-4); scrollbar-width: none; }
.ag-scope-strip::-webkit-scrollbar { display: none; }
.wp-block-group.is-style-ag-scope {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); counter-increment: ag-scope;
  display: flex; flex: none; flex-direction: column; gap: var(--sp-10); padding: var(--sp-14) var(--sp-12); width: 112px;
}
.is-style-ag-scope::before { color: var(--accent); content: counter(ag-scope); font-family: var(--font-numeric); font-size: 13px; font-weight: 700; line-height: 16px; }
.is-style-ag-scope p { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 18px; margin: 0; overflow-wrap: anywhere; }

/* ---------- 6. Бейдж, теги и строка доверия (абзац и список) ---------- */
p.is-style-ag-badge {
  align-self: flex-start; background: var(--accent); border-radius: var(--radius-xs); color: var(--on-accent); display: inline-flex;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 16px; margin: 0; padding: var(--sp-6) var(--sp-10); width: fit-content;
}
ul.is-style-ag-tags { display: flex; flex-wrap: wrap; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
ul.is-style-ag-tags > li { background: var(--fill-tag); border-radius: var(--radius-xs); color: var(--ink-body); font-size: 12px; font-weight: 500; line-height: 16px; margin: 0; padding: 5px 9px; }
/* Строка доверия: мелкий текст с точкой-маркером. Те же правила — у строк родителя hero-price-trust / hero-price-terms (раздел 9). */
:is(p.is-style-ag-trust, .hero-price-trust, .hero-price-terms) {
  --ag-trust-ink: var(--ink-muted); --ag-trust-strong: var(--ink); --ag-trust-dot: var(--accent);
  color: var(--ag-trust-ink); font-size: 12px; font-weight: 400; line-height: 16px; margin: 0; padding-left: var(--sp-14); position: relative;
}
:is(p.is-style-ag-trust, .hero-price-trust, .hero-price-terms)::before {
  background: var(--ag-trust-dot); border-radius: var(--radius-pill); content: ""; height: 6px; left: 0; position: absolute; top: 5px; width: 6px;
}
:is(p.is-style-ag-trust, .hero-price-trust) strong, .hero-price-trust { color: var(--ag-trust-strong); font-weight: 600; }
ul.is-style-ag-trust { list-style: none; margin: 0; padding: 0; }
ul.is-style-ag-trust > li { margin: 0; padding-left: var(--sp-14); position: relative; }
ul.is-style-ag-trust > li::before { background: var(--ag-trust-dot); border-radius: var(--radius-pill); content: ""; height: 6px; left: 0; position: absolute; top: 5px; width: 6px; }
:is(ul.is-style-ag-trust) { color: var(--ag-trust-ink); font-size: 12px; line-height: 16px; --ag-trust-ink: var(--ink-muted); --ag-trust-dot: var(--accent); }
/* На тёмных фонах: плашка, первый экран, быстрая заявка и тёмный первый экран родителя на компьютере. */
:is(.is-style-ag-slab, .is-style-ag-hero, .quick-request, .ag-on-slab) :is(.is-style-ag-trust, .hero-price-trust, .hero-price-terms) { --ag-trust-ink: var(--on-slab-muted); --ag-trust-strong: var(--on-slab); --ag-trust-dot: var(--accent-on-slab); }
@media (min-width: 721px) {
  .hero :is(.hero-price-trust, .hero-price-terms) { --ag-trust-ink: var(--on-slab-muted); --ag-trust-strong: var(--on-slab); --ag-trust-dot: var(--accent-on-slab); }
}

/* ---------- 7. Шаги процесса (ProcessSteps): список с CSS-счётчиком ---------- */
.is-style-ag-steps { counter-reset: ag-step; list-style: none; margin: 0; padding: 0; }
.is-style-ag-steps > li { counter-increment: ag-step; margin: 0; min-height: 28px; padding: var(--sp-4) 0 var(--sp-16) 42px; position: relative; }
.is-style-ag-steps > li:last-child { padding-bottom: 0; }
.is-style-ag-steps > li::before {
  align-items: center; background: var(--ink); border-radius: var(--radius-pill); color: var(--on-ink); content: counter(ag-step); display: flex;
  font-size: 13px; font-weight: 700; height: 28px; justify-content: center; left: 0; position: absolute; top: 0; width: 28px;
}
/* Линия между точками; у последнего шага её нет. */
.is-style-ag-steps > li:not(:last-child)::after { background: var(--rail); bottom: 0; content: ""; left: 13px; position: absolute; top: 28px; width: 2px; }
.is-style-ag-steps strong { color: var(--ink); display: block; font-size: 15px; font-weight: 600; line-height: 20px; }
.is-style-ag-steps br { display: none; }
.is-style-ag-steps > li { color: var(--ink-muted); font-size: 13px; line-height: 18px; }

/* ---------- 8. Вопрос-ответ (FaqItem): core/details ---------- */
.wp-block-details.is-style-ag-faq { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.wp-block-details.is-style-ag-faq + .wp-block-details.is-style-ag-faq { margin-block-start: var(--sp-8); }
.is-style-ag-faq > summary {
  align-items: center; color: var(--ink); cursor: pointer; display: flex; font-size: 15px; font-weight: 600; gap: var(--sp-12); justify-content: space-between;
  line-height: 20px; list-style: none; min-height: 56px; padding: var(--sp-14) var(--sp-16);
}
.is-style-ag-faq > summary::-webkit-details-marker { display: none; }
.is-style-ag-faq > summary::after {
  align-items: center; background: var(--fill-tag); border-radius: var(--radius-pill); color: var(--ink); content: "+"; display: flex; flex: none;
  font-size: 18px; font-weight: 500; height: 28px; justify-content: center; width: 28px;
}
.is-style-ag-faq[open] > summary::after { content: "−"; }
.is-style-ag-faq > :not(summary) { color: var(--ink-soft); font-size: 14px; line-height: 21px; margin: 0; padding: 0 var(--sp-16) var(--sp-16); }

/* ---------- 9. Плитки контактов (ContactTile): core/buttons ---------- */
.wp-block-buttons.is-style-ag-contacts { display: grid; gap: var(--sp-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-style-ag-contacts > .wp-block-button { margin: 0; width: 100%; }
.is-style-ag-contacts .wp-block-button__link {
  align-items: flex-start; background: var(--slab); border: 0; border-radius: var(--radius-lg); box-sizing: border-box; color: var(--on-slab);
  flex-direction: column; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; justify-content: center; line-height: 20px;
  min-height: var(--btn-m); padding: var(--sp-12) var(--sp-14); text-align: left; width: 100%;
}
/* Мессенджеры — светлые плитки с контуром: телефоны остаются главными. */
.is-style-ag-contacts .is-style-avtogates-outline .wp-block-button__link { background: var(--surface-raised); border: 1.5px solid var(--line-strong); color: var(--ink); }
.is-style-ag-contacts .is-style-avtogates-outline .wp-block-button__link:hover { background: var(--fill-tag); }
@media (max-width: 380px) {
  .wp-block-buttons.is-style-ag-contacts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10. Первый экран (Hero): core/cover ---------- */
/* Высота — токен hero-h; затемнение снизу вверх — токен hero-scrim. Слой затемнения рисует ::after: родной слой блока
   при dimRatio 0 прозрачен, а цвет-пресет блока получил бы !important от ядра. */
.wp-block-cover.is-style-ag-hero {
  align-items: flex-end; border-radius: 0; color: var(--on-slab); justify-content: flex-start; min-height: var(--hero-h); overflow: hidden; padding: 0;
}
.is-style-ag-hero::after { background: linear-gradient(to top, var(--hero-scrim) 35%, transparent); content: ""; inset: 0; position: absolute; z-index: 1; }
.is-style-ag-hero .wp-block-cover__inner-container {
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-12); padding: 72px var(--sp-20) var(--sp-20); position: relative; width: 100%; z-index: 2;
}
.is-style-ag-hero .wp-block-cover__inner-container > * { margin-block: 0; }
.is-style-ag-hero :is(h1, h2) {
  color: var(--on-slab); font-family: var(--font-numeric); font-size: 27px; font-weight: 700; letter-spacing: 0; line-height: 30px; margin: 0; text-wrap: balance;
}
@media (min-width: 721px) {
  .wp-block-cover.is-style-ag-hero { border-radius: var(--radius-sheet); }
  .is-style-ag-hero .wp-block-cover__inner-container { max-width: 720px; padding: 96px var(--ds-pad) var(--ds-pad); }
  .is-style-ag-hero :is(h1, h2) { font-size: 38px; line-height: 43px; }
}

/* ---------- 11. Перекраска разметки родителя: строки под ценой первого экрана ---------- */
/* Строки hero-price-trust / hero-price-terms оформлены как «строка доверия» (раздел 6). Здесь — только расклад в блоке цены. */
.hero-price { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero-price > p { margin: 0; }
.hero-price .hero-price-trust { border-top: 1px solid var(--line); margin-top: var(--sp-8); padding-top: var(--sp-8); }
.hero-price .hero-price-trust::before { top: 13px; }
@media (min-width: 721px) {
  .hero-price .hero-price-trust { border-top-color: var(--slab-line); }
}

/* ---------- 12. Быстрая заявка (форма плагина с data-avtogates-placement="quick") ---------- */
/* Панель формы лежит на тёмной плашке: светлая карточка, поля крупные, кнопка отправки на всю ширину на телефоне. */
html body .avtogates-form-panel--quick { background: var(--surface-raised); border: 0; border-radius: var(--radius-2xl); padding: var(--sp-16); }
html body .avtogates-form-panel--quick form { gap: var(--sp-12); }
html body .avtogates-form-panel--quick .wp-block-button__link { min-height: var(--btn-l); width: 100%; }
@media (min-width: 721px) {
  html body .avtogates-form-panel--quick { padding: var(--sp-24); }
  html body .avtogates-form-panel--quick .wp-block-button { width: auto; }
  html body .avtogates-form-panel--quick .wp-block-button__link { min-width: 260px; width: auto; }
}

/* ---------- 13. Поля, чипы и согласие плагина форм (TextField, Chip, ConsentCheckbox) ---------- */
html body .avtogates-form-panel label { gap: var(--sp-6); }
html body .avtogates-form-panel :is(input, textarea)::placeholder { color: var(--ink-muted); opacity: 1; }
/* Ошибка поля: граница цветом ошибки (текст ошибки формы красит style.css). */
html body .avtogates-form-panel :is(input, select, textarea):is([aria-invalid="true"], :user-invalid) { background: var(--error-surface); border-color: var(--error-line); }
/* «Добавить подробности» — чип (Chip): пилюля 40 px, в раскрытом состоянии залита графитом. */
html body .avtogates-form-more { border: 0; }
html body .avtogates-form-more > summary {
  align-self: flex-start; background: var(--ds-raised); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ds-ink);
  display: inline-flex; font-size: 13px; font-weight: 600; gap: var(--sp-8); min-height: var(--chip-h); padding: 0 var(--sp-14);
}
html body .avtogates-form-more[open] > summary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html body .avtogates-form-more > summary em { color: var(--ds-muted); }
html body .avtogates-form-more[open] > summary em { color: inherit; opacity: 0.8; }
html body .avtogates-form-more > label { margin-top: var(--sp-14); }
/* Согласие (ConsentCheckbox): галочка 22 px, текст 13/18, ссылка подчёркнута. */
html body .avtogates-form-panel .avtogates-form-consent {
  align-items: flex-start; color: var(--ink-soft); font-size: 13px; font-weight: 400; grid-template-columns: 22px minmax(0, 1fr); line-height: 18px; min-height: var(--hit-min);
}
html body .avtogates-form-panel .avtogates-form-consent input { margin: 0; }
html body .avtogates-form-panel .avtogates-form-consent a { color: var(--ink); text-decoration: underline; }
/* Чипы районов, фильтра портфолио и переключателя комплектов: активное состояние через aria. */
:is(.portfolio-filter button, .kit-switch-item a)[aria-pressed="true"], .kit-switch-item a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ---------- 14. Карточка работы портфолио (WorkCard) ---------- */
.case-card { display: flex; flex-direction: column; }
.case-card img { display: block; object-fit: cover; width: 100%; }
.case-card:hover { border-color: var(--line-strong); }
.case-card:focus-within { box-shadow: var(--focus-ring); }
.case-copy { display: flex; flex-direction: column; gap: var(--sp-8); }
.case-copy > * { margin-block: 0; }
.case-copy h3 { color: var(--ink); }

/* ---------- 15. Плавающие кнопки: кольцо фокуса ---------- */
.avtogates-floating-shortcuts__link:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid transparent; }

/* ---------- 16. Спецпредложение (inc/special-offer.php, assets/js/offer.js) ---------- */
/* Две комплектации (на сваях и на бетоне). Без скрипта и на компьютере (от 721 px) видны обе рядом, переключатель скрыт; на телефоне после
   работы скрипта (data-ag-ready) виден переключатель-сегмент и одна комплектация. Цвета и размеры — только токены, тёмная тема работает сама. */
.ag-offer { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-16); }
/* Выделение (решение владельца 23.10.2026: «это спец предложение, его надо как-то выделить»): весь блок — карточка с рамкой 2 px цвета акцента и лёгкой
   подложкой акцента (6 %); запасной фон для браузеров без color-mix — обычная приподнятая поверхность. Карточки комплектаций внутри остаются светлыми. */
.ag-offer { background: var(--surface-raised); border: 2px solid var(--accent); border-radius: var(--radius-2xl); padding: var(--sp-16); }
@supports (background: color-mix(in srgb, red 6%, blue)) {
  .ag-offer { background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised)); }
}
.ag-offer > * { margin-block: 0; }
.ag-offer-head { display: flex; flex-direction: column; gap: var(--sp-6); }
.ag-offer-head > * { margin-block: 0; }
.ag-offer .eyebrow { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 16px; margin: 0; text-transform: uppercase; }
/* Надзаголовок «Спецпредложение» — плашка-значок акцента, как бейдж города на первом экране: пилюля, полужирный, текст --on-accent. */
.ag-offer-head .ag-offer-eyebrow {
  align-self: flex-start; background: var(--accent); border-radius: var(--radius-pill); color: var(--on-accent); display: inline-flex;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 16px; margin: 0; padding: var(--sp-6) var(--sp-12); width: fit-content;
}
.ag-offer-title { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 28px; margin: 0; text-wrap: balance; }
.ag-offer-lead { color: var(--ink-soft); font-size: 14px; line-height: 21px; margin: 0; }

/* Переключатель: сегменты, как «Без автоматики / С автоматикой» в калькуляторе — утопленная дорожка и приподнятый выбранный сегмент. */
.ag-offer-switch { background: var(--surface-sunken); border-radius: var(--radius-lg); gap: var(--sp-4); display: none; padding: var(--sp-4); }
.ag-offer-tab {
  background: transparent; border: 0; border-radius: var(--radius-md); color: var(--ink-soft); cursor: pointer; flex: 1 1 0; font-family: inherit;
  font-size: 14px; font-weight: 600; line-height: 20px; min-height: var(--hit-min); padding: 0 var(--sp-12); text-align: center;
}
.ag-offer-tab[aria-pressed="true"] { background: var(--surface-raised); box-shadow: var(--shadow-segment); color: var(--ink); }
.ag-offer-tab:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid transparent; }

.ag-offer-panels { display: grid; gap: var(--sp-12); }
.ag-offer-panel {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); box-sizing: border-box; color: var(--ink);
  display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-16) var(--sp-14);
}
.ag-offer-panel > * { margin-block: 0; }
.ag-offer-name { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 22px; margin: 0; }
.ag-offer-text { color: var(--ink-soft); font-size: 14px; line-height: 21px; margin: 0; }
.ag-offer-list-title { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; margin: 0; }
.ag-offer-items { color: var(--ink-soft); display: flex; flex-direction: column; font-size: 14px; gap: var(--sp-6); line-height: 20px; margin: 0; padding-inline-start: var(--sp-20); }
.ag-offer-panel .ag-offer-slab { margin-block-start: var(--sp-4); }
/* Кнопка замерщика прижата книзу, чтобы у двух карточек рядом она стояла на одной линии независимо от длины состава. */
.ag-offer-panel-actions, .ag-offer-actions { display: flex; flex-direction: column; gap: var(--sp-10); margin: 0; }
.ag-offer-panel-actions { margin-block-start: auto; padding-block-start: var(--sp-4); }
.ag-offer :is(.ag-offer-panel-actions, .ag-offer-actions) .wp-block-button { margin: 0; width: 100%; }
.ag-offer :is(.ag-offer-panel-actions, .ag-offer-actions) .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; min-height: var(--btn-m); text-align: center; width: 100%; }

/* Телефон: переключатель показан, активна одна комплектация (только после работы скрипта — без него видны обе). */
@media (max-width: 720px) {
  .ag-offer[data-ag-ready] .ag-offer-switch { display: flex; }
  .ag-offer[data-ag-ready] .ag-offer-panel:not([data-active]) { display: none; }
}
/* Компьютер: обе комплектации рядом, переключатель скрыт; кнопка расчёта по центру под ними. */
@media (min-width: 721px) {
  .ag-offer { padding: var(--sp-24); }
  .ag-offer-panels { gap: var(--sp-16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-offer-panel { padding: var(--sp-20); }
  .ag-offer-name { font-size: 22px; line-height: 28px; }
  .ag-offer-actions { align-items: center; }
  .ag-offer .ag-offer-actions .wp-block-button { max-width: 360px; }
}