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

.call-to-action {
  border-block-start: config('border-width-base', $display) solid color('border');
  display: grid;
  gap: spacer('s') spacer-clamp('m', 'xl');
  padding-block: spacer-clamp('l', 'xl');

  @include breakpoint('md') {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  &__heading {
    @include layout-stack('xs');
  }

  &__eyebrow {
    color: color('primary');
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  &__title {
    font-size: font-size('h1');
  }

  &__caption {
    @include layout-stack('m');
  }

  &__description {
    color: color('muted');
    font-size: config('font-size-lead', $typography);
  }

  &__btns {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s');
  }

  // A highlighted card version, for the end of a page or between sections.
  &--boxed {
    align-items: center;
    background-color: color-alpha('primary', 0.06);
    border: config('border-width-base', $display) solid color-alpha('primary', 0.2);
    border-radius: radius('lg');
    margin-block-start: spacer('l');
    padding: spacer-clamp('m', 'l');

    .call-to-action__btns {
      @include breakpoint('md') {
        justify-content: end;
      }
    }

    .call-to-action__caption {
      @include breakpoint('md') {
        text-align: end;
      }
    }
  }
}

<section class="call-to-action" aria-labelledby="cta-title">
    <div class="call-to-action__heading">
        <p class="call-to-action__eyebrow">Free consultation</p>
        <h2 class="call-to-action__title" id="cta-title">Transform your online presence</h2>
    </div>
    <div class="call-to-action__caption">
        <p class="call-to-action__description">We design and build fast, accessible websites tailored to your goals. Tell us about your project and get a quote within two business days.</p>
        <div class="call-to-action__btns">
            <a class="btn btn--primary btn--lg" href="#">Get a quote</a>
            <a class="btn btn--outline-primary btn--lg" href="#">Book a call</a>
        </div>
    </div>
</section>
<section class="call-to-action call-to-action--boxed" aria-labelledby="cta-boxed-title">
    <div class="call-to-action__heading">
        <h2 class="call-to-action__title" id="cta-boxed-title">Start your 14-day free trial</h2>
    </div>
    <div class="call-to-action__caption">
        <p class="call-to-action__description">No credit card required. Cancel anytime.</p>
        <div class="call-to-action__btns">
            <a class="btn btn--primary btn--lg" href="#">Start free trial</a>
        </div>
    </div>
</section>