/* =====================================================================
   Badge — Figma "Badge" component set (node 276:1772, docs 495:42852)
   Types: Neutral (every sport / topic / label) and Staff Pick (the only
   highlighted badge, purple). Theme: Light / Dark. Optional Icon and Count (+N).
   Neutral:   bg badge/neutral-bg, 1px border, text text-sm, 12px x-pad.
   Staff Pick: badge/staff-pick/background + foreground, 16px star, 8px x-pad, inset top highlight.
   ===================================================================== */
.badge{
  --badge-bg:var(--badge-neutral-bg);
  --badge-border:var(--badge-neutral-border);
  --badge-fg:var(--badge-neutral-text);
  display:inline-flex;align-items:center;justify-content:center;gap:0;flex:none;
  min-height:24px;padding:3px var(--space-12);border-radius:var(--radius-sm);
  border:1px solid var(--badge-border);box-sizing:border-box;
  font:var(--text-sm);text-transform:uppercase;white-space:nowrap;
  color:var(--badge-fg);background:var(--badge-bg);
  transition:filter .2s,transform .2s var(--ease-out,ease);
}
a.badge,button.badge{cursor:pointer;text-decoration:none}
/* Size=Small (Figma 970:23980): 20 high, 2/8 padding, text-xxs. Compact story cards, Main XS, List */
.badge.badge--sm{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
/* Hover: border steps up to border/strong (Figma 636:7691); no fill change */
a.badge:hover,button.badge:hover,.badge.is-hover{--badge-border:var(--border-strong)}
a.badge:active,button.badge:active{transform:scale(.97)}
/* Dark theme override for use on dark surfaces (studios, footer) */
.badge--dark{--badge-bg:var(--neutral-300);--badge-border:var(--neutral-500);--badge-fg:var(--neutral-900)}
.badge--dark.badge--staff-pick{--badge-bg:var(--complementary-purple-dark);--badge-border:transparent;--badge-fg:var(--complementary-purple-lightest)}
.badge--dark.is-hover,a.badge--dark:hover{--badge-border:var(--neutral-700)}
.badge--staff-pick.is-hover,a.badge--staff-pick:hover,button.badge--staff-pick:hover{--badge-border:transparent;filter:brightness(.94)}

.badge--staff-pick{
  --badge-bg:var(--badge-staff-pick-bg);--badge-border:transparent;--badge-fg:var(--accent-text);   /* Figma Badge Type=Staff Pick 4:308: label accent/text, UPPERCASE, star neutral/0 */
  padding-inline:var(--space-8);gap:var(--space-4);font:var(--text-xs);text-transform:uppercase;
  box-shadow:var(--shadow-inset-top-highlight);
}
.badge__sport{width:14px;height:14px;object-fit:contain;flex:none;margin-right:var(--space-4)}
/* Person Recommended: pill with a 16px avatar + name */
.badge--person{border-radius:var(--radius-full);padding:var(--space-4) var(--space-12) var(--space-4) var(--space-4);gap:var(--space-8);text-transform:none}
.badge__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none;display:block}
.badge__icon{width:16px;height:16px;fill:currentColor;flex:none}
.badge--staff-pick .badge__icon{fill:var(--neutral-0)}
.badge__count{margin-left:var(--space-4);font:var(--text-xs);text-transform:uppercase}
.badge--count{padding-inline:var(--space-8)}

.badge-row{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}

/* Large (Figma: 66x32, padding 16/8) — used above article titles */
.badge--lg{padding:var(--space-8) var(--space-16)}

/* Sponsored-by pill (stories only). Solid, so it stays legible on any photo. */
.sponsor-pill{display:inline-flex;align-items:center;gap:var(--space-8);min-height:24px;padding:var(--space-4) var(--space-8);border-radius:var(--radius-sm);background:var(--surface-default);color:var(--text-secondary);border:1px solid var(--border-default);font:var(--text-metadata-sm);text-transform:uppercase;white-space:nowrap;box-sizing:border-box}
.sponsor-pill__logo{height:22px;border-radius:2px;width:auto;display:block;color:var(--text-primary)}
.sponsor-pill--inline{align-self:flex-start}

