/* Раздел корпоративного обучения: /training/ и посадочные под ним.
 *
 * Каталог из 61 программы нельзя показывать одинаковыми плитками: направления
 * перестают отличаться, а глазу не за что зацепиться. Здесь четыре типа подачи,
 * каждый под свой объём материала:
 *   .tr-flagship — одна главная программа направления, разворотом на всю ширину;
 *   .tr-grid     — две-четыре программы рядом, карточками;
 *   .tr-matrix   — длинный список строками, с разделителями между группами;
 *   .tr-stage    — ступени развития, вертикальной шкалой.
 *
 * Цвета и радиусы берутся из переменных сайта, свои значения не заводятся.
 */

.tr-section { padding: 4rem 0; }
.tr-section--tint { background: var(--hv-paper, #f6f7f9); }

.tr-head { max-width: 62ch; margin-bottom: 2.5rem; }
.tr-head h2 { font-weight: 700; margin-bottom: .75rem; }
.tr-head p { color: var(--hv-muted, #6b727c); margin: 0; }

/* Главная программа направления */
.tr-flagship {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0;
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
}
.tr-flagship__main { padding: 2.25rem; }
.tr-flagship__label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--hv-accent, #0b5cab);
    margin-bottom: .75rem;
}
.tr-flagship__main h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; }
.tr-flagship__main p { color: var(--hv-muted, #6b727c); margin-bottom: 1.25rem; }
.tr-flagship__points { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tr-flagship__points li { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; }
.tr-flagship__points i { color: var(--hv-accent, #0b5cab); }
.tr-flagship__side {
    padding: 2.25rem;
    background: var(--hv-paper, #f6f7f9);
    display: grid;
    align-content: start;
    gap: 1.25rem;
}
.tr-meta { display: grid; gap: .2rem; }
.tr-meta dt {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hv-ink, #16191d);
    opacity: .65;
    font-weight: 600;
}
.tr-meta dd { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--hv-ink, #16191d); }

/* Программы рядом */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.tr-card {
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 2px;
    padding: 1.5rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: border-color .2s ease, transform .2s ease;
}
.tr-card:hover { border-color: var(--hv-accent, #0b5cab); transform: translateY(-2px); }
.tr-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.tr-card p { font-size: .92rem; color: var(--hv-muted, #6b727c); margin: 0; flex-grow: 1; }
.tr-card__meta { font-size: .8rem; color: var(--hv-ink, #16191d); opacity: .75; }

/* Длинный список строками */
.tr-matrix { display: grid; gap: 0; }
.tr-matrix__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    padding: 1rem 0;
    align-items: baseline;
}
.tr-matrix__row + .tr-matrix__row { border-top: 1px solid var(--hv-line, #dfe3e8); }
.tr-matrix__name { font-weight: 600; }
.tr-matrix__meta {
    font-size: .82rem;
    color: var(--hv-ink, #16191d);
    opacity: .7;
    white-space: nowrap;
}
.tr-matrix__note { grid-column: 1 / -1; font-size: .9rem; color: var(--hv-muted, #6b727c); }

/* Ступени */
.tr-stage { position: relative; padding-left: 3.25rem; padding-bottom: 2.5rem; }
.tr-stage:last-child { padding-bottom: 0; }
.tr-stage::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--hv-ink, #16191d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}
.tr-stage::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 2.6rem;
    bottom: .5rem;
    width: 1px;
    background: var(--hv-line, #dfe3e8);
}
.tr-stage:last-child::after { display: none; }
.tr-stage h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .2rem; }
.tr-stage__who { font-size: .88rem; color: var(--hv-muted, #6b727c); margin-bottom: 1rem; }

@media (max-width: 767.98px) {
    .tr-flagship { grid-template-columns: 1fr; }
    .tr-flagship__main, .tr-flagship__side { padding: 1.5rem; }
    .tr-matrix__row { grid-template-columns: 1fr; }
    .tr-stage { padding-left: 2.75rem; }
}

/* Фотография направления в блоке главной программы. Появляется только если
 * файл положен в static/images/training/<слаг>.jpg — пустых рамок не остаётся. */
.tr-flagship__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: .25rem;
}

/* Страница отдельной программы */
.tr-audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.tr-audience__item { border-left: 2px solid var(--hv-accent, #0b5cab); padding-left: 1rem; }
.tr-audience__item h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.tr-audience__item p { font-size: .92rem; color: var(--hv-muted, #6b727c); margin: 0; }

.tr-module { display: grid; grid-template-columns: 12rem 1fr; gap: .5rem 2rem; padding: 1.5rem 0; }
.tr-module + .tr-module { border-top: 1px solid var(--hv-line, #dfe3e8); }
.tr-module__name { font-weight: 700; }
.tr-module__size { font-size: .8rem; color: var(--hv-accent, #0b5cab); }
.tr-module__text { color: var(--hv-muted, #6b727c); margin: 0; }

.tr-result { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.tr-result li { display: flex; gap: .75rem; align-items: baseline; }
.tr-result i { color: var(--hv-accent, #0b5cab); }

/* Перекрёстная связка с онлайн-курсами */
.tr-cross { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tr-cross__item {
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 2px;
    padding: 1.25rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease;
}
.tr-cross__item:hover { border-color: var(--hv-accent, #0b5cab); transform: translateY(-2px); color: inherit; }
.tr-cross__price {
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    color: var(--hv-ink, #16191d);
    background: var(--hv-paper, #f6f7f9);
    border-radius: 999px;
    padding: .2rem .7rem;
}
.tr-cross__item h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.tr-cross__item p { font-size: .9rem; color: var(--hv-muted, #6b727c); margin: 0; flex-grow: 1; }
.tr-cross__more { font-size: .88rem; font-weight: 600; color: var(--hv-accent, #0b5cab); }

@media (max-width: 767.98px) {
    .tr-module { grid-template-columns: 1fr; }
}

/* Цифры формата: доля практики, размер группы, длительность */
.tr-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--hv-line, #dfe3e8); border: 1px solid var(--hv-line, #dfe3e8); border-radius: 2px; overflow: hidden; }
.tr-numbers__item { background: #fff; padding: 1.5rem 1.25rem; }
.tr-numbers__n { display: block; font-size: 1.6rem; font-weight: 700; color: var(--hv-ink, #16191d); line-height: 1.1; }
.tr-numbers__l { display: block; font-size: .85rem; color: var(--hv-muted, #6b727c); margin-top: .3rem; }

/* Этапы: до, во время, после */
.tr-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.tr-phase { border-top: 3px solid var(--hv-accent, #0b5cab); padding-top: 1rem; }
.tr-phase h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.tr-phase p { font-size: .93rem; color: var(--hv-muted, #6b727c); margin: 0; }

/* Поурочный состав: два столбца с нумерацией */
.tr-lessons { columns: 2; column-gap: 3rem; list-style: none; padding: 0; margin: 0; counter-reset: lesson; }
.tr-lessons li { break-inside: avoid; display: flex; gap: .75rem; padding: .55rem 0; font-size: .95rem; }
.tr-lessons li::before {
    counter-increment: lesson;
    content: counter(lesson, decimal-leading-zero);
    font-size: .78rem;
    font-weight: 600;
    color: var(--hv-accent, #0b5cab);
    min-width: 1.6rem;
    padding-top: .15rem;
}

/* Инструменты */
.tr-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-tools span {
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .9rem;
    background: #fff;
}

/* Два столбца: на программе и после */
.tr-twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.tr-twocol h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }

/* Где проводили */
.tr-track { display: grid; gap: 0; }
.tr-track__row { display: grid; grid-template-columns: 14rem 1fr; gap: .35rem 2rem; padding: 1rem 0; }
.tr-track__row + .tr-track__row { border-top: 1px solid var(--hv-line, #dfe3e8); }
.tr-track__who { font-weight: 700; }
.tr-track__what { color: var(--hv-muted, #6b727c); }

@media (max-width: 767.98px) {
    .tr-lessons { columns: 1; }
    .tr-track__row { grid-template-columns: 1fr; }
}

/* ── Сравнение форматов ──────────────────────────────────────────────
 * Главное возражение направления ИИ: «зачем группа, если есть курс».
 * Отвечаем построчно, а не абзацем текста: так видно, что различий много
 * и они предметные. На узком экране колонки подписываются самими данными.
 */
.tr-vs {
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
}
.tr-vs__row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.1fr;
    gap: 1.5rem;
    padding: 1.15rem 1.75rem;
    align-items: baseline;
}
.tr-vs__row + .tr-vs__row { border-top: 1px solid var(--hv-line, #dfe3e8); }
.tr-vs__row--head {
    background: var(--hv-paper, #f6f7f9);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hv-muted, #6b727c);
}
.tr-vs__k { font-weight: 600; }
.tr-vs__a { display: flex; gap: .5rem; align-items: baseline; }
.tr-vs__a i { color: var(--hv-accent, #0b5cab); font-size: 1rem; flex: none; }
.tr-vs__b { color: var(--hv-muted, #6b727c); }
.tr-vs__row--head .tr-vs__a { color: var(--hv-ink, #16191d); }

/* ── Кто ведёт ────────────────────────────────────────────────────────
 * Регалии отдельным столбцом: списком они читаются, а внутри абзаца
 * превращаются в перечисление, которое пропускают глазами.
 */
.tr-author {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    padding: 2.25rem;
    border: 1px solid var(--hv-line, #dfe3e8);
    border-left: 3px solid var(--hv-accent, #0b5cab);
    border-radius: 2px;
    background: #fff;
}
.tr-author__main h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.tr-author__role {
    color: var(--hv-accent, #0b5cab);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 1rem;
}
.tr-author__main > p { color: var(--hv-muted, #6b727c); }
.tr-author__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hv-line, #dfe3e8);
}
.tr-author__fact span {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tr-author__fact small {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--hv-muted, #6b727c);
}
.tr-author__list { list-style: none; margin: 0; padding: 0; }
.tr-author__list li {
    display: flex;
    gap: .65rem;
    align-items: baseline;
    padding: .6rem 0;
    font-size: .95rem;
}
.tr-author__list li + li { border-top: 1px solid var(--hv-line, #dfe3e8); }
.tr-author__list i { color: var(--hv-accent, #0b5cab); flex: none; }

/* ── Форматы и условия ───────────────────────────────────────────────── */
.tr-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tr-offer {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--hv-line, #dfe3e8);
    border-radius: 2px;
    background: #fff;
}
.tr-offer--alt { background: var(--hv-paper, #f6f7f9); }
.tr-offer h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .3rem; }
.tr-offer__meta {
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hv-muted, #6b727c);
    margin-bottom: 1rem;
}
.tr-offer__text { color: var(--hv-muted, #6b727c); flex: 1; margin-bottom: 1.25rem; }
.tr-offer__price { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.tr-offer__cta {
    align-self: flex-start;
    font-weight: 600;
    color: var(--hv-accent, #0b5cab);
    text-decoration: none;
}
.tr-offer__cta:hover { text-decoration: underline; }

@media (max-width: 991px) {
    .tr-author { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem; }
    .tr-author__facts { grid-template-columns: repeat(2, 1fr); }
    .tr-offers { grid-template-columns: 1fr; }
    .tr-vs__row { grid-template-columns: 1fr; gap: .35rem; padding: 1.15rem 1.25rem; }
    .tr-vs__row--head { display: none; }
    .tr-vs__b::before {
        content: 'На курсе: ';
        font-weight: 600;
        color: var(--hv-ink, #16191d);
    }
}

/* Вариант «кто ведёт» без персоналии: имён нет, поэтому текст идёт
 * во всю ширину, а цифры остаются той же полосой, что и в карточке автора. */
.tr-author--team { grid-template-columns: 1fr; }
.tr-author__lead { font-size: 1.05rem; max-width: 78ch; color: var(--hv-muted, #6b727c); }
.tr-author--team .tr-author__facts { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) {
    .tr-author--team .tr-author__facts { grid-template-columns: repeat(2, 1fr); }
}

/* «Почему это в повестке» — единственный блок с чужими данными,
 * поэтому источник стоит у каждой цифры отдельной строкой. */
.tr-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.tr-why__item {
    padding: 1.5rem;
    border: 1px solid var(--hv-line, #dfe3e8);
    border-top: 3px solid var(--hv-accent, #0b5cab);
    border-radius: 2px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.tr-why__n {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-bottom: .6rem;
}
.tr-why__item p { color: var(--hv-muted, #6b727c); margin-bottom: .9rem; flex: 1; }
.tr-why__item cite {
    display: block;
    font-style: normal;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hv-muted, #6b727c);
    opacity: .85;
}
@media (max-width: 991px) { .tr-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .tr-why { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   Слой языка главной
   Раздел живёт внутри .hv-page, поэтому палитра, отмена капса у
   заголовков и кнопки приходят из home-v2.css. Здесь — только то, что
   касается собственных блоков раздела: ритм секций, тёмные якоря и
   масштаб цифр. Правило то же, что на главной: графит и один синий,
   без градиентов и свечения.
   ════════════════════════════════════════════════════════════════════ */

/* Ритм секций берём общий с главной, иначе раздел «дышит» иначе,
   чем страница, с которой на него приходят. */
.tr-page .tr-section { padding: var(--hv-section-y) 0; }

.tr-page .tr-head {
    max-width: var(--hv-measure);
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.tr-page .tr-head h2 {
    font-size: clamp(1.45rem, 2.5vw, 2.05rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}
.tr-page .tr-head p { margin: .9rem 0 0; }

/* ── Тёмные якоря ──────────────────────────────────────────────────
   Двенадцать светлых секций подряд читаются как один длинный список.
   Тёмные полосы делят страницу на части и дают глазу опору: то же
   устройство, что на главной (герой → полоса цифр → … → призыв). */
.tr-page .tr-section--dark {
    background: var(--hv-dark, #14181d);
    color: rgba(255, 255, 255, .72);
}
.tr-page .tr-section--dark .tr-head h2 { color: #fff; }
.tr-page .tr-section--dark .tr-head p { color: rgba(255, 255, 255, .55); }

/* Полоса под героем — компактная, как hv-numbers: её работа не
   рассказывать, а поставить точку опоры сразу после первого экрана. */
.tr-page .tr-section--strip { padding: 1.5rem 0; }

/* ── Цифры исследований ────────────────────────────────────────────
   Это единственное место на странице, где цифра — главный герой,
   поэтому она набрана крупно, а карточка вокруг исчезает: на тёмном
   рамка не нужна, хватает вертикальной линии. */
.tr-page .tr-section--dark .tr-why { gap: 2rem 2.5rem; }
.tr-page .tr-section--dark .tr-why__item {
    background: none;
    border: 0;
    border-left: 2px solid var(--hv-accent, #0b5cab);
    border-radius: 0;
    padding: .1rem 0 .1rem 1.25rem;
}
.tr-page .tr-section--dark .tr-why__n {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    color: #fff;
    margin-bottom: .7rem;
}
.tr-page .tr-section--dark .tr-why__item p { color: rgba(255, 255, 255, .68); }
.tr-page .tr-section--dark .tr-why__item cite { color: rgba(255, 255, 255, .38); }

/* ── Карточки программ ─────────────────────────────────────────────
   Тень и скругление — почерк другого сайта. Здесь карточка держится
   на линии и на акцентной черте сверху, появляющейся при наведении. */
.tr-page .tr-card,
.tr-page .tr-offer,
.tr-page .tr-vs,
.tr-page .tr-author,
.tr-page .tr-flagship,
.tr-page .tr-why__item { box-shadow: none; }

.tr-page .tr-card {
    position: relative;
    transition: border-color .18s ease;
}
.tr-page .tr-card::before {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 2px;
    background: var(--hv-accent, #0b5cab);
    opacity: 0;
    transition: opacity .18s ease;
}
.tr-page .tr-card:hover { border-color: var(--hv-ink, #16191d); }
.tr-page .tr-card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .tr-page .tr-card, .tr-page .tr-card::before { transition: none; }
}

/* Кнопка в блоке форматов — настоящая кнопка, а не ссылка цветом:
   это последняя точка выбора перед формой. */
.tr-page .tr-offer__cta {
    display: inline-block;
    background: var(--hv-accent, #0b5cab);
    border: 1px solid var(--hv-accent, #0b5cab);
    color: #fff;
    border-radius: 2px;
    padding: .7rem 1.5rem;
    font-size: .92rem;
    text-decoration: none;
}
.tr-page .tr-offer__cta:hover {
    background: var(--hv-accent-dark, #084881);
    border-color: var(--hv-accent-dark, #084881);
    color: #fff;
    text-decoration: none;
}

/* Опыт и сравнение — узкая мера и линии вместо коробки:
   после карточек выше странице нужна другая форма. */
.tr-page .tr-vs { border-left: 0; border-right: 0; border-radius: 0; }
.tr-page .tr-track { border-top: 1px solid var(--hv-line, #dfe3e8); }

/* Ссылка на программу — заголовок карточки, а не текстовая ссылка:
   подчёркивание внутри плитки создаёт вторую линию рядом с рамкой. */
.tr-page .tr-card h3 a,
.tr-page .tr-matrix__name a,
.tr-page .tr-flagship h3 a {
    color: inherit;
    text-decoration: none;
}
.tr-page .tr-card:hover h3 a,
.tr-page .tr-matrix__row:hover .tr-matrix__name a { color: var(--hv-accent, #0b5cab); }
.tr-page .tr-card h3 a:focus-visible,
.tr-page .tr-matrix__name a:focus-visible { text-decoration: underline; }

/* Плоская карточка вместо приподнятой: на этой странице карточки
   стоят рядом с линиями и полосами, и подъём выбивается из ряда. */
.tr-page .tr-card:hover { transform: none; }

/* На графите плотный синий уходит в фон — на тёмных секциях акцент
   осветляется до того же тона, но читаемого. */
.tr-page .tr-section--dark { --hv-accent: #5aa9ec; }

/* ── Финальный призыв ──────────────────────────────────────────────
   Общий блок заявки приходит с градиентом и небесно-голубой кнопкой —
   почерк, от которого раздел только что ушёл. Внутри раздела он
   закрывает страницу тем же графитом, что и главная. */
.tr-page .cta-brief-section { background: var(--hv-dark, #14181d); }
.tr-page .cta-brief-section .brief-form-card { border-radius: 2px; }
.tr-page .cta-brief-section .btn-primary {
    background: var(--hv-accent, #0b5cab);
    border-color: var(--hv-accent, #0b5cab);
    border-radius: 2px;
}
.tr-page .cta-brief-section .btn-primary:hover {
    background: var(--hv-accent-dark, #084881);
    border-color: var(--hv-accent-dark, #084881);
}

/* ── Первый экран ──────────────────────────────────────────────────
   Общий герой красит фон синеватым #0f1b2d и кладёт поверх фотографии
   градиент от 95 % до 38 % — снимок теряется, а рядом с графитовой
   полосой цифр два разных тёмных читаются как ошибка печати.
   Здесь то же решение, что на главной: ровная вуаль вместо градиента
   («одна ровная степень контраста для текста») и лёгкое обесцвечивание,
   чтобы фотография не спорила с синим акцентом. */
.tr-page .hero-compact { background: var(--hv-dark, #14181d); }
.tr-page .hero-compact__scrim { background: rgba(13, 17, 22, .8); }
.tr-page .hero-compact__media { filter: grayscale(.35) contrast(1.02); }

/* home-v2.css красит заголовки в графит правилом `.hv-page h1`, и оно
   специфичнее, чем `.hero-compact__title`. На главной для её собственного
   героя есть такое же исключение — здесь оно нужно для компактного. */
.tr-page .hero-compact__title { color: #fff; }
.tr-page .hero-compact__lede { color: rgba(255, 255, 255, .82); }

/* Кнопка первого экрана — тот же синий, что во всех действиях раздела,
   и тот же радиус: небесно-голубая пилюля осталась от прежней палитры. */
.tr-page .hero-compact__btn {
    border-radius: 2px;
    background: var(--hv-accent, #0b5cab);
    border-color: var(--hv-accent, #0b5cab);
}
.tr-page .hero-compact__btn:hover {
    background: var(--hv-accent-dark, #084881);
    border-color: var(--hv-accent-dark, #084881);
}

/* ── Полоса цифр под героем ────────────────────────────────────────
   До правки под героем шли два светлых блока подряд — буллеты и цифры,
   и вместе они читались одним серым куском на 250 пикселей. Тёмная
   полоса разделяет их и ставит опору сразу после первого экрана:
   то же место и та же роль, что у полосы цифр на главной. */
.tr-page .proof-strip {
    background: #0f1317;
    color: rgba(255, 255, 255, .72);
    padding: 1.5rem 0;
    border: 0;
}
.tr-page .proof-strip__items { justify-content: flex-start; gap: 1rem 4rem; }
.tr-page .proof-strip__item { border: 0; }
.tr-page .proof-strip__number {
    color: #fff;
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
}
.tr-page .proof-strip__label { color: rgba(255, 255, 255, .55); }
.tr-page .proof-strip__context,
.tr-page .proof-strip p { color: rgba(255, 255, 255, .42); }

/* Пояснение под цифрами: в общем блоке оно центрировано, а в тёмной
   полосе длинный центрированный текст в две строки читается тяжело —
   ставим его по левому краю и поднимаем контраст до различимого. */
.tr-page .proof-strip__context,
.tr-page .proof-strip p {
    /* Разметка блока несёт утилиты бутстрапа .text-center и .text-muted,
       а они объявлены с !important — перебить их можно только тем же. */
    text-align: left !important;
    color: rgba(255, 255, 255, .55) !important;
    max-width: 56rem;
    margin-left: 0;
    font-size: .82rem;
}

/* Цифры формата и этапы на тёмном якоре. */
.tr-page .tr-section--dark .tr-numbers__n,
.tr-page .tr-section--dark .tr-phase h3 { color: #fff; }
.tr-page .tr-section--dark .tr-numbers__l,
.tr-page .tr-section--dark .tr-phase p { color: rgba(255, 255, 255, .62); }
.tr-page .tr-section--dark .tr-phase { border-top-color: rgba(255, 255, 255, .22); }
/* Сетка цифр держится на белой заливке ячеек и светлых зазорах —
   на графите это давало белые пустые плитки. Здесь та же сетка живёт
   на прозрачных ячейках, а линии рисует уже сам фон. */
.tr-page .tr-section--dark .tr-numbers {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .18);
}
.tr-page .tr-section--dark .tr-numbers__item { background: var(--hv-dark, #14181d); }

/* ════════════════════════════════════════════════════════════════════
   Композиция из макета «Industry»
   Взяты решения о структуре, не оформление: язык остаётся тем же, что
   на главной. Из макета — тёмная карточка флагманской программы сразу
   за первым экраном, более крупные заголовки секций и отраслевой опыт
   плитками вместо строк.
   ════════════════════════════════════════════════════════════════════ */

/* Заголовки секций крупнее: в макете заголовок читается как
   высказывание, у нас читался как подпись к таблице. */
.tr-page .tr-head h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }

/* ── Флагманская программа ─────────────────────────────────────────
   В макете это первое, что видит человек после заголовка: тёмная
   карточка с названием курса, составом, форматом и кнопкой. Здесь она
   стоит сразу за первым экраном и работает так же — направление
   объясняет герой, а покупает эта карточка. */
.tr-page .tr-flagship {
    background: var(--hv-dark, #14181d);
    border-color: var(--hv-dark, #14181d);
    color: rgba(255, 255, 255, .74);
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.tr-page .tr-flagship__label { color: #8fbdf0; }
.tr-page .tr-flagship__main h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tr-page .tr-flagship__main h3,
.tr-page .tr-flagship__main h3 a { color: #fff; }
.tr-page .tr-flagship__main p { color: rgba(255, 255, 255, .74); }
.tr-page .tr-flagship__points i { color: #5aa9ec; }
.tr-page .tr-flagship__side {
    background: rgba(255, 255, 255, .05);
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.tr-page .tr-flagship .tr-meta dt { color: rgba(255, 255, 255, .5); }
.tr-page .tr-flagship .tr-meta dd { color: #fff; }

/* Действие внутри карточки: в макете кнопка стоит в ней самой,
   и это единственный сплошной объект на экране. */
.tr-page .tr-flagship__cta {
    display: inline-block;
    align-self: start;
    width: fit-content;
    margin-top: 1.5rem;
    padding: .8rem 1.8rem;
    background: #fff;
    color: var(--hv-dark, #14181d);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border-radius: 2px;
}
.tr-page .tr-flagship__cta:hover { background: #e7edf3; color: var(--hv-dark, #14181d); }

/* ── Отраслевой опыт ───────────────────────────────────────────────
   Пять строк друг под другом весят меньше, чем те же пять плиток в
   ряд: список читается как сноска, плитки — как послужной список. */
.tr-page .tr-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border: 1px solid var(--hv-line, #dfe3e8);
    border-top: 1px solid var(--hv-line, #dfe3e8);
    gap: 0;
}
.tr-page .tr-track__row {
    display: block;
    padding: 1.5rem 1.35rem;
    border: 0;
    border-left: 1px solid var(--hv-line, #dfe3e8);
}
.tr-page .tr-track__row:first-child { border-left: 0; }
.tr-page .tr-track__who {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hv-ink, #16191d);
    margin-bottom: .6rem;
}
.tr-page .tr-track__what { color: var(--hv-muted, #6b727c); font-size: .9rem; line-height: 1.5; }

@media (max-width: 767px) {
    .tr-page .tr-track { grid-template-columns: 1fr; }
    .tr-page .tr-track__row { border-left: 0; border-top: 1px solid var(--hv-line, #dfe3e8); }
    .tr-page .tr-track__row:first-child { border-top: 0; }
}

/* Разворот флагмана задан селектором `.tr-page .tr-flagship`, и он
   специфичнее общего медиазапроса ниже по файлу — на узком экране
   колонки не схлопывались. Повторяем правило с той же специфичностью. */
@media (max-width: 991px) {
    .tr-page .tr-flagship { grid-template-columns: 1fr; }
    .tr-page .tr-flagship__side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .tr-page .tr-flagship__cta { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   Светлый первый экран
   Снимок перестаёт быть подложкой и становится объектом справа. Тёмное
   на странице остаётся редкостью — карточка флагманской программы и
   финальный призыв, — а не каркасом из полос: именно так держится
   ощущение чистоты в макете, с которого это взято.
   ════════════════════════════════════════════════════════════════════ */
.tr-hero {
    background: var(--hv-paper, #f6f7f9);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    border-bottom: 1px solid var(--hv-line, #dfe3e8);
}
.tr-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.tr-hero--flat .tr-hero__grid { grid-template-columns: minmax(0, 42rem); }

/* Плашки: то, что раньше шло отдельной серой полосой под героем.
   Над заголовком они работают как условия сделки, а не как сноска. */
.tr-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.tr-hero__tags li {
    padding: .35rem .8rem;
    border: 1px solid var(--hv-line, #dfe3e8);
    background: #fff;
    border-radius: 2px;
    font-size: .82rem;
    color: var(--hv-body, #3d444d);
}

.tr-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--hv-ink, #16191d);
    margin: 0 0 1.1rem;
    text-wrap: balance;
}
.tr-hero__lede {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: var(--hv-body, #3d444d);
    max-width: 34rem;
    margin: 0 0 1.75rem;
}

.tr-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.tr-hero__btn {
    display: inline-block;
    padding: .85rem 2rem;
    border-radius: 2px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    background: var(--hv-accent, #0b5cab);
    border: 1px solid var(--hv-accent, #0b5cab);
    color: #fff;
}
.tr-hero__btn:hover {
    background: var(--hv-accent-dark, #084881);
    border-color: var(--hv-accent-dark, #084881);
    color: #fff;
}
/* Вторая кнопка ведёт к содержанию, а не к форме, поэтому она
   не соперничает с первой по весу. */
.tr-hero__btn--ghost {
    background: #fff;
    color: var(--hv-ink, #16191d);
    border-color: var(--hv-line, #dfe3e8);
}
.tr-hero__btn--ghost:hover {
    background: var(--hv-paper, #f6f7f9);
    border-color: var(--hv-ink, #16191d);
    color: var(--hv-ink, #16191d);
}
.tr-hero__btn:focus-visible {
    outline: 2px solid var(--hv-accent, #0b5cab);
    outline-offset: 2px;
}

/* Обещание под кнопкой: что человек получит, если напишет. */
.tr-hero__note {
    margin: 1rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--hv-muted, #6b727c);
    max-width: 34rem;
}

.tr-hero__media { margin: 0; }
.tr-hero__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--hv-line, #dfe3e8);
    filter: grayscale(.2) contrast(1.02);
}

@media (max-width: 991px) {
    .tr-hero__grid { grid-template-columns: 1fr; }
    /* Снимок под текстом, а не над ним: на телефоне первым экраном
       должно быть обещание, а не картинка. */
    .tr-hero__media { order: 2; }
    .tr-hero__media img { aspect-ratio: 16 / 9; }
}

/* Номер секции: страница длинная, и номер даёт понять, где ты
   находишься. Маркер честен потому, что нумерует фактический порядок
   чтения, а не украшает отдельные блоки. */
.tr-page .tr-head { position: relative; }
.tr-page .tr-head__num {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--hv-accent, #0b5cab);
    font-variant-numeric: tabular-nums;
    margin-bottom: .5rem;
}
.tr-page .tr-section--dark .tr-head__num { color: #5aa9ec; }

/* ── Цифры направления ─────────────────────────────────────────────
   Полоса вернулась на светлое вместе с героем. Вместо ровных ячеек с
   рамками — крупное число и акцентная черта слева: так читается
   утверждение, а не таблица. */
.tr-page .proof-strip {
    background: #fff;
    color: var(--hv-body, #3d444d);
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border: 0;
    border-bottom: 1px solid var(--hv-line, #dfe3e8);
}
.tr-page .proof-strip__items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3.5rem;
    justify-content: flex-start;
}
.tr-page .proof-strip__item {
    border: 0;
    border-left: 2px solid var(--hv-accent, #0b5cab);
    padding: .1rem 0 .1rem 1rem;
    min-width: 9rem;
}
.tr-page .proof-strip__number {
    color: var(--hv-ink, #16191d);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
}
.tr-page .proof-strip__label { color: var(--hv-muted, #6b727c); }
.tr-page .proof-strip__context,
.tr-page .proof-strip p {
    text-align: left !important;
    color: var(--hv-muted, #6b727c) !important;
    max-width: 56rem;
    margin-left: 0;
    font-size: .88rem;
}

/* Те же крупные метрики с чертой — в блоке исследований на светлом. */
.tr-page .tr-why__item {
    background: none;
    border: 0;
    border-left: 2px solid var(--hv-accent, #0b5cab);
    border-radius: 0;
    padding: .1rem 0 .1rem 1.25rem;
}
.tr-page .tr-why__n {
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    color: var(--hv-ink, #16191d);
    margin-bottom: .7rem;
}

/* Число и подпись — в столбик: в общем блоке они лежат в строку, и на
   светлом фоне с акцентной чертой это читалось как «5 программ 14
   уроков» одной лентой. Разделители блока убираем — линию уже даёт
   черта у каждого пункта. */
.tr-page .proof-strip__item::before,
.tr-page .proof-strip__item::after { display: none; }
.tr-page .proof-strip__item { border-right: 0 !important; }
.tr-page .proof-strip__number { display: block; }
.tr-page .proof-strip__label { display: block; margin-top: .25rem; font-size: .85rem; }
.tr-page .proof-strip__context,
.tr-page .proof-strip p { margin-top: 1.25rem; }

/* Пункт полосы — колонка: в общем блоке это flex-строка с иконкой,
   и число с подписью вставали рядом. Разделители-палочки блок рисует
   отдельными элементами — они лишние там, где у каждого пункта своя
   акцентная черта. */
.tr-page .proof-strip__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    white-space: normal;
}
.tr-page .proof-strip__divider { display: none; }