/* Оформление SEO-текстов на страницах услуг: компоненты .sc-* внутри .seo-content.
   Подключается в single-services.php. Размеры в rem темы: 1rem = 1px при ширине 1920 (десктоп) и 360 (мобильный). */

.seo-content__container:has(> .sc) { max-width: none; }

.sc { display: flex; flex-direction: column; gap: 64rem; color: var(--neutral-neutral700); }
.sc p, .sc li { font-size: 17rem; line-height: 155%; overflow-wrap: break-word; }
.sc > p, .sc-block > p { max-width: 1000rem; }
.sc strong { font-weight: 600; color: var(--neutral-neutral800); }
.sc a { color: var(--primary650); text-decoration: underline; text-decoration-thickness: 1rem; text-underline-offset: 3rem; }
.seo-content .sc h2 { margin-bottom: 0; }
.seo-content .sc h3 { font-size: 24rem; line-height: 125%; letter-spacing: 0; }

/* сбрасываем стандартные маркеры темы у наших списков */
.seo-content .sc ul, .seo-content .sc ol { gap: 0; padding: 0; list-style: none; }
.seo-content .sc ul li { margin-left: 0; }
.seo-content .sc ul li::before { content: none; }

.sc-lead { max-width: 1000rem; }
.sc .sc-lead { font-size: 20rem; line-height: 150%; color: var(--neutral-neutral800); }
.sc-block { display: flex; flex-direction: column; gap: 24rem; }

/* Выноска */
.sc-note { padding: 28rem 32rem; border-radius: 20rem; border-left: 4rem solid var(--primary650); background: var(--primary50); }
.sc-note--warm { border-left-color: var(--secondary400); background: #fff4ec; }

/* Карточки */
.sc-card { display: flex; flex-direction: column; gap: 16rem; padding: 32rem; border-radius: 20rem; background: var(--neutral-neutral50); }
.sc-card--warm { background: #fff4ec; }
.sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16rem; }
.sc-type:nth-child(-n+2) { background: var(--primary50); }
.sc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rem; }
.sc-grid-3 > .sc-type { background: var(--primary50); }

/* Список с галочками — плитки в две колонки */
.seo-content .sc ul.sc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12rem; }
.seo-content .sc .sc-checks li { position: relative; padding: 18rem 22rem 18rem 60rem; border-radius: 15rem; background: var(--neutral-neutral50); }
.seo-content .sc .sc-checks li::before { content: ""; position: absolute; left: 22rem; top: 19rem; width: 24rem; height: 24rem; border-radius: 50%; background: var(--primary650); }
.seo-content .sc .sc-checks li::after { content: ""; position: absolute; left: 31rem; top: 24rem; width: 6rem; height: 11rem; border: solid var(--neutral-white); border-width: 0 2rem 2rem 0; transform: rotate(45deg); }
.sc-label { font-weight: 600; color: var(--neutral-neutral800); }

/* Список-предупреждение */
.seo-content .sc ul.sc-warn { display: flex; flex-direction: column; gap: 12rem; }
.seo-content .sc .sc-warn li { position: relative; padding-left: 40rem; }
.seo-content .sc .sc-warn li::before { content: "!"; position: absolute; left: 0; top: 1rem; width: 26rem; height: 26rem; border-radius: 50%; background: var(--secondary400); color: var(--neutral-white); font-size: 15rem; font-weight: 700; line-height: 26rem; text-align: center; }

/* Маленький маркированный список внутри карточки */
.seo-content .sc ul.sc-dots { display: flex; flex-direction: column; gap: 8rem; }
.seo-content .sc .sc-dots li { position: relative; padding-left: 20rem; }
.seo-content .sc .sc-dots li::before { content: ""; position: absolute; left: 0; top: 11rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--primary650); }

/* Сравнение: три карточки, средняя выделена */
.seo-content .sc ul.sc-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rem; }
.seo-content .sc .sc-compare li { padding: 28rem; border-radius: 20rem; background: var(--neutral-neutral50); }
.seo-content .sc .sc-compare li:nth-child(2) { background: var(--primary650); color: var(--neutral-white); }
.seo-content .sc .sc-compare li:nth-child(2) .sc-label,
.seo-content .sc .sc-compare li:nth-child(2) a,
.seo-content .sc .sc-compare li:nth-child(2) strong { color: var(--neutral-white); }

