/* faq: título à esquerda, sticky no desktop, e lista de <details> à direita. */

.faq { position: relative; padding-block: var(--respiro); }
.faq__moldura { padding-inline: var(--margem); }

.faq__lista { margin-top: 2.25rem; border-top: 1px solid var(--fio); }
.faq__item { border-bottom: 1px solid var(--fio); }

.faq__pergunta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 5.4vw, 1.625rem);
  line-height: 1.22;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }

/* Sinal de abrir: uma cruz fina, que vira traço quando aberta */
.faq__pergunta::after {
  content: "";
  width: 18px;
  height: 18px;
  justify-self: end;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 100% no-repeat;
  transition: background-size .4s var(--ease-controle);
}
.faq__item[open] .faq__pergunta::after {
  background-size: 100% 1.5px, 1.5px 0;
}

.faq__resposta { padding: 0 2.5rem 1.5rem 0; }
.faq__resposta .link-seta { margin-top: .25rem; }
.faq__resposta p { max-width: 62ch; text-wrap: pretty; }

html.js:not(.modo-estatico) .faq__item[open] .faq__resposta { animation: faq-aparece .3s var(--ease-controle); }

@keyframes faq-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1024px) {
  .faq__moldura {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .faq__topo {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-altura) + 3rem);
    align-self: start;
  }
  .faq__topo .titulo { font-size: clamp(2.5rem, 3.8vw, calc(3.75rem + var(--folga) * .028)); }
  .faq__lista { grid-column: 6 / -1; margin-top: 0; }
  .faq__pergunta { min-height: 84px; font-size: clamp(1.5rem, 2vw, calc(1.875rem + var(--folga) * .007)); }
}
