/* Start:/local/templates/telsis/components/bitrix/news/resheniya/bitrix/news.detail/.default/style.css?179309094925614*/
/* HERO ГОТОВОГО РЕШЕНИЯ (тёплый акцентный градиент вместо чёрного) */

/* ВСТРОЕННЫЕ ВКЛАДКИ ВНУТРИ РАЗДЕЛА "РЕШЕНИЕ" */

.solution-tabs {
    margin-top: 1.875rem;
}

.solution-tabs .product-tabs__header {
    margin-top: 0;
}

.solution-tabs .product-tabs__content {
    padding-inline: 0;
}

/* SIDEBAR */

/* САЙДБАР ПРОЕКТА */

.case-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    flex-shrink: 0;
}

/* Обёртка колонки — ячейка сетки во всю высоту строки с текстом (stretch). Закреплённая колонка
   внутри неё не выходит за низ строки, то есть останавливается у низа «Частых вопросов» */
.case-sidebar-wrap {
    grid-area: sidebar;
    min-width: 0;
}

/* Колонка закреплена при прокрутке. --sidebar-top считает script.js: под фиксированной шапкой,
   а если колонка выше окна — так, чтобы она закреплялась по нижнему краю и кнопка «Запросить расчёт»
   была видна. На 1024px и меньше колонка под текстом и не закрепляется */
@media (min-width: 1025px) {
    .case-sidebar {
        position: sticky;
        top: var(--sidebar-top, 6rem);
        align-self: start;
    }
}

/* ВИДЖЕТ */

.case-widget {
    background: var(--color-white);
    padding: 2.5rem;
}

.case-widget__title {
    font-size: var(--font-size-title-1);
    line-height: var(--line-height-title-1);
    font-weight: 600;
    margin-bottom: 1.875rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.case-widget__accent {
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

/* КЛЮЧЕВЫЕ ФАКТЫ */

.case-facts {
    display: flex;
    flex-direction: column;
}

.case-fact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.case-fact:first-child {
    padding-top: 0;
}

.case-fact:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.case-fact__label {
    font-size: var(--font-size-text-small);
    line-height: var(--line-height-text-small);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    font-weight: 600;
}

.case-fact__value {
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
    font-weight: 600;
}

/* ИСПОЛЬЗУЕМОЕ ОБОРУДОВАНИЕ В САЙДБАРЕ */

.case-equipment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.case-equipment-item {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text-secondary);
    padding-left: 1.5rem;
    position: relative;
}

.case-equipment-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-primary);
}

/* CTA ВИДЖЕТ */

.case-cta {
    background-color: var(--color-bg-inverse);
    color: var(--color-white);
    padding: 2.5rem;
}

.case-cta__title {
    font-size: var(--font-size-title-1);
    line-height: var(--line-height-title-1);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.case-cta__text {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.875rem;
}

/* кнопка M (styles.css, --btn-m-*): 48, отступы 12 / 24 */
.case-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--btn-m-h);
    padding: 0 var(--btn-m-px);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: background-color var(--transition-time);
}

.case-cta__btn:hover {
    background-color: var(--color-primary-hover);
}

.case-cta__btn:active {
    background-color: var(--color-primary-active);
}

/* ЛОГОТИП КЛИЕНТА */

.case-client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    padding: 2.5rem;
}

.case-client-logo__img {
    max-height: 4rem;
    max-width: 100%;
    object-fit: contain;
}

/* DETAIL */

/* LAYOUT ДЕТАЛЬНОЙ СТРАНИЦЫ */

.case-detail__wrapper {
    display: grid;
    grid-template-areas:
        "content sidebar"
        "similar similar";
    grid-template-columns: 1fr .355fr;
    column-gap: 10.875rem;
    margin-top: 3.5rem;
}

.case-detail {
    grid-area: content;
}

