/* ==========================================================================
   10 · Perguntas frequentes (acordeão)
   Figma: "Perguntas" 7057:763 (estado inicial: 1ª aberta)
          7057:1039 (todas abertas — fonte das respostas)
   Layout: container 1216 · 2 colunas flex 1 (568 + 80 + 568) · py 80
   Anotações Figma: título "Fixo durante o scroll" (sticky);
   "Por padrão, todos os acordeões recolhidos, exceto o primeiro."
   Responsivo (Figma só tem 1440 — adaptação inferida, padrão mobile do site
   de referência: uma coluna, lateral 24, tipografia contida):
     ≤1199  título numa coluna estreita (30%), acordeão ganha a largura da pergunta;
            a faixa inteira entre divisores vira área de toque (68px, círculo
            centrado na pergunta), pergunta 20 (literal do Figma), resposta 16/1.5
     ≤1023  empilha (título 40 → lista), título deixa de ser sticky, rodapé em linha
     ≤767   compacto: título 28, pergunta 18, círculo 36, faixa ≥64px, resposta
            15/1.5 em largura total; rodapé fica em linha enquanto cabe (~520+) e,
            quando quebra, o botão ocupa a largura toda (sem media query extra)
   ========================================================================== */


.faq {
  background: var(--color-cream-50);
  color: var(--color-red-700);
  padding-block: var(--section-py);               /* py-[80px] */
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;                                      /* gap-[80px] */
}

/* ---- Coluna esquerda: título fixo durante o scroll (7057:764) ---- */
.faq__header {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;                            /* self-stretch: trilho do sticky */
}

.faq__title {
  position: sticky;
  /* Figma: sticky top-0. O header fixo tem 70px; o título fixa 10px abaixo dele
     (= 80px em ≥1024, exatamente onde já está quando a seção encosta no topo). */
  top: calc(var(--header-h-scroll) + 10px);
  font-size: clamp(40px, 3.8889vw, 56px);         /* text-[56px] @1440 · Anton · lh 1.2 (u-display) */
  color: var(--color-red-700);
}

/* ---- Coluna direita: lista + rodapé (7057:791) ---- */
.faq__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                                      /* gap-[16px] */
}

.faq__item {
  padding-bottom: 16px;                           /* pb-[16px] */
  border-bottom: 1px solid var(--color-red-700-a15);
}

/* Linha: pergunta + resposta (coluna de 496) com o botão circular de 40 ao lado.
   A altura mínima é a do círculo (item fechado = 40 + 16 + 1 = 57). */
.faq__row { min-height: 40px; }

.faq__heading {
  font: inherit;
}

.faq__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding-right: 72px;                            /* gap-[32px] + círculo 40 → texto 496 */
  text-align: left;
}

.faq__question {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;                                /* text-[20px] */
  line-height: 1.4;                               /* leading-[1.4] → 28px */
  text-transform: uppercase;
  color: var(--color-red-700);
  /* Em 1440 todas as perguntas cabem numa linha (no-op); de 1200 a 1439 a coluna
     encolhe e evita "CONVIDADOS?" sozinho na 2ª linha. */
  text-wrap: balance;
}

.faq__icon {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                                    /* size-[40px] */
  height: 40px;
  border-radius: 24px;                            /* rounded-[24px] */
  background: var(--color-cream-25);
}

.faq__icon-img { width: 20px; height: 20px; }     /* size-[20px] */

/* Ícone: minus quando aberto, plus quando fechado. Sem JS tudo fica aberto (minus).
   `.is-enhanced` entra por um <script> inline no fim da seção (antes do JS deferido),
   então o estado recolhido já vale no primeiro paint. */
.faq__icon-img--plus { display: none; }
.faq.is-enhanced .faq__item:not(.is-open) .faq__icon-img--minus { display: none; }
.faq.is-enhanced .faq__item:not(.is-open) .faq__icon-img--plus { display: block; }

/* Resposta: colapso com grid-template-rows (0fr ↔ 1fr) */
.faq__answer {
  display: grid;
  grid-template-rows: 1fr;
  padding-right: 72px;                            /* mesma coluna de 496 da pergunta */
}

.faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__answer-text {
  margin-top: 16px;                               /* gap-[16px] entre pergunta e resposta */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;                                /* text-[16px] · Archivo Regular */
  /* Figma: leading 1.4 (22.4px), mas o Figma arredonda a entrelinha para 22px
     (metadata: 3 linhas = 66, 5 = 110, 6 = 132). 22px reproduz a geometria. */
  line-height: 22px;
  color: var(--color-red-700);
}

.faq.is-enhanced .faq__item:not(.is-open) .faq__answer {
  grid-template-rows: 0fr;
  visibility: hidden;                             /* tira do fluxo de leitura/tab quando fechado */
}

.faq.is-animated .faq__answer {
  transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s;
}
.faq.is-animated .faq__item.is-open .faq__answer {
  transition: grid-template-rows .3s var(--ease), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .faq.is-animated .faq__answer,
  .faq.is-animated .faq__item.is-open .faq__answer { transition: none; }
}

/* ---- Rodapé: "Ainda tem dúvidas?" + botão secondary (7057:893) ---- */
.faq__footer {
  display: flex;
  flex-wrap: wrap;                                /* só quebra abaixo de ~495px de coluna */
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.faq__footer-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;                                /* text-[20px] */
  line-height: 1.4;                               /* leading-[1.4] → 28px */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-red-700);
}


