/* ════════════════════════════════════════════════════
   ВНУТРЕННИЕ СТРАНИЦЫ — терминальный визуальный язык
   (статьи, хабы, гайды, FAQ-item, профиль компании,
   case study, About). Использует токены из styles.css.
════════════════════════════════════════════════════ */

/* ── Хлебные крошки — стиль командной строки ── */
.crumbs {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .04em; padding: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 0; align-items: center;
}
.crumbs::before { content: '~'; color: var(--accent); margin-right: 0; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs .crumbs-sep { color: var(--ink-4); margin: 0 6px; }
.crumbs .crumbs-sep, .crumbs > span:last-child { color: var(--ink); }

/* ── Header страницы (H1 + meta) ── */
.page-head {
  padding: 18px 0 22px; border-bottom: 1px solid var(--ink);
  margin-bottom: 24px; position: relative;
}
.page-head .ph-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.page-head h1 {
  font-family: var(--serif); font-size: 38px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.1;
  margin-bottom: 14px;
}
.page-head .ph-lead {
  font-size: 16px; color: var(--ink-2); line-height: 1.55;
  margin-bottom: 14px; max-width: 760px; font-family: var(--serif); font-weight: 400;
}
.page-head .ph-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.page-head .ph-meta a { color: var(--accent); }
.page-head .ph-meta .dot { color: var(--ink-4); }

/* ID-метка в правом верхнем углу */
.page-head::after {
  content: 'ID: ' attr(data-id);
  position: absolute; top: 0; right: 0;
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  letter-spacing: .04em;
  display: none;
}
.page-head[data-id]::after { display: block; }

/* ── Layout статьи ── */
.article-layout {
  display: grid; grid-template-columns: 1fr 280px; gap: 32px;
  align-items: start; padding: 0 0 40px;
}
.article-body { max-width: 760px; }
.article-body h2 {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--ink); margin: 32px 0 14px;
  letter-spacing: 0; line-height: 1.25;
  border-top: 1px solid var(--ink); padding-top: 18px;
}
.article-body h2:first-child { border-top: none; padding-top: 0; margin-top: 16px; }
/* ДВОЙНАЯ ЧЕРТА. У .page-head есть border-bottom, у каждого h2 — border-top.
   Когда текст страницы начинается сразу с заголовка (без вводного абзаца),
   обе линии встают рядом с зазором в 24px — выглядит как ошибка вёрстки.
   Правило :first-child здесь НЕ спасает: первый ребёнок .article-body —
   сама шапка, а h2 идёт вторым. Найдено на /about/, /law-fire-safety/,
   /region-altai/ — то есть повторяется само, стоит редактору убрать лид.
   Лечим структурно, а не правкой текста этих трёх страниц. */
.page-head + h2,
.dds-page-head + h2 { border-top: none; padding-top: 0; margin-top: 6px; }
.article-body h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); margin: 22px 0 10px; line-height: 1.3;
}
.article-body p {
  font-family: var(--serif); font-size: 16px; line-height: 1.7;
  color: var(--ink); margin-bottom: 14px; font-weight: 400;
}
.article-body a {
  color: var(--accent); border-bottom: 1px solid var(--accent-bg);
}
.article-body a:hover { color: var(--accent-deep); border-color: var(--accent); }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 16px; }
.article-body li {
  font-family: var(--serif); font-size: 16px; line-height: 1.7;
  color: var(--ink); margin-bottom: 6px;
}
.article-body blockquote {
  border-left: 3px solid var(--accent); padding: 6px 0 6px 18px;
  margin: 22px 0; font-family: var(--serif); font-size: 17px;
  color: var(--ink-2); font-style: italic;
}
.article-body figure { margin: 22px 0; }
.article-body figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  padding-top: 6px; letter-spacing: .04em;
}

