/* КНОПКИ ПО ГАЙДУ ESTHERWOW
 *
 * Подключается последним, после стилей страницы, поэтому
 * задаёт вид кнопок везде одинаково.
 *
 * Раньше кнопки были описаны в четырёх файлах семью
 * классами: скруглённые на 14 пикселей, разной высоты,
 * с тенями и подъёмом при наведении. В гайде другое:
 * почти прямые углы и прописные с разрядкой.
 *
 * Кнопка первого экрана тёмная и золотится при наведении,
 * как в гайде. Кнопки действия — покупка, оплата, отметка
 * урока — цвета бабочки: это главный цвет марки.
 */

/* ========================================
   ОБЩЕЕ ДЛЯ ВСЕХ КНОПОК
======================================== */

/* Один набор на весь сайт — как на странице книг:
   плоский прямоугольник, прописные с разрядкой,
   при наведении кнопка чуть приподнимается и
   отбрасывает мягкую синюю тень.

   Основная (.btn-primary) — заливка цветом бабочки.
   Вторая (.btn-secondary) — контур того же цвета.
   На тёмном фоне: .btn-light — белая, золотится
   при наведении; .btn-ghost — тонкий белый контур;
   .btn-gold — золотая заливка. */

.btn,
.course-button,
.empty-button,
.complete-lesson-button,
.checkout-button,
.course-finished-button {

    gap: 10px;

    min-height: 48px;
    padding: 0 28px;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;

    text-transform: uppercase;
    letter-spacing: 2.4px;

    /* Угол почти прямой: в гайде кнопка — прямоугольник */
    border-radius: 2px;

    box-shadow: none;

    transition:
        transform 0.25s var(--ease-soft),
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.btn:focus-visible,
.course-button:focus-visible,
.checkout-button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}


/* ========================================
   ОСНОВНАЯ КНОПКА
======================================== */

.btn-primary,
.course-button,
.empty-button,
.complete-lesson-button,
.checkout-button {

    background: var(--butterfly-strong);
    color: var(--white);

    border: 1px solid var(--butterfly-strong);
}


/* ========================================
   ВТОРАЯ КНОПКА
======================================== */

/* Контур цвета бабочки: стоит рядом с основной
   и не спорит с ней */

.btn-secondary,
.course-finished-button {

    background: transparent;
    border: 1px solid var(--butterfly-border);
    border-radius: 2px;

    color: var(--butterfly-deep);
}

.hero-buttons {
    align-items: center;
}


/* ========================================
   КНОПКИ НА ТЁМНОМ ФОНЕ
======================================== */

.btn.btn-light {
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--ink);
}

.btn.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--white);
}

.btn.btn-gold {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: var(--ink);
}


/* ========================================
   НАВЕДЕНИЕ
======================================== */

/* На телефоне и планшете наведения не бывает: без этой
   обёртки палец оставлял бы кнопку «залипшей» */

@media (hover: hover) {

    .btn:hover,
    .course-button:hover,
    .empty-button:hover,
    .complete-lesson-button:hover,
    .checkout-button:hover,
    .course-finished-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -16px rgba(16, 48, 74, 0.55);
    }

    .btn-primary:hover,
    .course-button:hover,
    .empty-button:hover,
    .complete-lesson-button:hover,
    .checkout-button:hover {
        background: var(--butterfly-deep);
        border-color: var(--butterfly-deep);
        color: var(--white);
    }

    .btn-secondary:hover,
    .course-finished-button:hover {
        background: var(--butterfly-soft);
        border-color: var(--butterfly-deep);
        color: var(--butterfly-deep);
    }

    .btn.btn-light:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--ink);
    }

    .btn.btn-ghost:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--white);
        color: var(--white);
    }

    .btn.btn-gold:hover {
        background: var(--white);
        border-color: var(--white);
        color: var(--ink);
    }

    .btn.btn-light:hover,
    .btn.btn-ghost:hover,
    .btn.btn-gold:hover {
        box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6);
    }
}

.btn:active,
.course-button:active,
.checkout-button:active {
    transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn:hover,
    .course-button:hover,
    .checkout-button:hover {
        transform: none !important;
    }
}


/* ========================================
   ПРОЙДЕННЫЙ УРОК
======================================== */

/* Кнопка завершённого урока гаснет до серого:
   цвет бабочки означает действие, а отметка — не действие */

