/* =============================================================================
   PAGONI — FAQ
   Native <details>, animated with a 0fr → 1fr grid row.
   ============================================================================= */

.faq {
  --bleed: 14vh;
  position: relative;
  padding-inline: var(--raw-spacing-page);
}

.faq__list {
  max-width: 54rem;
  margin-inline: auto;
  border-top: 1px solid var(--border-soft);
}

.faq__item { border-bottom: 1px solid var(--border-soft); }

.faq__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raw-spacing-lg);
  padding-block: var(--raw-spacing-md);
  cursor: pointer;
  list-style: none;
  transition: color var(--raw-duration-fast) var(--raw-ease-entrance);
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary:hover { color: var(--foreground-signal); }
.faq__summary:focus-visible { outline-offset: 4px; }

.faq__q {
  font-size: 1.625rem;
  line-height: 2rem;
  color: var(--foreground);
  text-wrap: balance;
}
.faq__item[open] .faq__q { color: var(--foreground); }

/* A plus that becomes a minus. Two bars, one rotated. */
.faq__mark {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  align-self: center;
}
.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
  transition: transform var(--raw-duration-normal) var(--raw-ease-entrance);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

/* The one way to animate to intrinsic height without measuring it. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--raw-duration-slow) var(--raw-ease-entrance);
}
.faq__item[open] .faq__panel { grid-template-rows: 1fr; }

.faq__panelInner { overflow: hidden; }

.faq__answer {
  color: var(--foreground-muted);
  max-width: 44rem;
  padding-bottom: var(--raw-spacing-lg);
  font-size: 1rem;
  line-height: 1.6rem;
}

@media (max-width: 640px) {
  .faq__q { font-size: 1.25rem; line-height: 1.6rem; }
  .faq__summary { gap: var(--raw-spacing-md); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel { transition: none; }
}