/* Плитки с иконкой зуба */
.seo-content .sc ul.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rem; }
.seo-content .sc .sc-tiles li { display: block; padding: 28rem; border: 1rem solid var(--neutral-neutral100); border-radius: 20rem; background: var(--neutral-white); }
.seo-content .sc .sc-tiles li::before { content: ""; position: static; display: block; margin-bottom: 16rem; width: 48rem; height: 48rem; border-radius: 50%; background: var(--primary50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7347' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M7 3C4.8 3 3 4.8 3 7.2c0 2 .7 3.3 1.4 4.6.6 1.2 1 2.6 1.2 4.3l.5 3.6c.1.8.8 1.3 1.5 1.3s1.3-.5 1.4-1.2l.7-3.8c.2-.9.8-1.5 1.3-1.5h1c.5 0 1.1.6 1.3 1.5l.7 3.8c.1.7.7 1.2 1.4 1.2s1.4-.5 1.5-1.3l.5-3.6c.2-1.7.6-3.1 1.2-4.3.7-1.3 1.4-2.6 1.4-4.6C21 4.8 19.2 3 17 3c-1.6 0-2.6.7-3.5 1.2-.5.3-1 .5-1.5.5s-1-.2-1.5-.5C9.6 3.7 8.6 3 7 3z'/%3E%3C/svg%3E") center / 24rem no-repeat; }

/* Преимущества: крупные номера */
.seo-content .sc ul.sc-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rem; counter-reset: sc-benefit; }
.seo-content .sc .sc-benefits li { counter-increment: sc-benefit; position: relative; display: block; padding: 28rem; border-radius: 20rem; background: var(--neutral-neutral50); }
.seo-content .sc .sc-benefits li::before { content: "0" counter(sc-benefit); position: static; display: block; width: auto; height: auto; margin-bottom: 14rem; border-radius: 0; background: none; font-size: 40rem; font-weight: 500; line-height: 1; color: var(--primary650); }

/* Акцентная карточка (безопасность) */
.sc-accent { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12rem; padding: 36rem 120rem 36rem 40rem; border-radius: 20rem; background: var(--primary650); }
.sc-note { display: flex; flex-direction: column; gap: 12rem; }
.sc-accent::after { content: ""; position: absolute; right: 32rem; top: 50%; width: 64rem; height: 64rem; transform: translateY(-50%); opacity: .35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.sc .sc-accent p { color: var(--primary100); }
.sc .sc-accent a, .sc .sc-accent strong { color: var(--neutral-white); }

/* Этапы */
.seo-content .sc ol.sc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rem; counter-reset: sc-step; }
/* li — блок, а не flex: иначе ссылки и <strong> внутри шага становятся отдельными flex-элементами и текст рвётся */
.seo-content .sc .sc-steps li { counter-increment: sc-step; display: block; padding: 28rem 24rem; border-radius: 20rem; background: var(--neutral-neutral50); }
.seo-content .sc .sc-steps li::before { content: counter(sc-step); display: flex; align-items: center; justify-content: center; width: 44rem; height: 44rem; margin-bottom: 16rem; border-radius: 50%; background: var(--primary650); color: var(--neutral-white); font-size: 18rem; font-weight: 600; }

/* Этапы: вариант на 3 колонки и с заголовком H3 внутри шага */
.seo-content .sc ol.sc-steps--3 { grid-template-columns: repeat(3, 1fr); }
.seo-content .sc ol.sc-steps--2 { grid-template-columns: repeat(2, 1fr); }
.seo-content .sc .sc-steps--rich li { display: flex; flex-direction: column; gap: 16rem; }
.seo-content .sc .sc-steps--rich li::before { margin-bottom: 0; }
.seo-content .sc .sc-steps--rich li h3 { margin: 0; font-size: 20rem; }
.seo-content .sc .sc-steps--rich li p { margin: 0; }

/* Призыв к записи */
.sc-cta { display: flex; flex-direction: column; gap: 18rem; padding: 44rem 48rem; border-radius: 24rem; background: linear-gradient(135deg, var(--primary650), var(--primary800)); }
.seo-content .sc .sc-cta h2 { color: var(--neutral-white); }
.sc .sc-cta p { max-width: 1000rem; color: var(--primary100); }
.sc .sc-cta a, .sc .sc-cta strong { color: var(--neutral-white); font-weight: 600; }
.sc .sc-cta .sc-cta__title { font-size: 30rem; font-weight: 500; line-height: 120%; color: var(--neutral-white); }
.sc-cta__actions { display: flex; flex-wrap: wrap; gap: 12rem; margin-top: 6rem; }
.sc .sc-cta .sc-cta__actions .button { color: var(--primary650); text-decoration: none; }
.sc-cta--inline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16rem 32rem; padding: 28rem 36rem; }
.sc-cta--inline .sc-cta__actions { margin-top: 0; }

/* Картинка-инфографика: обычная (до 1000rem) и широкая (на всю ширину, для баннеров от 2.4:1) */
.sc-figure { max-width: 1000rem; margin: 0; }
.sc-figure--wide { max-width: none; }
.seo-content .sc .sc-figure img { display: block; width: 100%; height: auto; border-radius: 20rem; }
.sc-figure figcaption { margin-top: 10rem; font-size: 15rem; line-height: 140%; color: var(--neutral-neutral500); }

