/* Отзывы. Figma: Otzivy/pc 975:1706, Otzivy/mb 975:1807.
   Значения — из .design/spec/otzivy.md.
   Координаты внутри карточки в спеке даны от внешнего края, а padding и абсолютные
   смещения считаются от padding-box, то есть на 1px рамки меньше. */

/* ─── «Отзывы на Яндексе» ─────────────────────────────────────────────────
   975:1709 — на pc красная пилюля в hero: в потоке ссылка стоит после пагинации
   (её место в mb-макете), на pc поднимается в hero абсолютным позиционированием
   от .au-page, верх которого совпадает с низом хедера (232). */

.au-reviews-yandex {
  position: absolute;
  top: 195px; /* y 427 = 232 + 195 */
  right: var(--au-gutter); /* правый край 1824 — граница контентной колонки */
  width: 209px; /* Figma 209: аванс текста в браузере на 2.6px короче, разница уходит в padding */
  padding: 16px 24px; /* текст 161 × 36 → пилюля 209 × 68 */
  text-align: center;
  border-radius: 260px;
  background: var(--au-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: var(--au-white);
  white-space: nowrap;
}

/* 975:1347 и 975:1351 — у Hover обоих вариантов «красной кнопки» opacity 0.5:
   и у pc-пилюли, и у mb-текста. Click возвращает непрозрачность */
.au-reviews-yandex:hover,
.au-reviews-yandex:focus-visible {
  opacity: 0.5;
}

/* ─── Список ──────────────────────────────────────────────────────────── */

.au-reviews {
  margin-top: 72px; /* список y 576 при низе H1 504 */
}

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

/* 975:1725 */
.au-review {
  position: relative;
  padding: 41px 47px 33px 37px; /* внешние 42 / 48 / 34 / 38 */
  border: 1px solid var(--au-hairline-dark);
  border-radius: 20px;
  background: var(--au-white);
  overflow: hidden;
}

/* аватар + имя + «Отзыв об:»; высота ряда — по аватару */
.au-review__head {
  display: flex;
  align-items: center;
  gap: 72px;
}

.au-review__person {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 975:1733 — круг 50 с image-fill */
.au-review__avatar {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* отзыв без картинки: держим место круга, чтобы имя не съезжало */
.au-review__avatar--empty {
  display: block;
  background: var(--au-band);
}

/* 975:1732 — Inter Medium 16 / lh 23, две строки */
.au-review__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
}

/* 975:1726 — ширина 182, gap 8, низ блока совпадает с низом аватара */
.au-review__about {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-end;
  width: 182px;
}

/* 975:1727 — Inter Medium 14 / lh 17 / letter-spacing 2.1.
   В Figma текст набран «ОТЗЫВ ОБ:», в рендере — «Отзыв об:»: пишем литералом. */
.au-review__about-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 2.1px;
  color: var(--au-black);
}

/* 975:1728 — Inter Medium 16 / lh 19, opacity 0.3 */
.au-review__about-item {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--au-black);
  opacity: 0.3;
}

/* 975:1729…975:1731 — Inter Medium 16 / lh 26, между абзацами 18, ширина 1328 */
.au-review__text {
  max-width: 1328px;
  margin-top: 34px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--au-black);
}

.au-review__text > * {
  margin: 0;
}

.au-review__text > * + * {
  margin-top: 18px;
}

/* хвост последнего абзаца (975:1731, вторая часть узла) — Bold без отбивки */
.au-review__text strong {
  font-weight: 700;
}

/* рейтинг и ссылка на видео: на pc это отдельные абсолютные ноды,
   обёртка нужна только мобильному ряду */
.au-review__foot {
  display: contents;
}

/* 975:1734 — Inter Medium 32 / lh 23, правый край 1680.
   Абсолют осознанный: в DOM рейтинг стоит в подвале карточки рядом со ссылкой
   на видео, потому что на mb (975:1827) они образуют один ряд под текстом.
   На pc макет поднимает рейтинг в строку имени — визуальный и логический
   порядок расходятся, и поток их вместе не выражает: перенос в `head` даёт
   на pc точное совпадение (правый край 1680), но ломает mb-ряд, где рейтинг
   становится прямым ребёнком flex-колонки и уходит на свою строку. */
.au-review__rating {
  position: absolute;
  top: 54px;
  right: 47px;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
  white-space: nowrap;
}

/* 975:1735 + 975:1736 — Inter Bold 16 / lh 36 при opacity 0.5 и стрелка через 12.
   right 46, а не 47: в ассете 37px заложен свес обводки 0.5px с каждой стороны,
   поэтому линия 36px попадает во внешние 1644…1680, а текст встаёт ровно на 1506.
   Прозрачность задана цветом: opacity на ссылке умножилась бы на opacity внутри svg. */
.au-review__video {
  position: absolute;
  right: 46px;
  bottom: 49px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.au-review__video img {
  flex: none;
  width: 37px;
  height: 14.7279px;
}

/* Ховер — тоже цветом, а не opacity: та умножилась бы на прозрачность внутри svg.
   975:1357 — у Hover прозрачности нет, текст полностью чёрный */
.au-review__video:hover,
.au-review__video:focus-visible {
  color: var(--au-black);
}

/* Прозрачность стрелки вынесена из ассета в CSS — так же, как у стрелки пагинации:
   иначе запечённые 0.5 не поднять внешним правилом. В 975:1357 стрелка на ховере
   тоже полностью чёрная. */
.au-review__video img {
  opacity: 0.5;
}

.au-review__video:hover img,
.au-review__video:focus-visible img {
  opacity: 1;
}

/* ─── MB: 390px ───────────────────────────────────────────────────────────
   975:1814: одна колонка с равными интервалами 36, padding 48 / 26. */

@media (max-width: 1023px) {
  /* 975:1841 — на mb это просто красный текст по центру, 36px под пагинацией */
  .au-reviews-yandex {
    position: static;
    display: block; /* ссылка по умолчанию inline: тогда ни ширина, ни auto-центрирование не работают */
    width: fit-content;
    margin: 36px auto 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--au-red);
  }

  .au-review {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 47px 25px;
  }

  /* блоки шапки уходят в общую колонку карточки, порядок — как в mb-макете */
  .au-review__head {
    display: contents;
  }

  .au-review__person {
    order: 1;
  }

  .au-review__text {
    order: 2;
    max-width: 262px;
    margin-top: 0;
  }

  .au-review__about {
    order: 3;
    align-self: auto;
  }

  /* 975:1827 + 975:1828: высота ряда — по рейтингу (23), бокс ссылки (36)
     выступает симметрично на 6.5 вверх и вниз, как в макете */
  .au-review__foot {
    order: 4;
    display: flex;
    align-items: center;
    /* 64 из макета, но ниже 390 зазор сжимается: иначе стрелка вылезает за карточку.
       Нижняя граница 20 держит строку в одну линию вплоть до 320 */
    gap: clamp(20px, calc(100% - 210px), 64px);
    height: 23px;
  }

  .au-review__rating,
  .au-review__video {
    position: static;
  }
}