/* ==========================================================================
   FAQ: вопросы карточками, ответ раскрывается внутри карточки, справа шеврон
   (по образцу FAQ Buy Me a Coffee). Слева от списка — блок b44 из Tilda
   («FAQ», «Остались вопросы?», кнопки отдела заботы). Логика — js/faq.js.
   Размеры в px макета, масштаб — через --zoom, как у остальных блоков.
   ========================================================================== */

.faq {
  --w: 1200px;
  position: relative; /* без фона: под ним видны кнопки отдела заботы из блока b44 (они выходят за его край) */
}

.faq__canvas {
  display: grid;
  align-content: start;
  gap: 10px;
  width: var(--w);
  min-height: 300px;           /* слева кнопки отдела заботы — до 290px от верха списка */
  margin: 0 auto;
  padding: 0 100px 0 610px;    /* колонка вопросов — как в макете Tilda: x 610, ширина 490 */
  zoom: var(--zoom);
}

.faq__item {
  border-radius: 12px;
  background-color: #1a1c1e;
  transition: background-color .2s;
}
@media (hover: hover) {
  .faq__item:hover { background-color: #212326; }
}
.faq__item.is-open { background-color: #212326; }

.faq__question {
  position: relative;
  display: block;
  padding: 20px 56px 20px 24px;
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }

/* шеврон без подложки; у открытого вопроса смотрит вверх */
.faq__chevron {
  position: absolute;
  top: 50%;
  right: 26px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid #f5f5f5;
  border-bottom: 1.5px solid #f5f5f5;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease;
}
.faq__item.is-open .faq__chevron { transform: translateY(-30%) rotate(-135deg); }

/* ответ: плавно раскрывается по высоте */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer p {
  margin: 0;
  padding: 0 24px 22px;
  color: rgba(245, 245, 245, .75);
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.3px;
}

@media (max-width: 959px) {
  .faq { --w: 320px; }
  .faq__canvas { gap: 8px; min-height: 0; padding: 0 10px; }
  .faq__item { border-radius: 10px; }
  .faq__question { padding: 16px 44px 16px 16px; font-size: 14px; line-height: 18px; letter-spacing: -0.4px; }
  .faq__chevron { right: 18px; width: 8px; height: 8px; }
  .faq__answer p { padding: 0 16px 16px; font-size: 11px; line-height: 15px; }
}