/* ============================================================
   Flagship banner — адаптив
   ============================================================ */

/* Ряд из двух баннеров: на узких экранах стек в колонку.
   Граница 880px подобрана так, чтобы при сжатии слоган в 40px
   не разваливался на 4+ строки внутри 50%-ширины. */
@media (max-width: 880px) {
    .flagship-banners-row {
        flex-direction: column;
        gap: 18px;
    }
    .flagship-banners-row > .flagship-banner {
        flex: 1 1 auto;
        width: 100%;
        max-width: 549px;
    }
    /* В колонке высота по контенту (фикс 420px нужен только для пары рядом).
       margin-top: auto на тегах при height:auto не работает — даём явный отступ. */
    .flagship-banner {
        height: auto;
    }
    .flagship-banner__tags {
        margin-top: 32px;
    }
    /* Описание ограничиваем по ширине, чтобы не наезжало на фон-картинку
       справа (микрофон/кресло) — иначе на мобиле слова уходят под изображение. */
    .flagship-banner__subhead {
        max-width: 62%;
    }
}

/* до 600px: внутренние отступы поджимаются, слоган уменьшается */
@media (max-width: 600px) {
    .flagship-banner {
        max-width: 100%;
        min-height: 0;
        padding: 24px 22px;
    }
    .flagship-banner__logo {
        height: 40px;
    }
    .flagship-banner__badge {
        font-size: 10px;
        padding: 7px 11px 7px 10px;
        letter-spacing: 0.06em;
    }
    .flagship-banner__course-title {
        font-size: clamp(26px, 7.5vw, 32px);
    }
    .flagship-banner__slogan {
        font-size: 17px;
    }
    .flagship-banner__subhead {
        font-size: 13px;
        margin-top: 12px;
    }
    .flagship-banner__tags {
        margin-top: 20px;
        gap: 6px;
    }
    .flagship-banner__tag {
        font-size: 11.5px;
        padding: 5px 9px;
    }
    .flagship-banner__cta-row {
        padding-top: 22px;
    }
    .flagship-banner__cta {
        font-size: 14px;
        padding: 11px 11px 11px 18px;
        gap: 12px;
    }
    .flagship-banner__cta-arrow {
        width: 30px;
        height: 30px;
    }
}

/* очень узкие экраны (360px и меньше) */
@media (max-width: 360px) {
    .flagship-banner {
        padding: 20px 18px;
    }
    .flagship-banner__course-title {
        font-size: clamp(22px, 7vw, 28px);
    }
}