/* =========================================================
   PERGUNTAS FREQUENTES (#faq)
   Título no padrão do Sobre ("SOBRE MIM / O PROFISSIONAL"): "DÚVIDAS" em
   Cormorant 500 com o degradê dourado do site (--grad-gold-fade) e
   "PERGUNTAS FREQUENTES" branco sobreposto à base da palavra.
   Lista em <details> nativo (funciona sem JavaScript e no teclado; name="faq"
   deixa só uma aberta por vez): filete creme entre as perguntas, triângulo
   à direita que gira ao abrir. Fundo e ritmo de texto iguais aos da bio do Sobre.
   O triângulo é creme, não dourado: o dourado é reservado aos títulos.
   Sem JS próprio: a entrada usa o data-reveal do site.
   ========================================================= */
@layer sections {
  .faq {
    background: linear-gradient(180deg, var(--c-green-deep), var(--c-green-night));
    color: var(--c-cream-warm);
    font-family: var(--ff-garamond);
    line-height: normal;
    /* ritmo do data-reveal igual ao da bio do Sobre (sobe 24px, 0,9s), cascata mais curta: são 9 itens */
    --dur-reveal: .9s; --reveal-distance: 24px; --stagger-step: 70ms; --ease-reveal: var(--ease-soft);
  }
  .faq__inner { width: min(100% - 2 * var(--gutter), 1080px); margin-inline: auto; }

  /* ---------- título: mesmo desenho do .overtitle do Sobre ---------- */
  .faq__title { position: relative; display: grid; place-items: center; text-align: center; margin: 0 auto clamp(40px, 7vh, 80px); }
  .faq__back {
    grid-area: 1 / 1; white-space: nowrap;
    font-family: var(--ff-garamond); font-weight: 500; text-transform: uppercase; line-height: .9; letter-spacing: .01em;
    font-size: clamp(44px, 13.5vw, 190px);
    background: var(--grad-gold-fade); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .faq__front {
    grid-area: 1 / 1; align-self: end; margin-bottom: -.15em;
    font-family: var(--ff-garamond); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
    font-size: clamp(20px, 3.4vw, 50px); color: var(--c-white); text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
  }
  @media (max-width: 600px) {
    .faq__back {
      font-size: 20vw; line-height: .82;
      background: linear-gradient(180deg, #d9b36a 0%, #c29a55 45%, #b08a4a 70%, rgba(176, 138, 74, .35) 100%);   /* o mesmo do Sobre no celular */
      -webkit-background-clip: text; background-clip: text;
    }
    .faq__front { font-size: 5.6vw; margin-bottom: -.3em; }
  }

  /* ---------- lista ---------- */
  .faq__list { width: min(860px, 100%); margin-inline: auto; border-bottom: 1px solid rgba(241, 234, 216, .18); }
  .faq__item { border-top: 1px solid rgba(241, 234, 216, .18); }

  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: clamp(18px, 2.6vh, 26px) 4px;
    cursor: pointer; list-style: none;
    font-size: clamp(21px, 1.95vw, 28px); font-weight: 500; line-height: 1.3;   /* Cormorant tem olho pequeno: maior que o normal para ler bem */
    color: var(--c-cream-warm);
    transition: color var(--dur-fast) ease;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover, .faq__item[open] > .faq__q { color: var(--c-white); }
  .faq__q:focus-visible { outline: 1px solid var(--c-sage-light); outline-offset: 4px; }

  /* triângulo (como na referência), aponta para a direita e gira para baixo ao abrir */
  .faq__mark {
    flex: none; width: 8px; height: 11px;
    background: currentColor; opacity: .75;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
  }
  .faq__q:hover .faq__mark { opacity: 1; }
  .faq__item[open] .faq__mark { transform: rotate(90deg); opacity: 1; }

  .faq__a { padding: 0 4px clamp(22px, 3vh, 30px); max-width: 740px; }   /* ~70 caracteres por linha no tamanho do desktop */
  /* resposta: tamanho da bio do Sobre, peso 500 e mais contraste (400 fino a .82 ficava cansativo, pedido do Victor) */
  .faq__a p { font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.6; color: rgba(241, 234, 216, .92); }

  /* abrir/fechar suave: altura onde o navegador suporta ::details-content; o texto sempre entra com fade */
  @media (prefers-reduced-motion: no-preference) {
    .faq__item { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--dur-base) var(--ease-soft), content-visibility var(--dur-base) allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
    .faq__item[open] .faq__a { animation: faq-in .6s var(--ease-soft) both; }
    @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
  }
}