/* Карточка курса. 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: 72px; /* Frame 129 y=576 при низе H1 504 */
}

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

/* Frame 126 975:1484 */
.au-course {
  display: flex;
  align-items: center;
  justify-content: space-between;
  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 налезал на колонку цены. */
.au-course__title {
  margin: 0;
  width: max-content;
  max-width: 1457px; /* ширина .au-course__main: дальше начинается колонка цены */
  /* 48 на 1920, 34 на 1024 — на ступень ниже H1 (52), иначе на планшете
     заголовок карточки догоняет заголовок страницы и иерархия схлопывается */
  font-size: calc(34px + 14px * var(--au-k));
  font-weight: 600;
  line-height: calc(40px + 18px * var(--au-k));
  color: var(--au-black);
}

/* 975:1490 — Inter Regular 20px, lh 36px, по центру блока 379.
   Подпись в макете тоже шире бокса 379 (376…379 при разных курсах),
   поэтому по контенту с тем же потолком, что у заголовка */
.au-course__meta {
  margin: 0;
  width: max-content;
  max-width: 1457px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  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: 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 за правый край страницы */
.au-course__price {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  line-height: 39px;
  color: var(--au-black);
  /* Макетная цена 276 шире колонки 271 и в макете идёт одной строкой, поэтому
     nowrap; при аномально длинной строке из MODX перенос по символам
     срабатывает раньше, чем текст уйдёт за правый край страницы */
  white-space: nowrap;
}

/* Frame 124 975:1516 — ширина 227 */
.au-course__cta {
  width: 227px;
}

/* ─── 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;
    margin-top: 48px;
  }
}