/* ============================================================
   04. Карточки тренингов — «Модули программы» из второго референса

   Вертикальная карточка: номер и статус сверху, название, число уроков
   и описание, картинка справа внизу, прогресс, кнопка во всю ширину.

   Разметка GetCourse:
     table.stream-table > tbody > tr.training-row[data-training-id][data-training-image]
       td > a
         span.stream-title
         div > b «681 урок.»  + текст описания тренинга

   Дополняют скрипты (без них карточка просто без номера и статуса):
     data-bd-num="01", data-bd-icon, --bd-card-img   — src/js/cards.js
     .bd-card-status / .bd-card-progress              — src/js/path.js
     .is-current, data-bd-state                        — src/js/path.js
   ============================================================ */

.gc-main-content .stream-table {
  width: 100%;
  margin: 0 0 var(--bd-stack) !important;
  background: none !important;
  border: 0 !important;
}

.gc-main-content .stream-table > tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bd-card-min), 1fr));
  gap: var(--bd-gap);
}

/* ── Карточка ───────────────────────────────────────────────
   Вертикальная, как во втором референсе:
     01                         [статус]
     Название
     N уроков · описание (до 3 строк)
                                 картинка
     ───── прогресс ─────  68%
     [        Открыть  →        ]            */

.gc-main-content .stream-table > tbody > tr {
  position: relative;
  display: flex;
  margin: 0 !important;
  overflow: hidden;
  background: var(--bd-surface) !important;
  border: 1px solid var(--bd-line) !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow-soft);
  transition: border-color var(--bd-ease), box-shadow var(--bd-ease), transform var(--bd-ease);

  /* Иллюстрация по умолчанию: иконка по смыслу названия (cards.js) на гранях */
  --bd-card-icon: var(--bd-i-layers-primary);
}

.gc-main-content .stream-table > tbody > tr:hover {
  border-color: var(--bd-line-strong) !important;
  box-shadow: var(--bd-shadow);
  transform: translateY(-2px);
}

