/* Demo sports correction: venue/game world first, team identity layered on top.
   Option B2 CANONICAL (2026-09-18, Howard signed): ALL sporting events under .vi-sports
   (Home Worth the trip, heroes, entity pages, rails). Opaque --tc1 wells + --tc2 inset;
   logos ABOVE meta; no duplicate matchup title; raised/larger marks with home dark-on-white
   plate + away stronger contrast. Shared-widget-safe: scoped to .vi-sports only —
   do NOT restyle .vi-music / generic event-card / non-sports .vs-teams.
   writer_certifies=false */
.vi-sports .vs-image{filter:saturate(1.08) contrast(1.04)}
.vi-sports .vs-scrim{
  background:linear-gradient(180deg,
    rgba(5,6,9,.04) 8%,
    rgba(5,6,9,.22) 38%,
    rgba(5,6,9,.86) 72%,
    rgba(5,6,9,.96) 100%);
}

/* Identity plane: logos ABOVE meta; no frosted tray; no translucent bleed */
.vi-sports .vs-teams.bill-teams{
  inset:auto 16px 46% 16px;
  height:auto;
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  gap:10px;
  align-items:center;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  z-index:3; /* logos ABOVE meta words — never covered by content scrim */
}

/* Solid --tc1 plate behind logo (opaque well, not glass).
   B2: bias content toward top of well so logos sit higher. */
.vi-sports .vs-teams .tm{
  min-height:0;
  padding:8px 12px 16px;
  border:0;
  border-radius:16px;
  background:linear-gradient(160deg,
    var(--tc1),
    color-mix(in srgb, var(--tc1) 68%, #09090D));
  box-shadow:
    inset 0 -3px 0 var(--tc2),
    0 10px 24px rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}
.vi-sports .vs-teams .tm::before{display:none}
.vi-sports .vs-teams .tm::after{display:none} /* kill faint NYY/BOS watermark — logos lead */

/* Logo FIRST / ABOVE any residual word marks.
   Honesty: real tip SVGs from deploy-home/img/logos/mlb.
   B2 Howard tweak: larger marks; raised in well; stronger contrast.
   Yankees “hat dark” (#132448) — bright white plate + ring so it pops on navy.
   Red Sox white-primary — subtle dark badge + stronger drop-shadow on red. */
.vi-sports .vs-teams .tm-logo{
  order:-1;
  display:block;
  width:76px;height:76px;
  max-width:76px;max-height:76px;
  object-fit:contain;
  margin:2px 0 0;
  box-sizing:border-box;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
/* Home (.tm-h): bright white plate + ring + lift — dark marks (e.g. Yankees) pop */
.vi-sports .vs-teams .tm-h .tm-logo{
  padding:10px;
  background:#FFFFFF;
  border-radius:50%;
  border:2px solid rgba(244,240,232,.92);
  box-shadow:
    0 0 0 3px rgba(12,35,64,.45),
    0 8px 20px rgba(0,0,0,.5),
    0 2px 0 rgba(255,255,255,.35) inset;
  filter:none;
  transform:translateY(-3px);
}
/* Away (.tm-a): soft dark disc + stronger shadow + lift — light marks (e.g. Red Sox) read */
.vi-sports .vs-teams .tm-a .tm-logo{
  padding:8px;
  background:rgba(8,8,12,.55);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 8px 18px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.25);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transform:translateY(-3px);
}

/* Logos carry identity only while their image exists. Failed/absent marks retain names. */
.vi-sports .vs-teams .tm:has(.tm-logo) .tm-city,
.vi-sports .vs-teams .tm:has(.tm-logo) .tm-name{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.vi-sports .vs-teams .tm:not(:has(.tm-logo)) .tm-name{
  display:block;font-size:clamp(14px,3.5vw,22px);line-height:1.15;
  text-align:center;overflow-wrap:anywhere;
}

.vi-sports .vs-teams .bill-vs{
  border-color:rgba(255,255,255,.45);color:#fff;
  background:rgba(8,8,12,.94);
  font-size:10px;
}

.vi-sports .vs-content{padding-bottom:0;min-height:0}

/* SPT-02: event photo credit follows the marquee in flow, before freshness. */
.sports-hero-credit{
  display:block;position:relative;inset:auto;max-width:none;
  padding:9px 12px;color:#d3cedb;background:#1b1823;border-top:1px solid #45404e;
  font:10px/1.45 var(--font-ui,system-ui,sans-serif);
  white-space:normal;overflow-wrap:anywhere;text-align:left;
}

/* Meta plane BELOW logos — Why now / venue / sports meta only.
   No second matchup title (Option A rejection). */
#app .vi-editorial:has(.vi-sports) .event-card__content{
  padding:clamp(96px,46%,140px) 16px 16px;
  background:linear-gradient(180deg,
    rgba(8,8,11,0) 0%,
    rgba(8,8,11,.38) 18%,
    rgba(8,8,11,.92) 52%,
    rgba(8,8,11,.98) 100%);
  z-index:2;
}
/* Only a real team panel replaces the headline. Editorial sports fallbacks
   (tournaments, tours, single-team events) still need their event name. */
#app .js-ev:has(> .vi-sports .vs-teams) .event-card__title{
  display:none !important; /* kill duplicate “Yankees at Red Sox” */
}

@media (min-width:900px){
  #app .vi-editorial:has(.vi-sports) .event-card__content{
    padding:clamp(104px,48%,150px) 24px 22px;
  }
  .vi-sports .vs-teams .tm-logo{width:88px;height:88px;max-width:88px;max-height:88px}
}

