/*
 * Переопределения покупной темы Echooling.
 *
 * Тема рассчитана на английский интерфейс, и часть её решений на русском
 * выглядит неправильно. Правки собраны здесь, а не в самой теме: её файл
 * минифицирован и будет перезаписан при обновлении.
 *
 * Подключается последним, после style.css.
 *
 * Исходник живёт здесь, а не в public/build: тот каталог в .gitignore
 * и целиком перезаписывается сборкой (vite копирует resources/css →
 * public/build/css). Файл, лежащий только там, пропал бы при первом
 * же npm run build и не попал бы в репозиторий вовсе.
 */

/* --------------------------------------------------------------------------
   Заголовки
   -------------------------------------------------------------------------- */

/*
 * Тема ставит text-transform: capitalize, и заголовок превращается в
 * «Офлайн-Обучение В Центре Underground» — с большой буквы каждое слово.
 * В английском это нормальный стиль заголовка, в русском так не пишут.
 */
.breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .breadcrumbs-title,
.breadcrumbs-title {
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Карточка курса в каталоге
   -------------------------------------------------------------------------- */

/*
 * Кликабельна вся карточка.
 *
 * Не оборачиваем её в <a>: внутри уже есть ссылки — уровень и «Подробнее», —
 * а вложенные ссылки невалидны и ломают переход по Tab. Вместо этого
 * растягиваем ссылку заголовка невидимым слоем на всю карточку, а остальные
 * ссылки поднимаем над ним.
 */
.inner-course {
    position: relative;
}

.inner-course .case-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inner-course .case-img a,
.inner-course .case-bottom a {
    position: relative;
    z-index: 2;
}

.inner-course:hover {
    box-shadow: 0 6px 24px -12px rgba(22, 35, 44, .35);
}

/* Фокус с клавиатуры должен быть виден на всей карточке */
.inner-course .case-title a:focus-visible::after {
    outline: 2px solid #0f6466;
    outline-offset: 2px;
}

/*
 * Мета-строка карточки свёрстана в теме плавающим списком, из-за чего
 * длинное название программы налезало на число разделов.
 */
.course-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: baseline;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    float: none;
}

.course-meta-row li {
    float: none;
    margin: 0;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Черновики и цена
   -------------------------------------------------------------------------- */

.course-draft-badge {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .15rem .5rem;
    border: 1px solid #c98a00;
    border-radius: 3px;
    color: #8a5f00;
    background: #fff6e2;
    font-size: .75rem;
    line-height: 1.4;
}

/* Ноль означает «цена не назначена», а не «бесплатно» */
.price-unset {
    color: #6b7a83;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Быстрые переходы на карточке курса в кабинете
   -------------------------------------------------------------------------- */

/*
 * Как на карточке у ERC, но с одной поправкой: там иконки появляются
 * только при наведении, а на телефоне наведения не существует — до них
 * просто не добраться. Поэтому скрываем их лишь там, где есть мышь,
 * и всегда показываем на сенсорных экранах.
 */
.course-quick-links {
    display: flex;
    gap: .35rem;
    margin: 0 0 .9rem;
}

.course-quick-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    color: #5d6b74;
    background: #eef2f4;
    transition: background-color .15s ease, color .15s ease;
}

.course-quick-links a:hover,
.course-quick-links a:focus-visible {
    color: #fff;
    background: #0f6466;
}

.course-quick-links a:focus-visible {
    outline: 2px solid #0f6466;
    outline-offset: 2px;
}

.course-quick-links svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

/* Есть мышь — прячем до наведения на карточку */
@media (hover: hover) and (pointer: fine) {
    .course-quick-links {
        opacity: 0;
        transition: opacity .15s ease;
    }

    .card:hover .course-quick-links,
    .card:focus-within .course-quick-links {
        opacity: 1;
    }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .course-quick-links,
    .course-quick-links a {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Баннер курса
   -------------------------------------------------------------------------- */

/*
 * У наших баннеров субъект справа, а слева намеренно светлое пустое поле —
 * туда ложится заголовок. Заголовок в теме белый, и на светлом фоне он
 * нечитаем, поэтому кладём затемнение градиентом: плотное слева, где текст,
 * и прозрачное справа, где человек.
 */
.breadcrumbs-wrap.has-course-hero {
    position: relative;
}

.breadcrumbs-wrap.has-course-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(16, 26, 33, .78) 0%,
        rgba(16, 26, 33, .62) 38%,
        rgba(16, 26, 33, .18) 70%,
        rgba(16, 26, 33, .05) 100%
    );
    pointer-events: none;
}

/* Текст должен лежать НАД затемнением */
.breadcrumbs-wrap.has-course-hero .breadcrumbs-inner {
    position: relative;
    z-index: 1;
}

/* На узких экранах текст идёт поверх центра — затемняем равномерно */
@media (max-width: 767px) {
    .breadcrumbs-wrap.has-course-hero::after {
        background: rgba(16, 26, 33, .62);
    }
}

/* --------------------------------------------------------------------------
   Шапка сайта
   -------------------------------------------------------------------------- */

/*
 * Тема свёрстана под английские подписи и плавающие пункты. Русские слова
 * длиннее, меню перестаёт помещаться в строку, и блок пользователя уезжает
 * на второй ряд под логотип — выглядит как сломанная вёрстка.
 *
 * Приводим шапку к обычной строке: логотип, меню и пользователь на одной
 * линии, перенос — только когда места действительно нет.
 */
.react-main-menu nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.react-main-menu .menu-toggle {
    flex: 0 0 auto;
    margin: 0;
}

.react-main-menu .logo {
    padding: 0;
    margin: 0;
}

.react-main-menu .react-inner-menus {
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* Пункты меню — гибкая строка вместо float */
.react-menus.home {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem 1.6rem;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.react-menus.home > li {
    float: none;
    margin: 0;
    padding: 0;
    /* Выпадающие подменю позиционируются относительно пункта */
    position: relative;
}

.react-menus.home > li > a {
    padding: .35rem 0;
    white-space: nowrap;
}

/* Шапка стала компактнее — вернём немного воздуха */
.react-main-menu {
    padding: 16px 0;
}

@media (max-width: 991px) {
    .react-main-menu .react-inner-menus {
        justify-content: flex-start;
    }
}

/* Логотип: фиксируем разумную высоту, ширина по пропорции */
.react-main-menu .logo img {
    height: 48px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Страница курса в кабинете
   -------------------------------------------------------------------------- */

.course-continue-banner {
    padding: .75rem 1rem;
    border: 1px solid #d5e3e8;
    border-radius: 6px;
    background: #f4f9fa;
}

.course-continue-label {
    display: block;
    margin-bottom: .2rem;
    color: #6b7a83;
    font-size: .8rem;
}

.course-continue-link {
    font-weight: 600;
    color: #0f6466;
    text-decoration: none;
}

.course-continue-link:hover,
.course-continue-link:focus-visible {
    color: #0a4d4f;
    text-decoration: underline;
}

.course-completed-note {
    margin: 0;
    color: #6b7a83;
    font-size: .9rem;
}

.course-item-summary {
    margin-top: .15rem;
    line-height: 1.4;
}