/* FAQ — Figma y 7545–8512 (h 967). Белый фон, 10 вопрос-ответов.
   Вопрос — 20/700 с золотой плашкой во всю ширину текста, ответ — 20/300, lh 27.2. */

.faq {
  position: relative;
  height: calc(967 * var(--u));
  background: var(--color-white);
}

.faq__list {
  position: absolute;
  left: calc(115 * var(--u));
  top: calc(88 * var(--u));
  width: calc(1212 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(27.2 * var(--u));
  text-align: right;
}

/* Между блоками — пустая строка макета */
.faq__item + .faq__item {
  margin-top: calc(27 * var(--u));
}

/* Вопрос: жирный, плашка по ширине текста, перекрывает низ строки (как в Figma) */
.faq__q {
  position: relative;
  display: inline-block;
  font-weight: var(--fw-bold);
  z-index: 0;
}

.faq__q::after {
  content: '';
  position: absolute;
  right: calc(-3 * var(--u));
  left: calc(-3 * var(--u));
  bottom: calc(2 * var(--u));
  height: calc(7 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-gold);
  z-index: -1;
}

.faq__a {
  font-weight: var(--fw-light);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .faq {
    height: auto;
    padding: calc(52 * var(--u)) calc(24 * var(--u)) calc(56 * var(--u));
  }

  .faq__list {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    font-size: calc(16 * var(--u));
    line-height: 1.55;
  }

  .faq__item + .faq__item {
    margin-top: calc(22 * var(--u));
  }

  .faq__q {
    font-size: calc(17 * var(--u));
  }

  .faq__q::after {
    height: calc(5 * var(--u));
    bottom: calc(1 * var(--u));
  }
}