/* заголовок внутри текста — токен шкалы: 36/44, на телефоне 24/32 (не крупнее H1 страницы) */
.case-detail h2 {
    font-size: var(--fs-h2-content);
    line-height: var(--lh-h2-content);
    font-weight: 600;
    margin-top: var(--content-gap);
    margin-bottom: var(--content-title-gap);
    color: var(--color-ghost-text);
}

.case-detail h2:first-child {
    margin-top: 0;
}

.case-detail h3 {
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    font-weight: 600;
    margin: 1.25rem 0 0.75rem;
    color: var(--color-ghost-text);
}

.case-detail p {
    margin-bottom: .75rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
}

.case-detail ul {
    margin: 0 0 1.25rem 0;
}

.case-detail ul > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.625rem;
    color: var(--color-ghost-text);
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
}

.case-detail ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-primary);
}

/* DETAIL */

.case-detail table {
    width: 100%;
    overflow-x: auto;
    margin: 3.5rem 0;
}

.case-detail table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
}

.case-detail table thead {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-primary);
}

.case-detail table th:first-child,
.case-detail table td:first-child {
    width: 17.5rem;
}

.case-detail table th:not(:last-child),
.case-detail table td:not(:last-child) {
    border-right: 1px solid var(--color-border-subtle);
}

.case-detail table th {
    text-align: left;
    padding: 1rem;
    font-weight: 600;
    color: var(--color-text);
    vertical-align: top;
}

.case-detail table td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
}

.case-detail table tbody tr {
    background-color: #FFFFFF;
}

.case-detail table tbody tr:nth-of-type(odd) {
    background-color: var(--color-secondary);
}

/* HERO БЛОК ПРОЕКТА */

/* СЕКЦИЯ О ПРОЕКТЕ */

.case-section {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

.case-section__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: 600;
    margin-bottom: 1.875rem;
    color: var(--color-ghost-text);
}

.case-section__text {
    margin-bottom: .75rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
}

/* СПИСОК ЗАДАЧ / РЕШЕНИЙ */

.case-list {
    margin: 0 0 1.25rem 0;
}

.case-list__item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.625rem;
    color: var(--color-ghost-text);
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
}

.case-list__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-primary);
}

/* БЛОК С ЧЕКМАРКАМИ */

.case-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.case-feature {
    display: flex;
    gap: 1rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
}

.case-feature > svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* задачи решения — белые карточки в две колонки (ТЗ «Единая стилистика блоков», 20.10.2026):
   отступ --card-pad-s, промежуток --grid-gap */
.case-features--cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.case-feature--card {
    padding: var(--card-pad-s);
    background-color: var(--color-white);
}

@media (max-width: 768px) {
    .case-features--cards { grid-template-columns: minmax(0, 1fr); }
}

/* РЕЗУЛЬТАТЫ В ЧИСЛАХ */

.case-section .case-table-container { margin: 0; }

.case-stats {
    display: grid;
    /* auto-fit: пустые дорожки схлопываются, поэтому блок корректно
       работает с любым числом плашек (1, 2 или 3), а не только с тремя */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
}

.case-stat {
    background-color: var(--color-white);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* без min-width: 0 длинная подпись задаёт плашке минимальную ширину
       по своему содержимому и растягивает всю сетку за пределы страницы */
    min-width: 0;
}

.case-stat__value {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    font-weight: 600;
    color: var(--color-primary);
}

.case-stat__label {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text-secondary);
}

/* ТАБЛИЦА ОБОРУДОВАНИЯ */

.case-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 3.5rem 0;
}

.case-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
}

.case-table thead {
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-primary);
}

.case-table th:not(:last-child),
.case-table td:not(:last-child) {
    border-right: 1px solid var(--color-border-subtle);
}

.case-table th {
    text-align: left;
    padding: 1rem;
    font-weight: 600;
    color: var(--color-text);
    vertical-align: top;
}

.case-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
}

.case-table tbody tr {
    background-color: #FFFFFF;
}