/* Таблица сравнения */
.sc-table { overflow-x: auto; border: 1rem solid var(--neutral-neutral100); border-radius: 20rem; background: var(--neutral-white); }
.sc-table table { width: 100%; border-collapse: collapse; }
.sc-table th, .sc-table td { padding: 16rem 20rem; font-size: 17rem; line-height: 140%; text-align: left; vertical-align: top; border-bottom: 1rem solid var(--neutral-neutral100); }
.sc-table th + th, .sc-table td + td { border-left: 1rem solid var(--neutral-neutral100); }
.sc-table th { background: var(--primary50); color: var(--primary650); font-weight: 600; }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table .sc-yes, .sc-table .sc-no, .sc-table .sc-part { font-weight: 700; }
.sc-table .sc-yes { color: var(--primary650); }
.sc-table .sc-no { color: var(--secondary400); }
.sc-table .sc-part { color: var(--neutral-neutral500); }

@media (max-width: 768px) {
  .sc { gap: 40rem; }
  .sc p, .sc li { font-size: 15rem; line-height: 150%; }
  .sc .sc-lead { font-size: 16rem; }
  .sc-block { gap: 16rem; }
  .seo-content .sc h3 { font-size: 20rem; }

  .sc-note { padding: 18rem 20rem; border-radius: 15rem; }
  .sc-card { gap: 12rem; padding: 20rem; border-radius: 15rem; }
  .sc-grid-2,
  .sc-grid-3,
  .seo-content .sc ul.sc-checks,
  .seo-content .sc ul.sc-compare,
  .seo-content .sc ul.sc-tiles,
  .seo-content .sc ul.sc-benefits,
  .seo-content .sc ol.sc-steps { grid-template-columns: minmax(0, 1fr); gap: 10rem; }

  .seo-content .sc .sc-checks li { padding: 14rem 16rem 14rem 50rem; }
  .seo-content .sc .sc-checks li::before { left: 16rem; top: 15rem; width: 22rem; height: 22rem; }
  .seo-content .sc .sc-checks li::after { left: 24rem; top: 19.5rem; width: 5.5rem; height: 10rem; }
  .seo-content .sc .sc-warn li { padding-left: 34rem; }
  .seo-content .sc .sc-warn li::before { width: 22rem; height: 22rem; line-height: 22rem; font-size: 13rem; }
  .seo-content .sc .sc-dots li::before { top: 9rem; }

  .seo-content .sc .sc-compare li,
  .seo-content .sc .sc-tiles li,
  .seo-content .sc .sc-benefits li { padding: 20rem; border-radius: 15rem; }
  .seo-content .sc .sc-tiles li { position: relative; padding: 18rem 18rem 18rem 72rem; }
  .seo-content .sc .sc-tiles li::before { position: absolute; left: 18rem; top: 50%; margin: 0; width: 40rem; height: 40rem; transform: translateY(-50%); background-size: 20rem; }
  .seo-content .sc .sc-benefits li { padding: 18rem 18rem 18rem 64rem; }
  .seo-content .sc .sc-benefits li::before { position: absolute; left: 18rem; top: 18rem; margin: 0; font-size: 26rem; }

  .sc-accent { padding: 22rem 20rem 70rem; border-radius: 15rem; }
  .sc-accent::after { right: 20rem; top: auto; bottom: 16rem; width: 40rem; height: 40rem; transform: none; }

  .seo-content .sc .sc-steps li { position: relative; min-height: 66rem; padding: 16rem 16rem 16rem 64rem; border-radius: 15rem; }
  .seo-content .sc .sc-steps li::before { position: absolute; left: 16rem; top: 14rem; width: 34rem; height: 34rem; margin: 0; font-size: 15rem; }

  .seo-content .sc .sc-steps--rich li { align-items: flex-start; gap: 10rem; min-height: 0; padding: 16rem; }
  .seo-content .sc .sc-steps--rich li::before { position: static; }
  .seo-content .sc .sc-steps--rich li h3 { font-size: 17rem; }

  .sc-cta { gap: 12rem; padding: 24rem 20rem; border-radius: 15rem; }
  .sc .sc-cta .sc-cta__title { font-size: 20rem; }
  .sc-cta--inline { flex-direction: column; align-items: stretch; padding: 20rem; }
  .sc-cta__actions .button { width: 100%; }

  .seo-content .sc .sc-figure img { border-radius: 15rem; }
  .sc-figure figcaption { font-size: 13rem; }
  .sc-table { border-radius: 15rem; }
  .sc-table table { min-width: 480rem; }
  .sc-table th, .sc-table td { padding: 10rem 12rem; font-size: 14rem; }
}