/* Start:/local/templates/telsis/components/bitrix/news/napravleniya/bitrix/news.detail/.default/style.css?179309094923403*/
/* ======================================================================
   ДЕТАЛЬНАЯ СТРАНИЦА НАПРАВЛЕНИЯ — общий шаблон (ТЗ от 23.10.2026, макет на примере Convia)
   Классы с префиксом dir-. Цвета направления — переменные на .dir-page (template.php,
   local/php_interface/napravleniya/view.php): --dir-accent, --dir-accent-muted (подписи на светлом),
   --dir-accent-light (номера на тёмном), --dir-on-accent (текст на фирменном).
   Размеры в rem, как на остальном сайте: 1rem = 16px макета 1920, масштабируются с корневым шрифтом.
   Отступы и кегли — токены styles.css (--section-gap, --title-gap, --fs-h2, --btn-m-* …).
   Шрифты — только шкала сайта (14/20 … 48/56), жирность 400 и 600 (ТЗ от 23.10.2026, «как на всём сайте»);
   единственное исключение — название направления в баннере, 72 по макету. Подписи фактов, «О направлении»
   и «Контакты» — общие .case-fact__label / .case-fact__value (styles/components/cases/sidebar.css),
   как «Ключевые факты» на странице решения. Заголовки и значения на светлом — #1E2939, как на главной.
   ====================================================================== */

.dir-page {
    --dir-accent: #FF7F1F;
    --dir-accent-muted: #C2410C;
    --dir-accent-light: #FF7F1F;
    --dir-on-accent: #101828;
    --dir-cream: #F9F6EF;
    font-family: var(--font-family);
    color: #1E2939;
    background: #FFFFFF;
    overflow-x: hidden;
}

.dir-page *,
.dir-page *::before,
.dir-page *::after {
    box-sizing: border-box;
}

.dir-page a {
    text-decoration: none;
}

.dir-page img {
    display: block;
    max-width: 100%;
}

/* секции в контейнере — через --section-gap (120 / 80 / 56) */
.dir-page .dir-section {
    padding-top: var(--section-gap);
}

/* ЗАГОЛОВКИ */

/* H2 секции 40/48; квадрат — общий маркер заголовков сайта (.title, base/general.css), цвет направления */
.dir-h2 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    color: #1E2939;
}

.dir-h2::after {
    content: "";
    display: inline-block;
    vertical-align: super;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 1.5rem;
    background: var(--dir-accent);
}

/* надзаголовок «О направлении» — шрифт и цвет подписи факта (.case-fact__label), здесь только отступ */
.dir-eyebrow {
    display: block;
    margin: 0 0 1rem;
}

.dir-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--text-title-gap);
    max-width: 56rem;
}

.dir-section__lead {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* КНОПКИ M — 48, отступы 12 / 24, 16/24 · 600 (styles.css, --btn-m-*) */

.dir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    min-height: var(--btn-m-h);
    padding: 0 var(--btn-m-px);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time), filter var(--transition-time);
}

.dir-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.dir-page .dir-btn--dark {
    background: #101828;
    color: #FFFFFF;
}

.dir-page .dir-btn--dark:hover {
    background: #364153;
    color: #FFFFFF;
}

/* обводка фирменным цветом, текст тёмный — читается и на золотом Convia */
.dir-page .dir-btn--outline {
    background: transparent;
    border: 2px solid var(--dir-accent);
    color: #101828;
}

.dir-page .dir-btn--outline:hover {
    background: var(--dir-accent);
    color: var(--dir-on-accent);
}

.dir-page .dir-btn--accent {
    background: var(--dir-accent);
    color: var(--dir-on-accent);
}

.dir-page .dir-btn--accent:hover {
    filter: brightness(0.92);
    color: var(--dir-on-accent);
}

.dir-page .dir-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}

.dir-page .dir-btn--ghost:hover {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* ----------------------------------------------------------------------
   1. БАННЕР — светлый #F9F6EF; скриншот сайта прижат к нижнему краю
   ---------------------------------------------------------------------- */

.dir-hero {
    background: var(--dir-cream);
}

.dir-hero__crumbs {
    padding-top: 1.5rem;
}

.dir-hero__crumbs .breadcrumbs {
    margin: 0;
}

.dir-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: end;
    margin-top: var(--crumbs-gap);
}

