/* ════════════════════════════════════════════════════════════════════
   PARTNER CTA — Closing section
   BEM block: .partner-cta
   Pencil source: EvJNN (1440), hD8tn (768), KGGK9 (390)

   Bone ground · asymmetric Inter Bold headline (3 lines, left-aligned)
   + ember pill aligned to baseline · thin ember rule anchor + contact.
   Mobile collapses to vertical stack with full-width pill.

   Token discipline: --primary-*, --secondary, --secondary-ultra-light,
                     --cloud-linen, --space-*, --text-*, --heading-*,
                     --line-*, --tracking-*, --leading-*.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* .section primitive owns padding-inline (--gutter). */
  .partner-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-xl);

    background-color: var(--cloud-linen);
    background-image:
      radial-gradient(
        ellipse 90% 100% at 50% 50%,
        color-mix(in oklch, var(--secondary-ultra-light) 50%, transparent) 0%,
        transparent 70%
      );
  }

  .partner-cta__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }


  /* Eyebrow uses canonical brand-eyebrow component (--soft variant). */


  /* ── Main row — mobile default: vertical stack, full-width pill. */

  .partner-cta__main {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-m);
  }

  .partner-cta__headline {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    font-size: var(--heading-l);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-crushed);
    color: var(--primary-ultra-dark);
    text-wrap: balance;
  }

  .partner-cta__pill-wrap {
    align-self: stretch;
    inline-size: 100%;
  }

  .partner-cta__pill-wrap .brand-cta {
    inline-size: 100%;
  }


  /* ── Footer: thin ember rule + email/cities row ──────────────── */

  .partner-cta__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: var(--space-l);
  }

  .partner-cta__footer-rule {
    inline-size: var(--space-l);
    block-size: var(--line-thin);
    background: var(--secondary);
  }

  /* Footer — mobile default: stacked vertical list. */
  .partner-cta__footer-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    font-family: var(--font-body);
    font-size: var(--text-s);
  }

  .partner-cta__footer-sep { display: none; }

  .partner-cta__email {
    color: color-mix(in oklch, var(--primary-ultra-dark) 90%, transparent);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .partner-cta__email:hover {
    color: var(--secondary);
  }

  .partner-cta__footer-sep {
    color: color-mix(in oklch, var(--primary) 40%, transparent);
  }

  .partner-cta__cities {
    color: color-mix(in oklch, var(--primary) 65%, transparent);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-snug);
  }


  /* ── Tablet (≥ 48em) — heading scales up. */

  @media (min-width: 48em) {
    .partner-cta__headline {
      font-size: var(--heading-xl);
    }

    .partner-cta__footer-row {
      flex-direction: row;
      align-items: center;
      gap: var(--space-2xs);
    }

    .partner-cta__footer-sep { display: inline; }
  }


  /* ── Desktop (≥ 64em) — asymmetric: headline left, pill baseline-right. */

  @media (min-width: 64em) {
    .partner-cta__main {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--space-l);
    }

    .partner-cta__headline {
      font-size: var(--heading-2xl);
      max-inline-size: var(--text-width-s);
    }

    .partner-cta__pill-wrap {
      align-self: end;
      inline-size: auto;
    }

    .partner-cta__pill-wrap .brand-cta {
      inline-size: auto;
    }
  }

}