/* Эксперты. Figma: Ecsperty/pc 975:2046, Ecsperty/mb 975:2137.
   Значения — из .design/spec/ecsperty.md.
   line-height задан в px по высотам текстовых нод Figma: `normal` в браузере
   и в Figma расходится на 1–2px для 48/32/28/26px.
   §137: margin-top 97 → 72 — единая шкала внутренних страниц.
   Кнопка .au-expert__cta (top: 39px right: 0) — абсолютная по pc-макету,
   отступа не требует: её положение задано от верха карточки, не от H1. */

.au-experts {
  margin-top: var(--au-head-gap); /* §137: было 97 (макетное) */
}

.au-experts .au-container {
  display: flex;
  flex-direction: column;
  gap: var(--au-item-gap); /* §137: было 108 (низ линии 1973 → фото 2081) */
}

/* Group 24 975:2049 / Group 25 975:2067 */
.au-expert {
  position: relative;
}

/* Group 23 975:2061 — колонка «имя + роль» центрирована по фото (44 сверху и снизу) */
.au-expert__head {
  display: flex;
  align-items: center;
  gap: 36px; /* 252 + 36 = 288 — левый край имени */
}

/* 1024–1919 — своего макета нет. Кнопка (975:2126 ниже) стоит поверх строки
   абсолютно, с теми же top/right/width, что и на 1920, и в поток не встроена,
   поэтому колонка «имя + роль» её ширину не учитывает: на узких длинное имя
   растягивает `.au-expert__text` под кнопку. Резервируем её ширину плюс тот
   же 36px, что и gap ряда, — колонка сжимается и переносит имя на 2 строки
   вместо наезда. На 1920 (и на mb, где кнопка в потоке) места и так с
   запасом, раскладка не меняется. */
@media (min-width: 1024px) and (max-width: 1919px) {
  .au-expert__head {
    padding-right: calc(285px + 36px);
  }
}

/* 975:2062 — radius 290 браузер сводит к 107, то есть к половине высоты */
.au-expert__photo {
  flex: none;
  width: 252px;
  height: 214px;
  border-radius: 290px;
  overflow: hidden;
}

.au-expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Group 22 975:2063 — 58 + 32 + 36 = 126 */
.au-expert__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* 975:2064 — Inter Semi Bold 48, Figma h 58.
   Без nowrap: в макете имя и так в одну строку, а ниже 1920 запрет переноса
   не давал блоку сжаться и имя уходило под обрез.
   §137: волна — Inter Tight 400, кегль 48 → 32 (как `.au-home-experts__name`). */
.au-expert__name {
  font-size: 32px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 39px;
}

/* 975:2066 — стиль P1/Auren: Inter Regular 20 / lh 36.
   §137: волна — Inter Tight Light 300 (роль под именем), кегль 20. */
.au-expert__role {
  font-size: 20px;
  font-weight: 300;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 36px;
}

/* Frame 119 975:2050 — пункты на 72 ниже фото */
.au-expert .au-feature-list {
  margin-top: var(--au-item-gap);
}

/* Frame 103 975:2052 — первый пункт фиксированной ширины, содержимое по центру
   (маркер встаёт на x 13); от его ширины считается позиция второго пункта */
.au-expert .au-feature:first-child {
  width: 285px;
  justify-content: center;
}

/* Frame 26 975:2126 — кнопка у правого края колонки, по центру строки имени:
   y 640 = 601 + 39, центр 674 совпадает с центром имени.
   Абсолют осознанный: в DOM кнопка стоит после списка характеристик, потому что
   на mb (975:2183) она идёт именно там — под пунктами. На pc макет поднимает её
   в строку имени, то есть визуальный и логический порядок расходятся, и поток
   их одновременно выразить не может: перенос в `head` ломает mb-раскладку. */
.au-expert__cta {
  position: absolute;
  top: 39px;
  right: 0;
  width: 285px; /* текст 217 + падды 34 — фиксируем внешний бокс */
  padding: 16px 34px;
}

/* ─── Аккордеон ──────────────────────────────────────────────────────────
   Frame 85: открытая строка 975:2102, закрытая 975:2112. Состояние — нативный
   <details>, поэтому все различия описаны через [open]. */