@media (max-width:600px){
  .vi-sports .vs-teams.bill-teams{
    inset:auto 10px 48% 10px;
    grid-template-columns:1fr 32px 1fr;
    gap:6px;
  }
  .vi-sports .vs-teams .tm{padding:6px 8px 12px;border-radius:14px}
  .vi-sports .vs-teams .tm-logo{width:58px;height:58px;max-width:58px;max-height:58px}
  .vi-sports .vs-teams .tm-h .tm-logo{padding:8px}
  .vi-sports .vs-teams .tm-a .tm-logo{padding:6px}
  #app .vi-editorial:has(.vi-sports) .event-card__content{
    padding:clamp(88px,48%,120px) 16px 16px;
  }
}

.vi-sports.no-image .vs-base{
  background:
    radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--identity-accent) 52%,transparent),transparent 30%),
    radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--secondary) 82%,transparent),transparent 32%),
    linear-gradient(135deg,var(--dominant),var(--secondary));
}

/* FD-123: card/tile matchups own a content-sized identity row. The hero's
   bottom:46/48% lift cannot fit a short flex-shrunk card slot. Keep the plates
   in flow, prevent slot shrink, and show names here (the card has no title).
   Scope by component, not asset level: L2 and venue-backed L5 share this DOM. */
#app .js-ev:has(> .vi-sports .vs-teams){
  height:auto;
  min-height:0;
  aspect-ratio:auto;
}
#app .js-ev > .visual-slot.vi-sports:has(.vs-teams){
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  flex:0 0 auto;
  padding:12px;
  box-sizing:border-box;
}
.js-ev > .vi-sports .vs-teams.bill-teams{
  position:relative;
  inset:auto;
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);
  gap:6px;
  align-items:stretch;
  overflow:visible;
}
.js-ev > .vi-sports .vs-teams .tm{
  min-height:0;
  padding:10px 6px 12px;
  gap:4px;
  border-radius:12px;
}
.js-ev > .vi-sports .vs-teams .tm-logo{
  width:52px;height:52px;max-width:52px;max-height:52px;
  flex:none;
  transform:none;
  margin:0 0 3px;
  padding:6px;
}
#app .js-ev > .vi-sports .vs-teams .tm-city,
#app .js-ev > .vi-sports .vs-teams .tm-name{
  position:static;
  display:block;
  width:auto;height:auto;
  margin:0;padding:0;
  clip:auto;
  white-space:normal;
  overflow:visible;
  -webkit-line-clamp:unset;
  text-align:center;
  overflow-wrap:anywhere;
}
.js-ev > .vi-sports .vs-teams .tm-city{font-size:11px;line-height:1.3}
.js-ev > .vi-sports .vs-teams .tm-name{font-size:18px;line-height:1.15}
.js-ev > .vi-sports .vs-content:empty{display:none}

/* D-156: event heroes retain readable team identity beside the existing logos.
   Both identity and copy own flow space; long names cannot collide with the date
   or venue. Keep card/tile and Set List treatments outside this override. */
#app .vi-marquee > .vs-marquee.vi-sports:has(.vs-teams){
  height:auto;min-height:0;max-height:none;aspect-ratio:auto;
  padding:18px 16px 22px;
}
#app .vi-marquee .vs-marquee.vi-sports .vs-teams.bill-teams{
  position:relative;inset:auto;
  grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);
  gap:8px;align-items:stretch;
}
#app .vi-marquee .vs-marquee.vi-sports .vs-teams .tm{
  padding:12px 6px;gap:5px;
}
#app .vi-marquee .vs-marquee.vi-sports .vs-teams .tm-city,
#app .vi-marquee .vs-marquee.vi-sports .vs-teams .tm-name{
  position:static;display:block;width:auto;height:auto;
  margin:0;padding:0;clip:auto;white-space:normal;overflow:visible;
  -webkit-line-clamp:unset;text-align:center;overflow-wrap:anywhere;
}
#app .vi-marquee .vs-marquee.vi-sports .vs-teams .tm-city{font-size:11px;line-height:1.3}
#app .vi-marquee .vs-marquee.vi-sports .vs-teams .tm-name{font-size:22px;line-height:1.15}
#app .vi-marquee .vs-marquee.vi-sports .tm-logo{flex:none;margin:0 0 4px;transform:none}
#app .vi-marquee .vs-marquee.vi-sports:has(.vs-teams) .vs-content{
  position:relative;inset:auto;min-height:0;padding:20px 0 0;
}