/* Стили SEO-статей — адаптация style.css из пакета статей.
   Глобальные правила автора (reset, body, .container, img, a, h1) вырезаны:
   они ломали бы шапку, подвал и типографику темы. Всё ограничено
   .article-body (обёртка внутри контента) и классами компонентов;
   подключается только на страницах записей (singular 'post'). */
.article-body {
  --bg: #faf8f5;
  --surface: #ffffff;
  --text: #2a2622;
  --muted: #5f584f;
  --faint: #948b80;
  --accent: #8a6a3f;
  --accent-soft: #f0e7db;
  --line: #e7e0d6;
  --ok: #4a7a4a;
  --warn: #a35b46;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  padding: 44px 0 30px;
}
.article-body h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  margin: 48px 0 16px;
}
.article-body h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 21px;
  margin: 32px 0 10px;
  color: var(--accent);
}
/* Разделы, демотированные из h3 старых статей цикла «полный гид». */
.article-body h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  margin: 26px 0 8px;
  color: var(--text);
}
.article-body p { margin-bottom: 16px; color: var(--muted); }
.article-body p strong, .article-body li strong { color: var(--text); }
.article-body ul, .article-body ol { margin: 0 0 20px 24px; color: var(--muted); }
.article-body li { margin-bottom: 8px; }

/* Оглавление */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 4px 0 34px;
}
.toc h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.toc ol { margin: 0 0 0 20px; }
.toc li { margin-bottom: 6px; font-size: 15px; }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--accent); }

/* Картинки */
.article-body figure { margin: 30px 0; }
.article-body figure img, .article-body figure svg {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.article-body figcaption { font-size: 14px; color: var(--faint); margin-top: 9px; text-align: center; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.photo-grid figure { margin: 0; }
.photo-grid img { border-radius: 10px; border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }

/* Таблицы */
.table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 540px; }
.article-body caption {
  caption-side: top;
  text-align: left;
  padding: 16px 20px 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.article-body th, .article-body td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.article-body thead th {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.article-body tbody th { color: var(--text); font-weight: 600; background: #fbf9f6; }
.article-body tbody td { color: var(--muted); }
.article-body tbody tr:last-child th, .article-body tbody tr:last-child td { border-bottom: none; }

/* Плюсы / минусы */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.pc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
.pc-card h4 { font-family: var(--font-head); font-size: 21px; margin-bottom: 14px; }
.pc-card.pros h4 { color: var(--ok); }
.pc-card.cons h4 { color: var(--warn); }
.pc-card ul { list-style: none; margin: 0; }
.pc-card li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15.5px;
  color: var(--muted);
}
.pc-card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pc-card.pros li::before { content: "＋"; color: var(--ok); }
.pc-card.cons li::before { content: "－"; color: var(--warn); }

/* Нумерация пунктов */
.diff-head { display: flex; align-items: center; }
.diff-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Цитата */
.quote {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 20px 26px;
  margin: 26px 0;
  border-radius: 0 10px 10px 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote p { font-style: italic; color: var(--text); margin-bottom: 8px; }
.quote cite { font-style: normal; font-size: 13.5px; color: var(--faint); }

/* Врезка */
.note {
  background: var(--accent-soft);
  border: 1px solid #e3d5c2;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 26px 0;
  color: var(--muted);
}
.note strong { color: var(--accent); }

/* FAQ-аккордеон */
.faq { margin: 26px 0; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 22px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--accent); font-size: 18px; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); color: var(--accent); }
.faq .faq-a { padding: 16px 22px; color: var(--muted); font-size: 15.5px; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* Блок-вывод */
.verdict {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 28px;
  margin: 30px 0;
}
.verdict h4 { font-family: var(--font-head); font-size: 20px; margin-bottom: 10px; color: var(--accent); }
.verdict p { margin-bottom: 0; color: var(--muted); }

/* Плавные переходы по якорям оглавления (как в исходной статье);
   отступ — под фиксированную шапку темы. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 100px) + 24px);
}

/* Книжная навигация: в конце статьи — карточки на другие статьи. */
.article-body .related {
  border-top: 1px solid var(--line);
  padding: 40px 0 10px;
  margin-top: 34px;
}
.article-body .related h2 {
  font-family: var(--font-head);
  font-size: 28px;
  margin: 0 0 20px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* wpautop вставляет <br> между карточками — они ломают раскладку сетки. */
.related-grid br { display: none; }
.hub-cards br { display: none; }
.article-body a.related-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  display: block;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.article-body a.related-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.related-card .rc-tag,
.related-card .rc-title { text-decoration: none; }
.related-card .rc-tag {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.related-card .rc-title {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.3;
}
.related-card:hover .rc-title { color: var(--accent); }

/* Источники и подвал статьи (цикл гайдов «Отдел К»). */
.article-body .sources { margin: 30px 0 0; font-size: 14.5px; color: var(--faint); }
.article-body .sources h2 { font-size: 22px; margin: 28px 0 10px; }
.article-body .sources ul { margin: 0 0 0 18px; color: var(--faint); }
.article-body .sources li { margin-bottom: 6px; }
.article-body .sources a { color: var(--faint); text-decoration: underline dotted; }
.article-body .article-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--faint);
}
.article-body .article-footer a { color: var(--faint); }
/* h4 внутри компонентов — без общего верхнего отступа статьи. */
.article-body .pc-card h4, .article-body .verdict h4 { margin-top: 0; }

/* Книжное «листание»: карточка в конце главы ведёт на следующую главу
   той же страницы (плавный скролл по якорю). */
.article-body a.next-chapter {
  display: block;
  margin: 30px 0 6px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.article-body a.next-chapter:hover { transform: translateY(-2px); border-color: var(--accent); }
.next-chapter__tag {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.next-chapter__title {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.3;
}
.article-body a.next-chapter:hover .next-chapter__title { color: var(--accent); }

/* ----------------------------------------------------------------------------
   «Книга»: главы статьи — страницы, видна только активная.
   Скрытые только при работающем JS (.pp-js ставит инлайн-скрипт в <head>);
   без JS видны все главы сразу. Пока скрипт не взял управление
   (нет .chapter-pager на .article-body) — показываем первую главу.
   ------------------------------------------------------------------------- */
.pp-js .article-body:not(.chapter-pager) > section.chapter { display: none; }
.pp-js .article-body:not(.chapter-pager) > section.chapter:first-of-type { display: block; }
.pp-js .article-body.chapter-pager > section.chapter { display: none; }
.pp-js .article-body.chapter-pager > section.chapter.chapter--active { display: block; }
.article-body .toc a.is-current {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 640px) {
  .pros-cons, .photo-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Дверная книга: контент глав обёрнут в .pp-article (стили дверных статей из
   серверного плагина PP), но лежит внутри .article-body — и правила темы
   выше перекрашивали бы дверной текст, шрифт заголовков остаётся книжным.
   Здесь возвращаем цвета дверного стиля (переменные .pp-article).
   Скоуп только пар «article-body + pp-article»: одиночные .pp-article-страницы
   правил темы не видят и не меняются.
   ------------------------------------------------------------------------- */
.article-body .pp-article > p { color: var(--ink); }
.article-body .pp-article ul,
.article-body .pp-article ol { color: var(--ink); }
.article-body .pp-article thead th {
  background: #f4eee6;
  color: var(--ink);
  font-size: inherit;
  font-weight: 650;
  text-transform: none;
  letter-spacing: normal;
}
.article-body .pp-article tbody td { color: var(--ink); }