.course-button.completed,
.complete-lesson-button.completed {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

@media (hover: hover) {

    .course-button.completed:hover,
    .complete-lesson-button.completed:hover {
        background: var(--bg-primary);
        border-color: var(--bg-primary);
        color: var(--white);
    }
}


/* ========================================
   КНОПКА НА КАРТОЧКЕ КУРСА
======================================== */

/* В разметке это та же .btn-primary, что и в первом
   экране, но ведёт она к покупке — поэтому здесь
   цвет марки, а не тёмный прямоугольник. */

.course-card .btn-primary {
    background: var(--butterfly-strong);
    border-color: var(--butterfly-strong);
    color: var(--white);
}

.popular-badge {
    background: var(--butterfly-deep);
    color: var(--white);
}

@media (hover: hover) {

    .course-card .btn-primary:hover {
        background: var(--butterfly-deep);
        border-color: var(--butterfly-deep);
        color: var(--white);
    }
}


/* ========================================
   КАРТОЧКА УРОВНЯ
======================================== */

/* Построена по присланному образцу: картинка сверху,
   подпись уровня, название этапа прописными, короткие
   пункты списком, тонкая черта, цена и кнопка-контур.

   Подложка карточки — кремовая, как в образце; цвет
   уровня остался на месте картинки, поэтому его видно
   и когда файла ещё нет. */

.courses-grid .course-card,
.courses-grid .course-card.featured {
    display: flex;
    flex-direction: column;

    padding: 14px;

    background: var(--bg-secondary);
    border: 1px solid var(--accent-border);
    border-radius: 2px;

    box-shadow: none;
}

.course-card-media {
    height: 132px;
    margin-bottom: 20px;

    /* Пока картинки нет, остаётся подложка. Тонкая рамка
       нужна, чтобы место под неё было видно и не сливалось
       с карточкой того же тона. */
    background-color: var(--white);
    background-size: cover;
    background-position: center;

    border: 1px solid var(--border);
    border-radius: 2px;
}

.courses-grid .course-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 0 4px 4px;
}

.courses-grid .course-label {
    margin-bottom: 6px;

    color: var(--text-main);

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--heading-tracking);
}

.courses-grid .course-card h3 {
    margin: 0 0 18px;

    font-family: var(--font-header);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.1;

    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Короткие пункты вместо абзаца описания */

.course-highlights {
    margin: 0 0 20px;
    padding: 0;

    list-style: none;
}

.course-highlights li {
    position: relative;

    margin-bottom: 8px;
    padding-left: 16px;

    color: var(--text-main);
    font-size: 14px;
    line-height: 1.4;
}

.course-highlights li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 7px;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: var(--butterfly-deep);
}

/* Тонкая черта перед ценой — как в образце */

.courses-grid .course-price {
    margin-top: auto;
    padding-top: 16px;

    border-top: 1px solid var(--border-strong);

    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

/* Кнопка карточки — основная, цветом бабочки */

.course-select {
    width: 100%;
    margin-top: 18px;
    min-height: 48px;

    background: var(--butterfly-strong);
    border: 1px solid var(--butterfly-strong);
    border-radius: 2px;

    color: var(--white);
}

@media (hover: hover) {

    .course-select:hover,
    .courses-grid .course-card:hover .course-select {
        background: var(--butterfly-deep);
        border-color: var(--butterfly-deep);
        color: var(--white);
    }
}


/* ВСЯ КАРТОЧКА — ССЫЛКА
 *
 * Второй <a> вокруг карточки не годится: ссылка внутри ссылки —
 * недопустимая разметка, и браузеры разбирают её кто во что горазд.
 * Поэтому кнопка растягивает невидимую область нажатия на всю
 * карточку. Ссылка остаётся ровно одна: она же попадает под
 * табуляцию, её же читает программа чтения с экрана, а кнопка
 * остаётся на месте для вида.
 *
 * Держится на том, что у .course-card стоит position: relative,
 * а у .course-card-content позиционирования нет: появится — и
 * область нажатия съёжится до него.
 *
 * Плата за приём: текст карточки больше не выделяется мышью,
 * потому что сверху лежит прозрачный слой.
 */

.courses-grid .course-card {
    cursor: pointer;
}

.courses-grid .course-select::after {
    content: "";

    position: absolute;
    inset: 0;
}

/* И сразу снимаем подскок кнопки.
 *
 * У .btn на наведении стоит transform: translateY(-2px), и здесь он
 * ломает всё. Любой transform делает элемент системой координат для
 * своих absolute-потомков: слой схлопывается с карточки до самой
 * кнопки, наведение с остальной карточки теряется, transform
 * снимается, слой разворачивается обратно — и так по кругу. На
 * экране кнопка трясётся.
 *
 * Проверено замером: стоит навесить кнопке transform, и центр
 * карточки перестаёт быть ссылкой.
 *
 * Отдельный подскок кнопке всё равно не нужен: на наведении
 * приподнимается вся карточка целиком.
 */

.courses-grid .course-select,
.courses-grid .course-select:hover {
    transform: none;
    box-shadow: none;
}