/* ── Callout боксы ── */
.callout {
  background: var(--card); border-left: 3px solid var(--accent);
  border-radius: 0; padding: 16px 20px; margin: 22px 0;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.callout .callout-title {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 10px;
}
.callout .callout-title::before { content: ':: '; }
.callout ul, .callout p { margin: 0 0 8px; }
.callout ul { padding-left: 18px; }
.callout li:last-child, .callout p:last-child { margin-bottom: 0; }
.callout li { font-size: 14px; font-family: var(--sans); }
.callout p { font-size: 14px; font-family: var(--sans); line-height: 1.6; }
.callout.warn { border-left-color: var(--rust); }
.callout.warn .callout-title { color: var(--rust); }
.callout.law { border-left-color: #6e3b1c; }
.callout.law .callout-title { color: #6e3b1c; }
.callout.info { border-left-color: #4f3b6e; }
.callout.info .callout-title { color: #4f3b6e; }

/* Ссылки внутри callout — заметно «активные», как кнопки */
.callout li a,
.callout p a {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(194, 65, 12, .35);
  padding: 1px 3px 2px;
  margin: 0 -3px;
  border-radius: 2px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.callout li a:hover,
.callout p a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(194, 65, 12, .08);
}
.callout li a:focus-visible,
.callout p a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Стрелка-индикатор для ссылок в списках «Полезное рядом» и подобных */
.callout li > a:only-child::after,
.callout li > a:first-child:last-of-type::after {
  content: ' →';
  color: var(--accent);
  opacity: .6;
  font-weight: 600;
  transition: opacity .14s ease, transform .14s ease;
  display: inline-block;
}
.callout li > a:only-child:hover::after,
.callout li > a:first-child:last-of-type:hover::after {
  opacity: 1;
  transform: translateX(2px);
}
/* Стилизация маркеров списка — мелче, бледнее, чтобы ссылка была главной */
.callout li {
  margin: 5px 0;
  line-height: 1.55;
}
.callout li::marker { color: var(--ink-5); }

/* ── Таблица данных ── */
.data-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 13px;
  margin: 22px 0; background: var(--card);
  border: 1px solid var(--line);
  display: block; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table > thead, .data-table > tbody {
  /* Гарантируем, что внутри display:block наша таблица всё ещё выкладывается как таблица */
  min-width: 100%;
  display: table; width: 100%;
}
.data-table th, .data-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.data-table th {
  background: var(--card-2);
  font-family: var(--mono); font-weight: 500;
  color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--card-2); }
.data-table td.num {
  font-family: var(--mono); color: var(--ink);
  font-weight: 500; text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table th.num { text-align: right; }

/* ── Таблицы из редактора (блок «Таблица») ──────────────────────────────
   В теме их не было ВООБЩЕ: единственное правило для таблиц — .data-table
   выше, а блочные таблицы Гутенберга не оформлялись ничем. Выглядели они
   соответственно: нулевые поля, никаких границ, число прижато к тексту
   вплотную («Публикаций с компанией44»). И это на всех страницах сразу —
   технологии, гайды, аналитика, методология рейтинга: генераторы контента
   вставляют именно блочные таблицы.

   Оформляем в том же ключе, что и .data-table, чтобы таблицы на портале
   выглядели одинаково независимо от того, кто их поставил — редактор
   руками или шорткод.

   Горизонтальная прокрутка нужна для телефона: на 390px широкая таблица
   иначе распирает страницу, и по правилу проекта «таблицы не скроллим
   вбок» мы схлопываем колонки там, где это возможно, — но у произвольной
   таблицы из редактора колонок может быть сколько угодно, схлопывать
   вслепую нельзя. Прокрутка честнее обрезки. */
/* ВАЖНО: правила ловят и `.wp-block-table` (таблица-блок из редактора),
   и ГОЛУЮ <table> в тексте материала.

   Инцидент 31.08.2026, две итерации подряд. Сначала статью вставили одним
   блоком «Произвольный HTML» — таблицы приехали без класса wp-block-table
   и остались вовсе без вёрстки, потому что всё висело на этом классе.
   Затем я дописал правила только для `.article-body` — и промахнулся:
   этот класс живёт в page.php (страницы law-*/faq-*/технологии), а синглы
   и гайды используют `.dds-content` из style.css. Селектор не попал ни во
   что, CSS при этом обновился, и выглядело как «правка не сработала».

   УРОК: контейнер брать из ЖИВОЙ разметки, а не из того, что нашлось
   в CSS. Класс может быть объявлен и не использоваться на нужном шаблоне.

   Вставка готовой разметки — штатный способ работы с длинными
   материалами, поэтому стилизуем сам тег, а не обёртку блока. */
.wp-block-table { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Голой таблице прокрутку НЕ вешаем: для неё нет обёртки, а `display:block`
   на самом теге снял бы табличную раскладку и колонки поехали бы по
   содержимому. Наши вставляемые таблицы — три колонки, на 390px они
   помещаются, и это ровно то, чего требует правило проекта:
   схлопывать, а не скроллить вбок. */
.wp-block-table table,
.article-body table,
.dds-content table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 14px;
  background: var(--card); border: 1px solid var(--line);
  margin: 22px 0;
}
.wp-block-table th, .wp-block-table td,
.article-body th,   .article-body td,
.dds-content th,    .dds-content td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.wp-block-table th,
.article-body th,
.dds-content th {
  background: var(--card-2);
  font-family: var(--mono); font-weight: 500;
  color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap;
}
.wp-block-table tr:last-child td,
.article-body tr:last-child td,
.dds-content tr:last-child td { border-bottom: none; }
.wp-block-table tbody tr:hover td,
.article-body tbody tr:hover td,
.dds-content tbody tr:hover td { background: var(--card-2); }
/* Второй столбец у наших таблиц почти всегда число (баллы, цена, срок):
   моноширинный с табличными цифрами выравнивает разряды в колонку. */
.wp-block-table td:not(:first-child),
.article-body td:not(:first-child),
.dds-content td:not(:first-child) {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.wp-block-table figcaption {
  font-size: 12px; color: var(--ink-4); margin-top: 6px;
}
@media (max-width: 600px) {
  .wp-block-table table, .article-body table, .dds-content table { font-size: 13px; }
  .wp-block-table th, .wp-block-table td,
  .article-body th,   .article-body td,
  .dds-content th,    .dds-content td { padding: 8px 10px; }
  /* На телефоне заголовкам РАЗРЕШАЕМ перенос. С nowrap три колонки вроде
     «Город · Холодная пятидневка · Отопительный период» в 390px не влезают
     и распирают страницу — а по правилу проекта таблицы схлопываются,
     а не скроллятся вбок. Перенос в две строки короче любой прокрутки. */
  .wp-block-table th, .article-body th, .dds-content th { white-space: normal; }
}

/* ── Pros/cons ── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.pc-block { padding: 16px 18px; border-radius: 0; border: 1px solid; background: var(--card); }
.pc-pros { border-color: var(--good); border-left-width: 3px; }
.pc-cons { border-color: var(--bad);  border-left-width: 3px; }
.pc-block h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px;
}
.pc-pros h4 { color: var(--good); }
.pc-cons h4 { color: var(--bad); }
.pc-block h4::before { content: ':: '; }
.pc-block ul { padding-left: 18px; margin: 0; }
.pc-block li { font-family: var(--sans); font-size: 13px; line-height: 1.6; margin-bottom: 5px; }

/* ── Шаги (guides) ── */
.steps-list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; counter-reset: step; }
.step-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0; padding: 16px 20px 16px 64px; position: relative;
  counter-increment: step; transition: border-color .15s;
}
.step-item:hover { border-color: var(--ink-3); }
.step-item::before {
  content: 'STEP ' counter(step);
  position: absolute; left: 14px; top: 18px;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--accent); letter-spacing: .14em; text-transform: uppercase;
}
.step-item::after {
  content: counter(step);
  position: absolute; left: 14px; top: 32px;
  font-family: var(--serif); font-size: 28px; font-weight: 500;
  color: var(--ink); line-height: 1; letter-spacing: -.02em;
}
.step-item h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  color: var(--ink); margin-bottom: 6px;
}
.step-item p { font-family: var(--sans); font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 8px; }
.step-item .step-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.step-item .step-links a {
  font-family: var(--mono); font-size: 10px; padding: 3px 9px;
  border-radius: 2px; background: var(--card-2);
  border: 1px solid var(--line); color: var(--ink-2);
  letter-spacing: .04em;
}
.step-item .step-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Aside ── */
.aside-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; }
.aside-w {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.aside-w .aw-head {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); background: var(--card-2);
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
.aside-w .aw-head::before { content: ':: '; color: var(--accent); }
.aside-w .aw-body { padding: 12px 14px; }
.aside-w .aw-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.aside-w .aw-body ul a { font-size: 12.5px; color: var(--ink-2); display: block; padding: 3px 0; }
.aside-w .aw-body ul a:hover { color: var(--accent); }
.aside-w.toc .aw-body ul a {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.aside-w.toc .aw-body ul a.active { color: var(--accent); font-weight: 500; }
.aside-w.toc .aw-body ul a::before { content: '·  '; color: var(--ink-4); }

/* ── Related ── */
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0 8px; }
/* Сетка под 4 карточки: 4-в-ряд на широком, 2×2 на узком, стек на телефоне */
.related-grid--4col { grid-template-columns: repeat(4,1fr); }
.related-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s;
  /* Когда .related-card используется как <a> (кликабельная карточка-категория) */
  text-decoration: none; color: inherit;
}
.related-card:hover { border-color: var(--accent); }
a.related-card:hover h4 { color: var(--accent); }
.related-card .badge { align-self: flex-start; }
.related-card h4 {
  font-family: var(--serif); font-size: 14px; line-height: 1.4;
  font-weight: 500; color: var(--ink);
}
.related-card h4 a:hover { color: var(--accent); }
.related-card .meta {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-2);
}

/* ── CTA after article ── */
.article-cta {
  background: var(--dk-bg); color: var(--card);
  border-radius: var(--r-md); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin: 26px 0; flex-wrap: wrap;
  border: 1px solid var(--dk-line);
}
.article-cta .ac-text h3 { font-family: var(--serif); font-size: 17px; color: var(--card); font-weight: 500; margin-bottom: 4px; }
.article-cta .ac-text p  { font-family: var(--mono); font-size: 12px; color: var(--dk-text-dim); }

/* ── Hub stats ── */
.hub-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  margin: 16px 0 22px; border: 1px solid var(--line);
  background: var(--card);
}
.hub-stat {
  padding: 14px 16px; border-right: 1px solid var(--line-2);
}
.hub-stat:last-child { border-right: none; }
.hub-stat .hs-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4);
  margin-bottom: 6px;
}
.hub-stat .hs-value {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--ink); line-height: 1.05; letter-spacing: -.02em;
}
.hub-stat .hs-sub {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px;
}

/* ── FAQ accordion ── */
.faq-acc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin: 14px 0;
}
.faq-acc .fa-item { border-bottom: 1px solid var(--line-2); }
.faq-acc .fa-item:last-child { border-bottom: none; }
.faq-acc .fa-q {
  width: 100%; text-align: left; padding: 14px 18px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); background: transparent;
  display: flex; justify-content: space-between; gap: 12px; cursor: pointer;
}
.faq-acc .fa-q::after {
  content: '+'; font-family: var(--mono); font-size: 18px;
  color: var(--accent); flex-shrink: 0; transition: transform .2s;
}
.faq-acc .fa-item.open .fa-q::after { transform: rotate(45deg); }
.faq-acc .fa-a {
  display: none; padding: 0 18px 16px;
  font-family: var(--serif); font-size: 14px; color: var(--ink-2); line-height: 1.65;
}
.faq-acc .fa-item.open .fa-a { display: block; }
.faq-acc .fa-a a { color: var(--accent); border-bottom: 1px solid var(--accent-bg); }

/* ── FAQ search ── */
.faq-search { display: flex; gap: 8px; margin-bottom: 18px; }
.faq-search input {
  flex: 1; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 14px; outline: none;
  background: var(--card);
}
.faq-search input:focus { border-color: var(--accent); }
.faq-search button {
  background: var(--accent); color: #fff; padding: 0 18px;
  border-radius: var(--r-sm); font-weight: 500; font-size: 13px;
  font-family: var(--sans); border: none; cursor: pointer;
}

.faq-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.faq-cats a {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 6px 12px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2);
  letter-spacing: .04em;
}
.faq-cats a:hover, .faq-cats a.active {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent);
}

