

/* Start:/local/templates/telsis/components/bitrix/news/napravleniya/bitrix/news.list/.default/style.css?17930909499062*/
/* МОЗАИЧНАЯ СЕТКА НАПРАВЛЕНИЙ — акцентная карточка платформы + ровная сетка 2×2 */

.directions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* не ниже прежних 15.625rem; выше — только если не помещается содержимое (строка «Подробнее →») */
    grid-auto-rows: minmax(15.625rem, auto);
    gap: 2px;
    background-color: var(--color-border-subtle);
    border: 2px solid var(--color-border-subtle);
    margin-top: 3.5rem;
}

.direction-tile {
    position: relative;
    background-color: var(--color-white);
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem; /* минимальный отступ от логотипа до текста */
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.direction-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    clip-path: inset(100% 100% 0% 0%);
    transition: clip-path var(--transition-time-card) ease-out;
    z-index: -1;
}

.direction-tile:hover::before {
    clip-path: inset(0% 0% 0% 0%);
}

.direction-tile:hover .direction-tile__logo {
    filter: brightness(0) invert(1);
}

.direction-tile:hover .direction-tile__title,
.direction-tile:hover .direction-tile__desc {
    color: var(--color-white);
}

.direction-tile:hover .direction-tile__arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--color-white);
}

.direction-tile__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.direction-tile__logo {
    height: 2.5rem;
    display: flex;
    align-items: center;
    transition: filter var(--transition-time-card);
}

.direction-tile__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.direction-tile__arrow {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    opacity: 0;
    transform: translate(-0.5rem, 0.5rem);
    transition: opacity var(--transition-time), transform var(--transition-time), color var(--transition-time);
}

.direction-tile__title {
    font-weight: 600;
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    color: var(--color-text);
    margin-bottom: 0.75rem;
    transition: color var(--transition-time-card);
}

.direction-tile__desc {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text-secondary);
    transition: color var(--transition-time-card);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* АКЦЕНТНАЯ КАРТОЧКА "ПЛАТФОРМА TELSIS" — занимает половину сетки на всю высоту */

.direction-tile--hero {
    grid-column: span 2;
    grid-row: span 2;
    background-color: var(--color-bg-inverse);
    cursor: pointer;
}

/* обычных карточек нечётное число (например, направление выключили) — последняя на две колонки,
   чтобы в сетке не оставалось пустой ячейки; на телефоне сетка в одну колонку — сброс ниже */
.direction-tile:not(.direction-tile--hero):last-child:nth-child(even) {
    grid-column: span 2;
}

.direction-tile--hero::before {
    content: none;
}

.direction-tile--hero__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.direction-tile--hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-text-small);
    line-height: var(--line-height-text-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.direction-tile--hero__logo {
    height: 1.75rem;
    width: auto;
    filter: brightness(100);
}

.direction-tile--hero__body {
    position: relative;
    z-index: 1;
}

.direction-tile--hero__title {
    font-weight: 600;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    color: var(--color-white);
    margin-bottom: 1rem;
}

.direction-tile--hero__desc {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: rgba(255, 255, 255, 0.7);
    max-width: 26rem;
    margin-bottom: 1.875rem;
}

.direction-tile--hero__cta {
    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-white);
    transition: color var(--transition-time), gap var(--transition-time);
}

.direction-tile--hero:hover .direction-tile--hero__cta {
    gap: 0.875rem;
    color: var(--color-primary);
}

/* «Подробнее →» маленьких карточек — как у «Платформы TELSIS», в цветах светлой карточки;
   при наведении карточка оранжевая — подпись белая, стрелка сдвигается вправо */
.direction-tile__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    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-card), gap var(--transition-time);
}

.direction-tile:hover .direction-tile__more {
    gap: 0.875rem;
    color: var(--color-white);
}

/* SEO-TEXT */

.seo-text {
    margin-top: var(--section-gap);
}

/* «О группе TELSIS»: H2 сайта с оранжевым квадратиком (.title), под ним текст */
.seo-text__title {
    margin-bottom: var(--text-title-gap); /* заголовок → текст: 20 / 16 / 12, как «О компании» на главной */
}


.seo-text__content b {
    font-weight: 600; 
}

/* первый H2 SEO-блока — заголовок секции, как «О группе TELSIS» на /napravleniya/: 40/48 с квадратиком, до текста --content-title-gap */
.seo-text__content > h2:first-child {
    margin-top: 0;
    margin-bottom: var(--text-title-gap); /* заголовок → текст: 20 / 16 / 12, как «О компании» на главной */
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    color: var(--color-ghost-text);
}

.seo-text__content > h2:first-child::after {
    content: "";
    display: inline-block;
    vertical-align: super;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 1.5rem;
    background-color: var(--color-primary);
}

.seo-text__content p {
    margin-bottom: .75rem;
}

.seo-text__content ul {
    margin: 0 0 1.25rem 0;
}

.seo-text__content ul > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.625rem;
}

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

/* CTA-BANNER */

/* БАННЕР-ПРИЗЫВ (СПИСОЧНЫЕ СТРАНИЦЫ РЕШЕНИЙ / НАПРАВЛЕНИЙ) */

@media (max-width: 1024px) {
    .directions-grid { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 480px) {
    .direction-tile--hero__header { flex-direction: column; align-items: start; }
    .directions-grid { grid-template-columns: 1fr; }
    .direction-tile--hero { grid-column: unset; }
    .direction-tile:not(.direction-tile--hero):last-child:nth-child(even) { grid-column: auto; }
    .direction-tile--hero__header { gap: 2rem; }

    /* высота карточек — по содержимому, без пустого места; «Платформа TELSIS» не выше 22.5rem (360 на 360) */
    .directions-grid { grid-auto-rows: auto; }
    .direction-tile { justify-content: flex-start; gap: 1.5rem; }
    /* содержимое уплотнено, чтобы целиком уместиться в 22.5rem */
    .direction-tile--hero { grid-row: auto; max-height: 22.5rem; }
    .direction-tile--hero__header { gap: 0.75rem; }
    .direction-tile--hero__eyebrow { padding: 0.375rem 0.75rem; }
    .direction-tile--hero__title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); margin-bottom: 0.5rem; }
    .direction-tile--hero__desc { margin-bottom: 0.75rem; }
}

/* полоска фирменного цвета направления (свойство DIR_ACCENT) */
.direction-tile__accent {
    display: block;
    width: 2rem;
    height: 3px;
    margin-bottom: 0.75rem;
}

/* 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.list/.default/style.css?17930909499062 */
/* /local/templates/telsis/components/bitrix/breadcrumb/breadcrumb/style.css?1793090949585 */
