/* ==========================================================================
   10 · PERGUNTAS FREQUENTES (fundo escuro)
   1. Layout  2. Introdução (título + link do regulamento)  3. Perguntas
   Acordeão nativo com <details>/<summary>.
   ========================================================================== */

/* Luz quente bem suave atrás da lista de perguntas */
.faq {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(45% 50% at 80% 40%, rgb(146 85 24 / 0.18), transparent 70%),
    var(--ink-950);
}

/* ---------- 1. Layout ---------- */
.faq__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .faq__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
  }
  .faq__intro {
    position: sticky;
    top: 8rem;
    grid-column: 1 / span 4;
    align-self: start;
  }
  .faq__list {
    grid-column: 6 / span 7;
  }
}

/* ---------- 2. Introdução ---------- */
.faq__lead {
  max-width: 24rem;
  margin-top: 1.25rem;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.faq__cta {
  margin-top: 2rem;
}

/* ---------- 3. Perguntas ----------
   Cada pergunta é um cartão escuro suave. Aberta, ganha borda dourada.
   ---------------------------------- */
.faq__list {
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid rgb(246 232 199 / 0.1);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.03);
  transition:
    border-color var(--dur-base),
    background-color var(--dur-base);
}

.faq__item:hover {
  border-color: rgb(246 232 199 / 0.22);
}

.faq__item[open] {
  border-color: rgb(237 203 125 / 0.45);
  background: rgb(255 255 255 / 0.05);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
  padding: 1.125rem 1.25rem;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream-100);
  list-style: none; /* remove o triângulo padrão */
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* Seta simples que gira ao abrir */
.faq__chevron {
  color: var(--gold-300);
  transition: transform var(--dur-base) var(--ease-silk);
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 1.25rem 1.375rem;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  animation: fade-up 0.4s var(--ease-silk) both;
}

@media (min-width: 40rem) {
  .faq__question {
    padding: 1.25rem 1.75rem;
    font-size: 1.125rem;
  }
  .faq__answer {
    max-width: 40rem;
    padding: 0 1.75rem 1.5rem;
  }
}