/*
Theme Name: Peregruz Child
Theme URI: https://peregruz.net
Description: Дочерняя тема GeneratePress для портала «Перегруз» (peregruz.net). SEO-справочник по штрафам за перегруз / весовому контролю. Стек по plan-polished.md Ф2.3. Айдентика «дорожный документ» (navy + дозированный оранжевый). Все значения — из tokens.css (figma-tokens.md Ф2.1). WCAG 2.2 AA.
Author: Peregruz
Template: generatepress
Version: 0.1.0
Text Domain: peregruz-child
*/

/* =====================================================================
   ПЕРЕГРУЗ — Child Theme Styles
   ---------------------------------------------------------------------
   Архитектура:
   - tokens.css подключается ОТДЕЛЬНО через functions.php (после
     родительской GeneratePress), даёт :root-переменные.
   - Этот файл = только семантические стили компонентов на тех токенах.
   - Все цвета/отступы/радиусы/шрифты — var(--token). Магических чисел нет.
   - Интерактив (таблица/FAQ/CTA) стилизуется по классам Gutenberg-блоков
     (.wp-block-table / .wp-block-details / .wp-block-button), чтобы
     контент по REST/редактору пережил wpautop (урок Videomobil).
   ===================================================================== */

/* ── Reset / база (узко, не глобальный reset — GP уже даёт базу) ──── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--text);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

a { color: var(--link); }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Контейнер портала */
.prz-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 480px) { .prz-container { padding-inline: 16px; } }

.prz-section { padding-block: var(--section-y); }

/* Утилиты темных секций (переключает focus-ring на светлый — см. tokens.css) */
.prz-navy   { background: var(--navy); color: var(--text-on-dark); }
.prz-navy-2 { background: var(--navy-2); color: var(--text-on-dark); }

/* Светлый focus-ring на тёмных поверхностях портала (tokens.css задаёт его
   для .navy/.hero/.footer — здесь распространяем на наш prz-* namespace,
   чтобы НЕ расходиться с зеркалом tokens.css). WCAG 2.2 — фокус виден на navy. */
.prz-header, .prz-hero, .prz-stats, .prz-capture,
.prz-page-hero, .prz-footer, .prz-inline-cta,
.prz-aside__card--cta {
  --focus-ring: 2px solid var(--orange-on-navy);
}
/* Заголовки на тёмных секциях — светлым (иначе сливаются с navy-фоном).
   Перечень зеркалит список тёмных поверхностей выше (focus-ring). */
.prz-navy h1, .prz-navy h2, .prz-navy h3, .prz-navy h4,
.prz-navy-2 h1, .prz-navy-2 h2, .prz-navy-2 h3, .prz-navy-2 h4,
.prz-hero h1, .prz-hero h2, .prz-hero h3, .prz-hero h4,
.prz-stats h1, .prz-stats h2, .prz-stats h3, .prz-stats h4,
.prz-capture h1, .prz-capture h2, .prz-capture h3, .prz-capture h4,
.prz-page-hero h1, .prz-page-hero h2, .prz-page-hero h3, .prz-page-hero h4,
.prz-footer h1, .prz-footer h2, .prz-footer h3, .prz-footer h4 { color: var(--text-on-dark); }

/* ── Skip-link (WCAG 2.4.1) ──────────────────────────────────────── */
.prz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--navy);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--r) 0;
  font-weight: 700;
}
.prz-skip-link:focus {
  left: 0;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* =====================================================================
   HEADER (sticky navy)
   ===================================================================== */
.prz-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--navy);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-sm);
}
.prz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 56px;
  padding-block: var(--space-3);
}
.prz-logo {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-on-dark);
  text-decoration: none;
  white-space: nowrap;
}
/* Явный цвет на hover/focus: иначе родительская GeneratePress a:hover{color}
   (специфичнее базового .prz-logo) перекрашивает логотип в тёмный GP-цвет. */
.prz-logo:hover,
.prz-logo:focus { color: var(--text-on-dark); text-decoration: none; }
.prz-logo__dot { color: var(--orange-on-navy); }
.prz-logo:hover .prz-logo__dot,
.prz-logo:focus .prz-logo__dot { color: var(--orange-on-navy); }

/* Навигация */
.prz-nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.prz-nav__list {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
/* Стилизуем РЕАЛЬНЫЕ ссылки меню по контейнеру (.prz-nav__list a), не только
   .prz-nav__link: назначенное WP-меню рендерит <a> без нашего класса → ссылки
   наследовали синий GeneratePress (нечитаемо на navy, особенно в мобайл-дропдауне).
   :link,:visited явно — чтобы перебить GP `a:visited{color}` (равная специфичность,
   наш CSS грузится позже). Фолбэк и tool-группа тоже под .prz-nav__list. */
.prz-nav__list a,
.prz-nav__list a:link,
.prz-nav__list a:visited,
.prz-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: var(--r);
}
.prz-nav__list a:hover,
.prz-nav__list a[aria-current="page"],
.prz-nav__link:hover,
.prz-nav__link[aria-current="page"] {
  background: var(--navy-3);
  color: var(--text-on-dark);
  text-decoration: none;
}

/* Группа инструментов — отдельный блок навигации (десктоп: разделитель слева). */
.prz-nav__tools {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--navy-3);
}
.prz-nav__tools-label { display: none; } /* подпись группы — только в мобайл-дропдауне */
/* Tool-ссылки: тот же кит, лёгкий оранжевый акцент-кромка снизу для «утилитарности». */
.prz-nav__link--tool[aria-current="page"] { background: var(--navy-3); }

/* ── Подменю «Статьи» ▾ 4 рубрики (Ф4c) ───────────────────────────────
   Десктоп: ховер/фокус раскрывает выпадающий список (CSS-only). Мобайл:
   кнопка-каретка .prz-nav__sub-toggle раскрывает (класс .is-sub-open, JS).
   Ссылки подменю — те же .prz-nav__link (цвет кита, не синие GP). */
.prz-nav__item--has-sub { position: relative; }
.prz-nav__link--parent { gap: var(--space-1); }
.prz-nav__caret { width: 16px; height: 16px; flex: none; }
.prz-nav__sub { list-style: none; margin: 0; padding: 0; }
.prz-nav__sub-toggle { display: none; } /* видна только на мобайле (медиазапрос ниже) */