.gc-main-content .stream-table > tbody > tr > td {
  display: flex;
  width: 100%;
  height: auto !important;  /* у GetCourse td { height: 70px } — обрезал карточку */
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.gc-main-content .stream-table > tbody > tr > td > a {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-height: 340px;
  padding: 20px !important;
  color: var(--bd-text) !important;
  text-decoration: none !important;
}

.gc-main-content .stream-table svg {
  display: none;
}

/* ── Картинка внизу справа ──────────────────────────────────
   Своя картинка — из «В приложении → Изображение» (GetCourse кладёт её
   в data-training-image) или из CARD_IMAGES в cards.js; скрипт передаёт
   её в --bd-card-img. Лучше всего — предмет на прозрачном фоне (PNG),
   как компас и фигурки в референсе. Без картинки — иконка на гранях. */

.gc-main-content .stream-table > tbody > tr > td > a::before {
  content: "";
  order: 3;
  flex: none;
  height: 132px;
  margin: auto -20px 0 0;  /* auto — прогресс и кнопка прижаты к низу, в ряду на одной линии */
  padding-top: 12px;
  /* Иконка — ровно в центре ромба: ромб в SVG центрирован в своём
     квадрате, поэтому смещение иконки = отступ ромба + (ромб − иконка) / 2 */
  --art: 132px;
  --ic: 38px;
  --art-r: 8px;
  --art-b: 4px;
  background:
    var(--bd-card-icon) right calc(var(--art-r) + (var(--art) - var(--ic)) / 2) bottom calc(var(--art-b) + (var(--art) - var(--ic)) / 2) / var(--ic) no-repeat,
    var(--bd-card-art) right var(--art-r) bottom var(--art-b) / var(--art) no-repeat;
  pointer-events: none;
}

.gc-main-content .stream-table > tbody > tr.bd-has-img > td > a::before {
  height: 150px;
  background: var(--bd-card-img) right bottom / contain no-repeat;
}

.gc-main-content .stream-table > tbody > tr[data-bd-icon="rocket"]  { --bd-card-icon: var(--bd-i-rocket-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="growth"]  { --bd-card-icon: var(--bd-i-growth-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="clients"] { --bd-card-icon: var(--bd-i-clients-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="team"]    { --bd-card-icon: var(--bd-i-team-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="bars"]    { --bd-card-icon: var(--bd-i-bars-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="crown"]   { --bd-card-icon: var(--bd-i-crown-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="book"]    { --bd-card-icon: var(--bd-i-teach-primary); }
.gc-main-content .stream-table > tbody > tr[data-bd-icon="ticket"]  { --bd-card-icon: var(--bd-i-ticket-primary); }

/* ── Номер ──────────────────────────────────────────────── */

.gc-main-content .stream-table > tbody > tr[data-bd-num]::before {
  content: attr(data-bd-num);
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bd-number);
  pointer-events: none;
}

.gc-main-content .stream-table > tbody > tr[data-bd-num] > td > a {
  padding-top: 66px !important;
}

/* Без номера название стоит вверху — не заезжаем под чип статуса */
.gc-main-content .stream-table > tbody > tr:has(.bd-card-status):not([data-bd-num]) > td > a {
  padding-top: 52px !important;
}

/* ── Название, число уроков, описание ───────────────────── */

.gc-main-content .stream-table .stream-title {
  order: 1;
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-family: var(--bd-font-display) !important;
  font-size: var(--bd-fs-card) !important;
  font-weight: 700 !important;
  line-height: var(--bd-lh-head) !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: var(--bd-text) !important;
  overflow-wrap: anywhere;
}

/* «N уроков.» + описание тренинга из GetCourse — до трёх строк */
.gc-main-content .stream-table > tbody > tr > td > a > div {
  order: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  padding: 0 !important;
  font-size: var(--bd-fs-sm) !important;
  line-height: 1.45;
  color: var(--bd-text-muted) !important;
}

.gc-main-content .stream-table > tbody > tr > td > a > div b {
  display: block;
  margin-bottom: 6px;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 500 !important;
  color: var(--bd-text-faint) !important;
}

/* ── Кнопка внизу ───────────────────────────────────────── */

.gc-main-content .stream-table > tbody > tr > td > a::after {
  content: "Открыть";
  order: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 14px;
  padding-right: 22px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-sm);
  font-weight: 600;
  color: var(--bd-primary-text);
  background: var(--bd-surface-2) var(--bd-i-arrow-primary) calc(50% + 46px) center / 14px no-repeat;
  border-radius: var(--bd-radius-sm);
  transition: background-color var(--bd-ease);
}

.gc-main-content .stream-table > tbody > tr:hover > td > a::after {
  background-color: var(--bd-lavender);
}

/* Начатый модуль — «Продолжить», даже если текущей считается другая ступень */
.gc-main-content .stream-table > tbody > tr[data-bd-started] > td > a::after {
  content: "Продолжить";
  background-position: calc(50% + 56px) center;
}

/* Текущая ступень — кнопка залита фиолетовым */
.gc-main-content .stream-table > tbody > tr.is-current {
  border-color: #D9CCEB !important;
}

.gc-main-content .stream-table > tbody > tr.is-current > td > a::after {
  content: "Продолжить";
  color: var(--bd-on-primary);
  background-color: var(--bd-primary);
  background-image: var(--bd-i-arrow-on);
  background-position: calc(50% + 56px) center;
}

.gc-main-content .stream-table > tbody > tr.is-current:hover > td > a::after {
  background-color: var(--bd-primary-hover);
}

.gc-main-content .stream-table > tbody > tr[data-bd-state="done"] > td > a::after {
  content: "К материалам";
  background-position: calc(50% + 62px) center;
}

/* ── Чип статуса (path.js) ──────────────────────────────── */

.gc-main-content .bd-card-status {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 4px 10px;
  font-size: var(--bd-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bd-success-text);
  background: var(--bd-success-bg);
  border-radius: var(--bd-radius-pill);
  pointer-events: none;
}

.gc-main-content .bd-card-status.is-current {
  color: var(--bd-primary-text);
  background: var(--bd-lavender);
}

.gc-main-content .bd-card-status.is-todo {
  color: var(--bd-text);
  background: var(--bd-surface-2);
}

.gc-main-content .bd-card-status.is-locked,
.gc-main-content .bd-card-status.is-waiting {
  padding-left: 24px;
  color: var(--bd-text-muted);
  background: var(--bd-surface-2) var(--bd-i-lock) 8px center / 12px no-repeat;
}

/* ── Прогресс в карточке (path.js) ──────────────────────── */

.gc-main-content .bd-card-progress {
  order: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-muted);
}

.gc-main-content .bd-card-progress__pct {
  min-width: 34px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.gc-main-content .bd-card-progress__bar {
  height: 5px;
  overflow: hidden;
  background: var(--bd-progress-track);
  border-radius: var(--bd-radius-pill);
}

.gc-main-content .bd-card-progress__bar > span {
  display: block;
  height: 100%;
  background: var(--bd-progress-solid);
  border-radius: inherit;
}

/* ── Закрытый тренинг ───────────────────────────────────── */

.gc-main-content .stream-table > tbody > tr.no-public {
  box-shadow: none;
}

.gc-main-content .stream-table > tbody > tr.no-public td {
  opacity: 1 !important;
}

.gc-main-content .stream-table > tbody > tr.no-public > td > a::before {
  opacity: 0.5;
  filter: grayscale(1);
}

.gc-main-content .stream-table > tbody > tr.no-public .stream-title {
  color: var(--bd-text-muted) !important;
}

.gc-main-content .stream-table > tbody > tr.no-public > td > a::after {
  content: "Нет доступа";
  color: var(--bd-text-muted);
  background-color: var(--bd-surface-2);
  background-image: var(--bd-i-lock);
  background-position: calc(50% + 58px) center;
}

/* ── Фильтр «Все / В процессе / Завершённые» (ecosystem.js) ── */

.gc-main-content .stream-table[data-bd-filter="current"] tr[data-training-id]:not([data-bd-state="current"]),
.gc-main-content .stream-table[data-bd-filter="done"] tr[data-training-id]:not([data-bd-state="done"]),
.gc-main-content .stream-table[data-bd-filter="todo"] tr[data-training-id]:not([data-bd-state="todo"]) {
  display: none;
}

/* ── Адаптив ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .gc-main-content .stream-table > tbody > tr:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .gc-main-content .stream-table > tbody > tr > td > a {
    min-height: 0;
  }

  .gc-main-content .stream-table > tbody > tr > td > a::before {
    --art: 110px;
    --ic: 32px;
    --art-b: 2px;
    height: 110px;
  }
}

/* ── Метка «Новое» (cards.js) ───────────────────────────────
   Сотрудник ставит в названии 🆕, [new] или #new — скрипт убирает
   пометку и добавляет классу bd-new. Плашка — салатовая, как главные
   кнопки: самый заметный цвет кабинета. */

.gc-main-content .stream-table > tbody > tr.bd-new .stream-title::before {
  content: "Новое";
  display: inline-block;
  margin: 0 8px 4px 0;
  padding: 2px 8px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  vertical-align: 2px;
  color: var(--bd-on-cta);
  background: var(--bd-cta);
  border-radius: var(--bd-radius-pill);
}

/* ── Особые карточки (CARD_CLASSES в cards.js) ───────────────
   Любую карточку можно оформить отдельно по id тренинга: в CSS —
   tr[data-training-id="…"], или класс из CARD_CLASSES. */

/* Флагманская программа — баннер на всю строку, как герой «Экосистемы»:
   надпись, крупное название, строка о программе, плашки-факты
   (тексты — FEATURED в cards.js), большая иллюстрация на гранях. */
.gc-main-content .stream-table > tbody > tr.bd-card-featured {
  grid-column: 1 / -1;
  overflow: hidden;
  container-type: inline-size;   /* раскладка — по ширине баннера: колонка зависит от пропорций */
  background:
    radial-gradient(circle at 78% 50%, rgba(197, 240, 74, 0.14), transparent 26%),
    radial-gradient(circle at 85% 15%, rgba(123, 79, 214, 0.6), transparent 50%),
    linear-gradient(120deg, var(--bd-violet-700) 0%, var(--bd-violet-900) 70%) !important;
  border: 0 !important;
  border-radius: var(--bd-radius-lg) !important;
  box-shadow: 0 18px 40px -18px rgba(42, 19, 64, 0.55) !important;
}

/* Грани за иллюстрацией */
.gc-main-content .stream-table > tbody > tr.bd-card-featured > td {
  position: relative;
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured > td::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 150px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(191, 168, 240, 0.45);
  border-radius: var(--bd-radius-lg);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.03), 0 0 0 35px rgba(191, 168, 240, 0.18);
  transform: translate(50%, -50%) rotate(45deg);
  pointer-events: none;
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a {
  z-index: 1;
  justify-content: center;
  min-height: 320px;
  padding: 40px 380px 40px 44px !important;
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a > div {
  display: none !important;
}

.bd-feat__eyebrow {
  order: 0;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  font-size: var(--bd-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-on-cta);
  background: var(--bd-cta);
  border-radius: var(--bd-radius-pill);
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured .stream-title {
  margin-bottom: 12px !important;
  font-size: var(--bd-fs-hero) !important;
  line-height: var(--bd-lh-tight) !important;
  letter-spacing: var(--bd-tracking-head);
  color: var(--bd-on-primary) !important;
}

.bd-feat__lead {
  order: 2;
  max-width: 560px;
  text-wrap: pretty;   /* без одинокого слова на последней строке */
  margin-bottom: 18px;
  font-size: var(--bd-fs-lg);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.bd-feat__facts {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bd-feat__facts > span {
  padding: 6px 12px;
  white-space: nowrap;   /* плашка не ломается в две строки — переносится целиком */
  font-size: var(--bd-fs-sm);
  font-weight: 500;
  color: var(--bd-on-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--bd-radius-pill);
}

.bd-feat__facts > span:first-child {
  font-weight: 700;
}

/* Иллюстрация — крупно справа, на гранях */
.gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a::before {
  position: absolute;
  top: 50%;
  right: 56px;
  width: 280px;
  height: 280px;
  margin: 0;
  padding: 0;
  background-position: center;
  filter: drop-shadow(0 24px 40px rgba(20, 8, 35, 0.45));
  transform: translateY(-50%);
}

/* Своя картинка (фото спикера). Картинка квадратная, поэтому держим её
   квадратом постоянной доли ширины баннера (--feat-photo): на любом экране
   спикер занимает одну и ту же часть баннера, а не сжимается, когда текст
   переносится. Стоит на нижнем краю; баннер не ниже фото; текст — слева,
   с отступом от фото. Грань — за фигурой, а не нимбом над головой */
.gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td {
  /* 28.09: крупнее — на ноутбуке 1366 спикер был 308px, стал 380px */
  --feat-photo: min(42cqw, 480px);
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a {
  min-height: calc(var(--feat-photo) + 24px);
  padding: 40px calc(var(--feat-photo) + 2cqw) 40px 44px !important;
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a::before {
  top: auto;
  bottom: 0;
  right: 1cqw;
  width: var(--feat-photo);
  height: var(--feat-photo);
  background-position: center bottom;
  filter: drop-shadow(0 12px 30px rgba(20, 8, 35, 0.4));
  transform: none;
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td::before {
  top: auto;
  bottom: calc(var(--feat-photo) * 0.4);
  right: calc(1cqw + var(--feat-photo) / 2);
  width: calc(var(--feat-photo) * 0.52);
  height: calc(var(--feat-photo) * 0.52);
  transform: translate(50%, 50%) rotate(45deg);
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a::after {
  content: "Перейти к программе";
  align-self: flex-start;
  width: 280px;
  height: 54px;
  margin-top: 26px;
  font-size: var(--bd-fs-body);
  color: var(--bd-on-cta);
  background-color: var(--bd-cta);
  background-image: var(--bd-i-arrow-cta);
  background-position: calc(50% + 100px) center;
  border-radius: var(--bd-radius);
  box-shadow: 0 10px 24px -10px rgba(197, 240, 74, 0.6);
}

.gc-main-content .stream-table > tbody > tr.bd-card-featured:hover > td > a::after {
  background-color: var(--bd-cta-hover);
}

/* Баннер уже 860px: иллюстрация меньше, тексту больше места */
@container (max-width: 860px) {
  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a {
    padding: 32px 220px 32px 32px !important;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a::before {
    right: 24px;
    width: 180px;
    height: 180px;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured .stream-title {
    font-size: var(--bd-fs-h2) !important;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td::before {
    right: 114px;
    width: 140px;
    height: 140px;
  }
}

/* Средний баннер с фото (планшет, ноутбук с узкой колонкой): рядом
   с фото оставалась узкая полоса текста, баннер вытягивался, а спикер
   казался мелким. Здесь название и строка о программе — во всю ширину,
   ниже в два столбца: плашки и кнопка слева, спикер справа, крупнее */
@container (max-width: 760px) {
  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td {
    --feat-photo: 46cqw;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a {
    min-height: 0;
    padding: 28px !important;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a::before {
    right: 2cqw;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img .stream-title {
    padding-right: 0 !important;
  }

  /* Столбец плашек не ниже фото — иначе фото наезжало бы на строку выше */
  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img .bd-feat__facts {
    align-content: flex-start;
    max-width: calc(100% - var(--feat-photo) + 12px);
    min-height: calc(var(--feat-photo) - 110px);
  }
}

/* Уже 560px (телефон): иллюстрация наверху справа, текст во всю ширину */
@container (max-width: 560px) {
  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a {
    min-height: 0;
    padding: 24px 20px !important;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a::before {
    top: 12px;
    bottom: auto;
    right: 8px;
    width: 96px;
    height: 96px;
    transform: none;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td::before {
    display: none;
  }

  .bd-feat__eyebrow {
    margin-right: 96px;
    font-size: 11px;
    letter-spacing: 0.06em;
    border-radius: 10px;   /* в две строки плашка-«таблетка» смотрелась кривой */
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured .stream-title {
    padding-right: 72px !important;
    font-size: var(--bd-fs-h2) !important;
  }

  .bd-feat__lead {
    font-size: var(--bd-fs-body);
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured > td > a::after {
    width: 100%;
    background-position: calc(50% + 100px) center;
  }

  /* С фото: кнопка во всю ширину поверх нижнего края фото, фото крупнее */
  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td {
    --feat-photo: 44cqw;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a {
    padding: 24px 20px !important;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a::before {
    bottom: 44px;
    right: 4px;
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img .bd-feat__eyebrow {
    margin-right: 0;
  }

  /* Плашки могут зайти на прозрачный левый край фото — поверх него */
  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img .bd-feat__facts {
    position: relative;
    z-index: 1;
    max-width: calc(100% - var(--feat-photo) * 0.6);
    min-height: calc(var(--feat-photo) - 60px);
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img .bd-feat__facts > span {
    font-size: var(--bd-fs-xs);
  }

  .gc-main-content .stream-table > tbody > tr.bd-card-featured.bd-has-img > td > a::after {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
   08. Путь участника (разметку строит src/js/path.js)

   .bd-hero            баннер «Экосистемы»: название, факты, строка о программе
   .bd-progress-card   «Ваш прогресс» — верх правой колонки: кольцо,
                       где я сейчас и «Продолжить»
   .bd-toast           поздравление после прохождения ступени
   ============================================================ */

.bd-path-host {
  margin-bottom: var(--bd-stack);
}

/* ── Баннер ─────────────────────────────────────────────────
   Две колонки: слева надпись, название и плашки-факты, справа —
   строка о программе с салатовой чертой. Узкий баннер — одной колонкой */

.bd-hero {
  position: relative;
  overflow: hidden;
  color: var(--bd-on-primary);
  background:
    radial-gradient(circle at 88% 20%, rgba(197, 240, 74, 0.1), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(123, 79, 214, 0.6), transparent 55%),
    linear-gradient(120deg, var(--bd-violet-700) 0%, var(--bd-violet-900) 70%);
  border-radius: var(--bd-radius-lg);
  isolation: isolate;
  container: bd-hero / inline-size;   /* раскладка — по ширине баннера, а не экрана */
}

.bd-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   lead"
    "facts   facts";
  align-items: center;
  gap: 0 56px;
  padding: 34px 40px 32px;
}

.bd-hero__eyebrow {
  grid-area: eyebrow;
  margin-bottom: 12px;
  font-size: var(--bd-fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.gc-main-content .bd-hero__title {
  grid-area: title;
  margin: 0 !important;
  font-family: var(--bd-font-display) !important;
  font-size: var(--bd-fs-hero) !important;
  font-weight: 700 !important;
  line-height: var(--bd-lh-tight) !important;
  letter-spacing: var(--bd-tracking-head);
  color: var(--bd-on-primary) !important;
  text-wrap: balance;   /* без «висящего» слова на второй строке */
}

.gc-main-content .bd-hero__lead {
  grid-area: lead;
  margin: 0;
  padding-left: 22px;
  font-size: var(--bd-fs-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
  border-left: 3px solid var(--bd-cta);
}

/* Факты — плашками во всю ширину под названием */
.gc-main-content .bd-hero__facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.bd-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  font-size: var(--bd-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--bd-on-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--bd-radius-pill);
}

.bd-hero__facts li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--bd-i-teach-on) center / contain no-repeat;
}

.bd-hero__facts .is-steps::before { background-image: var(--bd-i-layers-on); }
.bd-hero__facts .is-board::before { background-image: var(--bd-i-crown-on); }
.bd-hero__facts .is-chats::before { background-image: var(--bd-i-messages-on); }
.bd-hero__facts .is-cases::before { background-image: var(--bd-i-search-on); }

/* Число в фактах («690 уроков», «4 ступени») — жирным */
.bd-hero__facts b {
  margin-right: -4px;   /* плашка — flex с отступом 8px, между словами он шире пробела */
  font-weight: 700;
}

.bd-hero.is-loading .bd-hero__lead {
  opacity: 0.6;
}

/* ── Кольцо ─────────────────────────────────────────────── */

.bd-ring {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--bd-surface) 79%, transparent 80%),
    conic-gradient(var(--bd-progress-solid) calc(var(--bd-ring-pct, 0) * 1%), var(--bd-progress-track) 0);
}

.bd-ring__value {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bd-text);
}

/* ── Карточка «Прогресс обучения» ───────────────────────── */

.bd-progress-host {
  margin-bottom: 14px;
}

.bd-progress-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow-soft);
}

.bd-progress-card__title {
  align-self: stretch;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-lg);
  font-weight: 700;
  color: var(--bd-text);
}

.bd-progress-card__caption {
  font-size: var(--bd-fs-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--bd-text-muted);
}

.bd-progress-card__caption b {
  display: block;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-body);
  font-weight: 700;
  color: var(--bd-text);
}

.gc-main-content .bd-progress-card__legend {
  align-self: stretch;
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 14px 0 0;
  list-style: none;
  font-size: var(--bd-fs-sm);
  border-top: 1px solid var(--bd-line);
}

.bd-progress-card__legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--bd-text-muted);
}

.bd-progress-card__legend li > span {
  position: relative;
  padding-left: 16px;
}

.bd-progress-card__legend li > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--bd-line-strong);
  border-radius: 50%;
  transform: translateY(-50%);
}

.bd-progress-card__legend li.is-current > span::before {
  background: var(--bd-violet-500);
}

.bd-progress-card__legend b {
  font-weight: 600;
  white-space: nowrap;
  color: var(--bd-text);
}

/* Заготовка карточки, пока считается прогресс */
.bd-progress-card.is-loading .bd-skel {
  align-self: stretch;
}

.bd-progress-card.is-loading .bd-skel > span {
  height: 44px;
}

/* Несданные задания по начатым шагам — раскрывающийся список */
.bd-progress-card__debts {
  align-self: stretch;
  padding: 10px 12px;
  font-size: var(--bd-fs-sm);
  background: var(--bd-surface-2);
  border-radius: var(--bd-radius-sm);
}

.bd-progress-card__debts summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--bd-text);
  list-style: none;
  cursor: pointer;
}

.bd-progress-card__debts summary::-webkit-details-marker {
  display: none;
}

.bd-progress-card__debts summary b {
  min-width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  font-size: var(--bd-fs-xs);
  line-height: 24px;
  text-align: center;
  color: var(--bd-on-primary);
  background: var(--bd-primary);
  border-radius: var(--bd-radius-pill);
}

.bd-progress-card__debts summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--bd-i-arrow) center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--bd-ease);
}

.bd-progress-card__debts[open] summary::after {
  transform: rotate(-90deg);
}

.bd-debts.is-inline {
  display: grid;
  gap: 8px;
  margin: 10px -6px 0;
}

/* В карточке — короче, чтобы колонка не вытягивалась */
.gc-main-content .bd-debts.is-inline ul {
  max-height: 220px;
}

.bd-debts__step {
  margin-bottom: 4px;
  padding: 0 6px;
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  color: var(--bd-text-muted);
}

/* «Как считается прогресс» — раскрывающаяся подсказка внизу карточки */
.bd-progress-card__how {
  align-self: stretch;
  font-size: var(--bd-fs-xs);
  line-height: 1.5;
  color: var(--bd-text-muted);
}

.bd-progress-card__how summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--bd-primary-text);
  list-style: none;
  cursor: pointer;
}

.bd-progress-card__how summary::-webkit-details-marker {
  display: none;
}

.bd-progress-card__how summary::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--bd-i-help-primary) center / contain no-repeat;
}

.gc-main-content .bd-progress-card__how p {
  margin: 8px 0 0;
}

/* Где я сейчас и главный призыв — перенесены с баннера */
.bd-progress-card__now {
  align-self: stretch;
  padding: 10px 12px;
  font-size: var(--bd-fs-sm);
  line-height: 1.4;
  color: var(--bd-text-muted);
  background: var(--bd-surface-2);
  border-radius: var(--bd-radius-sm);
}

.bd-progress-card__now b {
  display: block;
  font-weight: 600;
  color: var(--bd-text);
}

.gc-main-content .bd-progress-card__cta {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-body);
  font-weight: 700;
  color: var(--bd-on-cta) !important;
  text-decoration: none !important;
  background: var(--bd-cta);
  border-radius: var(--bd-radius-sm);
  transition: background-color var(--bd-ease);
}

.bd-progress-card__cta::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--bd-i-arrow-cta) center / contain no-repeat;
}

.gc-main-content .bd-progress-card__cta:hover {
  background: var(--bd-cta-hover);
}

/* ── Поздравление ───────────────────────────────────────── */

.bd-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1000;  /* выше страницы, но не выше окон GetCourse */
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-body);
  font-weight: 500;
  color: var(--bd-on-primary);
  background: var(--bd-facet);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.bd-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bd-toast__icon {
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--bd-i-spark-on) center / contain no-repeat;
}

/* ── Адаптив ──────────────────────────────────────────────
   По ширине самого баннера: она зависит не только от экрана, но и от
   правой колонки и раскрытого меню */

/* Средний баннер (ноутбук с правой колонкой, планшет) — одной колонкой:
   надпись, название, строка о программе, плашки */
@container bd-hero (max-width: 860px) {
  .bd-hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "lead"
      "facts";
    padding: 28px 28px 26px;
  }

  .gc-main-content .bd-hero__title {
    font-size: var(--bd-fs-h2) !important;
  }

  .gc-main-content .bd-hero__lead {
    max-width: 60ch;
    margin-top: 14px;
    padding-left: 16px;
    font-size: var(--bd-fs-body);
  }

  .gc-main-content .bd-hero__facts {
    margin-top: 20px;
  }
}

/* Телефон */
@container bd-hero (max-width: 440px) {
  .bd-hero__body {
    padding: 22px 18px 20px;
  }

  .gc-main-content .bd-hero__lead {
    padding-left: 12px;
    font-size: var(--bd-fs-sm);
  }

  .gc-main-content .bd-hero__facts {
    gap: 6px;
  }

  .bd-hero__facts li {
    height: 30px;
    padding: 0 12px 0 10px;
    font-size: var(--bd-fs-xs);
  }
}

/* ============================================================
   15. Дорожная карта «Путь развития участника» (страница «Экосистемы»)

   Разметку рисует src/js/path.js под модулями программы:
     .bd-roadmap__row.is-<state>     ступень строкой: done / current / todo / locked
       .bd-roadmap__stage            слева: «1 ступень», название, уроки
       .bd-roadmap__steps > li       шаги стрелками: is-done / is-current / is-todo / is-locked
       .bd-roadmap__wide             у ступени без шагов — одна широкая стрелка с текстом

   На телефоне стрелки встают столбиком.
   ============================================================ */

.bd-roadmap {
  margin: var(--bd-stack) 0;
  padding: 24px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  container: bd-roadmap / inline-size;   /* раскладка — по ширине карты */
}

.bd-roadmap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.bd-roadmap__eyebrow {
  margin-bottom: 4px;
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bd-text-faint);
}

.gc-main-content .bd-roadmap__title {
  margin: 0;
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bd-text);
}

