/* =======================================================================
   FAQ — в стиле сайта (крафт / терракота / «чернило»)
   ======================================================================= */

/* Секция: авто-высота, контент смещён умеренно вниз, кнопка ближе к низу */
#faq{
  min-height: 100dvh;
  padding-top: 4rem;         /* было 6rem — подняли заголовок выше */
  padding-bottom: 0;         /* низ берём с .faq-cta */
  background: var(--paper-100);
  display: flex;
  flex-direction: column;
}

/* Контейнер тянется, чтобы кнопку можно было прижать к низу */
/* контейнер тянется + даём постоянный зазор между блоками и кнопкой */
#faq .container{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;           /* ← минимум 2rem над кнопкой всегда */
}


/* Заголовок и лид */
#faq h2{
  margin-top: .25rem;          /* было 1rem — ещё чуточку выше */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.35;
}

#faq .faq-lead{
  max-width: 640px;
  margin: 0 auto 1.75rem;
  color: var(--ink-60);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* Карточка вопроса */
#faq .faq-item{
  background: var(--paper-200);
  border: 2px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .06s ease;
}
#faq .faq-item.is-open{
  border-color: var(--terracotta);
  box-shadow: 0 12px 24px rgba(31,30,22,.18);
}

/* Шапка вопроса (кликабельно всё) */
#faq .faq-q{
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
}
#faq .faq-q:hover{ background: var(--paper-300); }

#faq .faq-q:focus{ 
  outline: none;
}

/* Иконка/смайл слева */
#faq .faq-ico{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Плюс/минус справа */
#faq .faq-toggle{ position: relative; width: 24px; height: 24px; }
#faq .faq-toggle::before,
#faq .faq-toggle::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
}
#faq .faq-toggle::before{ width: 14px; height: 2px; transform: translate(-50%, -50%); }
#faq .faq-toggle::after{  width: 2px;  height: 14px; transform: translate(-50%, -50%); }
#faq .faq-item.is-open .faq-toggle::after{
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* Ответ */
#faq .faq-collapse{
  border-top: 1px solid rgba(31,30,22,.12);
  transition: height .28s ease;   /* плавность — только по высоте */
  will-change: height;
}
#faq .faq-collapse:not(.show){
  border-top-color: transparent;  /* держим высоту бордера, но без видимой линии */
}

#faq .faq-a{
  padding: 14px 22px 20px 86px;   /* выравниваем под увеличенную иконку */
  color: var(--ink-60);
  font-size: .97rem;
  line-height: 1.6;
}

/* Отступы между карточками */
#faq .faq-item + .faq-item{ margin-top: 1rem; }

/* Кнопка — прижата к низу секции, но с буфером */
#faq .faq-cta{
  margin-top: auto;               /* уходит вниз */
  display: flex;
  justify-content: center;
  padding-bottom: 15dvh;          /* воздух от края экрана */
}

/* Адаптивы */
@media (max-width: 991.98px){
  #faq .faq-a{ padding-left: 72px; }
}
@media (max-width: 575.98px){
  #faq .faq-q{ grid-template-columns: 44px 1fr 22px; padding: 16px; }
  #faq .faq-ico{ width: 38px; height: 38px; font-size: 18px; }
  #faq .faq-a{ padding: 12px 16px 16px 60px; }
}

/* ===================== ФИНАЛЬНО: высота «авто» и строгий скоуп ===================== */
/* Делаем блок и контейнер всегда по контенту; не влияет на другие секции */
#faq,
#faq .container{
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}