/* ==========================================================================
   FAQ
   Figma "end row-wrapper" (3050:185685), 1440 x 674 on background/primary:
   a centred 48px H3 headline 24px above a 22px/1.25 intro, 64px above a
   988px list. Each question: 1px Neutral 100 rule, 8px, then a 32px row of
   a 22px/1.2 semibold question and a 32px white plus button; 40px to the
   next rule. No open state in Figma: the answer follows 16px under the
   question in 18px/1.25 secondary text, clear of the button, and the plus
   turns into a minus.
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl, 64px);
  width: 100%;
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm, 24px);
  max-width: 848px;
  text-align: center;
}

.faq .faq__intro {
  color: var(--fg);
  line-height: 1.25;
}

.faq .faq__intro > * {
  margin: 0;
}

/* List
   -------------------------------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 40px);
  width: 100%;
  max-width: 988px;
}

.faq__item {
  border-top: 1px solid var(--color-neutral-100);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s, 16px);
  min-height: 32px;
  padding-top: 8px;
  list-style: none;
  cursor: pointer;
}

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

.faq__question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq .faq__title {
  margin: 0;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
}

/* Plus button: two 14 x 2px bars in a 32px white circle; open, the upright
   bar turns flat, leaving a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-neutral-00);
  transition: background-color 0.2s ease;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 9px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--text-primary);
  transition: transform 0.25s ease;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__question:hover .faq__icon {
  background-color: var(--color-lilac-20);
}

.faq .faq__answer {
  max-width: 900px;
  padding: var(--space-s, 16px) 48px 0 0;
  color: var(--fg-secondary);
  line-height: 1.25;
}

.faq .faq__answer p,
.faq .faq__answer ul,
.faq .faq__answer ol {
  margin: 0 0 16px;
}

.faq .faq__answer ul,
.faq .faq__answer ol {
  padding-left: 24px;
}

.faq .faq__answer :last-child {
  margin-bottom: 0;
}

/* Media: a 16:9 frame under the answer, up to 542px like video-split, with
   the ink play button and/or the document button centred 24px above its
   bottom edge, 12px apart (stacked when they don't fit side by side). 24px
   below the answer text, 16px below the question when there is no text.
   -------------------------------------------------------------------------- */
.faq__media {
  max-width: 542px;
  padding-top: var(--space-s, 16px);
}

.faq__answer + .faq__media {
  padding-top: var(--space-sm, 24px);
}

.faq__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.faq__frame--placeholder {
  background: linear-gradient(64deg, rgb(18, 70, 97) 0%, rgb(6, 53, 88) 37%, rgb(6, 53, 88) 54%, rgb(63, 76, 133) 100%);
}

.faq__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.faq__actions {
  position: absolute;
  right: 16px;
  bottom: var(--space-sm, 24px);
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.faq .faq__trigger {
  max-width: 100%;
}

.faq .faq__document {
  text-decoration: none;
}

/* Open/close height animation where supported (Chrome); elsewhere it snaps */
@supports (interpolate-size: allow-keywords) {
  .faq {
    interpolate-size: allow-keywords;
  }

  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

  .faq__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon,
  .faq__icon::before,
  .faq__icon::after,
  .faq__item::details-content {
    transition: none;
  }
}

/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 32px from the header to the questions on phones */
  .faq {
    gap: var(--space-md, 32px);
  }

  .faq__header {
    gap: var(--space-s, 16px);
  }

  .faq__list {
    gap: var(--space-md, 32px);
  }

  .faq .faq__answer {
    padding-right: 0;
  }
}