/* ── Company head ── */
.company-head {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 20px;
  align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 26px; margin-bottom: 20px;
}
.company-logo {
  width: 96px; height: 96px; border-radius: var(--r-md);
  background: var(--card-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.company-logo svg { width: 44px; height: 44px; color: var(--accent); }
.company-info h1 { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.company-info .ci-meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.company-info .ci-meta a { color: var(--accent); }
.company-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.company-tags .co-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-bg); padding: 3px 9px; border-radius: 2px;
  border: none;
}
.company-verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 2px;
  background: var(--accent); border: 1px solid var(--accent);
  color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.company-verified svg { width: 13px; height: 13px; }

/* ── Contact card ── */
.contact-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
}
.contact-card .cc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13px;
  border-bottom: 1px solid var(--line-2);
}
.contact-card .cc-row:last-child { border-bottom: none; }
.contact-card .cc-label {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: .12em; min-width: 80px;
}
.contact-card .cc-val { color: var(--ink); font-family: var(--mono); font-size: 12px; }

/* ── Case study ── */
.case-fact-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  margin: 16px 0 22px; border: 1px solid var(--line);
  background: var(--card);
}
.case-fact { padding: 14px 16px; border-right: 1px solid var(--line-2); }
.case-fact:last-child { border-right: none; }
.case-fact .cf-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4);
  margin-bottom: 6px;
}
.case-fact .cf-value {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.2; letter-spacing: -.02em;
}

/* ── Hero для статей ── */
.article-hero {
  width: 100%; height: 320px; border-radius: var(--r-md);
  margin-bottom: 22px; overflow: hidden;
  border: 1px solid var(--line);
}
.article-hero .ah-fill {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ── Inline tags ── */
.inline-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.inline-tags a {
  font-family: var(--mono); font-size: 10px; padding: 4px 10px;
  border-radius: 2px; background: var(--card-2);
  border: 1px solid var(--line); color: var(--ink-2);
  letter-spacing: .04em;
}
.inline-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sources ── */
.sources-list {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  margin-top: 28px; padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.sources-list h4 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.sources-list h4::before { content: ':: '; color: var(--accent); }
.sources-list ol { padding-left: 20px; margin: 0; }
.sources-list li { margin-bottom: 5px; }
.sources-list a { color: var(--accent); border-bottom: 1px solid var(--accent-bg); }

/* ── Hub articles list ── */
/* Фильтр кейсов на projects/index.html (?region=… / ?segment=…) */
.case-filter-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 16px;
  background: var(--accent-bg, rgba(194,65,12,.08));
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12px; color: var(--ink);
}
.case-filter-badge[hidden] { display: none; }
.case-filter-badge .cfb-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); font-weight: 500;
}
.case-filter-badge .cfb-name { color: var(--ink); font-weight: 500; }
.case-filter-badge .cfb-reset {
  margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--accent);
  color: var(--accent); text-decoration: none;
}
.case-filter-badge .cfb-reset:hover { color: var(--ink); }

.case-empty {
  padding: 28px 24px; text-align: center;
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--r-md);
}
.case-empty a { color: var(--accent); }

/* ── Пункты списка с всплывающей справкой на ховер ──
   Позиция подсказки рассчитывается JS (см. инициализацию на странице):
   подсказка фиксированно прикреплена к viewport, не уходит за экран и
   автоматически переключается «вверх ↔ вниз» от элемента. ── */
.hover-tip {
  position: relative;
  cursor: help;
  outline: none;
  transition: color .12s;
}
.hover-tip:hover,
.hover-tip:focus-visible { color: var(--accent); }
.hover-tip > .hover-tip-bubble {
  position: fixed;
  z-index: 100;
  /* Ширина адаптируется под контент: короткие — узкие, длинные — до 360 px */
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 11px 14px;
  /* Полупрозрачный фон + матовое стекло */
  background: rgba(28, 28, 28, .76);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  color: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.hover-tip > .hover-tip-bubble.is-visible {
  opacity: 1; transform: translateY(0);
}
/* Стрелочка-уголок. Горизонтальная позиция задаётся через --tip-arrow */
.hover-tip > .hover-tip-bubble::before {
  content: '';
  position: absolute;
  top: -5px; left: var(--tip-arrow, 22px);
  width: 10px; height: 10px;
  background: rgba(28, 28, 28, .76);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-left: 1px solid rgba(255, 255, 255, .08);
  transform: rotate(45deg);
}
.hover-tip > .hover-tip-bubble[data-arrow="bottom"]::before {
  top: auto; bottom: -5px;
  border-top: none; border-left: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.hover-tip-bubble strong {
  color: #fff; font-weight: 600;
}
.hover-tip-bubble p { margin: 0 0 6px; }
.hover-tip-bubble p:last-child { margin-bottom: 0; }
.hover-tip-bubble .tip-num {
  font-family: var(--mono); color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Лаконичное вводное предложение */
.hover-tip-bubble .tip-lede {
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hover-tip-bubble .tip-lede:last-child {
  border-bottom: none; padding-bottom: 0; margin-bottom: 0;
}

/* Двухколоночный «факт-лист»: метка слева, значение справа */
.hover-tip-bubble .tip-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 0;
}
.hover-tip-bubble .tip-rows dt {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  padding-top: 2px;
  white-space: nowrap;
}
.hover-tip-bubble .tip-rows dd {
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-size: 12.5px;
  line-height: 1.45;
}
.hover-tip-bubble .tip-rows dd strong { color: #fff; }

/* Заметка-сноска в самом низу */
.hover-tip-bubble .tip-foot {
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .7);
  font-style: italic;
}
.hover-tip-bubble .tip-foot strong { font-style: normal; }
/* Скроллбар внутри подсказки в тон */
.hover-tip-bubble::-webkit-scrollbar { width: 6px; }
.hover-tip-bubble::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: 3px;
}
.hover-tip-bubble::-webkit-scrollbar-track { background: transparent; }

/* ── Приглашение продолжить в MAX (inc/dialog-max.php) ──
   Показывается на экране «заявка отправлена». Не рекламный баннер:
   человек только что оставил заявку, и это продолжение того же действия,
   поэтому кнопка спокойная, а не зазывающая. */
.dds-max-invite {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.dds-max-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; border-radius: var(--r-md);
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 500; transition: background .14s;
}
.dds-max-btn:hover { background: var(--accent-deep, #8a3008); color: #fff; }
.dds-max-hint { font-size: 14px; color: var(--ink-2); flex: 1 1 200px; }

@media (max-width: 600px) {
  /* Кнопка во всю ширину — на телефоне попасть в неё должно быть легко. */
  .dds-max-invite { flex-direction: column; align-items: stretch; }
  .dds-max-btn { justify-content: center; }
}

/* ── Название документа без образца ──
   Пока модального окна с образцом нет, ссылки .doc-link разжимаются
   фильтром в .doc-name (inc/faq-links.php). Оформляем как обычный текст
   с лёгким выделением: читатель видит, что это название документа,
   но не ждёт от него перехода. Иконки листа тут намеренно нет —
   именно она обещала клик. */
.doc-name { font-weight: 500; color: var(--ink); }

/* ── Кликабельная ссылка на образец документа ──
   Стили ждут своего скрипта: разметка с data-doc лежит в контенте
   /faq-permit/, но открывашки модалки не написано. Когда появится —
   снять фильтр в inc/faq-links.php, и всё оживёт. */
.doc-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(194,65,12,.4);
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
}
.doc-link:hover { text-decoration-color: var(--accent); color: var(--accent-deep, #8a3008); }
.doc-link::after {
  content: '\00a0📄';
  font-size: .85em;
  opacity: .55;
  margin-left: 1px;
}

/* ── Модалка с образцом документа ── */
.doc-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,20,20,.6);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 16px;
}
.doc-modal[hidden] { display: none; }
.doc-dialog {
  background: var(--card); border-radius: var(--r-md);
  width: 100%; max-width: 760px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}
.doc-close {
  position: absolute; top: 12px; right: 16px;
  width: 30px; height: 30px;
  background: transparent; border: none;
  font-size: 22px; line-height: 1; color: var(--ink-3);
  cursor: pointer; border-radius: 50%;
}
.doc-close:hover { color: var(--ink); background: var(--card-2); }

.doc-head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line-2);
}
.doc-head h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--ink); margin-bottom: 12px;
  padding-right: 30px; line-height: 1.25;
}
.doc-meta {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 6px 14px; margin: 0;
  font-size: 12px;
}
.doc-meta dt {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-4); padding-top: 2px;
}
.doc-meta dd {
  margin: 0; font-family: var(--sans); color: var(--ink-2);
}
.doc-meta dd a { color: var(--accent); }
.doc-meta dd code {
  font-family: var(--mono); font-size: 11px;
  background: var(--card-2); padding: 1px 5px; border-radius: 2px;
}

