@use 'sprucecss/scss/spruce' as *;

.faq-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: grid;
    gap: spacer-clamp('l', 'xl');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
  }

  &__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: spacer('l');

    @include breakpoint('lg') {
      inset-block-start: spacer('l');
      position: sticky;
    }
  }

  &__help {
    background-color: color('surface-muted');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    padding: spacer('m');
    @include layout-stack('xs');
  }

  &__help-title {
    font-size: font-size('h5');
  }

  &__list {
    @include layout-stack('s');

    details {
      background-color: color('surface');
    }
  }
}

<section class="faq-block" aria-labelledby="faq-title">
    <div class="container">
        <div class="faq-block__inner">
            <div class="faq-block__aside">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">FAQ</p>
                <h2 class="block-heading__title" id="faq-title">Frequently asked questions</h2>
                <p class="block-heading__text">Everything you need to know about the product and billing.</p>
            </header>
                <div class="faq-block__help">
                    <h3 class="faq-block__help-title">Still have questions?</h3>
                    <p>Can’t find the answer you’re looking for? Our team is happy to help.</p>
                    <a class="btn btn--primary btn--sm" href="#">Contact support</a>
                </div>
            </div>
            <div class="faq-block__list">
                <details name="faq-block" open>
                    <summary>Is there a free plan?</summary>
                    <p>Yes. The Starter plan is free forever for personal projects, with no credit card required.</p>
                </details>
                <details name="faq-block">
                    <summary>Can I change my plan later?</summary>
                    <p>Of course. You can upgrade, downgrade or cancel at any time from your account settings.</p>
                </details>
                <details name="faq-block">
                    <summary>Do you offer discounts for nonprofits?</summary>
                    <p>We offer a 50% discount for registered nonprofits and educational institutions. Contact us to apply.</p>
                </details>
                <details name="faq-block">
                    <summary>How does the yearly billing work?</summary>
                    <p>You pay for twelve months upfront and save 20% compared to the monthly price.</p>
                </details>
                <details name="faq-block">
                    <summary>Is my data secure?</summary>
                    <p>All data is encrypted in transit and at rest, and we never sell your data.</p>
                </details>
            </div>
        </div>
    </div>
</section>