.bd-roadmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-muted);
}

.bd-roadmap__legend li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--bd-surface-2);
  border: 1px solid var(--bd-line-strong);
  border-radius: 3px;
}

.bd-roadmap__legend .is-done::before    { background: var(--bd-violet-500); border-color: var(--bd-violet-500); }
.bd-roadmap__legend .is-current::before { background: var(--bd-cta); border-color: var(--bd-cta); }
.bd-roadmap__legend .is-progress::before { background: var(--bd-lavender); border-color: #CDBDF0; }
.bd-roadmap__legend .is-debt::before { background: var(--bd-primary); border-color: var(--bd-primary); border-radius: 50%; }

.bd-roadmap__rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-roadmap__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 10px;
}

/* ── Ступень ────────────────────────────────────────────── */

.gc-main-content a.bd-roadmap__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 10px 16px;
  color: var(--bd-text) !important;
  text-decoration: none !important;
  background: var(--bd-surface-2);
  border-radius: var(--bd-radius-sm);
}

/* Наведение — чуть темнее своего цвета, а не подмена цвета:
   иначе фиолетовая текущая ступень становилась лавандовой */
.gc-main-content a.bd-roadmap__stage:hover,
.bd-roadmap__step > a:hover,
a.bd-roadmap__wide:hover {
  filter: brightness(0.95);
}