@media (min-width: 768px) {
  /* Выпадающее меню под пунктом «Статьи». */
  .prz-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--navy-2);
    border: 1px solid var(--navy-3);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    display: none;
    z-index: var(--z-sticky);
  }
  /* Раскрытие по ховеру И по фокусу внутри (клавиатура — WCAG 2.4.x). */
  .prz-nav__item--has-sub:hover > .prz-nav__sub,
  .prz-nav__item--has-sub:focus-within > .prz-nav__sub { display: block; }
  .prz-nav__sub .prz-nav__sublink { width: 100%; white-space: nowrap; }
  /* Каретка поворачивается при раскрытии (ховер/фокус). */
  .prz-nav__item--has-sub:hover > .prz-nav__link--parent .prz-nav__caret,
  .prz-nav__item--has-sub:focus-within > .prz-nav__link--parent .prz-nav__caret { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .prz-nav__caret { transition: none; } }
.prz-nav__caret { transition: transform 150ms ease; }

/* Бургер (375) — доступная <button aria-expanded>, открытие по классу .is-open (JS).
   Вид — под UI-кит prz: контрол на navy-поверхности (navy-2 фон + navy-3 рамка + радиус),
   как остальные контролы; hover/открыто — navy-3, открыто — оранжевый акцент рамки.

   ⚠ Ф4b-фикс десктопа: .prz-burger ОБОРАЧИВАЕТ <nav>. Раньше base = display:none →
   на десктопе (>767px) скрывался не только бургер-контрол, но и сам <nav> внутри →
   десктоп оставался БЕЗ навигации (баг был незаметен: ревью шло на мобайле).
   Теперь base = flex-контейнер: <nav> виден инлайн справа, кнопка-бургер скрыта
   (.prz-burger__btn display:none), на ≤767px бургер включается медиазапросом ниже. */
.prz-burger { display: flex; align-items: center; }
.prz-burger__btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--text-on-dark);
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--r);
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease;
}
.prz-burger__btn:hover { background: var(--navy-3); }
.prz-burger.is-open .prz-burger__btn { background: var(--navy-3); border-color: var(--orange); }
.prz-burger__btn svg { width: 24px; height: 24px; flex: none; }

@media (max-width: 767px) {
  .prz-burger { display: block; }
  .prz-burger__btn { display: inline-flex; }
  .prz-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--navy-2);
    display: none;
    padding: var(--space-3) var(--gutter) var(--space-5);
    box-shadow: var(--shadow-md);
  }
  .prz-burger.is-open .prz-nav { display: block; }
  .prz-nav__list { flex-direction: column; gap: 0; }
  .prz-nav__list a,
  .prz-nav__link { width: 100%; }            /* и реальные якоря назначенного меню */
  /* Инструменты в дропдауне: разделитель сверху + видимая подпись группы. */
  .prz-nav__tools {
    margin-left: 0;
    padding-left: 0;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-left: 0;
    border-top: 1px solid var(--navy-3);
  }
  .prz-nav__tools-label {
    display: block;
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-family: var(--f-head);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-on-dark-2);
  }

  /* Подменю «Статьи» на мобайле: «Статьи» + каретка в одну строку, рубрики —
     раскрываемый вложенный список (кнопка-каретка → .is-sub-open). */
  .prz-nav__item--has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .prz-nav__item--has-sub > .prz-nav__link--parent { flex: 1 1 auto; }
  .prz-nav__link--parent .prz-nav__caret { display: none; } /* на мобайле каретку рисует кнопка */
  .prz-nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-on-dark);
    cursor: pointer;
  }
  .prz-nav__sub-toggle svg { width: 20px; height: 20px; flex: none; transition: transform 150ms ease; }
  .prz-nav__item--has-sub.is-sub-open .prz-nav__sub-toggle svg { transform: rotate(180deg); }
  .prz-nav__sub {
    flex-basis: 100%;
    display: none;
    padding-left: var(--space-4);
  }
  .prz-nav__item--has-sub.is-sub-open .prz-nav__sub { display: block; }
}
@media (prefers-reduced-motion: reduce) { .prz-nav__sub-toggle svg { transition: none; } }

/* =====================================================================
   BUTTONS (на токенах; .wp-block-button — Gutenberg-кнопка пережёвывает wpautop)
   ===================================================================== */
.prz-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.2;
  border-radius: var(--r);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.prz-btn:hover { text-decoration: none; }

/* Primary = оранжевый сигнал. Текст белый → набираем на orange-h (4.61 ✓) */
.prz-btn--primary,
.wp-block-button__link {
  background: var(--orange-h);
  color: var(--white);
}
.prz-btn--primary:hover,
.wp-block-button__link:hover {
  background: var(--orange-ink);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

/* Secondary = контурная на тёмном / светлом */
.prz-btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--text-on-dark-2);
}
.prz-btn--ghost:hover { background: var(--navy-3); color: var(--white); }

.prz-btn--ghost-light {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.prz-btn--ghost-light:hover { background: var(--bg-2); }

/* Telegram */
.prz-btn--tg { background: var(--tg); color: var(--white); }
.prz-btn--tg:hover { background: var(--tg-h); color: var(--white); transform: translateY(-1px); }
/* Иконка Telegram (бумажный самолётик) перед текстом: у всех .prz-btn--tg и у
   hero-CTA с маркером .prz-btn--tg-ico. Mask красится в currentColor (белый текст). */
.prz-btn--tg::before,
.prz-btn--tg-ico::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: 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%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%202%2011%2013%27%2F%3E%3Cpath%20d%3D%27m22%202-7%2020-4-9-9-4Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: 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%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%202%2011%2013%27%2F%3E%3Cpath%20d%3D%27m22%202-7%2020-4-9-9-4Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.prz-btn--full { width: 100%; }

/* GP-фикс для <a>-кнопок (Ф4c). GeneratePress красит ссылки своим цветом —
   `a:visited{color}` (0,1,1) бьёт базовый .prz-btn--primary (0,1,0) → текст
   кнопки уходил в синий (ярко видно на /shablon-zhaloby «Получить шаблон»).
   Тег+класс + scope контента поднимает специфичность выше GP; :link/:visited
   явно (как фикс GP-кнопок в Ф1 для button/input/.wpcf7-submit). Покрываем ВСЕ
   .prz-btn--* варианты, что бывают <a> на страницах. */
a.prz-btn--primary, a.prz-btn--primary:link, a.prz-btn--primary:visited, a.prz-btn--primary:hover,
.prz-article__content a.prz-btn--primary,
.prz-article__content a.prz-btn--primary:visited,
.prz-article__content a.prz-btn--primary:hover,
a.prz-btn--tg, a.prz-btn--tg:link, a.prz-btn--tg:visited, a.prz-btn--tg:hover,
a.prz-btn--ghost, a.prz-btn--ghost:link, a.prz-btn--ghost:visited, a.prz-btn--ghost:hover {
  color: var(--white);
}
a.prz-btn--ghost-light, a.prz-btn--ghost-light:link, a.prz-btn--ghost-light:visited { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .prz-btn:hover, .wp-block-button__link:hover { transform: none; }
}

/* =====================================================================
   HERO (главная) — сплит: текст + карточка-якорь
   ===================================================================== */
.prz-hero {
  background: var(--navy);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
/* Глубина: мягкое оранжевое свечение за карточкой (декор; opacity вне токенов) */
.prz-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 80% 35%, rgba(224, 90, 32, 0.14), transparent 60%);
  pointer-events: none;
}
.prz-hero__inner {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--space-12);
}
.prz-hero__text { max-width: 560px; }
.prz-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange-on-navy);
  margin-bottom: var(--space-4);
}
.prz-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--text-on-dark-2);
  max-width: 480px;
  margin: var(--space-5) 0 var(--space-8);
}
.prz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.prz-hero__alt { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-on-dark-2); }
.prz-hero__alt a { color: var(--orange-on-navy); font-weight: 700; text-decoration: underline; }