.au-acc {
  margin-top: var(--au-item-gap); /* строка 1007 при низе пунктов 935 */
}

.au-acc__item {
  position: relative;
  border-bottom: 0 solid var(--au-hairline-dark);
}

/* Линии 975:2133–975:2135 — только под закрытыми строками. В потоке:
   83 + 13 + 1 = 97, следующая строка получает 14 → шаг строк 111,
   а низ последней строки совпадает с линией, поэтому общий отступ
   пагинации 96 даёт y 2900 */
.au-acc__item:not([open]) {
  padding-bottom: 13px;
  border-bottom-width: 1px;
}

.au-acc__item:not([open]) + .au-acc__item {
  margin-top: 14px;
}

/* Frame 85 — строка 1728 × 83 */
.au-acc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  list-style: none; /* нативный маркер <summary> */
  cursor: pointer;
}

.au-acc__row::-webkit-details-marker {
  display: none;
}

/* Frame 81 975:2103 / текст 975:2104 — Inter Semi Bold 32, Figma h 39.
   §137: волна — Inter Tight Regular 400, как у заголовков секций главной.
   Здесь кегль 32 — второй ярус страницы (как у `.au-pay__title` и
   `.au-info__title`), а не 72 как у .au-home-h2 главной. */
.au-acc__title {
  flex: 1;
  padding: 10px 0;
  font-size: 32px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 39px;
}

/* 975:2114 — у закрытой строки заголовок 0.6 */
.au-acc__item:not([open]) .au-acc__title {
  opacity: 0.6;
}

/* Frame 82 975:2105 — бокс 48 × 48: иконка 28 × 28 с падом 10.
   Заливка ассета 975:2116 у закрытой строки — rgba(0,0,0,0.3) */
.au-acc__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

.au-acc__icon img {
  width: 28px;
  height: 28px;
}

/* 975:2106 — у открытой строки стрелка развёрнута и заливка без прозрачности.
   Поворот против часовой: стрелка смотрит вправо. По часовой она указывала
   влево, в пустое поле слева от заголовка. */
.au-acc__item[open] .au-acc__icon {
  transform: rotate(-90deg);
  opacity: 1;
}

/* 975:1430 — у Hover закрытой строки заголовок и стрелка без прозрачности.
   :focus-visible идёт парой: с клавиатуры строка иначе не отзывается */
.au-acc__row:hover .au-acc__title,
.au-acc__row:focus-visible .au-acc__title {
  opacity: 1;
}

.au-acc__row:hover .au-acc__icon,
.au-acc__row:focus-visible .au-acc__icon {
  opacity: 1;
}

/* Frame 86 975:2100 — панель: 30 сверху, 40 снизу, текст во фрейме с падом 10 */
.au-acc__panel {
  padding: 30px 0 40px;
}

/* 975:2101 — Inter Medium 16 / lh 23, ширина текстовой ноды 1570.
   §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message`
   (текстовый ярус на главной, Inter Regular 400). Вес 500 → 400. */
.au-acc__panel p {
  max-width: 1570px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 23px;
}

/* панель сертификатов: снизу 50 (низ 1826 → строка 1876) */
.au-acc__panel--certs {
  padding-bottom: 50px;
}

/* ─── Сертификаты ────────────────────────────────────────────────────────
   975:2122–975:2125 — ряд из карточек 348 × 487 с gap 24 (шаг 372).
   Состояния — компонент Sertificate 975:1406 (Hover 975:1409, Click 975:1412) */

.au-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.au-cert {
  position: relative;
  display: block;
  flex: none;
  width: 348px;
  height: 487px;
  border-radius: 20px;
  overflow: hidden;
}

/* заполняет карточку только изображение сертификата: лупа задаёт свой размер */
.au-cert img:not(.au-cert__zoom) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* скан кроится только снизу, как в макете (`h-[101.05%]` от верхнего края) */
  object-position: top;
}

/* Hover 975:1409 — наложение rgba(0,0,0,0.6) на всю карточку */
.au-cert::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

