/* ==========================================================================
   ОГЛАВЛЕНИЕ (course-block-01-hero.css) — Лендинг курса, блок 1 (hero)
   HTML: #course-block-01
   Переиспользует .block-01 с главной; здесь — только отличия лендинга.

   1. Высота hero ниже главной — виден заголовок блока 2
   2. Скрыть луну, звёзды, мерцание (на лендинге не нужны)
   3. Шапка: сетка «бренд | На главную | меню»
   4. Кнопка-хлебная крошка «← На главную»
   5. Заголовок курса RU + EN, тег, подзаголовок
   6. EN-подписи курсов в выпадающем меню
   7. Кнопка hero: только «Купить курс» (ghost, слева)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ВЫСОТА HERO — ниже, чем на главной (90vh), чтобы снизу был виден блок 2
   HTML: #course-block-01
   -------------------------------------------------------------------------- */
.page-course #course-block-01.block-01.section-block {
  min-height: 70vh;
  height: 70vh;
  max-height: 70vh;
}

.page-course #course-block-01 .block-01__inner {
  padding-top: 80px;
  padding-bottom: var(--gap-md);
}

/* --------------------------------------------------------------------------
   2. СКРЫТЬ ДЕКОР HERO (луна, звёзды)
   -------------------------------------------------------------------------- */
.page-course .block-01__moon-corner,
.page-course .block-01__moon-glow,
.page-course .block-01__twinkles {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2–3. ШАПКА И КНОПКА «НА ГЛАВНУЮ»
   HTML: .course-hero__header, .course-hero__home
   -------------------------------------------------------------------------- */
.page-course .course-hero__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.page-course .block-01__header-left {
  justify-self: start;
}

.page-course .course-hero__home {
  justify-self: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(237, 245, 244, 0.12);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.page-course .course-hero__home:hover {
  border-color: rgba(255, 159, 61, 0.35);
  box-shadow: 0 4px 20px rgba(255, 107, 26, 0.15);
}

.page-course .block-01__header-actions {
  justify-self: end;
}

/* --------------------------------------------------------------------------
   4. ЗАГОЛОВОК КУРСА В HERO
   HTML: .course-hero__title, .course-hero__title-en, .course-hero__tag
   -------------------------------------------------------------------------- */
.page-course .course-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-course .course-hero__title-en {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #ff6b1a, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-course .course-hero__tag {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.page-course .course-hero__subtitle {
  max-width: 36ch;
}

/* --------------------------------------------------------------------------
   5. EN-ПОДПИСЬ КУРСА В МЕНЮ
   HTML: .block-01__nav-en внутри ссылок раздела «Курсы»
   -------------------------------------------------------------------------- */
.page-course .block-01__nav-en {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: linear-gradient(120deg, #ffb347, #ff6b1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Кнопка hero: только «Купить курс» (ghost, слева)
   -------------------------------------------------------------------------- */
.page-course .block-01__actions {
  width: auto;
}

.page-course .block-01__actions .course-hero__btn-buy {
  flex: 0 0 auto;
  transition:
    border-color var(--duration-normal),
    color var(--duration-normal),
    box-shadow var(--duration-normal),
    transform var(--duration-fast);
}

.page-course .block-01__actions .course-hero__btn-buy:hover {
  border-color: rgba(255, 159, 61, 0.55);
  color: var(--color-accent-light);
}

.page-course .block-01__actions .course-hero__btn-buy:active,
.page-course .block-01__actions .course-hero__btn-buy:focus-visible {
  border-color: var(--color-accent-light);
  color: var(--color-accent-light);
}