/* Badge · Size=Small (Figma 970:23980): 20px, 8px x-pad, text-xxs uppercase. Athlete embed / preview tags, List story card. */
.badge-sm{display:inline-flex;align-items:center;min-height:20px;box-sizing:border-box;padding:var(--space-2) var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--badge-neutral-bg);color:var(--text-secondary);font:var(--text-xxs);text-transform:uppercase;white-space:nowrap}
a.badge-sm{text-decoration:none}
a.badge-sm:hover{border-color:var(--border-strong)}

/* Badge · Type=Link (Figma 636:7691): no fill, underlined, text/link-action; Small (xxs) and Default (sm). Used on list cards. */
.badge--link{--badge-bg:transparent;--badge-border:transparent;--badge-fg:var(--text-link-action);min-height:0;padding:0;text-decoration:underline;text-underline-offset:2px}
.badge--link.badge--sm{font:var(--text-xxs)}
a.badge--link:hover,.badge--link.is-hover{--badge-border:transparent;--badge-fg:var(--text-link-action-hover)}

/* Sport Badge (Figma "Sports Label", used by Event Card · Device=Mobile 318:4531): the sport's colour, 20 high, min 46 wide, 2/8 padding,
   text-xxs, border/default. Same colours as the calendar Sports Label (month.css); sports without a colour use sport/multi.
   Opt in with .badge--sport, or by context (event cards in the homepage lists on tablet, home-tablet.css). */
.badge[data-sport]{--sport-c:var(--sport-multi);--sport-fg:var(--sport-multi-text)}
/* colour + text colour from the Sport Colors collection (Figma 2026-10-23); leagues share it */
.badge[data-sport=soccer]{--sport-c:var(--sport-soccer);--sport-fg:var(--sport-soccer-text)}
.badge[data-sport=basketball]{--sport-c:var(--sport-basketball);--sport-fg:var(--sport-basketball-text)}
.badge[data-sport=hockey]{--sport-c:var(--sport-hockey);--sport-fg:var(--sport-hockey-text)}
.badge[data-sport=softball]{--sport-c:var(--sport-softball);--sport-fg:var(--sport-softball-text)}
.badge[data-sport=volleyball]{--sport-c:var(--sport-volleyball);--sport-fg:var(--sport-volleyball-text)}
.badge[data-sport=tennis]{--sport-c:var(--sport-tennis);--sport-fg:var(--sport-tennis-text)}
.badge[data-sport=golf]{--sport-c:var(--sport-golf);--sport-fg:var(--sport-golf-text)}
.badge[data-sport=cycling]{--sport-c:var(--sport-cycling);--sport-fg:var(--sport-cycling-text)}
.badge[data-sport=gymnastics]{--sport-c:var(--sport-gymnastics);--sport-fg:var(--sport-gymnastics-text)}
.badge[data-sport=business]{--sport-c:var(--sport-business);--sport-fg:var(--sport-business-text)}
.badge[data-sport=pwhl]{--sport-c:var(--sport-pwhl);--sport-fg:var(--sport-pwhl-text)}
.badge[data-sport=wnba]{--sport-c:var(--sport-wnba);--sport-fg:var(--sport-wnba-text)}
.badge[data-sport=nwsl]{--sport-c:var(--sport-nwsl);--sport-fg:var(--sport-nwsl-text)}
.badge[data-sport=ncaa]{--sport-c:var(--sport-ncaa);--sport-fg:var(--sport-ncaa-text)}
.badge[data-sport=ausl]{--sport-c:var(--sport-ausl);--sport-fg:var(--sport-ausl-text)}
.badge.badge--sport{--badge-bg:var(--sport-c);--badge-border:var(--border-default);--badge-fg:var(--sport-fg);min-height:20px;min-width:46px;padding:var(--space-2) var(--space-8);font:var(--text-xxs);justify-content:flex-start}
/* Dark: Figma's label colour (accent/text, near-black) on badge/staff-pick/background Dark (purple-dark) is 3.09:1; keep the readable
   badge/staff-pick/foreground (purple-lightest, ≈4.7:1) until Figma changes the pair (flagged 2026-10-25) */
:root[data-theme="dark"] .badge--staff-pick{--badge-fg:var(--badge-staff-pick-fg)}
/* Prompt 32: Staff Pick at Size=Small (story card tags row): same 20px height as the sport badge, so the star drops to 14px (Figma Small).
   Label stays "STAFF PICK" in caps, colours unchanged. */
.badge--staff-pick.badge--sm .badge__icon{width:14px;height:14px}