/* ===========================================
   Page intro for marketing pages other than the homepage:
   breadcrumbs, one heading, one sentence, optional audit form.
   =========================================== */

@layer components {
  .page-intro {
    border-bottom: 1px solid var(--color-border);

    .page-intro__container {
      max-width: var(--page-width);
      margin: 0 auto;
      padding: var(--space-6) var(--space-6) var(--space-16);
    }

    .breadcrumbs {
      margin-bottom: var(--space-12);
    }

    .page-intro__title {
      max-width: 20ch;
      margin: 0;
      font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3rem);
      font-weight: 750;
      line-height: 1.08;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }

    .page-intro__lede {
      max-width: 44ch;
      margin: var(--space-5) 0 0;
      font-size: var(--text-xl);
      line-height: 1.5;
      color: var(--color-text-muted);
      text-wrap: pretty;
    }

    .audit-form {
      margin-top: var(--space-8);
    }

    /* Split variant: heading and actions beside a product image */
    .page-intro__split {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-16);
      align-items: center;
    }

    .page-intro__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-6);
      margin: var(--space-8) 0 0;
    }
  }

  @media (max-width: 960px) {
    .page-intro .page-intro__split {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
  }

  @media (max-width: 640px) {
    .page-intro {
      .page-intro__container {
        padding: var(--space-4) var(--space-4) var(--space-10);
      }

      .breadcrumbs {
        margin-bottom: var(--space-8);
      }

      .page-intro__lede {
        font-size: 1.0625rem;
      }
    }
  }
}