/**
 * Canonical Rumble Built hero wordmark — same as landing page (index.html).
 * Stroked Rumble + filled Built + cyan→violet gradient bar (Outfit, CSS stroke).
 *
 * Usage:
 *   <link rel="stylesheet" href="/assets/rbs-hero-wordmark.css" />
 *   RbsHeroWordmark.renderHtml({ variant: "dark", size: "card" })
 *
 * Sizes: hero | card | card-sm | card-back | export | md | sm
 */
.rbs-hero-wordmark {
  font-family: "Outfit", system-ui, sans-serif;
  --rbs-wordmark-ink: var(--ink, #f1f5f9);
  --rbs-wordmark-cyan: var(--cyan, #00e5c8);
  --rbs-wordmark-violet: var(--violet, #8b5cf6);
}

.rbs-hero-wordmark--dark {
  --rbs-wordmark-ink: #f1f5f9;
  --rbs-wordmark-cyan: #00e5c8;
  --rbs-wordmark-violet: #8b5cf6;
}

.rbs-hero-wordmark--light {
  --rbs-wordmark-ink: #0f172a;
  --rbs-wordmark-cyan: #00a896;
  --rbs-wordmark-violet: #6d28d9;
}

.rbs-hero-wordmark__title {
  position: relative;
  margin: 0;
  padding-left: 0.85em;
}

.rbs-hero-wordmark__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(3px, 0.42cqi, 5px);
  background: linear-gradient(180deg, var(--rbs-wordmark-cyan), var(--rbs-wordmark-violet));
}

.rbs-hero-wordmark[data-rbs-wordmark-size="hero"] .rbs-hero-wordmark__title::before {
  width: 3px;
}

.rbs-hero-wordmark__lockup {
  margin: 0;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}

.rbs-hero-wordmark__lockup > span { display: block; }

.rbs-hero-wordmark__stroke {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.04em, 3.25px) var(--rbs-wordmark-ink);
  font-weight: 500;
  paint-order: stroke fill;
}

.rbs-hero-wordmark__fill {
  font-weight: 700;
  color: var(--rbs-wordmark-ink);
}

.rbs-hero-wordmark__accent {
  display: block;
  font-size: 0.22em;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--rbs-wordmark-cyan);
  margin-top: 0.75rem;
  line-height: 1.45;
  text-transform: none;
}

img.rbs-hero-wordmark__raster {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.card-hero__brand-block img.rbs-hero-wordmark__raster {
  width: 100%;
  max-width: 100%;
}

/* —— Sizes (match landing hero + card contexts) —— */
.rbs-hero-wordmark[data-rbs-wordmark-size="hero"] .rbs-hero-wordmark__lockup {
  font-size: clamp(4.5rem, 15vw, 9.75rem);
}

@media (min-width: 960px) {
  .rbs-hero-wordmark[data-rbs-wordmark-size="hero"] .rbs-hero-wordmark__lockup {
    font-size: clamp(5.625rem, 8.25vw + 1.875rem, 12.375rem);
  }
}

.rbs-hero-wordmark[data-rbs-wordmark-size="md"] .rbs-hero-wordmark__lockup {
  font-size: clamp(2.15rem, 7vw, 3.35rem);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="sm"] .rbs-hero-wordmark__lockup {
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card"] .rbs-hero-wordmark__lockup {
  /* ~10.5% of card width — proportional to landing hero at same viewport ratio */
  font-size: clamp(44px, 10.5cqi, 110px);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card-sm"] .rbs-hero-wordmark__lockup {
  font-size: clamp(32px, 7.5cqi, 72px);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card-sm"] .rbs-hero-wordmark__title {
  padding-left: 0.55em;
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card-sm"] .rbs-hero-wordmark__title::before {
  width: clamp(2px, 0.35cqi, 4px);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card-back"] .rbs-hero-wordmark__lockup {
  font-size: clamp(38px, 9cqi, 92px);
}

.rbs-hero-wordmark[data-rbs-wordmark-size="card-back"] .rbs-hero-wordmark__title {
  padding-left: 0.65em;
}

.rbs-hero-wordmark[data-rbs-wordmark-size="export-card"] .rbs-hero-wordmark__lockup {
  font-size: 110px;
}

.rbs-hero-wordmark[data-rbs-wordmark-size="export-card"] .rbs-hero-wordmark__title {
  padding-left: 18px;
}

.rbs-hero-wordmark[data-rbs-wordmark-size="export"] .rbs-hero-wordmark__lockup {
  font-size: 84px;
}

.rbs-hero-wordmark[data-rbs-wordmark-size="export"] .rbs-hero-wordmark__title {
  padding-left: 14px;
}

/* Landing: bar offset matches hero__title */
.hero__title > .rbs-hero-wordmark .rbs-hero-wordmark__title {
  padding-left: 1rem;
}

.hero__title > .rbs-hero-wordmark .rbs-hero-wordmark__title::before {
  left: 0;
}

@media (max-width: 959px) {
  .hero__title > .rbs-hero-wordmark .rbs-hero-wordmark__title::before {
    left: 0;
  }
}

@media (min-width: 960px) {
  .hero__title > .rbs-hero-wordmark .rbs-hero-wordmark__title::before {
    left: -1rem;
  }
}

.card-tpl-dark-brand__wordmark .rbs-hero-wordmark {
  display: inline-block;
}

.card-tpl-dark-brand__wordmark img.rbs-hero-wordmark__raster {
  width: auto;
  max-width: 82%;
  margin: 0 auto;
}

.card-tpl-light__mark img.rbs-hero-wordmark__raster {
  max-width: 200px;
}

.card-hero__brand-block .rbs-hero-wordmark {
  margin-bottom: 0.3em;
  position: relative;
  z-index: 1;
}