/* novamarine-faq-section — Figma 2001:711, 1440x804 */

.faq {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  /* На артборде 120/108; на широком экране padding-inline ниже держит колонку ≤1280. */
  padding: 100px 108px 100px 120px;
  background: var(--c-surface-frost);
  background-color: #E5F3F6;
}

.faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 380px;
  flex-shrink: 0;
}

.faq__title {
  width: 100%;
  color: var(--c-text);
  word-break: break-word;
}

.faq__list {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Пункты стыкуются вплотную: 204 + 5x80 = 604px колонки. */
.faq__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 24px 0;
  flex-shrink: 0;
}

/* У свёрнутого ответа высота 0, но flex-gap всё равно рисуется — из-за него
   снизу от текста до линии было на 12px больше, чем сверху. */
.faq__item.is-collapsed {
  gap: 0;
}

/* Нижняя граница — псевдоэлементом: в Figma обводка не увеличивает высоту пункта. */
.faq__item::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--c-line-faq);
}

.faq__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.faq__question {
  flex: 1 0 0;
  min-width: 0;
  color: var(--c-text);
  word-break: break-word;
}

.faq__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Минус в макете — линия нулевой высоты: бокс 14x0, штрих в 2px выходит вверх. */
.faq__minus {
  position: relative;
  width: 14px;
  height: 0;
  flex-shrink: 0;
}

.faq__minus > img {
  position: absolute;
  top: -2px;
  left: 0;
  width: 14px;
  height: 2px;
  max-width: none;
}

/* 12x12 по центру бокса 24x24. Экспорт артборда 1440 рисовал плюс на 14px, но
   в более новом (93:1179) и на мобильном он 12px — берём новый размер. */
.faq__plus {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.faq__plus > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.faq__answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 24px 0 0;
  flex-shrink: 0;
}

.faq__answer-text {
  width: 100%;
  padding-bottom: 2px;
  color: var(--c-text-body);
  word-break: break-word;
}

/* --- сворачивание и наведение ----------------------------------------------
   Разворачивается только тот вопрос, у которого в разметке есть ответ. В макете
   он один, остальные пять нарисованы свёрнутыми и текста ответа не имеют —
   поэтому там нет ни курсора, ни подсветки: щёлкать не по чему. Появятся
   ответы — движок подхватит их сам, как это сделано у каруселей.
   -------------------------------------------------------------------------- */

.faq__item--toggleable .faq__row {
  cursor: pointer;
}

.faq__question {
  transition: color var(--dur) var(--ease);
}

.faq__item--toggleable .faq__row:hover .faq__question {
  color: var(--c-primary);
}

.faq__icon {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq__item--toggleable .faq__row:hover .faq__icon {
  opacity: 0.6;
}

/* Только height анимируется. padding-top нельзя трогать в transition:
   иначе scrollHeight меряется без верхних 8px и низ ответа обрезается
   (особенно заметно на мобильном). padding схлопывается сразу. */
.faq__answer {
  overflow: hidden;
  transition: height var(--dur) var(--ease);
}

.faq__item.is-collapsed .faq__answer {
  height: 0;
  padding-top: 0;
}

.faq__plus--toggle {
  display: none;
}

.faq__item.is-collapsed .faq__minus {
  display: none;
}

.faq__item.is-collapsed .faq__plus--toggle {
  display: block;
}

/* --- широкий экран ---------------------------------------------------------
   Фон секции во всю ширину; колонка FAQ — не шире 1280. Заголовок сверху,
   вровень с первым вопросом (как в макете 122:1308).
   -------------------------------------------------------------------------- */

.faq {
  padding-inline: max(120px, calc((100% - var(--content-w)) / 2));
}

/* --- mobile artboard — Figma 50:407, 461x1084 ----------------------------- */

@media (max-width: 767px) {
  /* Заголовок и список встают колонкой: 50 + 140 + 40 + 804 + 50 = 1084. */
  .faq {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 50px var(--gutter);
  }

  /* В колонке заголовок снова растягивается по ширине: центрирование по
     поперечной оси нужно только десктопной раскладке в две колонки. */
  .faq__intro {
    width: auto;
    align-self: stretch;
  }

  /* На мобильном заголовок секции набран в H3: 2 строки по 40 = 80px. */
  .faq__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  /* В колонке flex-basis: 0 меряет высоту — список должен остаться по контенту. */
  .faq__list {
    flex: 0 0 auto;
  }

  /* Волосяной трекинг вместо токенного -0.48px. В макете первый вопрос ложится
     в две строки: «Чем нано-коллаген отличается» / «от обычного коллагена?».
     Chrome набирает первую строку на 361px при колонке в 357 и уносит
     «отличается» вниз — получается три строки и +32px ко всей секции.
     -0.68px возвращает перенос на место (355.5px вместо 361.1px); на остальных
     пяти вопросах число строк во всём диапазоне -0.48…-0.80px не меняется. */
  .faq__question {
    letter-spacing: -0.68px;
  }
}

.faq__row:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.faq__answer[hidden] {
  display: none;
}