/* ── Карточка-якорь (знак нагрузки на ось + цифра штрафа) ── */
.prz-hero__anchor { display: flex; justify-content: center; }
.prz-hero__card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid var(--navy-3);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.prz-hero__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--space-5);
  border-radius: var(--r-full);
  background: var(--white);
  border: 9px solid var(--red);
}
.prz-hero__sign svg { width: 54px; height: 54px; color: var(--navy); }
.prz-hero__card-num {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--white);
}
.prz-hero__card-cap {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-on-dark-2);
  margin: var(--space-3) 0 0;
}
.prz-hero__card-tag {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-cap);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange-on-navy);
  border: 1px solid rgba(245, 160, 106, 0.4); /* opacity вне токенов */
  border-radius: var(--r-full);
  padding: var(--space-1) var(--space-4);
}

/* Планшет/мобайл: одна колонка */
@media (max-width: 820px) {
  .prz-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .prz-hero__anchor { justify-content: flex-start; }
  .prz-hero::before { background: radial-gradient(80% 50% at 50% 0%, rgba(224, 90, 32, 0.14), transparent 60%); }
}
@media (max-width: 480px) {
  .prz-hero__actions { flex-direction: column; }
  .prz-hero__actions .prz-btn { width: 100%; }
  .prz-hero__card { max-width: none; }
}

/* ── Stats bar ───────────────────────────────────────────────────── */
.prz-stats { background: var(--navy-2); color: var(--text-on-dark); }
.prz-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  text-align: center;
}
.prz-stats__num { font-family: var(--f-head); font-size: 2rem; font-weight: 800; color: var(--orange-on-navy); }
.prz-stats__label { font-size: var(--fs-sm); color: var(--text-on-dark-2); }
@media (max-width: 480px) { .prz-stats__grid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* =====================================================================
   CARDS / GRIDS
   ===================================================================== */
.prz-grid { display: grid; gap: var(--space-6); }
.prz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.prz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.prz-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .prz-grid--4 { grid-template-columns: repeat(2, 1fr); } .prz-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .prz-grid--2, .prz-grid--3, .prz-grid--4 { grid-template-columns: 1fr; } }

.prz-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.prz-section__more { font-weight: 700; font-size: var(--fs-sm); }

/* Карточка рубрики */
.prz-rubric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
  min-height: 44px;
}
.prz-rubric:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.prz-rubric__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  background: var(--orange-bg);
  color: var(--orange-ink);
  margin-bottom: var(--space-2);
}
.prz-rubric__icon svg { width: 24px; height: 24px; }
.prz-rubric__title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h3); }
.prz-rubric__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.prz-rubric__arrow { margin-top: auto; color: var(--orange-ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .prz-rubric:hover { transform: none; } }

/* Карточка статьи (анонс) */
.prz-post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.prz-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prz-post-card__thumb { aspect-ratio: 16 / 9; background: var(--bg-2); display: block; }
.prz-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.prz-post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.prz-post-card__cat {
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--orange-ink);
}
.prz-post-card__title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h3); margin: 0; }
.prz-post-card__title a { color: var(--text); text-decoration: none; }
.prz-post-card__title a:hover { color: var(--orange-ink); }
.prz-post-card__excerpt { font-size: var(--fs-sm); color: var(--text-2); }
.prz-post-card__meta { margin-top: auto; font-size: var(--fs-xs); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .prz-post-card:hover { transform: none; } }

/* =====================================================================
   EMPTY STATE (0 постов / пустая БД) — НЕ PHP-warning, НЕ пустая сетка
   ===================================================================== */
.prz-empty {
  grid-column: 1 / -1;
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-12) var(--space-6);
  color: var(--text-2);
}
.prz-empty__icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--bg-2); color: var(--text-muted);
}
.prz-empty__icon svg { width: 28px; height: 28px; }
.prz-empty__title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h3); color: var(--text); margin-bottom: var(--space-2); }
.prz-empty__text { font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.prz-empty__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   PAGINATION
   ===================================================================== */
.prz-pagination { margin-top: var(--space-10); }
.prz-pagination .nav-links,
.prz-pagination .page-numbers-wrap {
  display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; align-items: center;
}
.prz-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--white); color: var(--text); font-weight: 700;
  text-decoration: none;
}
.prz-pagination .page-numbers:hover { background: var(--bg-2); }
.prz-pagination .page-numbers.current {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.prz-pagination .page-numbers.dots { border: none; background: transparent; }

/* =====================================================================
   ARTICLE (single) — лонгрид + слоты E-E-A-T
   ===================================================================== */
.prz-article-hero { background: var(--bg-2); }
.prz-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-block: var(--space-4);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.prz-breadcrumb a { color: var(--text-2); }
.prz-breadcrumb__sep { padding-inline: var(--space-2); color: var(--text-muted); }

/* Крошки на navy-фоне page-hero — контраст по WCAG 1.4.3 (тёмный --text-2 на navy = ~1.3:1) */
.prz-page-hero .prz-breadcrumb,
.prz-page-hero .prz-breadcrumb a,
.prz-page-hero .prz-breadcrumb__sep { color: var(--text-on-dark-2); }

.prz-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
}
.prz-badge--cat { background: var(--orange-bg); color: var(--orange-ink); }
.prz-badge--verified { background: var(--green-bg); color: var(--green); }