.dir-hero__text {
    padding: 2.5rem 0 5rem;
}

.dir-hero__name {
    margin: 0 0 1.5rem;
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 600;
    color: var(--dir-accent);
    overflow-wrap: anywhere;
}

/* H1 48/56 */
.dir-hero__title {
    margin: 0;
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    font-weight: 600;
    color: #1E2939;
}

.dir-hero__lead {
    max-width: 38rem;
    margin: 1.25rem 0 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: #1E2939;
}

.dir-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* рамка браузера: белая карточка, скругление 12 только сверху */
.dir-page .dir-browser {
    display: block;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #FFFFFF;
    box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, 0.12);
    color: #4A5565;
    transition: box-shadow var(--transition-time-card), transform var(--transition-time-card);
}

.dir-page .dir-browser:hover {
    box-shadow: 0 1.75rem 3.5rem rgba(16, 24, 40, 0.18);
    transform: translateY(-0.25rem);
}

.dir-browser__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 2.75rem;
    padding: 0 1rem;
    border-bottom: 1px solid #E5E7EB;
}

.dir-browser__dots {
    display: flex;
    gap: 0.375rem;
}

.dir-browser__dots i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #D1D5DC;
}

.dir-browser__address {
    flex: 0 1 22rem;
    min-width: 0;
    margin: 0 auto;
    padding: 0.25rem 0.875rem;
    border-radius: 1rem;
    background: #F3F4F6;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dir-browser__shot {
    width: 100%;
    height: auto;
}

/* своего сайта нет — иллюстрация направления без рамки, по центру по высоте */
.dir-hero--nosite .dir-hero__grid {
    align-items: center;
}

.dir-hero__art {
    padding-bottom: 2.5rem;
}

.dir-hero__art-img {
    width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------
   2. ПОЛОСА ФАКТОВ — белая, граница снизу
   ---------------------------------------------------------------------- */

.dir-facts {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}

.dir-page .dir-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 3rem;
    margin: 0 auto;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.dir-facts__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dir-facts__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dir-facts__list--1 { grid-template-columns: minmax(0, 1fr); }

.dir-facts__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* подпись и значение — .case-fact__label / .case-fact__value (14/20 · 600 заглавными #6A7282, 18/26 · 600 #1E2939) */
.dir-facts__value {
    margin: 0;
}

/* ----------------------------------------------------------------------
   3. О НАПРАВЛЕНИИ — текст слева, фото 600×480 справа
   ---------------------------------------------------------------------- */

/* с фото — 50/50, текст по центру фото по вертикали */
.dir-about {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

/* без фото — одна колонка на всю ширину, строки не длиннее ~860 px на 1440 (70rem) */
.dir-about--text {
    grid-template-columns: minmax(0, 1fr);
}

.dir-about--text .dir-about__text {
    max-width: 70rem;
}

.dir-about__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: var(--text-title-gap);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.dir-about__body p {
    margin: 0;
}

/* первый абзац — лид 18/26 */
.dir-about__body p:first-child {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
}

/* ключевые пункты: подпись 14/20 серым, три пункта в строку — иконка 32 фирменного цвета и подпись 16/24 · 600 */
.dir-points {
    margin-top: 2rem;
}

.dir-points__title {
    margin: 0 0 1rem;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-text-tertiary);
}

.dir-points__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dir-points__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: #1E2939;
}

.dir-points__icon {
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--dir-accent);
}

.dir-about__highlight {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--dir-accent);
    background: var(--dir-cream);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: 400;
    color: #1E2939;
}

/* высота ~480 на 1440 (39.25rem), ширина — половина контейнера, cover */
.dir-about__media {
    height: 39.25rem;
    overflow: hidden;
    background: #F3F4F6;
}

.dir-about__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------------------
   4. ЧТО ПРЕДЛАГАЕМ — тёмные карточки #101828, фото 220 сверху
   Сетка на 6 дорожек: карточка — 2 (три в ряд), --half — 3, --full — 6
   ---------------------------------------------------------------------- */