.bd-roadmap__row.is-done .bd-roadmap__stage {
  color: var(--bd-on-primary) !important;
  background: var(--bd-violet-500);
}

.bd-roadmap__row.is-done .bd-roadmap__stage-num,
.bd-roadmap__row.is-done .bd-roadmap__stage-meta {
  color: rgba(255, 255, 255, 0.8);
}

.bd-roadmap__stage-num {
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  color: var(--bd-primary-text);
}

.bd-roadmap__stage-name {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-sm);
  font-weight: 700;
  line-height: 1.25;
}

.bd-roadmap__stage-meta {
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-faint);
}

/* Описание ступени без шагов — показывается внутри карточки только
   на узкой карте (ниже); на широкой оно в стрелке справа */
.bd-roadmap__stage-desc {
  display: none;
  margin: 4px 0 2px;
  font-size: var(--bd-fs-sm);
  line-height: 1.4;
}

.bd-roadmap__row.is-current .bd-roadmap__stage {
  color: var(--bd-on-primary) !important;
  background: var(--bd-facet);
}

.bd-roadmap__row.is-current .bd-roadmap__stage-num,
.bd-roadmap__row.is-current .bd-roadmap__stage-meta {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Шаги-стрелки ───────────────────────────────────────── */

.bd-roadmap__steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-roadmap__step > a,
.bd-roadmap__step > span,
.bd-roadmap__wide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
  min-height: 72px;
  padding: 10px 26px 10px 30px;
  color: var(--bd-text) !important;
  text-decoration: none !important;
  background: var(--bd-surface-2);
  /* стрелка: выемка слева, остриё справа */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}

