/*
 * DICOM TEAM — стили блога
 *
 * Подключается через Asset::getInstance()->addCss() только на /blog/ и /blog/<slug>/.
 * См. blog/index.php и blog/detail.php — там добавляются ссылки на этот файл.
 *
 * Содержит:
 *   1. Типографику тела статьи (.blog-article h2/h3/h4/p/ul/ol/a).
 *   2. Поведение карточек в теле — без hover/transform/click-feedback.
 *   3. Стили хлебных крошек (.breadcrumbs).
 */

/* ====== ТЕЛО СТАТЬИ ====== */

.blog-article h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 48px 0 16px;
    color: var(--c-text, #222);
}

.blog-article h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 32px 0 12px;
    color: var(--c-text, #222);
}

.blog-article h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 20px 0 8px;
    color: var(--c-text, #222);
}

.blog-article p {
    margin: 0 0 16px;
}

.blog-article ul,
.blog-article ol {
    margin: 16px 0 24px;
    padding-left: 24px;
}

.blog-article li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.blog-article a {
    color: var(--c-accent, #ff6b35);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-article a:hover {
    text-decoration: none;
}

/* Чтобы card/process/accordion не наследовали margin абзаца */
.blog-article .card p,
.blog-article .process p,
.blog-article .accordion p {
    margin: 0 0 8px;
}

.blog-article .card,
.blog-article .process,
.blog-article .accordion {
    margin-bottom: 32px;
}

/* Нумерованные шаги в process — отдельная разметка, не как обычный <ol> */
.blog-article ol.process {
    padding-left: 0;
}

.blog-article ol.process li {
    list-style: none;
}


/* ====== КАРТОЧКИ В ТЕЛЕ СТАТЬИ — НЕкликабельные ====== */

/*
 * В шаблоне .card на других страницах часто оборачивает <a> и имеет
 * cursor:pointer + hover-transform + декоративную полоску ::before которая
 * расширяется на hover. В статье карточки — просто информационные блоки,
 * визуальное поведение клика и декорация лишние.
 */
.blog-article .card,
.blog-article .card:hover,
.blog-article .card:focus {
    cursor: default;
    transform: none;
    transition: none;
    box-shadow: none;
}

.blog-article .card::before,
.blog-article .card:hover::before {
    display: none;
}

.blog-article .card .card__arrow {
    display: none;
}


/* ====== ХЛЕБНЫЕ КРОШКИ ====== */

.breadcrumbs {
    /* Выравнивание по сетке секций сайта:
       секция использует margin: ... var(--gutter-h) и padding: ... var(--gutter).
       Дублируем, чтобы крошки начинались строго над левой границей контента. */
    margin: 0 var(--gutter-h);
    padding: 32px var(--gutter) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.breadcrumbs a {
    color: var(--c-text-muted, #888);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs a:hover {
    color: var(--c-accent, #ff6b35);
}

.breadcrumbs__sep {
    margin: 0 10px;
    color: var(--c-line, #ccc);
}

.breadcrumbs__current {
    color: var(--c-text, #222);
    font-weight: 500;
}