/* =========================================================
   SeoErudit — блоки оформления кейсов (Gutenberg), v2
   Все правила усилены префиксом :is(.article-content, .editor-styles-wrapper),
   чтобы перебивать стили темы (.article-content ul, li::before и т.д.)
   и одинаково работать на сайте и в редакторе.
   ========================================================= */

:root {
  --cs-accent: #1f4fd1;        /* замените на фирменный цвет */
  --cs-accent-soft: #eef2fd;
  --cs-ink: #1a1d24;
  --cs-muted: #5f6673;
  --cs-line: #e3e6ec;
  --cs-ok: #1b7f55;
  --cs-ok-soft: #eaf6f0;
  --cs-warn: #a86411;
  --cs-warn-soft: #fdf4e6;
  --cs-radius: 14px;
}

/* Сброс маркеров темы для наших списков */
:is(.article-content, .editor-styles-wrapper) ul[class*="is-style-cs-"], :is(.article-content, .editor-styles-wrapper) ol[class*="is-style-cs-"] {
  list-style: none; padding: 0; margin: 1.5em 0;
}
:is(.article-content, .editor-styles-wrapper) ul[class*="is-style-cs-"] li, :is(.article-content, .editor-styles-wrapper) ol[class*="is-style-cs-"] li {
  list-style: none; margin: 0; background: none;
}
:is(.article-content, .editor-styles-wrapper) ul[class*="is-style-cs-"] li::before, :is(.article-content, .editor-styles-wrapper) ol[class*="is-style-cs-"] li::before {
  -webkit-mask: none; mask: none; transform: none; margin: 0;
  background-image: none; border: 0; box-shadow: none;
}

/* ---------- 1. Лид ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-lead {
  font-size: 1.2em; line-height: 1.6; color: var(--cs-ink);
  padding-left: 22px; border-left: 4px solid var(--cs-accent); margin: 0 0 1.6em;
}

/* ---------- 2. Примечание ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-note {
  font-size: .92em; color: var(--cs-muted); background: #f6f7f9;
  border-radius: 10px; padding: 12px 16px 12px 44px; position: relative;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-note::before {
  content: "i"; position: absolute; left: 14px; top: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cs-muted); color: #fff;
  font: italic 700 13px/20px Georgia, serif; text-align: center;
}

/* ---------- 3. Реплика в сторону ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-aside {
  font-style: italic; color: var(--cs-muted); font-size: .95em;
  padding: 2px 0 2px 16px; border-left: 2px dashed #c9ced8;
}

/* ---------- 4. Главный вывод (абзац или цитата) ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-insight {
  background: var(--cs-accent); color: #fff; border: 0; border-radius: var(--cs-radius);
  padding: 28px 32px; margin: 2em 0; font-size: 1.15em; line-height: 1.55; font-weight: 500;
  quotes: none;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-insight::before, :is(.article-content, .editor-styles-wrapper) .is-style-cs-insight::after { display: none; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-insight p { margin: 0; color: inherit; font-size: inherit; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-insight cite {
  display: block; margin-top: 12px; font-size: .75em; opacity: .8; font-style: normal; color: inherit;
}

/* ---------- 5. Результат ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-result {
  background: var(--cs-ok-soft); border-radius: var(--cs-radius);
  padding: 18px 22px 18px 58px; position: relative; color: var(--cs-ink); margin: 1.5em 0;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-result::before {
  content: ""; position: absolute; left: 20px; top: 20px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cs-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-result p:last-child { margin-bottom: 0; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-result p:first-child { margin-top: 0; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-result strong:first-child { color: var(--cs-ok); }

/* ---------- 6. Ограничения ---------- */
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-limits {
  background: var(--cs-warn-soft); border-radius: var(--cs-radius); padding: 18px 22px;
}
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-limits li { position: relative; padding: 0 0 0 32px; margin: 8px 0; }
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-limits li::before {
  content: "!"; position: absolute; left: 0; top: .2em;
  width: 20px; height: 20px; border-radius: 6px;
  background-color: var(--cs-warn); color: #fff;
  font-weight: 700; font-size: 13px; line-height: 20px; text-align: center;
}

/* ---------- 7. Чек-лист ---------- */
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-checklist li {
  position: relative; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--cs-line);
}
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-checklist li:last-child { border-bottom: 0; }
:is(.article-content, .editor-styles-wrapper) ul.is-style-cs-checklist li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--cs-accent); box-sizing: border-box; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231f4fd1' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center; background-size: 16px; background-repeat: no-repeat;
}

