/* ════════════════════════════════════════════════════════════════════
   BRAND-EYEBROW — Reusable section eyebrow with accent dashes
   BEM block: .brand-eyebrow

   Variants:
     --soft     (default) — Two flanking gradient dashes (transparent → ember).
                            Editorial, refined. Used on light surfaces.
     --solid              — Two flanking solid ember pill dashes. Bolder weight.
                            Used when more presence is needed.
     --leading            — Single leading solid dash (no trailing dash).
                            Used as a "badge" mark above headings on dark
                            surfaces.

   Modifiers:
     --center   — Centers the eyebrow group. Default is start-aligned.
     --on-dark  — Text rendered in white instead of ember (for dark surfaces).

   The component owns the gap, dash size, dash color, text color, and tracking
   — section CSS never overrides these.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .brand-eyebrow {
    display: flex;
    align-items: center;
    inline-size: fit-content;
  }

  .brand-eyebrow--center {
    margin-inline: auto;
  }

  .brand-eyebrow__text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--secondary);
    white-space: nowrap;
  }

  .brand-eyebrow--on-dark .brand-eyebrow__text {
    color: var(--white);
    letter-spacing: var(--tracking-wide-caps);
  }


  /* ── Dash — base shape, variant fills below ─────────────────── */
  .brand-eyebrow__dash {
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }


  /* ── Variant: soft (default) ─────────────────────────────────
     Gradient dashes that fade from transparent into ember toward
     the text. Tightened length — was --space-xl, now --space-m,
     reads as a discreet accent, not elaborate wings. */

  .brand-eyebrow--soft {
    gap: var(--space-2xs);
  }

  .brand-eyebrow--soft .brand-eyebrow__dash {
    inline-size: var(--space-m);
    block-size: var(--line-thin);
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--secondary) 100%
    );
  }

  .brand-eyebrow--soft .brand-eyebrow__dash:last-child {
    background: linear-gradient(
      to left,
      transparent 0%,
      var(--secondary) 100%
    );
  }


  /* ── Optional status dot (sits between leading dash and text) ──
     Renders when component is invoked with status_dot='live'.
     Green pulse for "live / accepting partnerships" indicator. */

  .brand-eyebrow__dot {
    inline-size: var(--space-3xs);
    block-size: var(--space-3xs);
    border-radius: var(--radius-round);
    flex-shrink: 0;
  }

  .brand-eyebrow__dot--live {
    background-color: var(--feedback-success);
    box-shadow: 0 0 0 var(--line-thick) color-mix(in oklch, var(--feedback-success) 22%, transparent);
    animation: brand-eyebrow-dot-pulse 2.4s var(--ease-in-out) infinite;
    will-change: box-shadow;
  }

  @keyframes brand-eyebrow-dot-pulse {
    0%, 100% {
      box-shadow: 0 0 0 var(--line-thick) color-mix(in oklch, var(--feedback-success) 22%, transparent);
    }
    50% {
      box-shadow: 0 0 0 calc(var(--line-thick) * 2) color-mix(in oklch, var(--feedback-success) 0%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-eyebrow__dot--live { animation: none; }
  }


  /* ── Variant: solid ─────────────────────────────────────────
     Solid ember pills, tighter gap. Used when the section needs
     a stronger eyebrow accent. */

  .brand-eyebrow--solid {
    gap: var(--space-xs);
  }

  .brand-eyebrow--solid .brand-eyebrow__dash {
    inline-size: var(--space-s);
    block-size: var(--line-medium);
    background-color: var(--secondary);
  }


  /* ── Variant: leading ───────────────────────────────────────
     Single leading dash, no trailing. Reads as a "badge" mark
     above section headings — common on dark surfaces. */

  .brand-eyebrow--leading {
    gap: var(--space-xs);
  }

  .brand-eyebrow--leading .brand-eyebrow__dash {
    inline-size: var(--space-s);
    block-size: var(--line-medium);
    background-color: var(--secondary);
  }

  /* Hide the trailing dash for the leading variant */
  .brand-eyebrow--leading .brand-eyebrow__dash:last-child {
    display: none;
  }

}