.case-table tbody tr:nth-of-type(odd) {
    background-color: var(--color-secondary);
}

/* ALERT / ЦИТАТА */

.case-alert {
    display: flex;
    gap: 2rem;
    padding: 2.5rem;
    background-color: var(--color-secondary);
    border-left: 4px solid var(--color-primary);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.case-alert__icon {
    height: 4rem;
    width: 4rem;
    flex-shrink: 0;
}

.case-alert__text {
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
}

/* НАВИГАЦИЯ МЕЖДУ ПРОЕКТАМИ */

.case-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-subtle);
}

.case-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text);
    transition: color var(--transition-time);
}

.case-nav__link:hover {
    color: var(--color-primary);
}

.case-nav__link:active {
    color: var(--color-primary-hover);
}

/* «Другие готовые решения» — общий компонент styles/components/global/similar-cases.css; здесь только место в сетке */

.similar-cases {
    grid-area: similar;
}

/* FAQ */

.faq {
    margin-top: var(--content-gap);
}

.faq__wrapper {
    background-color: var(--color-white);
    padding: 2.5rem;
}

.faq__title {
    font-size: var(--font-size-title-2);
    line-height: var(--line-height-title-2);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #111827;
}

.case-detail .faq__title { margin-top: 0; }

.faq-item {
    border-top: 1px solid var(--color-border-subtle);
}

.faq-item:first-child {
    border-top: unset;
}

.faq-item__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* вопрос FAQ — малая карточка шкалы, как на услугах и в карточке товара (product/faq.css) */
.faq-item__question {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
}

.faq-item__icon {
    transition: transform var(--transition-time);
}

.is-open .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-time-slider) ease;
    color: var(--color-text-secondary);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
}

.is-open .faq-item__content {
    padding-bottom: 1.25rem;
}

@media(max-width: 1024px) {
    .case-detail__wrapper { 
        grid-template-columns: 1fr; 
        grid-template-areas: "content"
                             "sidebar"
                             "similar";
    }
    .case-widget:first-child { margin-top: 2.5rem;}

    .case-widget, .case-cta, .faq__wrapper { padding: 1.25rem; }
    .comparison-table th:first-child, .comparison-table td:first-child { width: 12.5rem; }
    .comparison-table td { padding: 0.75rem 1.25rem; }

    /* на планшете отступа 2.5rem в плашке не остаётся места под цифру */
    .case-stat { padding: 1.875rem; }
}

@media(max-width: 480px) {
    .case-detail { overflow: hidden; }
    

    .case-nav { flex-direction: column; gap: 2rem; }

    /* На телефоне ширина баннера равна ширине контейнера (~343px), а высота
       оставалась 450px — object-fit: cover вырезал из фото почти портретный
       кадр. 17.5rem (280px) даёт пейзажное соотношение около 1,22:1. */
    
    
    
    /* .case-detail table { word-break: break-all; }
    .case-detail table th, .case-detail table td { min-width: 6.5rem; }
    .case-detail table th:first-child, .case-detail table td:first-child { width: auto; }
    .case-detail table td, .case-detail table th { padding: 0.5rem; }
    .case-nav { flex-direction: column; gap: 2rem; }
    .case-widget, .case-cta { padding: 1.25rem; }
    .similar-cases__item { flex: 0 0 100%; }
    .similar-cases__footer { margin-top: 2rem; } */
}