.bd-roadmap__step:first-child > a,
.bd-roadmap__step:first-child > span,
.bd-roadmap__wide {
  padding-left: 16px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  border-radius: var(--bd-radius-sm) 0 0 var(--bd-radius-sm);
}


.bd-roadmap__step-num {
  font-family: var(--bd-font-display);
  font-size: var(--bd-fs-xs);
  font-weight: 800;
  color: var(--bd-primary-text);
}

.bd-roadmap__step-title {
  font-size: var(--bd-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.bd-roadmap__step-meta {
  font-size: var(--bd-fs-xs);
  color: var(--bd-text-faint);
}

/* Пройден — насыщенный фиолетовый, белый текст, номер — галочкой.
   Впереди — светлый серо-лиловый (базовый вид выше) */
.bd-roadmap__step.is-done > a,
.bd-roadmap__step.is-done > span,
.bd-roadmap__wide.is-done {
  color: var(--bd-on-primary) !important;
  background: var(--bd-violet-500);
}

.bd-roadmap__step.is-done .bd-roadmap__step-meta,
.bd-roadmap__wide.is-done .bd-roadmap__step-meta {
  color: rgba(255, 255, 255, 0.8);
}

.bd-roadmap__step.is-done .bd-roadmap__step-num {
  width: 16px;
  font-size: 0;
  height: 16px;
  background: var(--bd-i-check-on) center / contain no-repeat;
}

/* Вы здесь — салатовый, как главные действия */
.bd-roadmap__step.is-current > a,
.bd-roadmap__step.is-current > span,
.bd-roadmap__wide.is-current {
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta);
}

.bd-roadmap__step.is-current > a:hover {
  background: var(--bd-cta-hover);
}

.bd-roadmap__step.is-current .bd-roadmap__step-num,
.bd-roadmap__step.is-current .bd-roadmap__step-meta,
.bd-roadmap__wide.is-current .bd-roadmap__step-meta {
  color: var(--bd-on-cta);
}

.bd-roadmap__step.is-current .bd-roadmap__step-meta,
.bd-roadmap__wide.is-current .bd-roadmap__step-meta {
  font-weight: 600;
}

/* Начат, но не закончен — лавандовый, с полоской прогресса */
.bd-roadmap__step.is-progress > a,
.bd-roadmap__step.is-progress > span,
.bd-roadmap__wide.is-progress {
  background: var(--bd-lavender);
}

.bd-roadmap__step-bar {
  display: block;
  width: 100%;
  max-width: 140px;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  background: rgba(69, 34, 107, 0.12);
  border-radius: 2px;
}

.bd-roadmap__step-bar > span {
  display: block;
  height: 100%;
  background: var(--bd-violet-500);
  border-radius: inherit;
}

.bd-roadmap__step.is-current .bd-roadmap__step-bar,
.bd-roadmap__wide.is-current .bd-roadmap__step-bar {
  background: rgba(21, 18, 26, 0.12);
}

.bd-roadmap__step.is-current .bd-roadmap__step-bar > span,
.bd-roadmap__wide.is-current .bd-roadmap__step-bar > span {
  background: var(--bd-text);
}

/* ── Первый заход: заготовка, пока считается прогресс ───── */

.gc-main-content .bd-roadmap__wait {
  margin: -8px 0 14px;
  font-size: var(--bd-fs-sm);
  color: var(--bd-text-muted);
}

.bd-skel {
  display: grid;
  gap: 10px;
}

.bd-skel > span {
  display: block;
  height: 64px;
  background: linear-gradient(90deg, var(--bd-surface-2) 0%, var(--bd-lavender) 50%, var(--bd-surface-2) 100%) 0 0 / 200% 100%;
  border-radius: var(--bd-radius-sm);
  animation: bd-skel 1.4s ease-in-out infinite;
}

@keyframes bd-skel {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-skel > span {
    animation: none;
  }
}

/* ── Несданные задания: точка на шаге и окошко со списком ─ */

.bd-roadmap__step {
  position: relative;
}

.gc-main-content .bd-roadmap__dot {
  position: absolute;
  top: 6px;
  right: 22px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  font-family: var(--bd-font);
  font-size: var(--bd-fs-xs);
  font-weight: 700;
  line-height: 20px;
  color: var(--bd-on-primary);
  background: var(--bd-primary);
  border: 2px solid var(--bd-surface);
  border-radius: var(--bd-radius-pill);
  box-shadow: 0 2px 8px rgba(42, 19, 64, 0.3);
  cursor: pointer;
  transition: transform var(--bd-ease);
}

/* Всё отправлено, ждёт проверки — светлая точка */
.gc-main-content .bd-roadmap__dot.is-review {
  color: var(--bd-primary-text);
  background: var(--bd-lavender);
}

.gc-main-content .bd-roadmap__dot:hover,
.gc-main-content .bd-roadmap__dot[aria-expanded="true"] {
  transform: scale(1.1);
}

.bd-debts[hidden] {
  display: none !important;
}

.bd-roadmap .bd-debts {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 12px 12px 6px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
  box-shadow: var(--bd-shadow);
}

/* У последнего шага в ряду — к правому краю, иначе уходит за карту */
.bd-roadmap .bd-roadmap__step:last-child .bd-debts {
  left: auto;
  right: 0;
}

.bd-debts__title {
  padding: 0 6px;
  font-size: var(--bd-fs-xs);
  font-weight: 600;
  color: var(--bd-text-muted);
}

/* Уроки — лёгкими строками: кружок, название, стрелка. Длинный список
   прокручивается внутри, а не растягивает окошко на полэкрана */
.gc-main-content .bd-debts ul {
  max-height: 280px;
  margin: 4px 0 8px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.gc-main-content .bd-debts li + li {
  border-top: 1px solid var(--bd-line);
}

.gc-main-content .bd-debts a,
.gc-main-content .bd-debts li > span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bd-text) !important;
  text-decoration: none !important;
  border-radius: 8px;
}