/* ==========================================================================
   Responsivo (escala compacta — tokens --fs-t-* / --fs-m-* / --gap-m-*)
   Uma media query por breakpoint; ≥1200 fica exatamente como o Figma.
   ========================================================================== */

/* ---- Laptop / tablet grande (1024–1199): título numa coluna estreita ----
   Com 2 colunas iguais a pergunta ficaria com ~320px e quebraria em quase
   todas as linhas; com o título em 30% o acordeão volta a ter ~470–570px de
   texto (a coluna de 496 do Figma). O clamp do título dá 56px em 1440. */
@media (max-width: 1199.98px) {
  .faq__inner { gap: 64px; }

  .faq__header { flex: 0 0 30%; }

  .faq__title { text-wrap: balance; }

  /* Lista em faixas de toque já a partir de 1199 (iPad deitado = 1024–1180 é
     toque): a faixa inteira entre divisores é o botão (14 + 40 + 14 = 68) e o
     círculo fica centrado na pergunta — no layout do Figma o texto (28) fica
     alinhado ao topo do círculo (40) e o alvo de toque tinha só 28px.
     Pergunta fica no literal do Figma (20): é item de lista, não título de
     card, e 24 deixaria a lista mais pesada que o próprio título da seção. */
  .faq__content {
    gap: 0;
    margin-top: -14px;                            /* 1ª pergunta na altura do título (lado a lado) */
  }

  .faq__item { padding-bottom: 0; }

  .faq__row { min-height: 0; }

  .faq__trigger {
    display: flex;
    align-items: center;                          /* círculo centrado na pergunta (1 ou 2 linhas) */
    gap: 24px;
    padding: 14px 0;
    -webkit-tap-highlight-color: transparent;
  }

  .faq__question {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
  }

  .faq__icon {
    position: static;
    flex: 0 0 40px;
    transition: background-color .2s var(--ease);
  }

  /* Feedback de toque: o círculo escurece enquanto o dedo está na faixa. */
  .faq__trigger:active .faq__icon { background: var(--color-cream-100); }

  .faq__answer { padding-right: 64px; }           /* mesma coluna da pergunta (24 + 40) */

  .faq__answer-text {
    max-width: 600px;                             /* medida de leitura (~75 caracteres) */
    margin-top: -2px;                             /* ~16 visuais entre pergunta e resposta */
    margin-bottom: 20px;
    font-size: var(--fs-t-body);                  /* 16 */
    line-height: 1.5;
    text-wrap: pretty;                            /* sem palavra órfã na última linha */
  }

  .faq__footer { margin-top: 32px; }
}

/* ---- Tablet (≤1023): empilha título → lista (faixas de toque vêm do bloco acima) ---- */
@media (max-width: 1023.98px) {
  .faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;                                    /* + 14 da 1ª faixa = 32 até o 1º círculo */
  }

  .faq__header {
    flex: none;
    align-self: auto;
  }

  .faq__title {
    position: static;                             /* empilhado, sticky cobriria a lista */
    font-size: var(--fs-t-h2);                    /* 40 */
  }

  .faq__content { margin-top: 0; }
}

/* ---- Mobile (≤767): lista densa, resposta em largura total, rodapé adaptável ---- */
@media (max-width: 767.98px) {
  .faq__inner { gap: 10px; }                      /* título → 1ª pergunta ≈ 28 visuais */

  .faq__title { font-size: var(--fs-m-h2); }      /* 28 */

  .faq__trigger {
    gap: var(--gap-m-md);                         /* 16 */
    min-height: 64px;                             /* faixa ≥ 64 (toque ≥ 44) */
    padding: 14px 0;
  }

  .faq__question {
    font-size: 18px;                              /* SPEC: pergunta 16–18 Anton */
    line-height: 1.3;
  }

  .faq__icon {
    flex-basis: 36px;                             /* SPEC: ícones 32–40 */
    width: 36px;
    height: 36px;
  }

  .faq__icon-img { width: 18px; height: 18px; }

  .faq__answer { padding-right: 0; }              /* resposta usa a largura toda */

  .faq__answer-text {
    max-width: none;
    margin-top: -4px;                             /* ~12–18 visuais abaixo da pergunta */
    margin-bottom: var(--gap-m-md);               /* 16 */
    font-size: var(--fs-m-body);                  /* 15 */
    line-height: var(--lh-m-body);                /* 1.5 */
  }

  /* Rodapé: continua flex-wrap. O texto absorve quase toda a sobra da linha
     (grow 999) e o botão fica à direita enquanto os dois cabem (≈ 520px+);
     quando quebra (390/375/320), o botão fica sozinho na linha e o grow 1
     o estica para a largura toda — alvo grande para o polegar. */
  .faq__footer {
    gap: var(--gap-m-md);                         /* 16 */
    margin-top: var(--gap-m-lg);                  /* 32 */
  }

  .faq__footer-text {
    flex: 999 1 auto;
    font-size: 18px;                              /* mesmo corpo das perguntas */
    line-height: 1.3;
    white-space: normal;
    text-wrap: balance;
  }

  .faq__footer .btn { flex: 1 1 auto; }
}