/* Bad Bets — Sport Hub component styles v4 (2026-08-12)
 * =============================================================================
 * Modeled directly on hub.html's .hub-card + .hub-live-row visual language so
 * per-sport hubs feel like a "mini home hub for this sport." Sections use the
 * same amber-left-border row treatment and Big Shoulders display headers.
 * =============================================================================
 */
#bb-sport-hub,
[data-sport-hub-mount] {
  max-width: 1100px;
  margin: 8px auto 32px;
  padding: 0 14px;
  display: block;
}

.bbhub-loading, .bbhub-empty {
  padding: 32px 20px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 15px;
}

/* Grid — 2fr 1fr mirroring hub.html's .hub-grid at ≥900px */
.bbhub-grid {
  display: grid;
  gap: 18px;
  margin: 12px 0 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .bbhub-grid {
    grid-template-columns: 2fr 1fr;
    grid-auto-flow: dense;
  }
  .bbhub-picks    { grid-column: 1 / -1; }
  .bbhub-schedule { grid-column: 1 / -1; }
  .bbhub-tickets  { grid-column: 1 / -1; }
  .bbhub-news     { grid-column: 1; }
  .bbhub-trending { grid-column: 2; }
}
@media (max-width: 720px) {
  .bbhub-grid { gap: 12px; }
}

/* Section = homepage .hub-card look */
.bbhub-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
}

/* Section header — bigger than the sitewide .hub-card-title so the sport-hub
 * cards feel prominent alongside the season tracker cards above them. */
.bbhub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.bbhub-head-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 18px;
  color: var(--text);
}
.bbhub-head-sub {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); padding: 4px 10px;
  color: var(--text); letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
}
.bbhub-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--amber);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.bbhub-more:hover { text-decoration: underline; }

/* ---- Picks row (hero) ---- */
.bbhub-picks-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.bbhub-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease, background 120ms ease;
}
.bbhub-pick:hover {
  transform: translateY(-2px);
  background: rgba(255,170,0,0.06);
}
.bbhub-pick-teams {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
}
.bbhub-pick-teams .at { opacity: 0.5; font-size: 12px; }
.bbhub-pick-side {
  font-family: var(--font-display);
  font-weight: 900; font-size: 18px; letter-spacing: 0.8px;
  color: var(--text);
}
.bbhub-pick-edge {
  font-family: var(--font-display);
  font-weight: 900; font-size: 30px; line-height: 1;
  color: var(--muted);
}
.bbhub-pick-edge.hot {
  color: var(--amber);
  text-shadow: 0 0 16px rgba(255,170,0,0.5);
}

/* ---- Schedule ---- */
.bbhub-sched {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .bbhub-sched { grid-template-columns: 1fr 1fr; }
}
.bbhub-sched-day {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 14px 16px;
  border-left: 3px solid var(--border);
}
.bbhub-sched-date {
  font-family: var(--font-display);
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--amber); font-weight: 900; margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.bbhub-sched-game {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 15px;
  border-top: 1px dashed var(--border);
}
.bbhub-sched-game:first-of-type { border-top: none; padding-top: 0; }
.bbhub-sched-teams {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
}
.bbhub-sched-teams .at { opacity: 0.4; font-size: 13px; }
/* BB_LOGOS.badge already outputs .team-badge (logo + .team-abbr text).
 * Ensure both show at the size the hub needs. */
.bbhub-sched-teams .team-badge,
.bbhub-pick-teams  .team-badge {
  display: inline-flex; align-items: center; gap: 8px;
}
.bbhub-sched-teams .team-abbr,
.bbhub-pick-teams  .team-abbr {
  font-family: var(--font-display);
  font-weight: 800; font-size: 14px; letter-spacing: 0.5px;
  color: var(--text);
}
.bbhub-sched-teams .team-logo,
.bbhub-pick-teams  .team-logo {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.bbhub-sched-odds {
  display: flex; gap: 12px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 13px; color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.bbhub-odds-cell {
  min-width: 46px; text-align: right;
}

/* ---- News ---- */
.bbhub-news-list {
  display: flex; flex-direction: column; gap: 10px;
}
.bbhub-news-item {
  display: block;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.bbhub-news-item:hover {
  border-left-color: var(--amber);
  background: rgba(255,170,0,0.05);
}
.bbhub-breaking {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 900; letter-spacing: 1px;
  background: var(--red); color: white;
  padding: 3px 8px; border-radius: 3px;
  margin-right: 8px; vertical-align: middle;
}
.bbhub-news-title {
  font-size: 15px; font-weight: 700; line-height: 1.4;
  color: var(--text);
}
.bbhub-news-meta {
  font-family: var(--font-display);
  font-size: 11px; color: var(--muted);
  margin-top: 6px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 800;
}

/* ---- Trending players (right rail) ---- */
.bbhub-players {
  display: flex; flex-direction: column; gap: 8px;
}
.bbhub-player {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  text-decoration: none; color: inherit;
  transition: background 120ms ease;
}
.bbhub-player:hover { background: rgba(255,170,0,0.07); }
.bbhub-player-name {
  font-weight: 700; color: var(--text); font-size: 14px;
}
.bbhub-player-cnt {
  font-family: var(--font-display); font-weight: 900;
  font-size: 16px; color: var(--amber);
  min-width: 28px; text-align: right;
}

/* ---- Community tickets ---- */
.bbhub-tickets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.bbhub-ticket {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--amber);
}
.bbhub-ticket-matchup {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
}
.bbhub-mu-team { display: inline-flex; align-items: center; }
.bbhub-mu-team .team-abbr { font-size: 12px; letter-spacing: 0.4px; color: var(--text); }
.bbhub-mu-at { opacity: 0.5; }
.bbhub-ticket-side {
  font-size: 15px; font-weight: 800; margin-top: 6px;
  color: var(--text);
}
.bbhub-ticket-side .odds {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--amber); margin-left: 6px;
  font-weight: 800;
}
.bbhub-ticket-meta {
  font-family: var(--font-display);
  font-size: 11px; color: var(--muted);
  margin-top: 8px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 800;
}