/*
 * Section Component
 * Section headers, eyebrow pills, features, and CTA blocks
 */

@layer components {
  /* Section header */
  .section-header {
    text-align: center;
    margin-bottom: calc(var(--block-space) * 4);
  }

  .section-header--left {
    text-align: left;
  }

  .section-header__eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-x-small);
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius-full);
    padding: 0.25rem var(--block-space);
    margin-bottom: var(--block-space);
  }

  .section-header__title {
    /* font-family: var(--font-serif); */
    font-size: clamp(2rem, 1vw + 1.5rem, 3rem);
    color: var(--color-gray-darker);
    margin-bottom: var(--block-space);
    letter-spacing: var(--tracking-tight);
  }

  .section-header__description {
    font-size: var(--text-medium);
    color: var(--color-gray-dark);
    max-width: 40rem;
    margin-inline: auto;
  }

  /* Two-tone heading pattern (section headers) */
  .section-header__title--two-tone {
    display: block;
  }

  .section-header__title--two-tone .title-primary {
    display: block;
    color: var(--color-gray-darker);
  }

  .section-header__title--two-tone .title-secondary {
    display: block;
    color: var(--color-gray);
    font-weight: 400;
  }

  /* CTA card — full-width banner with centered content */
  .cta-card {
    background-color: var(--color-gray-lightest);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
  }

  .cta-card__title {
    font-size: clamp(1.75rem, 1vw + 1.25rem, 2.75rem);
    color: var(--color-gray-darker);
    letter-spacing: var(--tracking-tight);
    margin-block-end: var(--block-space);
  }

  .cta-card__description {
    font-size: var(--text-large);
    color: var(--color-gray-dark);
    max-width: 38rem;
    margin-inline: auto;
    margin-block-end: var(--block-space-double);
  }

  .cta-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--block-space);
    flex-wrap: wrap;
  }
}