/* ============================================================================
   CDS-PROSE · SSOT-типографика контентных страниц credos.ru
   ----------------------------------------------------------------------------
   Задача владельца 2026-07-24: «типографику как в /articles-info/ сделать
   стандартом по сайту». Файл — единый слой для ТЕЛА контента (DETAIL_TEXT)
   инфоблоков: ИБ-16 новости, ИБ-31 База знаний, далее ИБ-17/30.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ credos-ds.css:
   credos-ds.css задаёт типошкалу --fs-* в rem, а сайт держит html{font-size:10px}
   (main_styles.css:2705) → --fs-base:1.0625rem = 10.6px вместо 17px. Поэтому лонгрид
   Базы знаний локально переопределял шкалу в px внутри шаблона. Здесь эта px-шкала
   вынесена в один файл и переведена на канон --ds-* (SSOT: main_styles :root ~17694,
   зеркало docs/design-system/tokens.css). Плейбук #26: в контенте только px.

   ПРАВИЛА (impeccable):
   · без side-stripe (border-left/right >1px как акцент), без gradient-text, без glassmorphism
   · контраст ≥4.5:1 (AA): текст --ds-text/--ds-ink на белом, --ds-muted только для вторички ≥15px
   · интерактив ≥44px по высоте касания
   · нет rem: html{font-size:10px} (плейбук #26)

   ПОДКЛЮЧЕНИЕ: <link> в шаблоне news.detail + обёртка <div class="cds-prose"> вокруг DETAIL_TEXT.
   ============================================================================ */