/* Кружок: пустой — не сдано, закрашенный — отправлено на проверку */
.gc-main-content .bd-debts a::before,
.gc-main-content .bd-debts li > span::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border: 2px solid var(--bd-violet-500);
  border-radius: 50%;
}

.gc-main-content .bd-debts .is-review a::before,
.gc-main-content .bd-debts .is-review li > span::before {
  background: var(--bd-violet-500);
}

.gc-main-content .bd-debts a::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin: 3px 0 0 auto;
  background: var(--bd-i-arrow) center / contain no-repeat;
  opacity: 0.45;
}

.gc-main-content .bd-debts a:hover {
  background: var(--bd-surface-2);
}

.gc-main-content .bd-debts a:hover::after {
  opacity: 1;
}

/* Нет доступа (тариф или закрытый тренинг) — приглушено, номер
   становится замком, ссылки нет */
.bd-roadmap__row.is-locked .bd-roadmap__stage,
.bd-roadmap__step.is-locked > span,
.bd-roadmap__wide.is-locked {
  opacity: 0.6;
}

/* Совет директоров до прохождения 1–3 ступеней — ждёт, чуть приглушён */
.bd-roadmap__row.is-waiting .bd-roadmap__stage,
.bd-roadmap__row.is-waiting .bd-roadmap__wide {
  opacity: 0.75;
}