@media (max-width: 480px) {
    .navigation-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* TABS */

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.product-tabs__header {
    display: flex;
    border-bottom: 1px solid var(--color-border-subtle);
    background-color: var(--color-white);
    margin-top: 1.5rem;
}

.product-tabs__button {
    flex: 1;
    padding: 1rem 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    cursor: pointer;
    color: var(--color-text);
}

.product-tabs__button--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.product-tabs__content {
    background-color: var(--color-white);
    padding-top: 2.5rem;
    padding-inline: 2.5rem;
    padding-bottom: 2.5rem;
}

.product-tabs__description {
    margin-bottom: 2.5rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table__row {
    border-bottom: 1px solid var(--color-border-subtle);
}

.specs-table .specs-table__row:last-child {
    border-bottom: unset;
}

.specs-table__cell {
    padding: 1rem 0;
    vertical-align: top;
    color: var(--color-text);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base); 
}

.specs-table__cell--label {
    width: 20rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.tab-view-all {
    display: none;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base); 
    font-weight: 600;
    margin-top: 1rem;
}

.collapse-container {
    overflow: hidden;
    transition: max-height var(--transition-time) ease;
}

.case-section ul > li {
    padding-left: 2.5rem;
}

.case-section ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg class='icon-24' width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1296 5.29277C20.5773 4.88372 21.2801 4.90606 21.6997 5.34249C22.1193 5.77899 22.0963 6.46421 21.6487 6.87338L9.79726 17.707C9.36986 18.0977 8.70444 18.0977 8.27703 17.707L2.3513 12.2902C1.90364 11.881 1.88074 11.1958 2.3003 10.7593C2.71994 10.3228 3.42272 10.3005 3.87044 10.7096L9.0366 15.4313L20.1296 5.29277Z' fill='%231E2939'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}

.alert {
    display: flex;
    gap: 2rem;
    padding: 2.5rem;
    background-color: var(--color-secondary);
    border-left: 4px solid var(--color-primary);
    /* плашка ↔ соседний текст — 24, на телефоне 16, как в тексте проектов; нижний отступ блока перед ней не складывается с этим */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.case-detail > :has(+ .alert) {
    margin-bottom: 0;
}

.alert__icon {
    height: 4rem;
    width: 4rem;
    background-size: cover;
    flex-shrink: 0;
}

.alert--info .alert__icon {
    background-image: url('/local/templates/telsis/icons/alert/info.svg');
}

.alert--question .alert__icon {
    background-image: url('/local/templates/telsis/icons/alert/question.svg');
}

.alert__text {
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-ghost-text);
    margin-top: auto;
    margin-bottom: auto;
}

#tab-included {
    margin: 0 2rem;
}

#tab-included .alert {
    margin-bottom: 0;
}

#tab-equipment table {
    margin: 0;
}

@media(max-width: 1024px) {
    .case-stat__value {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3);
    }
}

@media (max-width: 1024px) {
    .product-tabs__button {
        padding: 0.625rem 0;
        font-size: var(--font-size-text-base);
        line-height: var(--line-height-text-base);
    }

    .alert { padding: 1.875rem; }
    .alert__text { font-size: var(--font-size-text-base); line-height: var(--line-height-text-base); }
}