.dir-offers__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: var(--title-gap);
}

.dir-offer {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #101828;
}

.dir-offer--half { grid-column: span 3; }
.dir-offer--full { grid-column: span 6; }

.dir-offer__img {
    width: 100%;
    height: 13.75rem;
    object-fit: cover;
}

.dir-offer__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--card-pad-s);
}

.dir-offer__num {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 600;
    color: var(--dir-accent-light);
}

.dir-offer__title {
    margin: 0;
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
    color: #FFFFFF;
}

.dir-offer__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #D1D5DC;
}

/* ----------------------------------------------------------------------
   5. ПОЧЕМУ — сплошной фирменный цвет во всю ширину, текст --dir-on-accent
   ---------------------------------------------------------------------- */

.dir-why {
    margin-top: var(--section-gap);
    padding: var(--section-gap) 0;
    background: var(--dir-accent);
    color: var(--dir-on-accent);
}

.dir-why__inner {
    display: grid;
    grid-template-columns: 23.75rem minmax(0, 1fr);
    gap: 4rem;
}

.dir-page .dir-why__title {
    color: var(--dir-on-accent);
}

.dir-why__title::after {
    background: var(--dir-on-accent);
}

.dir-why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 2.5rem;
}

.dir-why__grid--1 { grid-template-columns: minmax(0, 1fr); }
.dir-why__grid--2,
.dir-why__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dir-why__item {
    padding-top: 1.5rem;
    border-top: 2px solid var(--dir-on-accent);
}

.dir-why__icon {
    display: block;
    width: 2rem;
    height: 2rem;
}

.dir-why__item-title {
    margin: 1.25rem 0 0;
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
    font-weight: 600;
}

.dir-why__text {
    margin: 0.5rem 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* ----------------------------------------------------------------------
   6. ЗАЯВКА — фото во всю ширину под градиентом (без фото — #101828), справа карточка контактов 400
   ---------------------------------------------------------------------- */

.dir-cta {
    position: relative;
    isolation: isolate;
    margin-top: var(--section-gap);
    padding: var(--section-gap) 0;
    background: #101828;
    color: #FFFFFF;
}

/* «Почему» и заявка подряд — цветные полосы вплотную; без «Почему» (Платформа) отступ перед заявкой остаётся */
.dir-why + .dir-cta {
    margin-top: 0;
}

.dir-page .dir-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dir-cta--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #101828 45%, rgba(16, 24, 40, 0.6));
}

/* две равные колонки: текст и контакты — форма заявки; по центру по вертикали */
.dir-cta__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    align-items: center;
}

.dir-page .dir-cta__title {
    color: #FFFFFF;
}

.dir-cta__text {
    max-width: 44rem;
    margin: var(--text-title-gap) 0 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: #D1D5DC;
}

.dir-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* контакты под кнопками одной строкой: телефон 18/26 · 600, e-mail и домен 16/24 #D1D5DC, шаг 24 */
.dir-cta__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
}

.dir-page .dir-cta__phone {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}

.dir-page .dir-cta__link {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #D1D5DC;
    overflow-wrap: anywhere;
}

.dir-page .dir-cta__phone:hover,
.dir-page .dir-cta__link:hover {
    color: var(--dir-accent-light);
}

/* ФОРМА ЗАЯВКИ — поля 48, прозрачные, рамка #364153, текст белый, подсказки #99A1AF */

.dir-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* подписи полей — для экранных дикторов, на экране подсказки в полях */
.dir-form__label,
.dir-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dir-page .dir-form__input {
    display: block;
    width: 100%;
    min-height: var(--btn-m-h);
    padding: calc(0.75rem - 1px) 1rem; /* 48 вместе с рамкой */
    border: 1px solid #364153;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #FFFFFF;
    transition: border-color var(--transition-time);
}

.dir-page .dir-form__input::placeholder {
    color: #99A1AF;
}

.dir-page .dir-form__input:focus {
    outline: none;
    border-color: var(--dir-accent-light);
}

