/* Карточка курса. Figma: Kyrsi/pc 975:1484, Kyrsi/mb 975:1849.
   Значения — из .design/spec/kyrsi.md.
   line-height задан в px по замеренным высотам текстовых нод Figma:
   `normal` в браузере и в Figma расходится на 1–2px для 48/18/16px. */

.au-courses {
  margin-top: var(--au-head-gap); /* Frame 129 y=576 при низе H1 504 */
}

.au-courses .au-container {
  display: flex;
  flex-direction: column;
  gap: var(--au-item-gap); /* между карточками */
}

/* Frame 126 975:1484 */
.au-course {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Канал между колонкой пунктов и колонкой цены/кнопки: без него длинная
     подпись «Записаться на консультацию» расширяет правую колонку, и последний
     пункт ряда подходил к кнопке вплотную (наезд на ~1850px). Зазор заставляет
     такой пункт перенестись на строку ниже, а не налезать на кнопку. */
  column-gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--au-hairline-dark);
}

/* Frame 122 975:1485 — flex:1 0 0, ширина 1457 из 1728 */
.au-course__main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(40px + 32px * var(--au-k));
}

/* Frame 117 975:1486 — ширина 379; заголовок её превышает и не обрезается */
.au-course__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 379px;
}

/* 975:1488 — Inter Semi Bold 48px; Figma h 58 (975:1558 — 116 на две строки).
   Бокс заголовка в макете 379, но текст его превышает и не обрезается,
   поэтому width по контенту. Потолок 1457 — ширина .au-course__main:
   без него pagetitle из MODX длиннее ~1457px налезал на колонку цены.
   §137: волна — Inter Tight 400, кегль 48 → 40 (как карточки флагманов главной). */
.au-course__title {
  margin: 0;
  width: max-content;
  max-width: 1457px; /* ширина .au-course__main: дальше начинается колонка цены */
  /* 40 на 1920, 28 на 1024 — на ступень ниже H1 (52), иначе на планшете
     заголовок карточки догоняет заголовок страницы и иерархия схлопывается */
  font-size: calc(28px + 12px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  line-height: calc(34px + 14px * var(--au-k));
  color: var(--au-black);
}

/* 975:1490 — Inter Regular 20px, lh 36px, по центру блока 379.
   Подпись в макете тоже шире бокса 379 (376…379 при разных курсах),
   поэтому по контенту с тем же потолком, что у заголовка.
   §137: волна — Inter Tight 400 («описание карточки»), кегль и lh оставлены. */
.au-course__meta {
  margin: 0;
  width: max-content;
  max-width: 1457px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 36px;
  color: var(--au-black);
}

/* 975:1494 / 975:1507 — первые пункты каждого ряда фиксированной ширины;
   от них считаются позиции следующих пунктов (gap 72).
   Ширина держится и ниже 1920: при сжатии пункт рвался на четыре строки, тогда
   как соседние по ряду оставались на двух, и ряд выглядел рваным. Сжимается
   зазор между пунктами, а не сами пункты. */
.au-course .au-feature:first-child {
  width: 285px;
}

.au-course .au-feature:nth-child(5) {
  width: 134px;
}

/* второй ряд (Frame 120 975:1506) набран плотнее: текст 975:1509 h 38 на две строки */
.au-course .au-feature:nth-child(n + 5) .au-feature__text {
  line-height: 19px;
}

/* Frame 125 975:1513 — ширина 271, gap 246, выравнивание по правому краю.
   Ширина 271 не трогается: от неё зависит центровка цены (см. журнал). */
.au-course__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 246px;
  width: auto;
  min-width: 271px;
}

/* Ниже макетной ширины зазор 246 не держится: колонка центрируется в карточке
   (align-items: center), высота карточки зависит от числа строк заголовка, и
   расстояние от цены до кнопки выходило разным в каждой карточке. Кнопка
   встаёт на фиксированные 96 от цены, остаток высоты уходит вниз. */
@media (max-width: 1919px) and (min-width: 1024px) {
  .au-course__aside {
    align-self: stretch;
    gap: 96px;
  }
}

/* 975:1515 — Inter Medium 32px, Figma h 39, по центру колонки.
   Без nowrap: макетная цена 271…276 в колонку 271 встаёт одной строкой сама,
   а запрет переноса выносил длинную цену из MODX за правый край страницы.
   §137: волна — Inter Tight Medium 500, как у `.au-home-courses__price`
   (Inter Medium 500 на главной). Кегль и lh оставлены. */
.au-course__price {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 39px;
  color: var(--au-black);
  /* Макетная цена 276 шире колонки 271 и в макете идёт одной строкой, поэтому
     nowrap; при аномально длинной строке из MODX перенос по символам
     срабатывает раньше, чем текст уйдёт за правый край страницы */
  white-space: nowrap;
}

/* Frame 124 975:1516 — ширина кнопки по содержимому (минимум 227px под макет курса,
   для длинных подписей вроде «Записаться на консультацию» бокс расширяется) */
.au-course__cta {
  width: max-content;
  min-width: 227px;
}

.au-course__cta .au-btn {
  padding: 16px 28px;
}

/* Карточки курсов и консультаций на pc (1024+). Макета нет, раскладка по
   правке заказчика (2026-09-26, сначала консультации, затем курсы): название
   слева и цена справа на одной линии; под названием подпись курса
   («Курс приёма / 8 недель»), если есть; ниже пункты столбиком, каждый в одну
   строку, с малым зазором — единым блоком; ниже кнопка по левому краю; после
   неё отступ и разделитель карточки. Обёртки main/aside/head растворяются
   (display: contents, как на mb), чтобы их дети встали в общую сетку. */