.prz-article__head { padding-block: var(--space-6) var(--space-8); }
.prz-article__h1 { font-size: var(--fs-h1); font-weight: 800; margin-block: var(--space-3); }

/* META-row слоты (graceful-скрытие: пустой PHP не выводит элемент вовсе) */
.prz-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  font-size: var(--fs-sm); color: var(--text-muted);
  padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.prz-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.prz-meta__item svg { width: 16px; height: 16px; }
.prz-meta__author-name { color: var(--text-2); font-weight: 700; }

/* Раскладка лонгрида: 2fr/1fr на десктопе, sticky aside */
.prz-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-10);
}
@media (max-width: 1023px) {
  .prz-article-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* min-width:0 — даёт грид-элементу сжаться ниже min-content таблиц (.wp-block-table
   min-width:480px), иначе на мобиле колонка распирает страницу = горизонтальный скролл.
   Таблица при этом скроллится внутри своей .wp-block-table (overflow-x:auto). */
.prz-article__body { max-width: 820px; min-width: 0; }
.prz-article__lead {
  font-size: 1.375rem;
  line-height: var(--lh-prose);
  color: var(--text);
  font-weight: 400;
  margin-bottom: var(--space-6);
}

/* Заглавное фото статьи */
.prz-article__cover { margin: 0 0 var(--space-6); border-radius: var(--r-lg); overflow: hidden; }
.prz-article__cover img { width: 100%; height: auto; display: block; }

/* Поделиться */
.prz-share { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.prz-share__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; }
.prz-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.prz-share__btn svg { width: 18px; height: 18px; flex: none; }/* flex:none — иначе SVG (copy-иконка) схлопывается до width:0 во inline-flex кнопке */
.prz-share__btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.prz-share__copy { position: relative; }
.prz-share__copy.is-copied { background: var(--green); color: var(--white); border-color: var(--green); }
.prz-share__toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--navy); color: var(--white); font-size: var(--fs-xs); font-weight: 700;
  padding: var(--space-1) var(--space-3); border-radius: var(--r-sm); white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity 150ms ease; pointer-events: none;
}
.prz-share__copy.is-copied .prz-share__toast { opacity: 1; visibility: visible; }

/* Фильтр-переходник по рубрикам (пилюли) — блог, архивы */
.prz-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.prz-filter__pill {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--space-5); border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.prz-filter__pill:hover { background: var(--bg-2); text-decoration: none; }
.prz-filter__pill.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Проза (тело статьи) — 20px, читаемая мера */
.prz-article__content { font-size: 1.25rem; line-height: 1.7; color: var(--text-2); }
.prz-article__content > * { margin-block: 0 var(--space-5); }
.prz-article__content h2 { font-size: var(--fs-h2); color: var(--text); margin-top: var(--space-10); }
.prz-article__content h3 { font-size: var(--fs-h3); color: var(--text); margin-top: var(--space-8); }
.prz-article__content a { color: var(--link); }
.prz-article__content ul, .prz-article__content ol { padding-left: var(--space-6); }
.prz-article__content li { margin-bottom: var(--space-2); }
.prz-article__content blockquote {
  border-left: 4px solid var(--orange);
  background: var(--orange-bg);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--r) var(--r) 0;
}

/* Таблица (.wp-block-table или сырая .prz-table-wrap > table) — overflow на мобиле */
.prz-article__content .wp-block-table,
.prz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--space-6); }
.prz-article__content table,
.prz-table-wrap table {
  width: 100%; min-width: 480px; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  font-size: var(--fs-sm);
}
.prz-article__content th,
.prz-table-wrap th {
  background: var(--bg-2); color: var(--text); text-align: left;
  font-weight: 700; padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--border);
}
.prz-article__content td,
.prz-table-wrap td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-2); }
.prz-article__content tbody tr:nth-child(even),
.prz-table-wrap tbody tr:nth-child(even) { background: var(--bg); }

/* FAQ — нативный <details>/<summary> (.wp-block-details переживает wpautop) */
.prz-article__content .wp-block-details,
.prz-faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: var(--space-3);
  background: var(--white);
}
.prz-article__content .wp-block-details > summary,
.prz-faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  min-height: 44px;
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.prz-article__content .wp-block-details > summary::-webkit-details-marker { display: none; }
.prz-article__content .wp-block-details[open] > summary,
.prz-faq__item[open] .prz-faq__q { border-bottom: 1px solid var(--border-2); }
.prz-article__content .wp-block-details > summary::after,
.prz-faq__q::after { content: "+"; font-size: 1.4em; color: var(--orange-ink); flex: none; }
.prz-article__content .wp-block-details[open] > summary::after,
.prz-faq__item[open] .prz-faq__q::after { content: "\2212"; } /* minus */
.prz-faq__a { padding: var(--space-4) var(--space-5); color: var(--text-2); line-height: var(--lh-prose); }
/* FAQ-ответ в нативном <details> (wp-block-details) — паддинг, иначе текст вплотную к границам */
.prz-article__content .wp-block-details > :not(summary) {
  margin: 0; padding: var(--space-4) var(--space-5);
  color: var(--text-2); line-height: var(--lh-prose);
}
/* CTA-кнопка в теле статьи (wp-block-button) — GeneratePress красил серым → наш оранжевый */
.prz-article__content .wp-block-button__link,
.prz-article__content .wp-element-button {
  background: var(--orange-h); color: var(--white); border-color: transparent;
}
.prz-article__content .wp-block-button__link:hover,
.prz-article__content .wp-element-button:hover { background: var(--orange-ink); color: var(--white); }
/* «Ещё по теме» — отбивка сверху */
.prz-related { border-top: 1px solid var(--border); }

.prz-faq { margin-block: var(--space-8); }
.prz-faq__title { font-size: var(--fs-h2); margin-bottom: var(--space-5); }

/* Inline CTA (внутри тела) */
.prz-inline-cta {
  background: var(--navy);
  color: var(--text-on-dark);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  margin-block: var(--space-8);
  text-align: center;
}
.prz-inline-cta h3 { color: var(--text-on-dark); }
.prz-inline-cta p { color: var(--text-on-dark-2); margin-bottom: var(--space-5); }