.dir-page .dir-form__textarea {
    height: 7.5rem;
    resize: vertical;
}

.dir-page .dir-form__submit {
    width: 100%;
    margin-top: 0.5rem;
}

.dir-page .dir-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* согласие — как в формах сайта (.ui-checkbox), на тёмном: 14/20 #99A1AF, рамка #364153 */
.dir-page .dir-form__policy {
    color: #99A1AF;
}

.dir-page .dir-form__policy .ui-checkbox__text {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.dir-page .dir-form__policy .ui-checkbox__box {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    margin-right: 0.75rem;
    border-color: #364153;
    background-color: transparent;
}

.dir-page .dir-form__policy .ui-checkbox__input:checked + .ui-checkbox__box {
    background-color: var(--dir-accent);
    border-color: var(--dir-accent);
}

.dir-page .dir-form__policy-link {
    color: #D1D5DC;
    text-decoration: underline;
}

.dir-page .dir-form__policy:hover,
.dir-page .dir-form__policy-link:hover {
    color: #FFFFFF;
}

.dir-form__status {
    padding: 2rem;
    border: 1px solid #364153;
}

.dir-form__status-title {
    margin: 0;
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
    font-weight: 600;
    color: #FFFFFF;
}

.dir-form__status-text {
    margin: 0.5rem 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #D1D5DC;
}

/* ----------------------------------------------------------------------
   7. ДРУГИЕ НАПРАВЛЕНИЯ — 3 карточки: картинка 200, название со стрелкой
   ---------------------------------------------------------------------- */

/* отступ до подвала — его верхний margin (7,5rem); фон страницы белый, чтобы этот зазор не был серой полосой */
body:has(.dir-page) {
    background: #FFFFFF;
}

/* блок и карточка — общие: styles/components/global/similar-cases.css, solution-card.css */

/* ----------------------------------------------------------------------
   ПЛАНШЕТ (≤1024; 1rem ≈ 16px на 768): колонки друг под другом
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .dir-hero__grid,
    .dir-hero--nosite .dir-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: stretch;
    }

    .dir-hero__text {
        padding: 1.5rem 0 2.5rem;
    }

    /* название: 72 — только на компьютере; на планшете 48/56, на телефоне 40/48 — шкала сайта */
    .dir-hero__name {
        font-size: var(--font-size-h1);
        line-height: var(--line-height-h1);
        margin-bottom: 1rem;
    }

    /* H1 — как на первом экране решений: 40/48 на планшете, 24/32 на телефоне */
    .dir-hero__title {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
    }

    .dir-page .dir-facts__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* одна колонка, фото над текстом */
    .dir-about {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .dir-about__media {
        order: -1;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* две в ряд; нечётная последняя — во всю ширину */
    .dir-offer,
    .dir-offer--half { grid-column: span 3; }
    .dir-offer--full,
    .dir-offer:last-child:nth-child(odd) { grid-column: span 6; }

    .dir-why__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    /* форма — под текстом и контактами, на всю ширину */
    .dir-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .dir-cta--photo::before {
        background: rgba(16, 24, 40, 0.8);
    }
}

/* ----------------------------------------------------------------------
   ТЕЛЕФОН (≤480)
   ---------------------------------------------------------------------- */

@media (max-width: 480px) {
    .dir-hero__crumbs {
        padding-top: 1rem;
    }

    .dir-hero__name {
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
    }

    .dir-hero__title {
        font-size: var(--font-size-title-1);
        line-height: var(--line-height-title-1);
    }

    .dir-hero__lead {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }

    .dir-hero__actions,
    .dir-cta__actions {
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .dir-btn {
        width: 100%;
        white-space: normal;
    }

    .dir-browser__bar {
        height: 2rem;
        gap: 0.5rem;
        padding: 0 0.625rem;
    }

    .dir-browser__dots i {
        width: 0.4375rem;
        height: 0.4375rem;
    }

    .dir-browser__address {
        padding: 0.125rem 0.625rem;
    }

    .dir-page .dir-facts__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* ключевые пункты — в столбик, иконка слева от подписи */
    .dir-points__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .dir-points__item {
        flex-direction: row;
        align-items: center;
    }

    .dir-offer,
    .dir-offer--half,
    .dir-offer--full,
    .dir-offer:last-child:nth-child(odd) { grid-column: span 6; }

    .dir-offer__img {
        height: 11rem;
    }

    .dir-why__grid,
    .dir-why__grid--2,
    .dir-why__grid--4 {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .dir-cta__contacts {
        margin-top: 1.5rem;
    }
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/similar-cases.css?17930909493001*/
/* Блок «Другие …» внизу детальной страницы: заголовок со стрелками справа, слайдер карточек, «Все … →» справа под ними.
   Один компонент для «Других готовых решений» (/resheniya/<код>/), «Других услуг» (/services/<код>/),
   «Похожих проектов» (/projects/<код>/) и «Других направлений» (/napravleniya/<код>/, --three);
   подключают их шаблоны (news.detail), листает similar-cases.js. Карточка — .solution-card (solution-card.css).
   На экране: ≥1025 — 4 карточки (на 1920 по 426), ≤1024 — 2, ≤480 — 1. */

.similar-cases {
    margin-top: var(--section-gap);
    overflow: hidden;
}

.similar-cases__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.similar-cases__slider {
    display: flex;
    gap: 1.5rem;
    margin-top: var(--title-gap);
    transition: transform var(--transition-time-slider) ease-in-out;
    will-change: transform;
}

.similar-cases__slider::-webkit-scrollbar {
    display: none;
}

.similar-cases__item {
    flex: 0 0 calc((100% - (1.5rem * 3)) / 4);
    min-width: 0;
}

.similar-cases__slider,
.similar-cases__item,
.similar-cases__item * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.similar-cases__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4.75rem;
}

/* стрелки скрыты, если все карточки помещаются на экране (similar-cases.js); селектор сильнее
   .similar-cases .slider-arrows ниже — иначе display: flex перебивал hidden и стрелки не скрывались нигде */
.similar-cases .similar-cases__controls[hidden] {
    display: none;
}

.similar-cases .slider-arrows {
    display: flex;
    gap: 0.75rem;
}

.similar-cases .slider-arrows__btn {
    width: 3rem;
    height: 3rem;
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color var(--transition-time), color var(--transition-time);
}

.similar-cases .slider-arrows__btn:disabled {
    cursor: default;
    color: var(--color-disabled-text);
}

/* три карточки в ряд на всю ширину (на десктопе стрелок нет) — «Другие направления» */
@media (min-width: 1025px) {
    .similar-cases--three .similar-cases__item { flex-basis: calc((100% - (1.5rem * 2)) / 3); }
}

@media (max-width: 1024px) {
    .similar-cases__item { flex: 0 0 calc((100% - (1.5rem * 1.5)) / 2); }
}

@media (max-width: 480px) {
    .similar-cases__item { flex: 0 0 100%; }
    .similar-cases__footer { margin-top: 2rem; }
}

/* End */


/* Start:/local/templates/telsis/components/bitrix/breadcrumb/breadcrumb/style.css?1793090949585*/
.bx-breadcrumb {
	margin: 10px 0;
}
.bx-breadcrumb i {
	color: #b5bdc2;
	line-height: 13px;
	font-size: 12px;
	vertical-align: middle;
	margin-right: 5px;
}
.bx-breadcrumb .bx-breadcrumb-item {
	float: left;
	margin-bottom: 10px;
	white-space: nowrap;
	line-height: 13px;
	vertical-align: middle;
	margin-right: 10px;
}
.bx-breadcrumb .bx-breadcrumb-item span {
	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 13px;
	white-space: normal;
}
.bx-breadcrumb .bx-breadcrumb-item a {border-bottom: none;}
.bx-breadcrumb .bx-breadcrumb-item a:hover {}

/* End */
/* /local/templates/telsis/components/bitrix/news/napravleniya/bitrix/news.detail/.default/style.css?179309094923403 */
/* /local/templates/telsis/styles/components/global/similar-cases.css?17930909493001 */
/* /local/templates/telsis/components/bitrix/breadcrumb/breadcrumb/style.css?1793090949585 */