/* MLB Research Hub — Weather grid (/mlb/research-hub/weather)
   Scoped under #mlb-weather-hub so nothing leaks. */


#mlb-weather-hub {
  width: 100%;
  /* Minimal top padding — the header h1 was removed, so we just need a
     touch of breathing room past the sticky landing-nav. Bottom nav
     clearance handled by body.has-bottom-nav on #main-app-wrapper. */
  padding: 20px 20px 32px;
  box-sizing: border-box;
}

#mlb-weather-hub .wh-page {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#mlb-weather-hub .wh-header { display: flex; flex-direction: column; gap: 4px; }
#mlb-weather-hub .wh-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}
#mlb-weather-hub .wh-subtitle {
  font-size: .85rem;
  color: #94a3b8;
}

/* Grid */
#mlb-weather-hub .wh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
#mlb-weather-hub .wh-grid-loading { min-height: 120px; }

/* Card */
#mlb-weather-hub .wh-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 22px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  transition: border-color 120ms ease, transform 120ms ease;
  cursor: pointer;
  min-width: 0;
}
#mlb-weather-hub .wh-card:hover {
  border-color: rgba(34, 211, 238, .28);
  transform: translateY(-1px);
}

/* Head: matchup + time */
#mlb-weather-hub .wh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#mlb-weather-hub .wh-matchup {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: .02em;
  font-size: .95rem;
  min-width: 0;
}
#mlb-weather-hub .wh-logo { width: 22px; height: 22px; object-fit: contain; }
#mlb-weather-hub .wh-code { color: #f8fafc; }
#mlb-weather-hub .wh-at   { color: #475569; font-weight: 700; }
#mlb-weather-hub .wh-time {
  font-size: .76rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Stat strip */
#mlb-weather-hub .wh-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 2px;
}
#mlb-weather-hub .wh-stat {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  align-items: center; text-align: center;
}
#mlb-weather-hub .wh-stat-label {
  font-size: .65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
#mlb-weather-hub .wh-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.1;
  letter-spacing: -.01em;
}
#mlb-weather-hub .wh-stat-sub {
  font-size: .68rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
#mlb-weather-hub .wh-forecast {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  color: #cbd5e1;
  font-weight: 500;
}

/* Wind-summary pill row (sits below the 3-column strip) */
#mlb-weather-hub .wh-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 2px 4px;
  margin-top: -16px;
}
/* Solo variant — rendered alone for roof-closed parks, so we skip the
   negative pull-up and give it comfortable top padding instead. */
#mlb-weather-hub .wh-pill-row-solo {
  margin-top: 0;
  padding: 14px 2px 8px;
}

/* Tag chips */
#mlb-weather-hub .wh-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
#mlb-weather-hub .wh-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: .6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
#mlb-weather-hub .wh-tag-row .wh-tag { margin-top: 0; }
#mlb-weather-hub .wh-tag-boost      { background: rgba(34,197,94,.12);  color: #4ade80; border-color: rgba(34,197,94,.28); }
#mlb-weather-hub .wh-tag-boost-soft { background: rgba(34,197,94,.07);  color: #86efac; border-color: rgba(34,197,94,.18); }
#mlb-weather-hub .wh-tag-suppress   { background: rgba(239,68,68,.12);  color: #f87171; border-color: rgba(239,68,68,.28); }
#mlb-weather-hub .wh-tag-suppress-soft { background: rgba(239,68,68,.07); color: #fca5a5; border-color: rgba(239,68,68,.18); }
#mlb-weather-hub .wh-tag-neutral    { background: rgba(148,163,184,.1); color: #cbd5e1; border-color: rgba(148,163,184,.18); }
#mlb-weather-hub .wh-tag-alert      { background: rgba(234,179,8,.12);  color: #fcd34d; border-color: rgba(234,179,8,.28); }
#mlb-weather-hub .wh-tag-indoor     { background: rgba(79,143,247,.12); color: #7dd3fc; border-color: rgba(79,143,247,.28); }

/* Field */
#mlb-weather-hub .wh-field {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
/* Hub-specific stage sizing: fill the card up to a max width. The
   cross-page arrow rules (.wh-stage base, .wh-arrow, .wh-arrow-body,
   keyframes) are injected by gameWeatherMLB.js so the same animation
   works on /game and the player Q2 weather tab without duplicating
   CSS — only this hub-specific width override stays here. */
#mlb-weather-hub .wh-stage {
  width: 100%;
  max-width: 456px;        /* +20% from 380 */
}
#mlb-weather-hub .wh-stage > svg {
  width: 100%;
  height: auto;
}
#mlb-weather-hub .wh-field-empty {
  color: #64748b;
  font-size: .85rem;
  font-style: italic;
  text-align: center;
  padding: 40px 16px;
}

#mlb-weather-hub .wh-team-name {
  text-align: center;
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 500;
  padding: 4px 0 8px;
}

/* Responsive */
@media (max-width: 1080px) {
  #mlb-weather-hub .wh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #mlb-weather-hub .wh-grid { grid-template-columns: 1fr; }
  #mlb-weather-hub .wh-strip { grid-template-columns: 1fr 1fr; }
}