.doc-content {
  padding: 18px 28px 24px;
  overflow-y: auto;
}
.doc-content p {
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--ink-2); margin-bottom: 12px;
}
.doc-content p:last-child { margin-bottom: 0; }
.doc-sample-h {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-4); margin: 20px 0 8px;
}
.doc-sample-h::before { content: '— '; color: var(--accent); }
pre.doc-sample {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  color: var(--ink); background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 18px;
  overflow-x: auto;
  white-space: pre-wrap; word-break: normal;
  margin: 0;
}

.doc-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 28px;
  border-top: 1px solid var(--line-2);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .doc-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .doc-meta dt { padding-top: 8px; }
  .doc-head, .doc-content, .doc-footer { padding-left: 18px; padding-right: 18px; }
  pre.doc-sample { font-size: 10.5px; padding: 10px 12px; }
}

/* Раскрывающиеся пункты чек-листа внутри .callout */
.check-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.check-item {
  background: rgba(255,255,255,.45);
  border-radius: var(--r-sm);
  transition: background .12s;
}
.check-item[open] { background: rgba(255,255,255,.7); }
.check-item > summary {
  list-style: none;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--sans); font-size: 13.5px;
  color: var(--ink); line-height: 1.4;
  user-select: none;
  outline: none;
}
.check-item > summary::-webkit-details-marker { display: none; }
.check-item > summary::before {
  content: '▸';
  display: inline-block;
  color: var(--accent);
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 3px;
  transition: transform .15s ease;
}
.check-item[open] > summary::before { transform: rotate(90deg); }
.check-item > summary:hover { color: var(--accent); }
.check-item:focus-visible > summary { background: rgba(255,255,255,.85); }
.check-detail {
  padding: 4px 16px 12px 36px;
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--ink-2);
}
.check-detail p { margin: 0 0 6px; }
.check-detail p:last-child { margin-bottom: 0; }
.check-detail strong { color: var(--ink); font-weight: 500; }
/* В callout.warn — иконка красная */
.callout.warn .check-item > summary::before { color: var(--rust, #b04a1f); }

/* Списки регионов/сегментов: ссылки без подчёркивания, hover на акцент */
.case-link-list { list-style: none; padding: 0; margin: 0; }
.case-link-list li {
  padding: 7px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--sans); font-size: 14px; color: var(--ink-2);
}
.case-link-list li:last-child { border-bottom: none; }
.case-link-list li a {
  color: var(--accent); text-decoration: none; font-weight: 500;
}
.case-link-list li a:hover { text-decoration: underline; }

/* «Бесконечная» лента новостей с кнопкой «Загрузить ещё» */
.news-feed-more {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 22px 0 4px; margin-top: 12px;
  border-top: 1px solid var(--line-2);
}
.news-feed-more .btn { min-width: 280px; }
.news-feed-more .btn[disabled] {
  opacity: .55; cursor: default; pointer-events: none;
}
.news-feed-counter {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: .04em;
}
.news-feed-counter strong { color: var(--ink-2); font-weight: 500; }

.hub-articles { display: flex; flex-direction: column; gap: 0; }
.hub-articles .ha-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
/* Без !important перекрывает встроенное [hidden]{display:none} */
.hub-articles .ha-row[hidden] { display: none !important; }
.hub-articles .ha-row:last-child { border-bottom: none; }
.hub-articles .ha-img {
  width: 120px; height: 80px; overflow: hidden;
  flex-shrink: 0; border: 1px solid var(--line-2);
}
.hub-articles .ha-img > div { width: 100%; height: 100%; }
/* Поведение картинки в плитке не было задано вовсе: снимок ложился как
   придётся и обрезался краем контейнера. Фотографию кадрируем по центру —
   для неё это нормально. */
.hub-articles .ha-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
/* Логотип компании — вписываем целиком на белом, а не кадрируем.
   У фотографии обрезка по краям безобидна, у знака она съедает
   половину названия: в ленте оставались «БА» и «МО» от «BarnModule».
   Белый фон обязателен — прозрачный PNG иначе ложится на подложку. */
.hub-articles .ha-img--logo { background: #fff; }
.hub-articles .ha-img--logo img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 8px; box-sizing: border-box;
}
.hub-articles .ha-body { flex: 1; }
.hub-articles .ha-body h4 {
  font-family: var(--serif); font-size: 16px; line-height: 1.4;
  font-weight: 500; color: var(--ink); margin: 4px 0 6px;
}
.hub-articles .ha-body h4 a:hover { color: var(--accent); }
.hub-articles .ha-body p { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; line-height: 1.55; }
.hub-articles .ha-body .meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .aside-sticky { position: static; }
  .related-grid, .pros-cons, .case-fact-grid, .hub-stats { grid-template-columns: 1fr 1fr; }
  .related-grid--4col { grid-template-columns: 1fr 1fr; } /* 2×2 */
  /* На 2-колоночной раскладке нечётный «хвостовой» элемент растягивается на всю ширину,
     чтобы не было пустого слота справа от него (3, 5, 7 карточек и т. п.) */
  .related-grid > .related-card:nth-child(odd):last-child,
  .pros-cons       > *:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  .company-head { grid-template-columns: 72px 1fr; }
  .company-head .company-verified { grid-column: 1/-1; justify-self: start; }
  .hub-articles .ha-img { width: 96px; height: 64px; }
}
@media (max-width: 600px) {
  .related-grid, .case-fact-grid, .hub-stats { grid-template-columns: 1fr; }
  .related-grid--4col { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 28px; }
  /* Основной текст на телефоне НЕ мельче 15px (правило Mobile v2);
     раньше тут стояло 14px — сам себе противоречил */
  .article-body p, .article-body li { font-size: 15px; }
  .article-body .ph-lead { font-size: 16px; }
  .hub-articles .ha-img { display: none; }
  .hub-articles .ha-body p { font-size: 13.5px; }
  /* Пункты чек-листов — раскрываются пальцем, мишень повыше */
  .check-item > summary { padding: 13px 12px; }
}

/* ══════════════════════════════════════════════════════
   КНОПКА «СОХРАНИТЬ В ЗАКЛАДКИ» на страницах статей
══════════════════════════════════════════════════════ */
/* ── Страница закладок (bookmarks.html) ── */
.bm-pg-empty {
  padding: 64px 0 40px; text-align: center;
}
.bm-pg-empty-ic {
  font-family: var(--mono); font-size: 36px; color: var(--line);
  margin-bottom: 16px; display: block;
}
.bm-pg-empty h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--ink-3); margin-bottom: 10px;
}
.bm-pg-empty p {
  font-size: 13.5px; color: var(--ink-4); max-width: 360px;
  margin: 0 auto 20px; line-height: 1.6;
}
.bm-pg-empty .bm-pg-goto {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 8px 18px; border-radius: 3px; transition: background .15s;
}
.bm-pg-empty .bm-pg-goto:hover { background: var(--accent-bg); }

.bm-pg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 14px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.bm-pg-toolbar-count {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4);
}
.bm-pg-toolbar-count strong { color: var(--ink-2); }
.bm-pg-clear-btn {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-4); background: none; border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 2px; cursor: pointer; transition: all .12s;
}
.bm-pg-clear-btn:hover { color: var(--bad); border-color: var(--bad); }

.bm-pg-list { display: flex; flex-direction: column; }

