/* FAQ — views/sections/faq.php, on top of the design system's .accordion (<details>/<summary>). Stacked:
   heading above a readable-width list; split: heading beside the questions from 1024 px (the heading
   stays in view while scrolling). Answers ease open where the browser can animate <details>. */

.rr-faq__list {
  max-width: 52rem;
}

.rr-section--align-center .rr-faq__list {
  margin-inline: auto;
}

.rr-faq__question {
  font-size: var(--step-1);
  font-weight: 650;
}

.rr-faq__q {
  flex: 1;
  min-width: 0;
}

.rr-faq__question .icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.rr-faq__item[open] > .rr-faq__question .icon {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.rr-faq__answer {
  max-width: 68ch;
  font-size: var(--step-0);
}

.rr-faq__answer :where(a) {
  color: var(--color-accent-text);
}

@media (min-width: 1024px) {
  .rr-faq--split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }

  .rr-faq--split .rr-faq__header {
    position: sticky;
    top: calc(var(--header-h-compact) + 1.5rem);
    margin-bottom: 0;
  }

  .rr-faq--split .rr-faq__list {
    max-width: none;
  }
}

@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .rr-faq {
      interpolate-size: allow-keywords;
    }

    .rr-faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
    }

    .rr-faq__item[open]::details-content {
      height: auto;
    }
  }
}