@media (max-width: 480px) {
    .product-tabs__header {
        overflow-x: scroll;
    }

    .product-tabs__content { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .alert { padding: 1.25rem; margin-top: 1rem; margin-bottom: 1rem; }
    .alert > .alert__icon { display: none; }

    .case-detail table { word-break: break-all; }
    .case-detail table th, .case-detail table td { min-width: 6.5rem; }
    .case-detail table th:first-child, .case-detail table td:first-child { width: auto; }
    .case-detail table td, .case-detail table th { padding: 0.5rem; }

    .case-stats { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .product-tabs__button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1rem;
    }
}

@media (max-width: 1024px) {
    .case-detail .faq__title {
        font-size: var(--font-size-title-3);
        line-height: var(--line-height-title-3);
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
}

/* --- Утилиты для контента карточки решения: те же правила, что и в
   styles/components/article/body.css, но для блока .case-detail —
   тот файл на этой странице не подключается. --- */

/* Обёртка для горизонтального скролла таблицы: ставится ВОКРУГ <table>.
   overflow-x на самой таблице (width:100%) скроллиться не с чего. */
.case-detail .table-scroll {
    width: 100%;
    overflow-x: auto;
    margin: var(--content-gap) 0;
}

.case-detail .table-scroll table {
    margin: 0;
    min-width: 40rem;
}

/* Список в две колонки на десктопе (для длинных списков от 8 пунктов) */
.case-detail ul.cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0.625rem;
}

/* шаг строк — row-gap: нижний отступ пункта в сетке не схлопывается и добавлялся к отступу до следующего блока */
.case-detail ul.cols-2 > li {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .case-detail ul.cols-2 {
        grid-template-columns: 1fr;
    }
}

/* На мобильном строки таблицы превращаются в карточки:
   каждая ячейка — подпись (data-label) + значение. */
@media (max-width: 640px) {
    .case-detail .table-cards {
        overflow-x: visible;
    }

    .case-detail .table-cards table {
        min-width: 0;
    }

    .case-detail .table-cards table,
    .case-detail .table-cards thead,
    .case-detail .table-cards tbody,
    .case-detail .table-cards th,
    .case-detail .table-cards td,
    .case-detail .table-cards tr {
        display: block;
        width: 100%;
    }

    .case-detail .table-cards thead {
        display: none;
    }

    .case-detail .table-cards th:first-child,
    .case-detail .table-cards td:first-child {
        width: auto;
    }

    .case-detail .table-cards tr {
        margin-bottom: 1.25rem;
        border: 1px solid var(--color-border-subtle);
        padding: 1rem;
    }

    .case-detail .table-cards tbody tr:nth-of-type(odd) {
        background-color: var(--color-secondary);
    }

    .case-detail .table-cards td {
        padding: 0.375rem 0;
        border: none !important;
    }

    .case-detail .table-cards td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: var(--font-size-text-base);
        line-height: var(--line-height-text-base);
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        margin-bottom: 0.25rem;
    }
}

/* ПРОЕКТЫ ПО РЕШЕНИЮ */

.solution-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(17.5rem, 260px), 1fr));
    gap: 1.25rem;
}

.solution-project {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.75rem;
    background-color: var(--color-white);
    border-top: 3px solid var(--color-primary);
    transition: box-shadow var(--transition-time);
}

.solution-project:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

.solution-project__client {
    font-weight: 700;
    font-size: max(0.875rem, 13px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-active);
}

.solution-project__title {
    font-weight: 600;
    font-size: max(1.0625rem, 17px);
    line-height: 1.4;
    color: var(--color-bg-inverse);
    transition: color var(--transition-time);
}

.solution-project:hover .solution-project__title {
    color: var(--color-primary-active);
}

.solution-project__meta {
    margin-top: auto;
    font-size: max(0.875rem, 14px);
    color: var(--color-text-tertiary);
}

/* таблица сразу под заголовком текста — отступ заголовка (--content-title-gap), без своего */
.case-detail h2 + .table-scroll {
    margin-top: 0;
}

/* 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/styles/components/article/pagination.css?17930909491044*/
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3.5rem;
    gap: 1rem;
}

.pagination__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: var(--color-text);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    transition: all var(--transition-time) ease;
    background-color: var(--color-white);
}

.pagination__link:hover {
    color: var(--color-primary-hover);
}

.pagination__link:active {
    background-color: var(--color-secondary);
    color: var(--color-ghost-text-active);
}

.pagination__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination__link--next {
    margin-left: auto;
}

@media(max-width: 480px) {
    .pagination { flex-direction: column; align-items: unset; justify-content: unset; }
    .pagination__link--next { margin-left: unset; }
    .pagination__link--next { justify-content: flex-end;}
}
/* 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/resheniya/bitrix/news.detail/.default/style.css?179309094925614 */
/* /local/templates/telsis/styles/components/global/similar-cases.css?17930909493001 */
/* /local/templates/telsis/styles/components/article/pagination.css?17930909491044 */
/* /local/templates/telsis/components/bitrix/breadcrumb/breadcrumb/style.css?1793090949585 */