.bm-pg-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-3);
  transition: background .1s;
}
.bm-pg-card:last-child { border-bottom: none; }
.bm-pg-card-num {
  font-family: var(--mono); font-size: 10px; color: var(--ink-5);
  padding-top: 3px; min-width: 20px; text-align: right; flex-shrink: 0;
}
.bm-pg-card-body { flex: 1; min-width: 0; }
.bm-pg-card-sec {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 5px;
}
.bm-pg-card-title {
  display: block; font-family: var(--serif); font-size: 18px;
  font-weight: 400; color: var(--ink); line-height: 1.3;
  margin-bottom: 6px; transition: color .12s;
}
.bm-pg-card-title:hover { color: var(--accent); }
.bm-pg-card-meta {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  display: flex; align-items: center; gap: 10px;
}
.bm-pg-card-del {
  flex-shrink: 0; background: none; border: 1px solid var(--line);
  border-radius: 2px; width: 28px; height: 28px; cursor: pointer;
  color: var(--ink-4); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; margin-top: 2px;
}
.bm-pg-card-del:hover { color: var(--bad); border-color: var(--bad); background: var(--accent-bg); }

@media (max-width: 600px) {
  .bm-pg-card-title { font-size: 15px; }
  .bm-pg-card-num { display: none; }
}
.bm-page-btn {
  display: inline-flex; align-items: center; gap: 7px;
  /* Снизу отступ был НУЛЕВОЙ, и лид раздела прилипал к кнопке вплотную
     (замер: 0 px между низом кнопки и верхом текста). Кнопку печатает
     dds-chrome.js на всех хабах и синглах, поэтому чиним здесь, а не
     у каждого соседа по очереди — раньше так уже пришлось лечить
     точечным правилом `.bm-page-btn + .dds-sect-tabs`, и оно стало
     не нужно.
     18 px, а не 14 как сверху: сверху кнопку отделяет ещё и собственный
     нижний отступ заголовка, там суммарно 28 px. Снизу этой добавки нет. */
  margin-top: 14px; margin-bottom: 18px;
  padding: 6px 14px 6px 12px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); transition: background .15s, border-color .15s, color .15s;
}
.bm-page-btn svg {
  width: 13px; height: 13px; flex-shrink: 0; transition: fill .15s;
}
.bm-page-btn:hover {
  background: var(--card); border-color: var(--accent); color: var(--accent);
}
.bm-page-btn.is-saved {
  background: var(--accent-bg); border-color: var(--accent); color: var(--accent);
}
.bm-page-btn.is-saved svg { fill: currentColor; }

/* ══════════════════════════════════════════════════════
   PHOTO CAROUSEL — карусель фотографий на страницах кейсов
══════════════════════════════════════════════════════ */
.photo-carousel { margin: 0 0 28px; user-select: none; }
/* Высоту рамки задаёт JS по пропорции активного кадра (fitHeight в
   dds-script.js) — рамка обтягивает фото, пустого поля нет. clamp ниже —
   фолбэк, пока JS не отработал. Фон ПРОЗРАЧНЫЙ (в цвет страницы): если у
   высокого портрета сработал потолок и остаётся боковое поле — оно сливается
   с фоном. */
.pc-track {
  position: relative; width: 100%;
  height: clamp(240px, 54vh, 540px);
  overflow: hidden; background: transparent;
  border: 1px solid var(--line); cursor: zoom-in;
  transition: height .2s ease;
}
.pc-img picture { display: block; width: 100%; height: 100%; }
/* margin:0 — обязателен: `.dds-content img` вешает на картинки статьи
   margin:12px 0, и без сброса карусельный кадр отходил от верхней рамки
   на 12px (та самая «несостыковка верха»). object-position:top — для
   горизонтальных кадров, чтобы пустое место ушло вниз, а не раздвоилось. */
.photo-carousel .pc-img img {
  width: 100%; height: 100%; margin: 0;
  object-fit: contain; object-position: top center; display: block;
}
.pc-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.pc-slide.active { opacity: 1; pointer-events: auto; }
.pc-img { width: 100%; height: 100%; display: block; }
.pc-img svg { width: 100%; height: 100%; display: block; }
.pc-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.pc-cap {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); flex: 1; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-counter {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: .06em; flex-shrink: 0; white-space: nowrap;
}
.pc-btn {
  background: none; border: 1px solid var(--line); border-radius: 2px;
  width: 28px; height: 28px; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: var(--ink-2); padding: 0;
  transition: border-color .12s, color .12s;
}
.pc-btn:hover { border-color: var(--ink); color: var(--ink); }
.pc-btn:active { background: var(--card-2); }
/* Стрелки листания — поверх самого фото, по бокам, а не только в нижней
   панели. Полупрозрачный тёмный кружок с белым глифом читается и на светлом,
   и на тёмном кадре. */
.pc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(22, 22, 19, .5); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity .15s, background .15s;
}
.pc-nav--prev { left: 12px; }
.pc-nav--next { right: 12px; }
.pc-nav:hover { background: rgba(22, 22, 19, .8); color: #fff; opacity: 1; }
.pc-track:hover .pc-nav { opacity: 1; }
@media (max-width: 600px) {
  .pc-track { height: clamp(260px, 52vh, 440px); }
  .pc-cap { font-size: 10px; }
  .pc-nav { width: 38px; height: 38px; font-size: 21px; opacity: 1; }
  .pc-nav--prev { left: 8px; }
  .pc-nav--next { right: 8px; }
}

/* ══════════════════════════════════════════════════════
   МЕСТО ПОД ФОТО / ВИДЕО — универсальный слот-плейсхолдер
   используется на всех внутренних страницах. Когда появится
   реальный медиа-актив, содержимое .mf-frame заменяется на
   <img> или <video>; рамка и подпись остаются.
══════════════════════════════════════════════════════ */
.media-figure {
  margin: 18px 0;
  background: var(--card);
  border-radius: var(--r-md);
  overflow: hidden;
}
.media-figure .mf-frame {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(0,0,0,.025) 14px 15px),
    var(--card-2);
  border: 1px dashed var(--line);
  color: var(--ink-4);
  border-radius: var(--r-md);
}
.media-figure .mf-icon {
  width: 48px; height: 48px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.media-figure .mf-icon svg { width: 22px; height: 22px; }
.media-figure .mf-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.media-figure .mf-hint {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-4);
}
.media-figure .mf-caption {
  padding: 8px 14px 10px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
}

/* Hero-вариант: широкий слот сразу под page-head (низкая полоса-баннер) */
.media-figure.media-hero { margin: 14px 0 26px; }
.media-figure.media-hero .mf-frame { aspect-ratio: 5 / 1; }

/* Inline-вариант: в потоке статьи между секциями */
.media-figure.media-inline { margin: 22px 0; }
.media-figure.media-inline .mf-frame { aspect-ratio: 16 / 9; }

/* Видео-вариант: иконка-play в акцентном цвете */
.media-figure.media-video .mf-icon { color: var(--accent); border-color: var(--accent); }

/* Когда внутри уже подставлено реальное фото / видео.
   Потомок, а не ПРЯМОЙ потомок: с августа 2026 картинки оборачиваются
   в <picture> (inc/webp-picture.php), и селектор «> img» перестал бы
   их находить — кадр остался бы без object-fit и поехал. */
.media-figure .mf-frame img,
.media-figure .mf-frame > video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

@media (max-width: 760px) {
  .media-figure.media-hero .mf-frame { aspect-ratio: 32 / 9; }
}

/* ── Карусель фото [dds_tech_carousel] ──────────────────────────────────
   Прокрутка на scroll-snap — родном механизме браузера. Это осознанный
   выбор вместо библиотеки: работает без JavaScript, на телефоне даёт
   привычный свайп с инерцией, не тянет ни килобайта со стороны (а внешние
   CDN у нас и так под запретом). Стрелки — надстройка. */