/* Источники */
.prz-sources {
  margin-top: var(--space-10);
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}
.prz-sources__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.prz-sources ol { padding-left: var(--space-6); font-size: var(--fs-sm); color: var(--text-2); }
.prz-sources li { margin-bottom: var(--space-2); }

/* Блок автора */
.prz-author {
  display: flex; gap: var(--space-5); align-items: flex-start;
  margin-top: var(--space-10);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.prz-author__avatar {
  width: 64px; height: 64px; flex: none;
  border-radius: var(--r-full);
  background: var(--bg-2);
  object-fit: cover;
}
.prz-author__name { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-h4); }
.prz-author__role { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.prz-author__bio { font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 480px) { .prz-author { flex-direction: column; } }

/* Aside (sticky на десктопе) */
.prz-aside { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
@media (min-width: 1024px) { .prz-aside { position: sticky; top: 78px; } }
.prz-aside__card {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.prz-aside__card--cta { background: var(--navy); color: var(--text-on-dark); }
.prz-aside__card--cta h3, .prz-aside__card--cta p { color: var(--text-on-dark); }
.prz-aside__card--cta p { color: var(--text-on-dark-2); }
.prz-toc__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.prz-toc ol { padding-left: var(--space-5); font-size: var(--fs-sm); }
.prz-toc li { margin-bottom: var(--space-2); }
.prz-deadline {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--red-bg); color: var(--red);
  border-radius: var(--r); padding: var(--space-4); font-weight: 700; font-size: var(--fs-sm);
}

/* Карточки инструментов в сайдбаре статьи (Ф4b) — компактные строки внутри
   .prz-tool-card. Переиспользуют токены, иконка в orange-bg как .prz-rubric__icon. */
.prz-aside-tools { list-style: none; margin: 0; padding: 0; }
.prz-aside-tools li + li { margin-top: var(--space-2); }
.prz-aside-tool {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3);
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--white); color: var(--text); text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.prz-aside-tool:hover { border-color: var(--navy-3); background: var(--bg-2); text-decoration: none; }
.prz-aside-tool__icon {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: var(--orange-bg); color: var(--orange-ink);
}
.prz-aside-tool__icon svg { width: 20px; height: 20px; flex: none; }
.prz-aside-tool__label { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); color: var(--text); min-width: 0; }
.prz-aside-tool__arrow { margin-left: auto; flex: none; color: var(--orange-ink); font-weight: 700; }

/* =====================================================================
   CONTACT CAPTURE (главная) — единственная форма; honeypot скрыт
   ===================================================================== */
/* Фон-иллюстрация (фура + рамка АПВГК) + navy градиент-ширма поверх: текст слева
   читаем (.92 navy), иллюстрация раскрывается вправо (.2). var(--navy) — фолбэк. */
.prz-capture {
  background:
    linear-gradient(to right, rgba(12,27,46,.92) 0%, rgba(12,27,46,.6) 45%, rgba(12,27,46,.2) 100%),
    url(assets/img/capture-bg.webp) center bottom / cover no-repeat,
    var(--navy);
  color: var(--text-on-dark);
}
.prz-capture__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12);
  align-items: center; padding-block: var(--section-y);
}
@media (max-width: 767px) {
  .prz-capture__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Мобайл: текст стэком поверх картинки → вертикальная ширма плотнее сверху,
     иллюстрацию уводим в правый нижний угол (фура не лезет под текст). */
  .prz-capture {
    background:
      linear-gradient(to bottom, rgba(12,27,46,.95) 0%, rgba(12,27,46,.85) 55%, rgba(12,27,46,.65) 100%),
      url(assets/img/capture-bg.webp) right bottom / cover no-repeat,
      var(--navy);
  }
}
.prz-capture__perks { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.prz-capture__perks li { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--text-on-dark-2); }
.prz-capture__perks svg { width: 20px; height: 20px; color: var(--orange-on-navy); flex: none; }
.prz-capture__card {
  background: var(--white); color: var(--text);
  border-radius: var(--r-xl); padding: var(--space-6); box-shadow: var(--shadow-lg);
}

/* Поля формы — лейбл всегда видим (не placeholder-only), WCAG */
.prz-field { margin-bottom: var(--space-4); }
.prz-field label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.prz-field .prz-req { color: var(--red); }
.prz-input {
  width: 100%; min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--f-body); font-size: var(--fs-body); color: var(--text); background: var(--white);
}
.prz-input:focus { border-color: var(--orange-ink); }
.prz-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--space-5); }
.prz-consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
/* honeypot — визуально и для скринридера скрыт, но в DOM */
.prz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Contact Form 7 в карточке захвата: наши стили на разметку плагина --- */
.prz-capture__card .wpcf7 { margin: 0; }
.prz-capture__card .wpcf7 .wpcf7-spinner { margin-left: var(--space-3); }
/* wpautop плодит лишние <p>/<br> между полями → воздух. Схлопываем, отступы держим сами. */
.prz-capture__card .wpcf7 p { margin: 0; }
.prz-capture__card .wpcf7 br { display: none; }
.prz-capture__card .prz-field { margin-bottom: var(--space-4); }
.prz-capture__card .prz-consent { margin: var(--space-4) 0 var(--space-5); }
/* submit: GeneratePress input[type=submit] (0,1,1) перебивал .prz-btn--primary (0,1,0)
   → кнопка выходила серой. Поднимаем специфичность нашим оранжевым. */
input[type="submit"].prz-btn--primary,
.wpcf7-submit.prz-btn--primary {
  background: var(--orange-h); color: var(--white); border-color: transparent;
}
input[type="submit"].prz-btn--primary:hover,
.wpcf7-submit.prz-btn--primary:hover { background: var(--orange-ink); color: var(--white); }
/* согласие: чекбокс CF7 в одну строку с текстом, выровнен по верхней строке */
.prz-consent .wpcf7-list-item { margin: 0; }
.prz-consent label {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-sm); color: var(--text-2); margin: 0;
}
.prz-consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 1px; }
/* CF7-сообщения (ошибки/успех) в рамке карточки */
.prz-capture__card .wpcf7-response-output {
  margin: var(--space-4) 0 0; border-radius: var(--r-sm); font-size: var(--fs-sm);
}
/* «или» — разделитель между email-формой и TG-кнопкой */
.prz-capture__or {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0; color: var(--text-muted); font-size: var(--fs-sm);
}
.prz-capture__or::before, .prz-capture__or::after {
  content: ""; height: 1px; flex: 1; background: var(--border);
}