@media (min-width: 1024px) {
  .au-courses .au-course {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: 0;
  }

  .au-courses .au-course__main,
  .au-courses .au-course__aside,
  .au-courses .au-course__head {
    display: contents;
  }

  .au-courses .au-course__title {
    grid-column: 1;
    max-width: 100%;
  }

  .au-courses .au-course__meta {
    grid-column: 1;
    text-align: left;
  }

  .au-courses .au-course__price {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    text-align: right;
  }

  /* Пункты — на 32 ниже названия, между собой 8: читаются одним списком */
  .au-courses .au-feature-list {
    grid-column: 1 / -1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 32px;
  }

  /* Макетные ширины пунктов ряда курса (285/134) здесь не нужны: пункт в
     столбике занимает строку целиком и не переносится */
  .au-courses .au-feature:first-child,
  .au-courses .au-feature:nth-child(5) {
    width: auto;
  }

  .au-courses .au-feature:nth-child(n + 5) .au-feature__text {
    line-height: inherit;
  }

  /* Кнопка — по левой оси, на 40 ниже пунктов; до разделителя остаётся
     padding-bottom карточки (36) */
  .au-courses .au-course__cta {
    grid-column: 1;
    justify-self: start;
    margin-top: 40px;
  }
}

/* ─── MB: 390px ───────────────────────────────────────────────────────────
   Frame 113 975:1849: колонка, gap 48, padding-bottom 24.
   Вложенность макета (gap 36 между блоком и ценой, 48 внутри блока)
   воспроизводится отступами, чтобы DOM остался единым для PC и MB. */

@media (max-width: 1023px) {
  .au-courses .au-container {
    gap: 24px; /* между карточками MB */
  }

  .au-course {
    flex-direction: column;
    align-items: flex-start;
    /* 975:1849: карточка шире колонки — правое поле 23, а не 26.
       min() держит её внутри вьюпорта уже 390 */
    width: min(341px, 100%);
    padding-bottom: 24px;
  }

  .au-course__main,
  .au-course__aside {
    display: contents;
  }

  /* Frame 102 975:1852 */
  .au-course__head {
    width: min(341px, 100%);
    gap: 24px;
  }

  /* 975:1854 — Inter Semi Bold 26px, Figma h 31.
     nowrap снят: в макете заголовок в одну строку сам, а запрет переноса
     не давал карточке сжаться уже 390 */
  .au-course__title {
    font-size: 26px;
    line-height: 31px;
    white-space: normal;
  }

  /* 975:1856 — Inter Regular 18px, Figma h 44 на две строки;
     nowrap снят по той же причине, что у заголовка */
  .au-course__meta {
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    white-space: normal;
  }

  /* Frame 109 975:1857 — gap 48 от заголовка карточки */
  .au-course .au-feature-list {
    margin-top: 48px;
  }

  /* пункт 3 на MB («Возможность трудоустройства.») — одна строка, lh normal → 19 */
  .au-course .au-feature:nth-child(3) .au-feature__text {
    line-height: 19px;
  }

  /* на MB ряды идут колонкой: ширина пунктов — от контейнера 285 */
  .au-course .au-feature:first-child,
  .au-course .au-feature:nth-child(5) {
    width: auto;
  }

  /* 975:1877 — Inter Medium 26px, Figma h 31; Frame 112 975:1850: gap 36 */
  .au-course__price {
    width: auto;
    margin-top: 36px;
    text-align: left;
    font-size: 26px;
    line-height: 31px;
  }

  /* Frame 26 975:1878 — кнопка по содержимому, gap 48 от контента */
  .au-course__cta {
    width: auto;
    max-width: 100%;
    margin-top: 48px;
  }

  .au-course__cta .au-btn {
    padding: 16px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ─── Страница курса/консультации: подзаголовок, цена, состав ──────────────
   Своего макета в Figma нет (context/checkout.md, работы §1). Простая секция
   в потоке под H1, без карточной геометрии .au-course — та рассчитана на ряд
   из нескольких карточек в листинге, а не на одну страницу. */

.au-course-detail {
  margin-top: calc(40px + 32px * var(--au-k));
}

/* §137: волна — Inter Tight 400, приглушение 0.7 оставлено (оно макетное). */
.au-course-detail__subtitle {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.7);
}

/* §137: волна — Inter Tight Medium 500, как у `.au-home-courses__price` */
.au-course-detail__price {
  margin: 0 0 32px;
  font-size: 32px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 39px;
  color: var(--au-black);
}

/* Состав на странице курса/консультации — столбиком, как в карточке списка
   (правка заказчика 2026-09-26): ряд по всей ширине с переносами читался
   разрозненно. Зазор 8 — тот же, что в карточке. На mb список уже столбиком. */
.au-course-detail__features {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}

@media (max-width: 1023px) {
  .au-course-detail__subtitle {
    font-size: 18px;
    line-height: 24px;
  }

  .au-course-detail__price {
    margin-bottom: 24px;
    font-size: 26px;
    line-height: 31px;
  }
}

/* legal.text впервые не последний блок на странице (везде раньше — оферта,
   политика — за ним сразу футер, и разделяющий отступ давал padding-bottom
   у .au-page). У самого текста нет нижнего отступа, поэтому без этого правила
   последний абзац программы упирается прямо в тёмный блок заявки — что и
   было замечено на реальной странице (десктоп и мобилка). Отступ по той же
   формуле 24→72, что и .au-courses .au-container на мобилке (gap 24). */
.au-legal + .au-home-zayavka {
  margin-top: calc(24px + 48px * var(--au-k));
}