/* ============================================================
   Компактный герой — только разделы онлайн-курсов и бизнес-игр
   ------------------------------------------------------------
   Отдельный файл, а не courses.css / games.css: разметку
   используют оба раздела, и дублировать правила в два файла
   нельзя. Подключается точечно через {% block extra_css %}
   в course_page / courses_index_page / games_index_page —
   на остальные разделы сайта не попадает вовсе.

   Общий blocks/hero_block.html (.hero-split) не затрагивается:
   здесь другая разметка с собственным префиксом .hero-compact.
   ============================================================ */

.hero-compact {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(21rem, 50vh, 32rem);
    background: #0f1b2d;
    color: #fff;
    overflow: hidden;
}

.hero-compact__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Мобильный слой с более лёгким рендишеном (?size=md).
   display:none у фонового слоя означает, что браузер его
   не скачивает, поэтому две картинки не грузятся одновременно. */
.hero-compact__media--sm { display: none; }

.hero-compact__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(12, 22, 38, .95) 0%,
        rgba(12, 22, 38, .86) 52%,
        rgba(12, 22, 38, .38) 100%
    );
}

/* Только вертикальные отступы: горизонтальные — гаттеры .container,
   если их обнулить, на мобильном текст ляжет вплотную к краю. */
.hero-compact__inner {
    position: relative;
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
    width: 100%;
}

.hero-compact__copy { max-width: 48rem; }

.hero-compact__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.hero-compact__tag {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #d7e4fb;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    padding: .25rem .85rem;
}

.hero-compact__tag--accent {
    color: #bfe3c6;
    border-color: rgba(134, 239, 172, .45);
    background: rgba(34, 197, 94, .14);
}

.hero-compact__title {
    font-size: clamp(1.75rem, 3.1vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 .85rem;
}

.hero-compact__lede {
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 1.6rem;
    max-width: 38rem;
}

.hero-compact__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-compact__btn {
    padding: .8rem 2rem;
    font-weight: 600;
    border-radius: .5rem;
}

.hero-compact__btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .42);
    background: transparent;
}

.hero-compact__btn--ghost:hover,
.hero-compact__btn--ghost:focus {
    color: #0f1b2d;
    background: #fff;
    border-color: #fff;
}

/* --- Полоса фактов: буллеты, шаги и приписка, вынесенные из героя --- */
.hero-compact-facts {
    background: #f4f6fa;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.75rem 0;
}

.hero-compact-facts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem 2rem;
}

.hero-compact-facts__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .95rem;
    line-height: 1.5;
    color: #33415c;
}

.hero-compact-facts__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45rem;
    width: .95rem;
    height: .5rem;
    border-left: 2px solid #2563eb;
    border-bottom: 2px solid #2563eb;
    transform: rotate(-45deg);
}

.hero-compact-facts__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid #e2e8f0;
}

.hero-compact-facts__step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 500;
    color: #33415c;
}

.hero-compact-facts__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
}

.hero-compact-facts__note {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: #5a6a85;
}

.hero-compact-facts__list + .hero-compact-facts__note {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 767.98px) {
    .hero-compact {
        min-height: clamp(19rem, 46vh, 26rem);
    }

    .hero-compact__media { display: none; }
    .hero-compact__media--sm { display: block; }

    .hero-compact__scrim {
        background: linear-gradient(
            180deg,
            rgba(12, 22, 38, .82) 0%,
            rgba(12, 22, 38, .92) 65%,
            rgba(12, 22, 38, .96) 100%
        );
    }

    .hero-compact__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .hero-compact__title { font-size: 1.7rem; }
    .hero-compact__lede { font-size: 1rem; margin-bottom: 1.35rem; }
    .hero-compact__cta { flex-direction: column; align-items: stretch; }
    .hero-compact__btn { width: 100%; text-align: center; }
    .hero-compact-facts { padding: 1.5rem 0; }
}

/* Страницы направлений идут без фонового снимка: тянуть высоту нечем,
   и min-height превращает полосу в пустоту справа от текста. */
.hero-compact--flat { min-height: 0; }

.hero-compact--flat .hero-compact__inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.hero-compact--flat .hero-compact__scrim { background: none; }

@media (max-width: 767.98px) {
    .hero-compact--flat .hero-compact__inner {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

/* Без снимка справа остаётся пустая половина: даём заголовку всю
   ширину, чтобы он не ломался на две строки раньше времени. */
.hero-compact--flat .hero-compact__copy { max-width: 62rem; }

/* Приписка под кнопкой героя — для страниц, где нет блока фактов. */
.hero-compact__note {
    margin: .9rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}