/* =====================================================================
   TRUST (главная — автор/источники) + page-hero рубрики
   ===================================================================== */
.prz-page-hero { background: var(--navy); color: var(--text-on-dark); }
.prz-page-hero__inner { padding-block: var(--space-10); }
.prz-page-hero__desc { color: var(--text-on-dark-2); max-width: 640px; margin-top: var(--space-3); line-height: var(--lh-prose); }

/* Контент служебных страниц (/legal, /about) — читаемая мера, проза .prz-article__content */
.prz-page__content { max-width: var(--measure-prose); }
.prz-page__content > *:first-child { margin-top: 0; }

/* =====================================================================
   FOOTER (navy)
   ===================================================================== */
/* Тонкая оранжевая отбивка — чтобы футер не сливался с навигационным/navy-блоком подписки над ним */
.prz-footer { background: var(--navy); color: var(--text-on-dark-2); border-top: 2px solid var(--orange); }
.prz-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-8);
  padding-block: var(--space-12);
}
@media (max-width: 767px) { .prz-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 420px) { .prz-footer__grid { grid-template-columns: 1fr; } }
.prz-footer__brand-name { font-family: var(--f-head); font-weight: 800; font-size: 1.25rem; color: var(--white); }
.prz-footer__about { font-size: var(--fs-sm); margin-top: var(--space-3); max-width: 320px; }
.prz-footer__col-title { font-size: var(--fs-sm); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.prz-footer__list { list-style: none; margin: 0; padding: 0; }
.prz-footer__list li { margin-bottom: var(--space-2); }
.prz-footer__list a { color: var(--text-on-dark-2); font-size: var(--fs-sm); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.prz-footer__list a:hover { color: var(--white); text-decoration: underline; }

/* =====================================================================
   ИНСТРУМЕНТЫ — общий фундамент (план Ф1)
   Переиспользуют Ф3 (карта) и Ф4 (сайдбар). Контракт классов и назначение —
   projects/peregruz/instrumenty/components.md. Только токены, без магии.
   ===================================================================== */

/* ── Tool-card: белая карточка-контейнер инструмента ────────────────
   (форма калькулятора, справочные блоки; Ф3 — контролы карты, Ф4 — карточки сайдбара) */
.prz-tool-card {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.prz-tool-card + .prz-tool-card { margin-top: var(--space-6); }
/* В сетке (.prz-grid) карточки — соседи в одном ряду: гасим stacking-маргин,
   иначе 2-я/3-я карточка съезжают вниз. (Маргин нужен только при вертикальном стеке.) */
.prz-grid .prz-tool-card + .prz-tool-card { margin-top: 0; }
.prz-tool-card__title { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
/* Промо-карточка инструмента на главной — колонка, кнопка прижата к низу (выравнивание ряда). */
.prz-tool-card--promo { display: flex; flex-direction: column; }
.prz-tool-card__icon {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: var(--orange-bg); color: var(--orange-ink);
  margin-bottom: var(--space-3);
}
.prz-tool-card__icon svg { width: 24px; height: 24px; }
.prz-tool-card--promo .prz-tool-card__sub { flex: 1 1 auto; margin-bottom: var(--space-5); }
.prz-tool-card__sub   { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-4); }
.prz-tool-card__note  { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-prose); margin: var(--space-4) 0 0; }
.prz-tool-card__foot  { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin: var(--space-3) 0 0; }
/* Магнит-карточка сайдбара (.prz-tool-card--magnet): мелкая ссылка-альтернатива
   «или на e-mail» под TG-кнопкой — лёгкий inline-стиль, якорь на #prz-subscribe. */
.prz-tool-card__or-email {
  display: block; text-align: center; margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline;
}
.prz-tool-card__or-email:hover { color: var(--orange-ink); }

/* ── Контролы формы (radio-сегмент, поле с единицей) ───────────────── */
fieldset.prz-field { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.prz-field__label { display: block; font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--space-2); padding: 0; }
.prz-field__hint  { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--space-3); }

/* Segmented control — выбор типа превышения (radiogroup, выбранный = navy) */
.prz-segment { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.prz-segment__opt { flex: 1 1 0; min-width: 150px; position: relative; margin: 0; }
.prz-segment__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.prz-segment__opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: var(--space-3) var(--space-4);
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--text-2); background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--r); cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.prz-segment__opt span:hover { border-color: var(--navy-3); }
.prz-segment__opt input:checked + span { background: var(--navy); color: var(--white); border-color: var(--navy); }
.prz-segment__opt input:focus-visible + span { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Поле ввода с единицей измерения (см / %) */
.prz-input-group { display: flex; align-items: stretch; }
.prz-input-group .prz-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.prz-input-group__unit {
  display: flex; align-items: center; padding: 0 var(--space-4);
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted);
  background: var(--bg-2); border: 1px solid var(--border); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Кнопка large + фикс GP-серого для <button>/.wp-element-button калькулятора
   (GeneratePress красит их серым → перебиваем оранжевым выше специфичностью,
   как уже сделано для .prz-capture/.prz-article__content выше) */
.prz-btn--lg { min-height: 52px; font-size: var(--fs-lead); padding: var(--space-4) var(--space-8); margin-top: var(--space-2); }
button.prz-btn--primary,
.wp-element-button.prz-btn--primary {
  background: var(--orange-h); color: var(--white); border-color: transparent;
}
button.prz-btn--primary:hover,
.wp-element-button.prz-btn--primary:hover { background: var(--orange-ink); color: var(--white); }

/* ── Layout калькулятора ────────────────────────────────────────────── */
.prz-calc__layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .prz-calc__layout { grid-template-columns: 1fr; gap: var(--space-6); } }
.prz-calc__disclaimer { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-prose); max-width: var(--measure-prose); margin: var(--space-8) 0 0; }

/* Справочная таблица штрафов */
.prz-fine-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prz-fine-table th { text-align: left; font-family: var(--f-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); }
.prz-fine-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-2); color: var(--text-2); vertical-align: top; }
.prz-fine-table tr:last-child td { border-bottom: 0; }
.prz-fine-table td:last-child { font-family: var(--f-head); font-weight: 700; color: var(--text); white-space: nowrap; }
.prz-fine-table td span { display: inline-block; margin-left: var(--space-1); font-size: var(--fs-cap); font-weight: 700; color: var(--orange-ink); }

