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

.newsletter {
  align-items: center;
  background-color: color('surface-muted');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  display: grid;
  gap: spacer('m');
  padding: spacer-clamp('m', 'l');

  @include breakpoint('md') {
    grid-template-columns: 1fr 1fr;
  }

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

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

  &__text {
    color: color('muted');
  }

  &__form {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');

    .form-control {
      flex: 1 1 14rem;
    }

    .btn {
      flex: 0 0 auto;
    }
  }

  // The GDPR consent takes its own row under the field and the button.
  &__consent {
    flex-basis: 100%;
    font-size: config('font-size-sm', $typography);
  }
}

<section class="newsletter" aria-labelledby="newsletter-title">
    <div class="newsletter__content">
        <h2 class="newsletter__title" id="newsletter-title">Stay in the loop</h2>
        <p class="newsletter__text">Monthly notes about CSS, Sass and design systems. No spam, unsubscribe anytime.</p>
    </div>
    <form class="newsletter__form" onsubmit="return false;">
        <label class="sr-only" for="newsletter-email">Email address</label>
        <input class="form-control" id="newsletter-email" type="email" placeholder="you@example.com" autocomplete="email" required>
        <button class="btn btn--primary" type="submit">Subscribe</button>
        <label class="form-check newsletter__consent" for="newsletter-consent">
            <input class="form-check__control" id="newsletter-consent" name="consent" type="checkbox" required>
            <span class="form-label form-check__label">I agree to receive the newsletter and accept the <a href="#">privacy policy</a>. Unsubscribe anytime.</span>
        </label>
    </form>
</section>