/**
 * Fluid Framework - Call-to-Action Sections
 * @layer components
 *
 * Conversion-focused sections for signups, downloads, and engagement.
 * Four layout variants via data-type attribute.
 *
 * Usage:
 *   <!-- Full-width banner (default) -->
 *   <section class="cta" aria-label="Call to action">
 *     <h2 class="cta__title">Ready to get started?</h2>
 *     <p class="cta__description">Join thousands of happy users today.</p>
 *     <div class="cta__actions">
 *       <a href="#" class="button" data-variant="primary">Start Free</a>
 *       <a href="#" class="button" data-variant="outline">Learn More</a>
 *     </div>
 *   </section>
 *
 *   <!-- Split layout -->
 *   <section class="cta" data-type="split" aria-label="Call to action">
 *     <div class="cta__content">
 *       <h2 class="cta__title">Title</h2>
 *       <p class="cta__description">Description</p>
 *     </div>
 *     <div class="cta__aside">
 *       <img src="..." alt="...">
 *     </div>
 *   </section>
 *
 *   <!-- Newsletter -->
 *   <section class="cta" data-type="newsletter" aria-label="Newsletter signup">
 *     <h2 class="cta__title">Stay in the loop</h2>
 *     <p class="cta__description">Get updates straight to your inbox.</p>
 *     <form class="cta__form">
 *       <input type="email" placeholder="you@example.com" required>
 *       <button type="submit" class="button">Subscribe</button>
 *     </form>
 *   </section>
 *
 *   <!-- App download -->
 *   <section class="cta" data-type="download" aria-label="Download app">
 *     <h2 class="cta__title">Get the app</h2>
 *     <p class="cta__description">Available on all platforms.</p>
 *     <div class="cta__actions">
 *       <a href="#" class="button" data-size="lg">App Store</a>
 *       <a href="#" class="button" data-size="lg" data-variant="outline">Google Play</a>
 *     </div>
 *   </section>
 */

@layer components {

  /* ========================================
     BASE CTA: a tinted band, start-aligned, a big serif line and actions.
     data-bg on a <section class="cta"> (inverse, accent-strong) repaints it.
     ======================================== */

  .cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
    padding-block: var(--space-section);
    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
  }

  /* A band (data-bg, layouts layer) sets --_band-bg; without one the CTA
     is a surface band. */
  .cta { background-color: var(--_band-bg, var(--color-surface)); }

  .cta__title {
    font-family: var(--font-heading);
    font-size: var(--step-3);
    font-weight: calc(var(--weight-display) + var(--_dark-weight));
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
    max-inline-size: 18em;
    margin: 0;
  }

  .cta__description {
    font-size: var(--step-1);
    color: var(--color-text-muted);
    max-inline-size: 36em;
    margin: 0;
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    margin-block-start: var(--space-xs);
  }

  /* Split: text and an image or form side by side. */
  .cta[data-type="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: center;
  }

  .cta[data-type="split"] .cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .cta[data-type="split"] .cta__aside img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-card);
    object-fit: cover;
  }

  @media (max-width: 48rem) {
    .cta[data-type="split"] { grid-template-columns: 1fr; }
  }

  /* Newsletter: inline email + submit. */
  .cta__form {
    display: flex;
    gap: var(--space-2);
    inline-size: 100%;
    max-inline-size: 32rem;
  }

  .cta__form input[type="email"] {
    flex: 1;
    min-inline-size: 0;
  }

  .cta__form :is(button, .button) { flex-shrink: 0; }

  @media (max-width: 30rem) {
    .cta__form { flex-direction: column; }
  }

  .cta[data-type="download"] .cta__actions .button { min-inline-size: 10rem; }
}