/* ---------- 8. Принципы ---------- */
:is(.article-content, .editor-styles-wrapper) ol.is-style-cs-principles {
  counter-reset: csp; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
:is(.article-content, .editor-styles-wrapper) ol.is-style-cs-principles li {
  counter-increment: csp; position: relative;
  border: 1px solid var(--cs-line); border-radius: var(--cs-radius); padding: 58px 20px 20px;
}
:is(.article-content, .editor-styles-wrapper) ol.is-style-cs-principles li::before {
  content: counter(csp); position: absolute; left: 20px; top: 12px;
  width: auto; height: auto; background: none;
  font-size: 38px; font-weight: 800; line-height: 1; color: var(--cs-accent);
}

/* ---------- 9. Таймлайн ----------
   Работает и с обёрткой .wp-block-group__inner-container (классические темы) */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stages { counter-reset: csstage; margin: 2em 0; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage {
  counter-increment: csstage; position: relative; padding: 0 0 8px 44px; margin: 0;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage::before {
  content: ""; position: absolute; left: 11px; top: 30px; bottom: 0;
  width: 2px; background: var(--cs-line);
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage:last-child::before { display: none; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > :is(h2, h3):first-child, :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > .wp-block-group__inner-container > :is(h2, h3):first-child { position: relative; margin-top: 0; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > :is(h2, h3):first-child::before, :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > .wp-block-group__inner-container > :is(h2, h3):first-child::before {
  content: counter(csstage); position: absolute; left: -44px; top: .15em;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cs-accent); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
  text-transform: none; letter-spacing: 0;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > :is(h2, h3):first-child::after, :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > .wp-block-group__inner-container > :is(h2, h3):first-child::after {
  content: "Этап " counter(csstage) " из 4"; display: block; position: static;
  font-size: 14px; font-weight: 500; color: var(--cs-muted);
  text-transform: none; letter-spacing: 0; margin-top: 6px;
  width: auto; height: auto; background: none;
}

/* ---------- 10. CTA ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-cta, :is(.article-content, .editor-styles-wrapper) .cs-cta {
  border: 2px solid var(--cs-accent); border-radius: var(--cs-radius);
  padding: 22px 26px; margin: 2em 0;
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-cta > .wp-block-group__inner-container {
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; width: 100%;
}
:is(.article-content, .editor-styles-wrapper) .is-style-cs-cta p, :is(.article-content, .editor-styles-wrapper) .cs-cta p { margin: 0; flex: 1 1 280px; font-weight: 500; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-cta .wp-block-buttons { margin: 0; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-cta .wp-block-button__link, :is(.article-content, .editor-styles-wrapper) .cs-cta a.cs-btn {
  background: var(--cs-accent); color: #fff; border-radius: 10px;
  padding: 12px 22px; text-decoration: none; display: inline-block; font-weight: 600;
}

/* ---------- 11. Скриншот с подписью ---------- */
:is(.article-content, .editor-styles-wrapper) .is-style-cs-figure img { border: 1px solid var(--cs-line); border-radius: 10px; }
:is(.article-content, .editor-styles-wrapper) .is-style-cs-figure figcaption {
  font-size: .88em; color: var(--cs-muted); font-style: normal; text-align: left;
  margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--cs-accent);
}

/* ---------- 12. Было → стало (HTML) ---------- */
:is(.article-content, .editor-styles-wrapper) .cs-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--cs-line);
  border: 1px solid var(--cs-line); border-radius: var(--cs-radius); overflow: hidden; margin: 2em 0;
}
:is(.article-content, .editor-styles-wrapper) .cs-metric { background: #fff; padding: 20px 22px; }
:is(.article-content, .editor-styles-wrapper) .cs-metric__label { font-size: 14px; color: var(--cs-muted); margin-bottom: 10px; }
:is(.article-content, .editor-styles-wrapper) .cs-metric__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
:is(.article-content, .editor-styles-wrapper) .cs-metric__from { font-size: 20px; color: var(--cs-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
:is(.article-content, .editor-styles-wrapper) .cs-metric__arrow { color: var(--cs-accent); font-size: 18px; }
:is(.article-content, .editor-styles-wrapper) .cs-metric__to { font-size: 34px; font-weight: 800; line-height: 1; color: var(--cs-ink); }
:is(.article-content, .editor-styles-wrapper) .cs-metric__to small { font-size: 15px; font-weight: 500; color: var(--cs-muted); }
:is(.article-content, .editor-styles-wrapper) .cs-metric--accent { background: var(--cs-accent); }
:is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__label, :is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__from,
:is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__arrow, :is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__to,
:is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__to small { color: #fff; }
:is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__label, :is(.article-content, .editor-styles-wrapper) .cs-metric--accent .cs-metric__from { opacity: .75; }

/* ---------- 13. Паспорт проекта (HTML) ---------- */
:is(.article-content, .editor-styles-wrapper) .cs-passport { border: 1px solid var(--cs-line); border-radius: var(--cs-radius); margin: 2em 0; overflow: hidden; }
:is(.article-content, .editor-styles-wrapper) .cs-passport__title { background: var(--cs-accent-soft); padding: 14px 22px; font-weight: 700; color: var(--cs-ink); }
:is(.article-content, .editor-styles-wrapper) .cs-passport dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; }
:is(.article-content, .editor-styles-wrapper) .cs-passport dt, :is(.article-content, .editor-styles-wrapper) .cs-passport dd { margin: 0; padding: 12px 22px; border-top: 1px solid var(--cs-line); }
:is(.article-content, .editor-styles-wrapper) .cs-passport dt { color: var(--cs-muted); font-size: .92em; font-weight: 400; }
:is(.article-content, .editor-styles-wrapper) .cs-passport dd { color: var(--cs-ink); }

/* ---------- Мобильные ---------- */
@media (max-width: 600px) {
  :is(.article-content, .editor-styles-wrapper) .is-style-cs-insight { padding: 22px; font-size: 1.05em; }
  :is(.article-content, .editor-styles-wrapper) .cs-passport dl { grid-template-columns: 1fr; }
  :is(.article-content, .editor-styles-wrapper) .cs-passport dd { border-top: 0; padding-top: 0; }
  :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage { padding-left: 36px; }
  :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > :is(h2, h3):first-child::before, :is(.article-content, .editor-styles-wrapper) .is-style-cs-stage > .wp-block-group__inner-container > :is(h2, h3):first-child::before { left: -36px; }
}


/* ---------- Форма в сайдбаре статьи ---------- */
.article-right .article-form {
  margin-top: 32px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(29, 42, 107, .08);
}
.article-form__title { margin: 0 0 10px; line-height: 1.15; }
.article-form__text { font-size: 14px; line-height: 1.5; color: #5f6673; margin-bottom: 20px; }
.article-form .modal-input { margin-bottom: 12px; }
.article-form input[type="text"],
.article-form input[type="tel"] { width: 100%; }
.article-form .modal-btn { width: 100%; justify-content: center; }
.article-form .up-label { font-size: 12px; line-height: 1.4; margin-top: 12px; }

@media (max-width: 991px) {
  .article-right .article-form { display: none; }
}


/* ---------- Сайдбар статьи: оглавление + форма ---------- */
.article-right .article-form {
  margin-top: 16px;
  padding: 28px 24px;
  background: #f6f6f7;          /* как у оглавления; при необходимости возьмите цвет из DevTools */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.article-right .article-form__title {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.article-form__text { font-size: 14px; line-height: 1.5; color: #5f6673; margin-bottom: 20px; }
.article-form .modal-input { margin-bottom: 12px; }
.article-form input[type="text"],
.article-form input[type="tel"] { width: 100%; background: #fff; }
.article-form .modal-btn { width: 100%; justify-content: center; }
.article-form .up-label { font-size: 12px; line-height: 1.4; margin-top: 12px; }

@media (max-width: 991px) {
  .article-right .article-form { display: none; }
}

/* Липкая колонка без двойной прокрутки: форма всегда целиком,
   оглавление занимает оставшееся место и прокручивается только его список */
@media (min-width: 1701px) {
  .article-aside {
    position: sticky;
    top: 100px;                         /* подгоните под высоту шапки */
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
  }
  .article-right .article-table {
    position: static;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
  }
  .article-aside .article-table__list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #c9ced8 transparent;
  }
  .article-aside .article-table__list::-webkit-scrollbar { width: 4px; }
  .article-aside .article-table__list::-webkit-scrollbar-thumb { background: #c9ced8; border-radius: 4px; }
  .article-aside .article-form { flex: 0 0 auto; }
}


/* Перенос текста согласия в форме сайдбара */
.article-form .up-label { width: 100%; max-width: 100%; }
.article-form .up-label .wpcf7-form-control-wrap,
.article-form .up-label .wpcf7-list-item {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.article-form .up-label .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.article-form .up-label .wpcf7-list-item-label {
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}