/* 975:1279 — лупа 72 × 72 по центру карточки (на PC это 138, 208) */
.au-cert__zoom {
  position: absolute;
  z-index: 1;
  left: calc(50% - 36px);
  top: calc(50% - 36px);
  width: 72px;
  height: 72px;
  opacity: 0;
}

.au-cert:hover::after,
.au-cert:focus-visible::after,
.au-cert:hover .au-cert__zoom,
.au-cert:focus-visible .au-cert__zoom {
  opacity: 1;
}

/* Click 975:1412 — то же наложение и opacity 0.5 на всю карточку */
.au-cert:active {
  opacity: 0.5;
}

/* ─── MB: 390px ──────────────────────────────────────────────────────────
   Frame 162 975:2142: колонка, gap 48. Кнопка уходит под пункты, стрелка
   аккордеона встаёт по центру первой строки заголовка. */

@media (max-width: 1023px) {
  .au-experts {
    margin-top: var(--au-head-gap); /* блок 328 при низе H1 256 */
  }

  .au-experts .au-container {
    gap: var(--au-item-gap); /* в MB-макете один эксперт; шаг взят как у строк аккордеона */
  }

  /* Frame 161 975:2143 */
  .au-expert__head {
    gap: 18px;
  }

  /* 975:2145 — кадр смещён к левому краю фотографии */
  .au-expert__photo {
    width: 105px;
    height: 139px;
  }

  .au-expert__photo img {
    object-position: left;
  }

  /* Frame 159 975:2146 — ширина 215, gap 24 */
  .au-expert__text {
    width: 215px;
    gap: 24px;
  }

  /* 975:2148 — Inter Semi Bold 26, Figma h 62 на две строки.
     §137: кегль 26 → 20 — шаг вниз от 32, карточка не рвётся в две строки. */
  .au-expert__name {
    font-size: 20px;
    line-height: 26px;
    white-space: normal;
  }

  /* 975:2150 — Inter Regular 18, Figma h 22.
     §137: шкала та же, что у `.au-home-experts__role` (16 + 2k = 18 на 1920) */
  .au-expert__role {
    font-size: 18px;
    line-height: 22px;
  }

  /* Frame 109 975:2151 — пункты на 48 ниже ряда с фото */
  .au-expert .au-feature-list {
    margin-top: var(--au-item-gap);
  }

  .au-expert .au-feature:first-child {
    width: auto;
  }

  /* Frame 26 975:2183 — кнопка под пунктами: y 898 при низе блока 851 */
  .au-expert__cta {
    position: static;
    margin-top: 47px;
  }

  /* 975:2170 — заголовок 1038 при низе кнопки 966 */
  .au-acc {
    margin-top: var(--au-item-gap);
  }

  /* на MB линий под строками нет, шаг строк — 72 от низа контента */
  .au-acc__item:not([open]) {
    padding-bottom: 0;
    border-bottom-width: 0;
  }

  .au-acc__item + .au-acc__item {
    margin-top: var(--au-item-gap);
  }

  .au-acc__row {
    padding: 0;
  }

  /* 975:2170 — Inter Semi Bold 28, Figma h 68 на две строки, ширина 303.
     §137: кегль 28 → 24 — шаг вниз от 32 (колонка 285 держит две строки). */
  .au-acc__title {
    flex: none;
    width: 303px;
    padding: 0;
    font-size: 24px;
    line-height: 30px;
  }

  /* 975:2174 / 975:2176 — бокс 28 × 28. Бокс выходит на 5px в правое поле:
     у ассета есть внутренние поля, поэтому глиф закрытой стрелки упирается
     в 362.4, то есть в правый край контента 364.
     По вертикали ориентир — глиф, а не бокс: в макете он начинается на 14 от
     верха заголовка (Ecsperty 975:2176 глиф 3079 при заголовке 3065, FAQ
     975:2452 глиф 344 при заголовке 330), а внутри бокса глиф стоит на 9 —
     отсюда top 5. У повёрнутой стрелки макет держит центр на 1.25 выше
     (там своя рамка 18 × 28), общий бокс это отклонение сохраняет */
  .au-acc__icon {
    position: absolute;
    top: 5px;
    right: -5px;
    width: 28px;
    height: 28px;
  }

  /* на MB заливка стрелки 0.3 и у открытой строки (975:2174).
     Повёрнутая стрелка лежит в макете в своей рамке 18 × 28, и её центр стоит
     на 1.5 выше центра закрытой: 17.5 от верха заголовка у Ecsperty `975:2174`
     и 17.75 у FAQ `975:2464` против 18.5 и 19 у закрытых. Общий бокс 28 × 28
     даёт центр top + 14, поэтому у открытой строки top на 1.5 меньше */
  .au-acc__item[open] .au-acc__icon {
    top: 3.5px;
    opacity: 0.3;
  }

  /* 975:2173 — панель: 36 сверху, снизу ничего: шаг до следующей строки (72)
     задаёт margin-top самой строки, иначе отступ удваивается */
  .au-acc__panel {
    padding: 36px 0 0;
  }

  .au-acc__panel p {
    max-width: 329px;
    padding: 0;
  }

  .au-acc__panel--certs {
    padding-bottom: 0;
  }

  /* 975:2181 / 975:2182 — сертификаты колонкой, gap 24. Высота 473 — это
     348 × 487 в масштабе 338 / 348; у первой карточки в макете 474 (округление) */
  .au-certs {
    flex-direction: column;
  }

  /* макетные 338 при вьюпорте 390; уже 390 карточка сжимается,
     иначе выходит за гаттер (соотношение скана 5 : 7 держит высоту) */
  .au-cert {
    width: min(338px, 100%);
    aspect-ratio: 338 / 473;
    height: auto;
  }

}