/* ── Result-card: «момент шока» (тёмный navy-блок, скрыт до расчёта) ── */
.prz-result-card {
  margin-top: var(--space-6);
  background: var(--navy); color: var(--text-on-dark);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  --focus-ring: 2px solid var(--orange-on-navy);
}
.prz-result-card[hidden] { display: none; }
.prz-result-card [hidden] { display: none; }
.prz-result-card__eyebrow { display: block; font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange-on-navy); margin-bottom: var(--space-3); }
.prz-result-card__amount { font-family: var(--f-head); font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); line-height: 1.05; color: var(--white); }
.prz-result-card__discount { font-size: var(--fs-lead); color: var(--text-on-dark); margin: var(--space-4) 0 0; }
.prz-result-card__discount strong { color: var(--orange-on-navy); }
.prz-result-card__msg { font-size: var(--fs-lead); line-height: var(--lh-prose); color: var(--text-on-dark); margin: var(--space-2) 0 0; }
.prz-result-card__meta { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--navy-3); }
.prz-result-card__meta li { font-size: var(--fs-sm); color: var(--text-on-dark-2); margin-bottom: var(--space-2); }
.prz-result-card__grounds { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--navy-3); }
.prz-result-card__h3 { color: var(--text-on-dark); font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.prz-result-card__grounds-list { margin: 0 0 var(--space-6); padding-left: var(--space-5); }
.prz-result-card__grounds-list li { font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--text-on-dark-2); margin-bottom: var(--space-3); }
.prz-result-card__grounds-list strong { color: var(--text-on-dark); }
.prz-footer__bottom {
  border-top: 1px solid var(--navy-3);
  padding-block: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-on-dark-2);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}

/* ── Ф2: CF7 lead-магнит шаблона жалобы в белой tool-card (сайдбар) ──────
   Тот же приём, что .prz-capture__card .wpcf7 (главная): схлопываем лишние
   <p>/<br> от wpautop, держим отступы сами; submit/consent уже покрыты
   глобальными селекторами выше. Только токены. */
.prz-zh-capture .wpcf7 { margin: 0; }
.prz-zh-capture .wpcf7 p { margin: 0; }
.prz-zh-capture .wpcf7 br { display: none; }
.prz-zh-capture .prz-field { margin-bottom: var(--space-4); }
.prz-zh-capture .prz-consent { margin: var(--space-4) 0 var(--space-5); }
.prz-zh-capture .wpcf7-spinner { margin-left: var(--space-3); }
.prz-zh-capture .wpcf7-response-output {
  margin: var(--space-4) 0 0; border-radius: var(--r-sm); font-size: var(--fs-sm);
}
/* honeypot CF7 Apps — поле визуально/для скринридера скрыто, но в DOM */
.prz-zh-capture .prz-website,
.prz-zh-capture input[name="prz-website"] {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* =====================================================================
   Ф3: КАРТА АПВГК — панель управления + холст Яндекс.Карты (prz-map*)
   Переиспользует .prz-tool-card / .prz-field (components.md). Только токены.
   ===================================================================== */
.prz-map__layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) { .prz-map__layout { grid-template-columns: 1fr; } }

/* Панель — sticky рядом с картой на десктопе */
@media (min-width: 901px) { .prz-map__panel { position: sticky; top: 78px; } }

/* Холст карты — ОБЯЗАТЕЛЬНАЯ высота, иначе Яндекс ничего не отрисует */
.prz-map__canvas-wrap {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-2); box-shadow: var(--shadow-sm);
}
.prz-map__canvas { width: 100%; height: 620px; background: var(--bg-2); }
@media (max-width: 900px) { .prz-map__canvas { height: 70vh; min-height: 420px; } }
/* Нейтрализуем глобальный img{max-width:100%} внутри карты — иначе спрайты
   контролов/логотипа Яндекса могут сжаться. */
.prz-map__canvas img { max-width: none; }

/* Счётчик показанных точек */
.prz-map__count {
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--text-2); margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-3) var(--space-4); background: var(--bg-2); border-radius: var(--r-sm);
}

/* Notice при недоступности карты (нет ключа / fetch упал) — не пустой холст */
.prz-map__notice {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 240px; padding: var(--space-8);
  text-align: center; color: var(--text-muted); font-size: var(--fs-sm);
}

/* Баллон точки (контент рендерит map.js) */
.prz-map__balloon-region { font-weight: 700; color: var(--text); margin: 0 0 var(--space-2); }
.prz-map__balloon-approx { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
.prz-map__balloon-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; line-height: 1.4; }

/* Дисклеймер актуальности (YMYL/честность) — обязателен.
   Ф4c: на мобайле (≤900px, 1 колонка) — на всю ширину; на десктопе — выровнен
   под картой и растянут на её ширину (отступ слева = ширина панели 340px + gap,
   зеркалит .prz-map__layout). Без max-width-сжатия, иначе блок узкий и смещён. */
.prz-map__disclaimer {
  margin-top: var(--space-6);
  background: var(--orange-bg); border-left: 4px solid var(--orange);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--space-5) var(--space-6); max-width: none;
}
@media (min-width: 901px) {
  .prz-map__disclaimer { margin-left: calc(340px + var(--space-6)); }
}
.prz-map__disclaimer p { font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--text-2); margin: 0; }
.prz-map__disclaimer .prz-map__disclaimer-tech { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); }

/* Сворачиваемый фильтр на мобайле — CSS-only (как бургер: checkbox-toggle) */
.prz-map__toggle { display: none; }
@media (max-width: 900px) {
  .prz-map__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    cursor: pointer; min-height: 48px; font-family: var(--f-head); font-weight: 700;
    color: var(--text); user-select: none;
  }
  .prz-map__toggle svg { transition: transform 150ms ease; flex: none; }
  .prz-map__panel-body { display: none; padding-top: var(--space-4); }
  .prz-map__toggle-cb:checked ~ .prz-map__toggle svg { transform: rotate(180deg); }
  .prz-map__toggle-cb:checked ~ .prz-map__panel-body { display: block; }
}

/* =====================================================================
   ACCESSIBILITY helpers
   ===================================================================== */
