/* Start:/local/templates/wehive.digital/components/bitrix/news.detail/wd_detail/style.css?17847566307183*/
/* wd_detail/style.css — визуальный кит статей блога.
   АДДИТИВНЫЙ файл: Bitrix авто-подключает style.css шаблона компонента на КАЖДОЙ
   детальной странице news.detail (блог + кейсы). Общий шаблон (template.php) не
   трогаем. Классы .wd-art-* живут только тут и применяются внутри HTML-тела статьи
   (свойства WHITE_BLOCK_1..5), которое движок оборачивает в один
   <div class="wd-bg-light wd-content-radius-30"> — светлая база кита.

   Правила ритма (как на /hrm-dlya-riteyla/): светлая база, карточки — белые
   (wd-bg-white) для контраста на светлом, не больше ОДНОГО тёмного акцента на
   статью (wd-bg-dark/darkness), жёлтый — только акцентом. Всё, что можно, берём
   утилитами wd-* и токенами variables.css; тут — только то, чего утилиты не дают.
   Ничего глобального не переопределяем. */

/* ---- Лид (вводный абзац под H1 / в начале блока) ---- */
.wd-art-lead {
    max-width: calc(var(--value) * 72);
    color: var(--black2);
}

/* ---- Иконка-чип на карточках (перенос пары «жёлтое на тёмном» из hero) ----
   Иконки — общий набор /local/templates/wehive.digital/img/article-icons/*.svg
   (нативные line-иконки, залиты var(--yellow) прямо в SVG). Контракт совпадает
   с .lp-ico лендингов, но класс отдельный — кит блога самодостаточен. */
.wd-art-ico {
    display: grid;
    place-items: center;
    width: calc(var(--value) * 5.2);
    height: calc(var(--value) * 5.2);
    margin-bottom: calc(var(--value) * 2);
    border-radius: calc(var(--value) * 1.6);
    background-color: var(--black);
}

.wd-art-ico img {
    width: calc(var(--value) * 2.8);
    height: calc(var(--value) * 2.8);
}

/* ---- Сетка карточек-секций ---- */
/* Сама <ul> — на утилитах wd-list wd-grid wd-grid-tcol--xs wd-grid-tcol-2--s … */
.wd-art-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.wd-art-card .wd-art-card-title {
    display: block;
    margin-bottom: calc(var(--value) * 1.2);
}

.wd-art-card .wd-art-card-text {
    margin: 0;
    color: var(--black2);
}

/* Кликабельная карточка-ссылка (например, на модуль/продукт) — лёгкий hover. */
.wd-art-card-link {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wd-art-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 calc(var(--value) * 1.2) calc(var(--value) * 3) rgb(var(--black-RGB) / 10%);
}

/* ---- Нумерованные шаги (структурный визуал вместо картинки) ---- */
.wd-art-steps {
    display: grid;
    gap: calc(var(--value) * 2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: wd-art-step;
}

.wd-art-step {
    display: grid;
    grid-template-columns: calc(var(--value) * 5.2) 1fr;
    gap: calc(var(--value) * 2);
    align-items: start;
    counter-increment: wd-art-step;
}

.wd-art-step::before {
    content: counter(wd-art-step);
    display: grid;
    place-items: center;
    width: calc(var(--value) * 5.2);
    height: calc(var(--value) * 5.2);
    border-radius: calc(var(--value) * 1.6);
    background-color: var(--black);
    color: var(--yellow);
    font-weight: 600;
    font-size: calc(var(--value) * 2.2);
    line-height: 1;
}

.wd-art-step-title {
    display: block;
    margin-bottom: calc(var(--value) * 0.8);
}

.wd-art-step-text {
    margin: 0;
    color: var(--black2);
}

@media (min-width: 768px) {
    .wd-art-step {
        grid-template-columns: calc(var(--value) * 6) 1fr;
        gap: calc(var(--value) * 3);
    }

    .wd-art-step::before {
        width: calc(var(--value) * 6);
        height: calc(var(--value) * 6);
        font-size: calc(var(--value) * 2.6);
    }
}

/* ---- Врезка-акцент (выделенная мысль) ----
   Белая карточка с жёлтой полосой слева. Не тёмный акцент — его на статью не
   больше одного, и это обычно финальный CTA (даёт шаблон из полей элемента). */
.wd-art-accent {
    border-left: calc(var(--value) * 0.6) solid var(--yellow);
}

.wd-art-accent .wd-art-accent-text {
    margin: 0;
    color: var(--black);
}

/* ---- Картинка с подписью ---- */
.wd-art-figure {
    margin: 0;
}

.wd-art-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.wd-art-figcaption {
    margin-top: calc(var(--value) * 1.2);
    color: var(--black3);
    text-align: center;
}

/* ---- FAQ-аккордеон (тот же визуальный контракт, что .lp-faq / wd-block-details:
   плюс→минус справа, оранжевый штрих, скругление). Реализация CSS-only на
   <details>/<summary>, JS не нужен. Классы отдельные — работают без компонента
   news.list/wd_details. ---- */
.wd-art-faq {
    display: grid;
    gap: calc(var(--value) * 1.5);
}

.wd-art-faq-item {
    /* фон/паддинг/радиус — утилитами wd-bg-white wd-padding-20 wd-radius-30 */
}

.wd-art-faq-summary {
    position: relative;
    display: block;
    padding-right: calc(var(--value) * 4);
    cursor: pointer;
    list-style: none;
}

.wd-art-faq-summary::-webkit-details-marker {
    display: none;
}

.wd-art-faq-summary::marker {
    content: "";
}

.wd-art-faq-summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.wd-art-faq-summary::before,
.wd-art-faq-summary::after {
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: calc(var(--value) * 1.8);
    height: 2px;
    background-color: var(--orange);
    content: "";
}

.wd-art-faq-summary::after {
    top: calc(50% - var(--value) * 0.9);
    right: calc(var(--value) * 0.8);
    width: 2px;
    height: calc(var(--value) * 1.8);
    transition: opacity 0.15s ease;
}

.wd-art-faq-item[open] .wd-art-faq-summary::after {
    opacity: 0;
}

.wd-art-faq-answer {
    margin-top: calc(var(--value) * 1.5);
    padding-top: calc(var(--value) * 1.5);
    border-top: 1px solid rgb(220 220 220 / 80%);
    color: var(--black2);
}

@media (min-width: 768px) {
    .wd-art-faq-summary {
        padding-right: calc(var(--value) * 5);
    }

    .wd-art-faq-summary::before {
        width: calc(var(--value) * 2.6);
    }

    .wd-art-faq-summary::after {
        top: calc(50% - var(--value) * 1.3);
        right: calc(var(--value) * 1.2);
        height: calc(var(--value) * 2.6);
    }
}

/* End */
/* /local/templates/wehive.digital/components/bitrix/news.detail/wd_detail/style.css?17847566307183 */