/* ─── Панель записи к специалисту ────────────────────────────────────────
   Выезжающая справа боковая панель (expert.booking.tpl). Своего макета в
   Figma нет — светлая форма на белом фоне в духе заявки на карточках курсов.
   Открывает/закрывает booking.js через класс .is-open; hidden убирает панель
   из потока и от скринридеров, пока она закрыта. */
.au-booking[hidden] {
  display: none;
}

.au-booking {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.au-booking__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.au-booking.is-open .au-booking__backdrop {
  opacity: 1;
}

.au-booking__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 100%);
  height: 100%;
  padding: 64px 48px;
  background: var(--au-white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.au-booking.is-open .au-booking__panel {
  transform: translateX(0);
}

/* Кнопка закрытия панели с иконкой Lucide cross */
.au-booking__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--au-black);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--au-ease);
}

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

.au-booking__close::before,
.au-booking__close::after {
  display: none;
}

/* §137: волна — Inter Tight Regular 400, как у `.au-pay__title` / `.au-acc__title`.
   Это второй ярус страницы (32/39), но вес 500 → 400. */
.au-booking__title {
  font-size: 32px;
  line-height: 39px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  color: var(--au-black);
  margin: 0;
}

/* §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message`.
   Подпись к заголовку формы записи. */
.au-booking__subtitle {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
  margin: 16px 0 0;
}

.au-booking__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

/* §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message` */
.au-booking__message {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 22px;
  color: var(--au-black);
  margin: 0;
}

.au-booking__message--error {
  color: #c0392b;
}

/* §137: волна — Inter Tight Regular 400. font: inherit снимает семейство
   и вес тела (Inter 400), поэтому задаём явно. */
.au-booking__input {
  width: 100%;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  font: inherit;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 18px;
  color: var(--au-black);
}

.au-booking__input::placeholder {
  color: var(--au-black);
  opacity: 0.6;
}

.au-booking__input:focus,
.au-booking__input:not(:placeholder-shown) {
  border-bottom-color: var(--au-black);
  outline: none;
}

.au-booking__error {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #c0392b;
}

/* Кнопка .au-btn уже чёрная — на белом фоне подходит без правок. */
.au-booking__submit {
  align-self: flex-start;
}

/* Блокировка прокрутки фона, пока панель открыта. */
body.au-booking-lock {
  overflow: hidden;
}

/* На узких экранах панель во всю ширину, поля крупнее для тапа. */
@media (max-width: 560px) {
  .au-booking__panel {
    width: 100%;
    padding: 56px 26px 40px;
  }

  .au-booking__title {
    font-size: 28px;
    line-height: 34px;
  }
}