.prz-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   COOKIE-УВЕДОМЛЕНИЕ (Ф5, 152-ФЗ) — компактная плашка в нижнем углу.
   По умолчанию СКРЫТА (visibility:hidden) — кэш-безопасно: JS раскрывает
   только при отсутствии согласия в localStorage (.is-visible). Тёмная
   поверхность → светлый focus-ring (паттерн prz-поверхностей, в style.css,
   tokens.css не диверджим).
   ===================================================================== */
.prz-cookie {
  --focus-ring: 2px solid var(--orange-on-navy);
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--navy);
  color: var(--text-on-dark);
  border: 1px solid var(--navy-3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.prz-cookie.is-visible { visibility: visible; opacity: 1; transform: none; }
.prz-cookie__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--text-on-dark-2);
}
.prz-cookie__more { color: var(--orange-on-navy); text-decoration: underline; white-space: nowrap; }
.prz-cookie__more:hover { color: var(--white); }
.prz-cookie__accept { min-height: 44px; }

@media (max-width: 560px) {
  .prz-cookie {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    padding: var(--space-4);
  }
  .prz-cookie__accept { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .prz-cookie { transition: none; transform: none; }
}

/* =====================================================================
   ЛИД-МАГНИТ ПОПАП (статьи) — .prz-modal* (template-parts/modal-magnet.php)
   Два столбца: ЛЕВО — иллюстрация (object-fit:cover), ПРАВО — заголовок+CF7.
   Оверлей выше шапки (--z-modal). Мобайл: стек, картинка верхним баннером.
   ===================================================================== */
.prz-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; transition: opacity .25s ease;
}
.prz-modal[hidden] { display: none; }
.prz-modal.is-open { opacity: 1; }
.prz-modal__overlay { position: absolute; inset: 0; background: rgba(12,27,46,.72); }
.prz-modal__dialog {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 320px 1fr;
  width: 100%; max-width: 880px; max-height: calc(100vh - var(--space-8));
  background: var(--white); color: var(--text);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(14px); transition: transform .25s ease;
}
.prz-modal.is-open .prz-modal__dialog { transform: none; }
.prz-modal__media { position: relative; background: var(--navy); min-height: 100%; }
.prz-modal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.prz-modal__close {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-full);
  background: rgba(255,255,255,.92); color: var(--navy); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.prz-modal__close svg { width: 20px; height: 20px; flex: none; }
.prz-modal__close:hover { background: var(--white); }
.prz-modal__body { padding: var(--space-8); overflow-y: auto; }
.prz-modal__body .prz-eyebrow { color: var(--orange-ink); } /* --orange-on-navy нечитаем на белом */
.prz-modal__title { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-h2); line-height: var(--lh-tight); }
.prz-modal__sub { margin: 0 0 var(--space-5); color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-ui); }
/* CF7 в модалке — схлопнуть wpautop-воздух (как .prz-capture__card / .prz-zh-capture) */
.prz-modal__body .wpcf7 { margin: 0; }
.prz-modal__body .wpcf7 p { margin: 0; }
.prz-modal__body .wpcf7 br { display: none; }
.prz-modal__body .prz-field { margin-bottom: var(--space-4); }
.prz-modal__body .prz-consent { margin: var(--space-4) 0 var(--space-5); }
.prz-modal__body .wpcf7-spinner { margin-left: var(--space-3); }
.prz-modal__body .wpcf7-response-output { margin: var(--space-4) 0 0; border-radius: var(--r-sm); font-size: var(--fs-sm); }

/* Блокировка скролла фона, пока модалка открыта */
.prz-modal-lock { overflow: hidden; }

@media (max-width: 639px) {
  .prz-modal__dialog {
    grid-template-columns: 1fr;
    max-height: calc(100vh - var(--space-6));
  }
  .prz-modal__media { min-height: 0; height: 132px; }
  .prz-modal__media img { position: static; }
  .prz-modal__body { padding: var(--space-6); }
}
/* Низкие узкие экраны — баннер убираем, чтобы форма целиком влезла */
@media (max-height: 600px) and (max-width: 639px) {
  .prz-modal__media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prz-modal, .prz-modal__dialog { transition: none; }
  .prz-modal__dialog { transform: none; }
}

/* =====================================================================
   СПРИНТ-1 (2026-06-29) — доработки конверсии/доверия
   ===================================================================== */

/* «Что внутри» в попапе лид-магнита (доказываем ценность шаблона) */
.prz-modal__bullets { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.prz-modal__bullets li {
  position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-ui);
}
.prz-modal__bullets li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: var(--r-full); background: var(--orange);
}

/* Попап: e-mail — вторичная раскрываемая ветка (один primary = TG) */
.prz-magnet__email-toggle {
  display: block; width: 100%; min-height: 44px; margin-top: var(--space-3);
  background: transparent; border: 0; cursor: pointer; text-align: center;
  font-family: var(--f-body); font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline;
}
.prz-magnet__email-toggle:hover { color: var(--orange-ink); }
.prz-magnet__email { margin-top: var(--space-3); }
.prz-magnet__email[hidden] { display: none; }

/* Калькулятор: контекстный захват под результатом (на navy result-card) */
.prz-result-card__capture { margin-top: var(--space-2); }
.prz-result-card__capture-text { font-size: var(--fs-lead); color: var(--text-on-dark); margin: 0 0 var(--space-4); line-height: var(--lh-ui); }
.prz-result-card__capture-text [data-capture-sum] { font-family: var(--f-head); font-weight: 800; color: var(--orange-on-navy); white-space: nowrap; }
.prz-result-card__capture-link { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-on-dark-2); text-decoration: underline; }
.prz-result-card__capture-link:hover { color: var(--white); }

/* Превью 1-й страницы шаблона жалобы (доказательство ценности) */
.prz-zh-preview {
  margin: var(--space-6) 0; border: 1px solid var(--border-2); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-2);
}
.prz-zh-preview img { display: block; width: 100%; height: auto; }
.prz-zh-preview figcaption { font-size: var(--fs-xs); color: var(--text-muted); padding: var(--space-3) var(--space-4); }

/* Карта: тач-таргет кнопки поиска (лупа) Яндекса ≥44px (WCAG 2.5.5).
   Классы Яндекса версионируются → таргетим по вхождению подстроки + !important
   (контролы Яндекса несут инлайн-размеры). */
.prz-map__canvas [class*="searchbox-button"],
.prz-map__canvas [class*="searchbox__button"],
.prz-map__canvas [class*="searchbox-button-text"],
.prz-map__canvas [class*="search__button"] {
  min-width: 44px !important;
  min-height: 44px !important;
}