.bd-roadmap__step.is-locked .bd-roadmap__step-num {
  width: 14px;
  height: 14px;
  font-size: 0;
  background: var(--bd-i-lock) center / contain no-repeat;
}

.bd-roadmap__wide {
  font-size: var(--bd-fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* ── Средняя ширина (ноутбук с правой колонкой, планшет) ──
   Стрелок по 4–5 в ряд уже не помещается — слова резались. Ступень
   встаёт заголовком над своими шагами, шаги — карточками, сколько
   влезет в ряд по 170px */

@container bd-roadmap (max-width: 860px) {
  .bd-roadmap__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .bd-roadmap__rows {
    gap: 16px;
  }

  .gc-main-content a.bd-roadmap__stage {
    min-height: 0;
    padding: 10px 14px;
  }

  /* Ступень без шагов — одна карточка: описание внутри, стрелки нет */
  .bd-roadmap__row.is-single .bd-roadmap__wide {
    display: none;
  }

  .bd-roadmap__row.is-single .bd-roadmap__stage-desc {
    display: block;
  }

  .bd-roadmap__steps {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
  }

  .bd-roadmap__step > a,
  .bd-roadmap__step > span,
  .bd-roadmap__step:first-child > a,
  .bd-roadmap__step:first-child > span,
  .bd-roadmap__wide {
    justify-content: flex-start;
    min-height: 64px;
    padding: 10px 14px;
    clip-path: none;
    border-radius: var(--bd-radius-sm);
  }

  .gc-main-content .bd-roadmap__dot {
    right: 8px;
  }
}

/* ── Телефон: шаги столбиком ────────────────────────────── */

@container bd-roadmap (max-width: 480px) {
  .bd-roadmap__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .bd-roadmap__step > a,
  .bd-roadmap__step > span,
  .bd-roadmap__step:first-child > a,
  .bd-roadmap__step:first-child > span {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
  }

  .bd-roadmap__step-num {
    grid-row: span 2;
    text-align: center;
  }

  .bd-roadmap__step-meta,
  .bd-roadmap__step-bar {
    grid-column: 2;
  }

  .gc-main-content .bd-roadmap__dot {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  .gc-main-content .bd-roadmap__dot:hover,
  .gc-main-content .bd-roadmap__dot[aria-expanded="true"] {
    transform: translateY(-50%) scale(1.1);
  }

  /* Открыто — список под шагом, и точка по центру всего пункта уезжала
     в середину списка; держим её у верха карточки шага */
  .gc-main-content .bd-roadmap__step.is-open .bd-roadmap__dot {
    top: 14px;
    transform: none;
  }

  /* Окошко — под шагом, в потоке: на телефоне всплывающее не влезает.
     Карточка шага — своей высоты: с height: 100% она растягивалась на
     высоту окошка и закрывала список уроков пустым салатовым полем */
  .bd-roadmap__step > a,
  .bd-roadmap__step > span {
    height: auto;
  }

  .bd-roadmap .bd-debts {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .bd-roadmap {
    padding: 18px 14px;
  }
}

/* ============================================================
   10. Всплывающий баннер GetCourse (Сайт → Баннер)

   Шаблон из ТЗ: текст заказчик меняет сам в редакторе баннера,
   вёрстка остаётся. Поля баннера GetCourse → классы:
     картинка      .banner-logo      круглое фото спикера
     заголовок     .banner-title     «Открытый мастер-класс 25.06»
     текст         .banner-text      подзаголовок, <span> — жирным
     кнопка        .banner-link      «Участвовать»
     сноска        .common-banner__note

   Заменяет прежнюю тему баннера (id 94239, чёрно-золотая): после
   установки темы аккаунта ту можно отключить.

   Селекторы начинаются с «html body»: прежняя тема 94239, пока подключена,
   задаёт те же правила с !important и грузится позже — наши должны быть
   сильнее, иначе баннер остаётся чёрно-золотым.

   Вид — фиолетовая плашка с гранями, как цитата в референсе,
   и салатовая кнопка. Текст крупнее прежнего (было 11px при высоте
   баннера 64px) — аудитория 35+.
   ============================================================ */

html body .common-banner-wrapper.hide_banners {
  display: none !important;
}

html body .info-wrapper .common-banner-wrapper {
  position: relative !important;
}

/* Слева внизу, у края меню: сдвигается вместе с меню (узким или раскрытым) */
html body .common-banner-wrapper {
  position: fixed !important;
  left: calc(var(--bd-menu-w) + 16px) !important;
  right: auto !important;
  bottom: 16px !important;
  z-index: 100 !important;
  display: flex !important;
  justify-content: flex-start !important;
  font-family: var(--bd-font) !important;
}

html body .common-banner {
  position: relative;
  display: flex !important;
  align-items: center;
  max-width: 640px;
  max-height: none !important;
  padding: 14px 44px 14px 14px !important;
  color: var(--bd-on-primary) !important;
  background: var(--bd-facet) !important;
  border: 0 !important;
  border-radius: var(--bd-radius) !important;
  box-shadow: var(--bd-shadow) !important;
  overflow: hidden;
}

/* Грань в углу — фирменная деталь */
html body .common-banner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
  pointer-events: none;
}

html body .common-banner a {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

html body .common-banner .banner-logo {
  flex: none;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bd-gold);
}

/* Фото не указано (в коде осталась заглушка) — без пустого кружка */
html body .common-banner img.banner-logo:not([src^="http"]):not([src^="/"]) {
  display: none !important;
}

html body .common-banner .banner-wrapper-content {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  margin-left: 14px !important;
}

html body .common-banner .banner-content {
  width: auto !important;
  max-width: 360px;
  color: var(--bd-on-primary) !important;
}

html body .common-banner .banner-content a {
  color: var(--bd-on-primary) !important;
}

html body .common-banner .banner-title {
  margin: 0 0 4px !important;
  font-family: var(--bd-font-display) !important;
  font-size: var(--bd-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--bd-on-primary) !important;
}

/* Дата или метка внутри заголовка */
html body .common-banner .banner-title span {
  display: inline-block;
  padding: 0 6px !important;
  white-space: nowrap;
  color: var(--bd-gold) !important;
  border: 1px solid rgba(191, 168, 240, 0.6) !important;
  border-radius: var(--bd-radius-sm) !important;
}

html body .common-banner .banner-text {
  padding: 0 !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

html body .common-banner .banner-text span {
  white-space: nowrap;   /* «30%» не отрывается от строки */
  font-weight: 600 !important;
  color: var(--bd-on-primary) !important;
}

html body .common-banner .banner-link {
  flex: none;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  font-size: var(--bd-fs-sm) !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-transform: none !important;
  color: var(--bd-on-cta) !important;
  background: var(--bd-cta) !important;
  border-radius: var(--bd-radius-sm) !important;
  box-shadow: none !important;
  transition: background-color var(--bd-ease);
}

html body .common-banner .banner-link:hover {
  background: var(--bd-cta-hover) !important;
}

html body .common-banner .banner-close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  margin: 0 !important;
  font-size: var(--bd-fs-h2) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

html body .common-banner .banner-close:hover {
  color: var(--bd-on-primary) !important;
}

html body .common-banner__note {
  position: absolute !important;
  right: 44px !important;
  bottom: 4px !important;
  font-size: var(--bd-fs-xs) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}

html body .common-banner a.mobile,
html body .common-banner .mobile-show {
  display: none !important;
}


/* У края нашего меню: раскрытого или узкого (bd-rail) */
@media (min-width: 769px) {
  html:not(.bd-menu-native) body .common-banner-wrapper {
    left: calc(var(--bd-menu-w-open) + 16px) !important;
  }

  html.bd-rail:not(.bd-menu-native) body .common-banner-wrapper {
    left: calc(var(--bd-menu-w) + 16px) !important;
  }
}

@media (max-width: 768px) {
  /* Над полосой «Меню» (56px) внизу экрана */
  html body .common-banner-wrapper {
    left: 8px !important;
    right: 8px !important;
    bottom: 68px !important;
  }

  html body .common-banner {
    width: 100% !important;
    max-width: none;
    align-items: flex-start;
    padding: 12px 36px 12px 12px !important;
  }

  html body .common-banner .banner-logo {
    width: 52px !important;
    height: 52px !important;
  }

  html body .common-banner .banner-wrapper-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    margin: 0 0 0 12px !important;
  }

  html body .common-banner .banner-title {
    font-size: var(--bd-fs-lg) !important;
  }

  html body .common-banner .banner-link {
    position: static !important;
    padding: 8px 14px !important;
    font-size: var(--bd-fs-xs) !important;
  }

  html body .common-banner .mobile-show {
    display: block !important;
  }
}