.cds-prose {
    /* локальная шкала лонгрида (px, от канона --ds-fs-*) */
    --prose-fs: var(--ds-fs-md, 18px);      /* базовый текст */
    --prose-fs-lead: var(--ds-fs-lg, 20px); /* лид-абзац */
    --prose-fs-sm: var(--ds-fs-sm, 14px);
    --prose-h2: var(--ds-fs-2xl, 30px);
    --prose-h3: var(--ds-fs-xl, 24px);
    --prose-h4: var(--ds-fs-lg, 20px);
    --prose-lh: 1.75;                        /* воздух лонгрида (плотнее у списков/таблиц) */
    --prose-maxw: 900px;                     /* колонка чтения ~72ch (--ds-maxw-text) */

    max-width: var(--prose-maxw);
    font-size: var(--prose-fs);
    line-height: var(--prose-lh);
    color: var(--ds-text, #212529);
}

.cds-prose > *:first-child { margin-top: 0; }
.cds-prose > *:last-child { margin-bottom: 0; }

/* ── Абзацы ─────────────────────────────────────────────────────────────── */
.cds-prose p {
    font-size: var(--prose-fs);
    line-height: var(--prose-lh);
    margin: 0 0 var(--ds-sp-5, 20px);
}
/* лид — первый абзац крупнее (вход в текст) */
.cds-prose > p:first-of-type {
    font-size: var(--prose-fs-lead);
    line-height: 1.65;
    color: var(--ds-ink, #0a225e);
}
.cds-prose strong, .cds-prose b { font-weight: var(--ds-fw-bold, 700); color: var(--ds-ink, #0a225e); }

/* ── Заголовки ──────────────────────────────────────────────────────────── */
/* !important — сайтовый main_styles задаёт .news-text h2 (36px + cyan-бар ::before);
   в теле лонгрида нужна спокойная иерархия без декоративной полосы. */
.cds-prose h2 {
    font-size: var(--prose-h2) !important;
    line-height: 1.25 !important;
    font-weight: var(--ds-fw-bold, 700) !important;
    color: var(--ds-ink, #0a225e) !important;
    margin: var(--ds-sp-12, 48px) 0 var(--ds-sp-4, 16px) !important;
    text-align: left !important;
}
.cds-prose h2::before, .cds-prose h2::after { content: none !important; display: none !important; }
.cds-prose h3 {
    font-size: var(--prose-h3);
    line-height: 1.3;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
    margin: var(--ds-sp-10, 40px) 0 var(--ds-sp-3, 12px);
}
.cds-prose h4 {
    font-size: var(--prose-h4);
    line-height: 1.35;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
    margin: var(--ds-sp-8, 32px) 0 var(--ds-sp-2, 8px);
}

/* нумерация разделов 01/02 — модификатор (лонгрид-гайд), по умолчанию выключена */
.cds-prose--numbered { counter-reset: prose-h2; }
.cds-prose--numbered h2 { counter-increment: prose-h2; }
.cds-prose--numbered h2::before {
    content: counter(prose-h2, decimal-leading-zero) !important;
    display: inline !important;
    /* сброс сайтового .news-text h2::before (декоративный cyan-бар 48.5×2px) — иначе номер
       рендерится на голубой плашке внутри 2px-бокса */
    width: auto !important;
    height: auto !important;
    background: none !important;
    line-height: inherit !important;
    margin: 0 .5em 0 0 !important;
    font-size: .7em !important;
    font-weight: var(--ds-fw-bold, 700) !important;
    letter-spacing: .04em;
    color: var(--ds-cyan-deep, #0a87b8) !important;   /* AA на белом: 3.9:1 при 21px+ bold — крупный текст */
    vertical-align: baseline !important;
}

/* ── Ссылки ─────────────────────────────────────────────────────────────── */
.cds-prose a {
    color: var(--ds-cyan-deep, #0a87b8);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.cds-prose a:hover { text-decoration-thickness: 2px; }
.cds-prose a:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 2px; border-radius: var(--ds-r-sm, 4px); }

/* ── Списки ─────────────────────────────────────────────────────────────── */
.cds-prose ul { margin: 0 0 var(--ds-sp-5, 20px); padding: 0; list-style: none; }
.cds-prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: var(--ds-sp-3, 12px);
    font-size: var(--prose-fs);
    line-height: 1.7;
}
.cds-prose ul li::before {
    content: "";
    position: absolute;
    left: 5px; top: 11px;
    width: 7px; height: 7px;
    border: 0;                      /* сайтовый .news-text li::before — «галочка» из бордеров, гасим */
    border-radius: 2px;
    background: var(--ds-cyan, #00bef3);
    transform: rotate(45deg);
    margin: 0;
}
.cds-prose ol { margin: 0 0 var(--ds-sp-5, 20px); padding-left: 22px; }
.cds-prose ol li {
    margin-bottom: var(--ds-sp-3, 12px);
    padding-left: 6px;
    font-size: var(--prose-fs);
    line-height: 1.7;
}
.cds-prose ol li::marker { color: var(--ds-cyan-deep, #0a87b8); font-weight: var(--ds-fw-bold, 700); }
.cds-prose li > ul, .cds-prose li > ol { margin-top: var(--ds-sp-3, 12px); }

/* ── Цитата ─────────────────────────────────────────────────────────────── */
.cds-prose blockquote {
    margin: var(--ds-sp-6, 24px) 0;
    padding: var(--ds-sp-5, 20px) var(--ds-sp-6, 24px);
    background: var(--ds-tint-soft, #f7fbfd);
    border: 1px solid var(--ds-line-cyan, #d4e9f5);
    border-radius: var(--ds-r-lg, 12px);
    font-size: var(--prose-fs-lead);
    line-height: 1.6;
    color: var(--ds-ink, #0a225e);
}
.cds-prose blockquote p { font-size: inherit; color: inherit; margin: 0; }

/* ── Таблицы ────────────────────────────────────────────────────────────── */
/* Обёртка .cds-prose__tablewrap даёт горизонтальный скролл на узких экранах
   (MOBILE-LAYOUT класс дефекта №1: голая таблица распирает документ). */
.cds-prose__tablewrap {
    margin: var(--ds-sp-6, 24px) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ds-r-lg, 12px);
    /* Подсказка «таблица прокручивается»: тень у края, пока есть непоказанная часть.
       Слои `local` (белые заглушки) едут вместе с контентом и гасят тень у достигнутого края —
       без JS. Иначе пользователь мобильного видит обрез и думает, что колонка потеряна. */
    background:
        linear-gradient(to right, var(--ds-paper, #fff) 30%, rgba(255,255,255,0)) left center / 34px 100% no-repeat local,
        linear-gradient(to left,  var(--ds-paper, #fff) 30%, rgba(255,255,255,0)) right center / 34px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(10,34,94,.16), rgba(10,34,94,0)) left center / 16px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(10,34,94,.16), rgba(10,34,94,0)) right center / 16px 100% no-repeat scroll;
}
.cds-prose__tablewrap > table { margin: 0 !important; }
/* внутри обёртки таблица держит свою ширину — иначе схлопнется до вьюпорта и текст встанет столбиком */
.cds-prose__tablewrap > table { min-width: 560px; }
.cds-prose__tablewrap > table.cds-table--dl { min-width: 0; }
.cds-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ds-sp-6, 24px) 0;
    font-size: var(--ds-fs-base, 16px);
    line-height: 1.55;
    background: var(--ds-paper, #fff);
    border-radius: var(--ds-r-lg, 12px);
    overflow: hidden;                                  /* скругление внутренних ячеек */
    box-shadow: 0 0 0 1px var(--ds-line, #e3e3e3);     /* хейрлайн-рамка без двойных границ */
}
.cds-prose table th {
    background: var(--ds-ink, #0a225e);
    color: var(--ds-paper, #fff);
    text-align: left;
    padding: 13px 16px;
    font-weight: var(--ds-fw-semibold, 600);
}
.cds-prose table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--ds-line, #e3e3e3);
    vertical-align: top;
}
.cds-prose table tr:last-child td { border-bottom: none; }
.cds-prose table tbody tr:nth-child(even) td { background: var(--ds-tint-soft, #f7fbfd); }

/* Таблица-справочник «термин → значение» без шапки (напр. «Ключевые даты»):
   левая колонка = ключ (navy, semibold), фиксированная доля ширины. */
.cds-prose .cds-table--dl td:first-child {
    width: 34%;
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e);
    background: var(--ds-soft, #f5f8fb);
}
.cds-prose .cds-table--dl tbody tr:nth-child(even) td:first-child { background: var(--ds-soft, #f5f8fb); }

/* ── Плашка-примечание ──────────────────────────────────────────────────── */
.cds-prose .cds-note {
    margin: var(--ds-sp-6, 24px) 0;
    padding: var(--ds-sp-5, 20px) var(--ds-sp-6, 24px);
    background: var(--ds-soft, #f5f8fb);
    border: 1px solid var(--ds-line, #e3e3e3);
    border-radius: var(--ds-r-lg, 12px);
    font-size: var(--ds-fs-base, 16px);
    line-height: var(--ds-lh-base, 1.6);
}
.cds-prose .cds-note p:last-child { margin-bottom: 0; }
.cds-prose .cds-note--accent { background: var(--ds-tint-soft, #f7fbfd); border-color: var(--ds-line-cyan, #d4e9f5); }

/* ── Изображение с подписью ─────────────────────────────────────────────── */
.cds-prose figure { margin: var(--ds-sp-6, 24px) 0; }
.cds-prose figure img { display: block; width: 100%; height: auto; border-radius: var(--ds-r-lg, 12px); }
.cds-prose figcaption { margin-top: var(--ds-sp-3, 12px); font-size: var(--ds-fs-sm, 14px); line-height: 1.5; color: var(--ds-muted, #5a6470); }

/* ── FAQ (native details, без JS) ───────────────────────────────────────── */
.cds-prose .cds-faq { margin: var(--ds-sp-10, 40px) 0 var(--ds-sp-6, 24px); }
.cds-prose .cds-faq__title {
    margin: 0 0 var(--ds-sp-4, 16px);
    font-size: var(--prose-h3);
    font-weight: var(--ds-fw-bold, 700);
    line-height: 1.25;
    color: var(--ds-ink, #0a225e);
}
.cds-prose .cds-faq__item {
    margin: var(--ds-sp-3, 12px) 0;
    border: 1px solid var(--ds-line, #e3e3e3);
    border-radius: var(--ds-r-lg, 12px);
    background: var(--ds-paper, #fff);
    overflow: hidden;
}
.cds-prose .cds-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-4, 16px);
    min-height: 56px;                       /* тач-таргет */
    padding: var(--ds-sp-4, 16px) var(--ds-sp-5, 20px);
    cursor: pointer;
    font-size: var(--ds-fs-base, 16px);
    font-weight: var(--ds-fw-semibold, 600);
    line-height: 1.4;
    color: var(--ds-ink, #0a225e);
    list-style: none;
}
.cds-prose .cds-faq__q::-webkit-details-marker { display: none; }
.cds-prose .cds-faq__q::after {
    content: "";
    flex: 0 0 10px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--ds-cyan, #00bef3);
    border-bottom: 2px solid var(--ds-cyan, #00bef3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.cds-prose .cds-faq__item[open] .cds-faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.cds-prose .cds-faq__item[open] .cds-faq__q { color: var(--ds-cyan-deep, #0a87b8); }
.cds-prose .cds-faq__q:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: -3px; }
.cds-prose .cds-faq__a { padding: 0 var(--ds-sp-5, 20px) var(--ds-sp-5, 20px); }
.cds-prose .cds-faq__a p { margin: 0; font-size: var(--ds-fs-base, 16px); line-height: var(--ds-lh-base, 1.6); color: var(--ds-text, #212529); }

/* ── «Читайте также» — карточки перелинковки ────────────────────────────── */
/* 🔴 Фикс 24.07: в 22 телах ИБ-16/31 этот блок был свёрстан инлайн-стилями в rem
   (1.35rem заголовок, 1.04rem описание) → при html{font-size:10px} рендерился
   13.5px/10.4px = «мелковато» (замечание владельца). Классы + px. */
.cds-prose .cds-related { margin: var(--ds-sp-12, 48px) 0 var(--ds-sp-8, 32px); }
.cds-prose .cds-related__title {
    margin: 0 0 var(--ds-sp-5, 20px);
    font-size: var(--prose-h3);
    font-weight: var(--ds-fw-bold, 700);
    line-height: 1.25;
    color: var(--ds-ink, #0a225e);
}
.cds-prose .cds-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ds-sp-4, 16px);
}
.cds-prose .cds-related__card {
    display: block;
    padding: var(--ds-sp-5, 20px) var(--ds-sp-6, 24px);
    background: var(--ds-paper, #fff);
    border: 1px solid var(--ds-line, #e3e3e3);
    border-radius: var(--ds-r-lg, 12px);
    text-decoration: none !important;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cds-prose .cds-related__card:hover {
    border-color: var(--ds-cyan, #00bef3);
    box-shadow: var(--ds-sh-card-hover, 0 8px 24px rgba(0,190,243,.12));
    transform: translateY(-2px);
}
.cds-prose .cds-related__card:focus-visible { outline: 3px solid var(--ds-cyan, #00bef3); outline-offset: 2px; }
.cds-prose .cds-related__name {
    display: block;
    margin-bottom: var(--ds-sp-2, 8px);
    font-size: var(--ds-fs-md, 18px);
    font-weight: var(--ds-fw-semibold, 600);
    line-height: 1.3;
    color: var(--ds-ink, #0a225e);
}
.cds-prose .cds-related__desc {
    display: block;
    font-size: var(--ds-fs-base, 16px);
    line-height: 1.5;
    color: var(--ds-muted, #5a6470);
}
.cds-prose .cds-related__desc::after {
    content: "→";
    margin-left: 6px;
    color: var(--ds-cyan-deep, #0a87b8);
    font-weight: var(--ds-fw-semibold, 600);
    transition: margin-left .2s;
}
.cds-prose .cds-related__card:hover .cds-related__desc::after { margin-left: 10px; }

/* ── CTA-блок в теле контента ───────────────────────────────────────────── */
/* Единый призыв внутри статьи/новости. `.news-cta` — исторический алиас (тела ИБ-16,
   созданные до 24.07): держим оба селектора, чтобы не переписывать разметку задним числом. */
.cds-prose .cds-cta,
.cds-prose .news-cta {
    display: flex;
    gap: var(--ds-sp-6, 24px);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: var(--ds-sp-10, 40px) 0;
    padding: var(--ds-sp-6, 24px) var(--ds-sp-8, 32px);
    background: var(--ds-tint, #e6f0f8);
    border: 1px solid var(--ds-line-cyan, #d4e9f5);
    border-radius: var(--ds-r-lg, 12px);
}
.cds-prose .cds-cta__text, .cds-prose .news-cta__text { flex: 1 1 320px; min-width: 0; }
.cds-prose .cds-cta__title, .cds-prose .news-cta__title {
    margin: 0 0 var(--ds-sp-2, 8px);
    font-size: var(--ds-fs-lg, 20px);
    font-weight: var(--ds-fw-semibold, 600);
    line-height: 1.3;
    color: var(--ds-ink, #0a225e);
}
.cds-prose .cds-cta__sub, .cds-prose .news-cta__sub {
    margin: 0;
    font-size: var(--ds-fs-base, 16px);
    line-height: var(--ds-lh-base, 1.6);
    color: var(--ds-muted, #5a6470);
}
.cds-prose .cds-cta__btn, .cds-prose .news-cta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--ds-sp-8, 32px);
    font-size: var(--ds-fs-base, 16px);
    font-weight: var(--ds-fw-semibold, 600);
    color: var(--ds-ink, #0a225e) !important;
    text-decoration: none !important;
    background: var(--ds-cyan, #00bef3);
    border-radius: var(--ds-r-md, 8px);
    white-space: nowrap;
    transition: filter .2s, box-shadow .2s;
}
.cds-prose .cds-cta__btn:hover, .cds-prose .news-cta__btn:hover { filter: brightness(1.06); box-shadow: var(--ds-sh-card-hover, 0 8px 24px rgba(0,190,243,.12)); }
.cds-prose .cds-cta__btn:focus-visible, .cds-prose .news-cta__btn:focus-visible { outline: 3px solid var(--ds-cyan-deep, #0a87b8); outline-offset: 2px; }

/* ── Мобильная адаптация (MOBILE-LAYOUT §4) ─────────────────────────────── */
@media (max-width: 767px) {
    .cds-prose {
        --prose-fs: 17px;
        --prose-fs-lead: 18px;
        --prose-h2: var(--ds-fs-xl, 24px);
        --prose-h3: var(--ds-fs-lg, 20px);
        --prose-h4: var(--ds-fs-md, 18px);
        --prose-lh: 1.65;
    }
    .cds-prose h2 { margin-top: var(--ds-sp-10, 40px) !important; }
    /* таблица-справочник схлопывается в пары строк — вместо горизонтального скролла */
    .cds-prose .cds-table--dl,
    .cds-prose .cds-table--dl tbody,
    .cds-prose .cds-table--dl tr,
    .cds-prose .cds-table--dl td { display: block; width: auto; }
    .cds-prose .cds-table--dl tr { border-bottom: 1px solid var(--ds-line, #e3e3e3); }
    .cds-prose .cds-table--dl tr:last-child { border-bottom: none; }
    .cds-prose .cds-table--dl td { border-bottom: none; padding: 12px 16px 4px; }
    .cds-prose .cds-table--dl td:last-child { padding: 0 16px 14px; }
    .cds-prose .cds-table--dl td:first-child { width: auto; background: transparent; }
    .cds-prose .cds-related__card { padding: var(--ds-sp-4, 16px) var(--ds-sp-5, 20px); }
    .cds-prose .cds-cta, .cds-prose .news-cta { flex-direction: column; align-items: stretch; padding: var(--ds-sp-5, 20px); }
    /* в column flex-basis:320px становится ВЫСОТОЙ → 320px пустоты (баг пойман на карточке НПА 25.07) */
    .cds-prose .cds-cta__text, .cds-prose .news-cta__text { flex-basis: auto; }
    .cds-prose .cds-cta__btn, .cds-prose .news-cta__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cds-prose .cds-related__card,
    .cds-prose .cds-related__desc::after,
    .cds-prose .cds-faq__q::after { transition: none; }
    .cds-prose .cds-related__card:hover { transform: none; }
}