/* ════════════════════════════════════════════════════════════════════
   BRAND CTA — Reusable pill CTA button (V10)
   BEM block: .brand-cta

   Anatomy:
     [ Partner with us              ( → ) ]
       ↑ label, vertically centred    ↑ ember circle badge with white arrow

   Modifiers:
     · .brand-cta--compact   — smaller pill (inline header etc.)
     · .brand-cta--inverse   — bone body + ink badge (for dark sections)

   Geometry:
     · Pill: corner-radius = height/2 (true capsule)
     · Badge: circle, height = pill height − 2× pad
     · Single tight shadow, no gradient
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .brand-cta {
    --brand-cta-h:           4rem;
    --brand-cta-pad:         0.375rem;
    --brand-cta-badge:       calc(var(--brand-cta-h) - var(--brand-cta-pad) * 2);
    --brand-cta-radius:      calc(var(--brand-cta-h) / 2);
    /* primary-semi-dark = the ink-blue used in the headline (Pencil
       #10204F equivalent). Sits as confident editorial ink, not coal
       black. --primary alone is too dark for a pill on cloud-linen bg. */
    --brand-cta-bg:          var(--primary-semi-dark);
    --brand-cta-text:        var(--white);
    --brand-cta-badge-bg:    var(--secondary);
    --brand-cta-arrow:       var(--white);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: var(--brand-cta-pad) var(--brand-cta-pad) var(--brand-cta-pad) 1.5rem;
    block-size: var(--brand-cta-h);
    min-inline-size: 15rem;
    border-radius: var(--brand-cta-radius);
    background-color: var(--brand-cta-bg);
    color: var(--brand-cta-text);
    text-decoration: none;
    box-shadow: 0 1px 2px color-mix(in oklch, var(--primary) 8%, transparent);
    transition:
      background-color var(--duration-normal) var(--ease-out),
      box-shadow var(--duration-normal) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
    cursor: pointer;
  }


  /* ── Label ───────────────────────────────────────────────────────
     Caps + tracking — UI label register (not headline display).
     Outfit (body font) in caps reads as a confident button without
     duplicating the heading voice. */

  .brand-cta__label {
    font-family: var(--font-body);
    font-size: 0.9375rem;             /* 15px — caps need a slightly
                                         smaller size than mixed-case */
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;            /* caps tracking — opens the
                                         letterforms for legibility */
    text-transform: uppercase;
    line-height: 1;
    color: var(--brand-cta-text);
    white-space: nowrap;
  }


  /* ── Badge (circle on the right with arrow) ───────────────────── */

  .brand-cta__badge {
    display: grid;
    place-items: center;
    inline-size: var(--brand-cta-badge);
    block-size: var(--brand-cta-badge);
    border-radius: var(--radius-round);
    background-color: var(--brand-cta-badge-bg);
    flex-shrink: 0;
    transition:
      background-color var(--duration-normal) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .brand-cta__arrow {
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--brand-cta-arrow);
    transition: transform var(--duration-normal) var(--ease-out);
  }


  /* ── HOVER ────────────────────────────────────────────────────────
     Default is primary-semi-dark (24%). Hover lifts a clear step to
     primary-hover (26%) plus a stronger shadow halo so the state
     change reads as deliberate, not subtle drift. */

  .brand-cta:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 0.375rem 1.25rem color-mix(in oklch, var(--primary) 26%, transparent);
    transform: translateY(-0.0625rem);
  }

  .brand-cta:hover .brand-cta__badge {
    background-color: var(--secondary-hover);
  }

  .brand-cta:hover .brand-cta__arrow {
    transform: translateX(0.125rem);
  }


  /* ── FOCUS-VISIBLE (keyboard) ─────────────────────────────────── */

  .brand-cta:focus-visible {
    outline: 0.1875rem solid color-mix(in oklch, var(--secondary) 55%, transparent);
    outline-offset: 0.25rem;
  }


  /* ── ACTIVE / PRESS ───────────────────────────────────────────── */

  .brand-cta:active {
    /* Active darkens below default (24%) → primary (20%) for press */
    background-color: var(--primary);
    transform: translateY(0) scale(0.985);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--primary) 8%, transparent);
    transition-duration: var(--duration-fast);
  }


  /* ── Compact size ─────────────────────────────────────────────── */

  .brand-cta--compact {
    --brand-cta-h:    3.25rem;
    min-inline-size: 12rem;
    padding-inline-start: 1.125rem;
  }

  .brand-cta--compact .brand-cta__label { font-size: 0.9375rem; }
  .brand-cta--compact .brand-cta__arrow { font-size: 1.0625rem; }


  /* ── Inverse tone (for dark sections)
     Cloud-linen body · ink-blue label · ember circle badge · bone arrow.
     The ember badge is the focal hot-spot against the soft bone pill. */

  .brand-cta--inverse {
    --brand-cta-bg:        var(--cloud-linen);
    --brand-cta-text:      var(--primary);
    --brand-cta-badge-bg:  var(--secondary);
    --brand-cta-arrow:     var(--cloud-linen);
  }

  .brand-cta--inverse:hover {
    background-color: var(--white);
  }

  .brand-cta--inverse:hover .brand-cta__badge {
    background-color: var(--secondary-hover);
  }


  /* ── Reduced motion ───────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .brand-cta,
    .brand-cta__badge,
    .brand-cta__arrow {
      transition: none;
    }

    .brand-cta:hover,
    .brand-cta:active {
      transform: none;
    }
  }

}