.dds-carousel { margin: 26px 0; }
.dds-carousel .dc-title {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px;
}
.dds-carousel .dc-track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.dds-carousel .dc-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dds-carousel .dc-slide {
  flex: 0 0 auto; width: min(640px, 92%);
  scroll-snap-align: start;
  border: 1px solid var(--line); background: var(--card);
}
.dds-carousel .dc-slide img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.dds-carousel .dc-cap {
  display: block; padding: 9px 12px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  border-top: 1px solid var(--line-2);
}
.dds-carousel .dc-bar {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.dds-carousel .dc-btn {
  width: 44px; height: 44px;              /* мишень не меньше 44px — правило проекта */
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dds-carousel .dc-btn:hover { background: var(--card-2); border-color: var(--ink-4); }
.dds-carousel .dc-btn[disabled] { opacity: .35; cursor: default; }
.dds-carousel .dc-count {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .dds-carousel .dc-slide { width: 92%; }
  .dds-carousel .dc-slide img { aspect-ratio: 4 / 3; }
}

/* ── Родная «Галерея» с классом dds-carousel → та же карусель ───────────
   Зачем. Шорткод [dds_tech_carousel] требует номеров файлов, а редактор
   грузит фотографии с компьютера и номеров не знает. Блок «Галерея» —
   системный: файлы перетаскиваются мышью, порядок меняется там же,
   подписи пишутся под каждой. И он НЕ ломается при перезагрузке редактора,
   в отличие от HTML-блока, которым карусель пытались вставить в первый раз.

   Включается классом: блок «Галерея» → правая панель → «Дополнительно» →
   «Дополнительные классы CSS» → dds-carousel.
   Без класса галерея остаётся обычной сеткой — существующий контент не
   меняется. */
.wp-block-gallery.dds-carousel {
  display: flex; flex-wrap: nowrap;
  gap: 12px; margin: 26px 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.wp-block-gallery.dds-carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wp-block-gallery.dds-carousel .wp-block-image {
  flex: 0 0 auto; width: min(640px, 92%);
  scroll-snap-align: start; margin: 0;
  border: 1px solid var(--line); background: var(--card);
}
.wp-block-gallery.dds-carousel .wp-block-image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.wp-block-gallery.dds-carousel figcaption {
  padding: 9px 12px; margin: 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: var(--ink-2); text-align: left;
  border-top: 1px solid var(--line-2);
  background: none;
}
@media (max-width: 600px) {
  .wp-block-gallery.dds-carousel .wp-block-image { width: 92%; }
  .wp-block-gallery.dds-carousel .wp-block-image img { aspect-ratio: 4 / 3; }
}

/* ═══════════ ПАРТНЁРСКИЙ БЛОК В ТЕКСТЕ ═══════════════════════════════
   Рекомендация компании внутри гайда, ответа или калькулятора.
   Задача оформления противоречивая: блок должен быть ЗАМЕТЕН (иначе за него
   нечего брать деньги) и при этом не выглядеть баннером (иначе его перестанут
   видеть — баннерная слепота, и читатель перестанет доверять странице).
   Решение: тот же типографский язык, что у статьи, но своя подложка и
   вертикальная терракотовая отбивка слева. Ни рамок-обводок, ни теней,
   ни кнопок — блок читается как врезка редакции, а метка «Реклама» честно
   говорит, что это оплачено.                                            */
.dds-partner {
  display: block;
  margin: 30px 0;
  padding: 16px 18px 14px;
  background: var(--paper-2, #f4f4f1);
  border-left: 3px solid var(--accent);
}
.dds-partner .dp-tag {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.dds-partner .dp-row { display: flex; gap: 16px; align-items: flex-start; }
.dds-partner .dp-logo {
  flex: 0 0 72px; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 6px;
}
/* contain, а не cover: логотипы приходят разной пропорции и с прозрачным
   фоном — обрезка съедала бы половину знака (та же причина, что в блоке
   «компании в фокусе» на главной). */
.dds-partner .dp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dds-partner .dp-body { flex: 1 1 auto; min-width: 0; }
.dds-partner .dp-name {
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  color: var(--ink); line-height: 1.25;
}
.dds-partner .dp-reg {
  margin-left: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.dds-partner .dp-text {
  margin: 7px 0 9px; font-size: 15px; line-height: 1.55; color: var(--ink-2);
}
.dds-partner .dp-link {
  font-size: 14px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.dds-partner .dp-link:hover { color: var(--accent-deep); }
.dds-partner .dp-erid {
  display: block; margin-top: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}

/* Свободное место. Тише партнёрского: это не реклама, а приглашение,
   и перебивать им материал нельзя. Без подложки, одной отбивкой. */
.dds-partner--invite {
  background: none;
  border-left-color: var(--ink-4, #c9c9c3);
  padding: 10px 0 10px 15px;
}
.dds-partner--invite .dp-tag { margin-bottom: 5px; }
.dds-partner--invite .dp-invite-text {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3);
}
.dds-partner--invite .dp-invite-text a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 600px) {
  /* Логотип уходит наверх: в 72px сбоку на 390px телефоне тексту остаётся
     полоска в две трети строки, и название переносится по слогам. */
  .dds-partner .dp-row { flex-direction: column; gap: 10px; }
  .dds-partner .dp-logo { flex-basis: auto; width: 64px; height: 64px; }
  .dds-partner .dp-name { font-size: 18px; }
  .dds-partner .dp-text { font-size: 14px; }
}

/* ── Узкий вариант: колонка результата в калькуляторах ──────────────────
   Здесь блок стоит вплотную к посчитанной цифре — самому «горячему» месту
   сервиса, — и обязан читаться как отдельная карточка, а не как продолжение
   таблицы расчёта. Поэтому: своя подложка, рамка и акцентная полоса СВЕРХУ
   (слева её ставить нельзя — в колонке 280–320px она съедает отступ и текст
   липнет к краю). Логотип уходит над названием: сбоку в такой ширине на
   текст оставалось бы полстроки.                                        */
.dds-partner--aside {
  margin: 14px 0 0;
  padding: 12px 14px 11px;
  border-left: 0;
  border-top: 3px solid var(--accent);
  background: var(--card, #fff);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
/* Логотип СБОКУ и мелкий, не столбиком. Замер на живом сайте: столбиком
   карточка выходила 299 px, а видимая часть липкой панели после итога и
   строк сметы — около 210 px. Оплаченный блок обрезался. Строкой с логотипом
   44 px карточка укладывается примерно в 185 px и помещается целиком. */
.dds-partner--aside .dp-row { flex-direction: row; gap: 11px; }
.dds-partner--aside .dp-logo { flex: 0 0 44px; width: 44px; height: 44px; padding: 3px; }
.dds-partner--aside .dp-tag { margin-bottom: 7px; }
.dds-partner--aside .dp-name { font-size: 16px; }
.dds-partner--aside .dp-reg { display: block; margin: 2px 0 0; margin-left: 0; }
.dds-partner--aside .dp-text {
  margin: 5px 0 7px; font-size: 13.5px; line-height: 1.45;
  /* Длинное описание не должно распирать липкую панель: три строки — потолок,
     остальное читатель увидит на карточке компании. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dds-partner--aside .dp-link { font-size: 13px; }
.dds-partner--aside .dp-erid { margin-top: 7px; }

/* Приглашение в узкой колонке: тем же каркасом, но серой полосой —
   иначе пустой слот выглядит как оплаченный и обесценивает настоящий. */
.dds-partner--invite.dds-partner--aside {
  padding: 12px 14px;
  border-top-color: var(--ink-4, #87857c);
  background: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07);
}

/* ── Липкая колонка результата и партнёрский блок ───────────────────────
   ЗДЕСЬ БЫЛ ПОТОЛОК ПО ВЫСОТЕ с внутренней прокруткой — снят.

   Задача была реальная: партнёрская карточка внутри липкой панели делала
   её выше экрана (замер: 713 px при окне 720, низ уходил на 801), а у
   липкого элемента выше вьюпорта нижняя часть НЕДОСТИЖИМА — он едет вместе
   со страницей, доскроллить до его низа нельзя. Кнопки «Печать» и сама
   оплаченная карточка пропадали.

   Но лечение было хуже болезни: полоса прокрутки внутри колонки результата
   выглядит как поломка, и содержимое всё равно приходится искать.

   Правильное решение оказалось не в CSS, а в разметке: карточка вынесена
   ИЗ липкой панели и стоит сразу под ней (page-calc-budget.php,
   page-calc-mortgage.php). Без неё панель — 558 px, помещается на любом
   ноутбуке и остаётся липкой; карточка прокручивается со страницей.
   Ограничивать высоту больше нечего.

   В калькуляторе бруса липкая панель — сам .bc-result, вынести из неё
   нельзя без ломки сетки; там карточка внутри, но суммарно 599 px при
   top:113 — помещается. */

/* ═══════════ СТРАНИЦА РЕГИОНА ═══════════════════════════════════════════
   Счётчики берутся из базы (inc/region-pages.php). Раньше здесь стояли
   выдуманные числа — в сумме по десяти регионам 530 материалов при
   реальных 88. Цифру, которую никто не вводит, невозможно забыть обновить. */
.reg-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 22px 0 26px; background: var(--ink-4);
  border: 1px solid var(--ink-4);
}
.reg-stats > div {
  background: var(--card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.reg-stats .rs-v {
  font-family: var(--serif); font-size: 30px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.reg-stats .rs-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 600px) {
  /* Три колонки на 375px дают по 110px — число ещё влезает, подпись уже нет
     и рвётся по слогам. Складываем в один столбец. */
  .reg-stats { grid-template-columns: 1fr; }
  .reg-stats > div { flex-direction: row; align-items: baseline; gap: 10px; }
  .reg-stats .rs-v { font-size: 24px; }
}

/* Технологии региона — чипы «метка + число». По сути это таблица из двух
   колонок, и списком она читалась плохо: шесть строк с одинаковым хвостом
   «— N компании» занимали пол-экрана и заставляли перечитывать каждую.
   Число вынесено в отдельную ячейку с акцентным фоном: глаз ловит его
   отдельно от названия, сравнивать технологии между собой становится
   можно одним взглядом. */
.reg-techs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 26px; }
.reg-tech {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  text-decoration: none; transition: border-color .14s;
}
.reg-tech:hover { border-color: var(--accent); }
.reg-tech .rt-n {
  padding: 6px 11px; font-size: 14px; color: var(--ink);
  display: flex; align-items: center;
}
.reg-tech:hover .rt-n { color: var(--accent-deep); }
.reg-tech .rt-c {
  padding: 6px 10px; background: var(--paper-2);
  border-left: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center;
  font-variant-numeric: tabular-nums;
}

/* ── Каркас страницы региона ───────────────────────────────────────────
   ПОЧЕМУ ЗДЕСЬ ЕСТЬ `min-width: 0` И `max-width: 100%`.
   Инцидент 19.08.2026: страница Алтайского края «ломалась пополам» —
   верх во всю ширину, низ узкой колонкой. Виноват был не CSS, а обрыв
   разметки в тексте страницы (незакрытые `<div class="related-grid">`
   и `<article>`), из-за которого живые блоки попадали внутрь ячейки
   четырёхколоночной сетки. Разметку чинит force_balance_tags() в
   inc/region-pages.php, но страховку оставляем и здесь: если контейнер
   всё же окажется вложенным во что-то узкое, сетки внутри не будут
   выпирать за его пределы и не устроят горизонтальный скролл.
   Grid-элементы по умолчанию имеют min-width: auto — без сброса в 0
   длинное слово или широкая карточка распирают колонку. */
.reg-page { min-width: 0; max-width: 100%; }
.reg-page .dds-feed { min-width: 0; }
.reg-page .dds-feed > * { min-width: 0; }

/* Авторский текст страницы, если редакция его написала. Живые блоки идут
   ПОСЛЕ него, поэтому нужна отбивка — иначе сетка липнет к абзацу. */
.reg-intro { min-width: 0; }
.reg-intro > *:last-child { margin-bottom: 0; }

.reg-sec { margin: 30px 0 0; min-width: 0; }
.reg-sec:first-child { margin-top: 0; }

/* Заголовок секции и ссылка «все» — одной строкой, разведены по краям.
   На узком экране ссылка переносится под заголовок (flex-wrap), а не
   ужимает его в две буквы на строку. Базовый размер h2 не трогаем —
   он живёт в типографике статьи. */
.reg-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 18px; flex-wrap: wrap;
}
.reg-h > span { min-width: 0; }
.reg-more {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  white-space: nowrap; text-decoration: none; color: var(--accent);
  flex: 0 0 auto;
}
.reg-more:hover { text-decoration: underline; }

@media (max-width: 600px) {
  /* Мишень ≥44px: ссылка «все» на телефоне становится самостоятельной
     строкой, а не хвостом заголовка. Зону нажатия расширяем невидимым
     полем, визуально размер не меняем — правило мобильного блока. */
  .reg-h { gap: 6px; }
  .reg-more { position: relative; font-size: 13px; }
  .reg-more::after { content: ""; position: absolute; inset: -14px -8px; }
  .reg-sec { margin-top: 24px; }
}

.reg-tail { margin-top: 30px; }

/* ── РЫНОК ЖИЛЬЯ (inc/region-facts.php) ────────────────────────────────
   Первый блок страницы региона. Крупная цифра динамики и период рядом
   с ней: читатель за секунду понимает, что данные свежие, и о каком
   отрезке речь. Раньше страница открывалась счётчиками портала —
   это про нас, а не про регион. */
.rm-card {
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 18px 20px; margin-top: 12px;
}
.rm-figure {
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.rm-dyn {
  font-family: var(--serif); font-size: 40px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rm-dyn.is-down { color: var(--accent-deep); }
.rm-dyn.is-up { color: #4d7c0f; }
.rm-cap { font-size: 14.5px; color: var(--ink-2); }
.rm-txt { margin: 0; }
.rm-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 600px) {
  .rm-card { padding: 15px 16px; }
  .rm-dyn { font-size: 33px; }
  /* Подпись под цифру: «Частные дома, январь–май 2026» рядом с крупным
     числом на 360 px не помещается и рвётся посреди месяца. */
  .rm-figure { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── УСЛОВИЯ СТРОИТЕЛЬСТВА (inc/region-facts.php) ──────────────────────
   Четыре карточки: сейсмика, климат, лес, подрядчики. Каждая — «шапка
   с крупным значением» + пояснение. Крупное число в шапке нужно, чтобы
   страницу можно было просмотреть по диагонали: балл, мороз, лесистость,
   число подрядчиков читаются без чтения текста.
   Карточки идут столбцом, а не сеткой: внутри разное по высоте содержимое
   (у климата таблица на три строки, у леса — полоса пород), и в две
   колонки они выравнивались бы по самой высокой, оставляя дыры. */
.reg-facts .rf-block {
  border: 1px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0 0;
  min-width: 0;
}
.rf-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.rf-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 4px;
}
/* Крупное число и подпись к нему — одним столбиком, по правому краю.
   Раньше число стояло голым: у климата это было «−34 °C» без единого
   слова о том, что это. Подпись обязательна у каждой крупной цифры. */
.rf-fig { display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; text-align: right; min-width: 0; }
.rf-val {
  font-family: var(--serif); font-size: 26px; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rf-cap { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.rf-txt { margin: 0 0 8px; }
.rf-txt:last-child { margin-bottom: 0; }
.rf-note {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.rf-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }

/* Плитки чисел по лесу. auto-fit + minmax: на 760 px встают четыре,
   на планшете две, на телефоне одна. Магических брейкпоинтов нет —
   на этом проекте они уже дважды разъезжались. */
.rf-nums {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin: 4px 0 14px;
}
/* ПОДПИСЬ НАД ЧИСЛОМ, а не под ним. В плитках подряд подпись снизу
   зрительно липнет к следующему числу — редакция прямо сказала, что
   непонятно, какая подпись к какой цифре. Сверху вниз читается однозначно:
   сначала что меряем, потом сколько. */
.rf-nums > div { background: var(--card); padding: 11px 13px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rf-c { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); order: 1; }
.rf-n { font-family: var(--serif); font-size: 20px; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; order: 2; }
/* Заголовок над полосой пород: без него полоса висела без объяснения. */
.rf-sub { margin: 4px 0 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Полоса пород. Двумя цветами, без подписей внутри — на узком экране
   текст в сегменте 4% (Тыва) не поместился бы никак. Подписи вынесены
   в легенду под полосой, там же и проценты. */
.rf-bar { display: flex; height: 10px; overflow: hidden; border-radius: 5px;
  background: var(--paper-2); }
.rf-bar-c { background: var(--accent); }
.rf-bar-s { background: var(--ink-4); }
.rf-legend { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }
.rf-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin: 0 6px 0 0; vertical-align: baseline; }
/* Второй ключ легенды отбивается от текста первой пары. */
.rf-legend .rf-key:nth-of-type(2) { margin-left: 14px; }
.rf-key--c { background: var(--accent); }
.rf-key--s { background: var(--ink-4); }

/* Климатическая таблица — четыре колонки. На телефоне не схлопываем,
   а даём горизонтальный скролл ВНУТРИ карточки: колонки здесь равноценны,
   выбрасывать нечего, а страница вбок ехать не должна. */
.rf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; }
.rf-tbl { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 14px; }
.rf-tbl th {
  text-align: left; padding: 0 14px 7px 0; border-bottom: 1px solid var(--ink-4);
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap;
}
.rf-tbl td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); }
.rf-tbl tr:last-child td { border-bottom: 0; }
.rf-tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; }

.rf-src { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 600px) {
  .reg-facts .rf-block { padding: 14px 15px; }
  .rf-val { font-size: 22px; }
  .rf-n { font-size: 18px; }
  /* Значение уходит на свою строку — «Сейсмика» и «8–9 баллов» в одну
     строку на 360 px не помещаются и рвут заголовок пополам. Подпись
     при этом выравнивается по левому краю вместе с числом. */
  .rf-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rf-name { padding-top: 0; }
  .rf-fig { align-items: flex-start; text-align: left; }
}

/* Необязательное согласие в анкете компании — тише обязательного:
   оно ничего не блокирует, и подавать его как равное первому неверно. */
.reg-consent--opt { background: transparent; border-style: dashed; }

/* ═══════════ ЗАЯВКА В ЭКСПЕРТНЫЙ СОВЕТ ═══════════════════════════════
   Форма стоит в конце страницы-приглашения: сначала человек читает, зачем
   это ему, и только потом видит поля. Обратный порядок — форма первой —
   собирает случайные заявки от тех, кто не понял, во что вписывается. */
.exp-form-w {
  margin: 34px 0 0; padding: 24px 26px;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.exp-form-w h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  margin: 0 0 8px; color: var(--ink);
}
.exp-form-lead { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; }
.exp-form-err {
  margin: 0 0 14px; padding: 10px 14px; background: #fdecea;
  border: 1px solid #e0b4b4; color: #922; font-size: 14px;
}
.exp-form { display: flex; flex-direction: column; gap: 14px; }
.exp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Подписи полей — ОБЫЧНЫМ шрифтом, не капсом.
   Сначала здесь стоял моноширинный 11px в верхнем регистре, как у служебных
   меток портала. На коротких словах вроде «ГОРОД» это читалось, а на «О ЧЁМ
   ГОТОВЫ ГОВОРИТЬ» превращалось в кашу: капс лишает слова привычного силуэта,
   и строку приходится разбирать по буквам. Плюс в одной форме оказывалось три
   начертания сразу — моно 11 в подписях, Manrope 16 в полях, Manrope 13
   в согласиях. Анкету заполняет человек со стороны, ей нужен спокойный вид,
   а не терминальный. Моноширинный оставлен там, где он и уместен: в метках
   разделов и цифрах. */
.exp-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
/* Подпись — ОДНИМ элементом вместе со звёздочкой. Без этой обёртки label как
   флекс-колонка разносил текст, звёздочку и поле по трём строкам. */
.exp-form .lbl { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
/* Звёздочкой помечены ТОЛЬКО обязательные. Необязательные поля — «Компания»,
   «Город», «Телефон», «Должность» — не выделяются ничем: любое подчёркивание
   необязательного делает его равным нужному и заставляет заполнять зря. */
.exp-form .req { color: var(--accent); font-weight: 600; }
.exp-form input[type="text"], .exp-form input[type="email"],
.exp-form input[type="tel"], .exp-form textarea {
  /* 16px — иначе iOS зумит страницу при фокусе и ломает вёрстку. */
  font-family: var(--sans); font-size: 16px; text-transform: none; letter-spacing: 0;
  color: var(--ink); padding: 10px 12px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 3px;
}
.exp-form input:focus, .exp-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Подсказка в поле — заметно бледнее подписи. Поля обязаны быть 16px (иначе
   iOS зумит страницу при фокусе), и на фоне подписи 14px тёмный плейсхолдер
   читался как основной текст: взгляд цеплялся за пример, а не за название. */
.exp-form input::placeholder, .exp-form textarea::placeholder { color: var(--ink-4); opacity: 1; }
.exp-form textarea { resize: vertical; line-height: 1.5; }
.exp-form .dds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.exp-consent {
  flex-direction: row !important; gap: 10px !important; align-items: flex-start;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--sans) !important; font-size: 13px !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--ink-2) !important; line-height: 1.5; cursor: pointer;
}
.exp-consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }
.exp-consent a { color: var(--accent); }
/* Необязательное — визуально тише обязательного: оно ничего не блокирует. */
.exp-consent--opt { background: transparent; border-style: dashed; }
.exp-form button { align-self: flex-start; }

.exp-form-ok h3 { color: var(--accent-deep); }

@media (max-width: 600px) {
  .exp-form-w { padding: 18px 16px; }
  .exp-row { grid-template-columns: 1fr; }
  .exp-form button { align-self: stretch; min-height: 48px; }
}

/* ── Индексы цен на материалы (inc/price-index.php, шорткод dds_price_index) ──
   Значение в ячейке — процент к декабрю предыдущего года. Рост красим
   терракотой (у нас это акцент, а не «плохо»), снижение — зелёным.
   Прочерк намеренно приглушён: «нет наблюдений» не должно выглядеть
   как значимая цифра. */
.dds-pi { margin: 28px 0; }
.dds-pi-head { margin-bottom: 12px; }
.dds-pi-t { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.dds-pi-sub { margin: 0; font-size: 14px; color: var(--muted, #6b6b66); }
.dds-pi-scroll { overflow-x: auto; }
.dds-pi-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dds-pi-table th,
.dds-pi-table td { padding: 8px 10px; border-bottom: 1px solid var(--line, #d8d8d3); text-align: right; }
.dds-pi-table thead th { font-size: 12px; font-weight: 600; line-height: 1.3; vertical-align: bottom; text-align: right; }
.dds-pi-table th[scope="row"],
.dds-pi-table thead th:first-child { text-align: left; }
.dds-pi-table tbody th[scope="row"] { font-weight: 600; white-space: nowrap; }
.dds-pi-up { color: var(--accent, #c2410c); font-variant-numeric: tabular-nums; }
.dds-pi-down { color: #2b7d2b; font-variant-numeric: tabular-nums; }
.dds-pi-flat { color: var(--muted, #6b6b66); font-variant-numeric: tabular-nums; }
.dds-pi-na { color: #b3b3ad; }
.dds-pi-thin { color: var(--muted, #6b6b66); }
.dds-pi-src { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #6b6b66); }

/* Телефон: матрица не влезает по ширине, поэтому колонки СКЛАДЫВАЕМ —
   каждый регион становится блоком, подпись материала берётся из data-m.
   Пустые ячейки на телефоне прячем совсем: список прочерков только шумит. */
@media (max-width: 760px) {
  .dds-pi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dds-pi-table,
  .dds-pi-table tbody,
  .dds-pi-table tr,
  .dds-pi-table td,
  .dds-pi-table th { display: block; }
  .dds-pi-table tr { margin-bottom: 16px; border-bottom: 2px solid var(--line, #d8d8d3); }
  .dds-pi-table tbody th[scope="row"] { padding: 6px 0; border-bottom: 1px solid var(--line, #d8d8d3); font-size: 15px; white-space: normal; }
  .dds-pi-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 0; text-align: right; }
  .dds-pi-table td::before { content: attr(data-m); flex: 1 1 auto; text-align: left; font-size: 13px; color: var(--muted, #6b6b66); }
  .dds-pi-table td.dds-pi-na { display: none; }
}

/* ── ЛЕНТА РУБРИКИ (inc/rubrics.php) ──────────────────────────────────
   Блок «свежее по теме» под содержимым страницы. Сейчас стоит на /law/:
   справочник документов сверху, публикации о нормах и праве под ним.
   Сетка и карточки переиспользуются от блока «Читайте также» — свой
   набор карточек завёл бы вторую вёрстку одного и того же. */
.dds-rubric-feed { margin: 34px 0 8px; padding-top: 22px; border-top: 1px solid var(--line, #d8d8d3); }
.dds-rubric-feed > h2 { margin: 0 0 4px; }
.dds-rubric-lead { margin: 0 0 6px; color: var(--muted, #6b6b66); font-size: 14px; max-width: 62ch; }
.dds-rubric-all { margin: 4px 0 0; font-size: 14px; }