/**
 * world-cup-hub.css
 *
 * Hub-only additions layered on top of world-cup-team.css. Anything
 * shared with team or group pages (wc-hero, wc-live-band, wc-section,
 * wc-editorial-band, wc-editorial-band-card, badge, etc.) lives in
 * world-cup-team.css and is inherited by reference.
 *
 * v6: sidebar removed (tournament-countdown relocated to the hero
 * itself; tournament-context stats folded into the live-metrics band).
 * Three-tournament-market-cards section removed entirely. Editorial
 * band styling deferred to world-cup-team.css (no duplicate rules
 * here. v5 had duplicates; they would conflict with the v6 enlarged
 * card dimensions).
 *
 * TECH_DEBT: post-launch, consolidate world-cup-hub.css and
 * world-cup-team.css into a single world-cup.css once the editorial
 * vocabulary is stable across hub, group and team pages.
 */

/* ═══════════════════════════════════════════════════════════════════
   v8: hero + ticker + countdown CSS restored verbatim from commit
   04a7eea inline <style> block. The Direction E editorial-hero rules
   in world-cup-team.css still match the .wc-hero selector but are
   overridden here because world-cup-hub.css loads AFTER team.css in
   the hub's <head>. Team and group pages don't load this file, so
   their editorial hero (image-right two-column grid) keeps working.
   ═══════════════════════════════════════════════════════════════════ */

.wc-ticker {
  display:flex; align-items:center; gap:16px;
  background:#111827;
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:10px 1.25rem;
  height:44px;
  overflow:hidden;
  font-size:14px;
  color:rgba(255,255,255,.85);
}
.wc-ticker-label {
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Syne",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  flex-shrink:0;
}
.wc-ticker-dot {
  width:8px; height:8px; border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 8px rgba(22,163,74,.6);
  animation:wc-ticker-pulse 2s infinite;
}
.wc-ticker-dot-fallback {
  background:#f59e0b;
  box-shadow:0 0 8px rgba(245,158,11,.6);
}
@keyframes wc-ticker-pulse {
  0%, 100% { opacity:1; }
  50%      { opacity:.55; }
}
.wc-ticker-viewport {
  flex:1;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
          mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}
.wc-ticker-track {
  display:inline-flex; gap:32px;
  white-space:nowrap;
  will-change:transform;
}
/* The scroll is applied (via .is-scrolling) by wc-ticker-init.js only once
   the real, duplicated market content is in the DOM. The narrow "Loading…"
   placeholder therefore never animates, so it cannot crawl while the feed
   loads. Distance + duration come from the measured content width as px
   (constant velocity, and no percentage-of-width for the browser to leave
   unresolved — that stale percentage was what kept the ticker crawling
   until a hover-forced style recalc in WebKit). */
.wc-ticker-track.is-scrolling {
  animation:wc-ticker-scroll var(--wc-scroll-dur, 45s) linear infinite;
}
.wc-ticker:hover .wc-ticker-track.is-scrolling { animation-play-state:paused; }
@keyframes wc-ticker-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-1 * var(--wc-scroll-distance, 50%))); }
}
.wc-ticker-item { font-size:14px; color:rgba(255,255,255,.85); }
.wc-ticker-item strong { color:#fff; font-weight:600; margin-right:6px; }
.wc-ticker-item .ticker-pos { color:#16a34a; font-weight:700; }
.wc-ticker-item .ticker-neg { color:#dc2626; font-weight:700; }

@media (max-width:600px) {
  .wc-ticker-label { display:none; }
}
@media (max-width:768px) {
  .wc-ticker { font-size:13px; padding:8px 1rem; height:40px; gap:12px; }
  .wc-ticker-item, .wc-ticker-item .ticker-pos, .wc-ticker-item .ticker-neg { font-size:13px; }
  .wc-ticker-label { font-size:11px; }
}

/* World Cup hub hero. Image-led: a 1200x675 sports-style hero PNG
   sits behind a navy-gradient overlay (transparent at top, navy 85%
   at bottom) so the lower-left headline+subhead read at full contrast
   while the upper composition stays visible. v8 restored from
   commit 04a7eea verbatim. */
.wc-hero {
  position:relative;
  width:100%;
  height:clamp(360px, 56vh, 560px);
  overflow:hidden;
  background:var(--navy);
  /* Reset team.css editorial-hero properties that no longer apply to
     the v8 image-led hub hero. */
  padding:0;
  display:block;
}
.wc-hero-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.wc-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,13,26,0) 0%, rgba(8,13,26,.55) 55%, rgba(8,13,26,.85) 100%);
  pointer-events:none;
}
.wc-hero-content {
  position:absolute; left:0; right:0; bottom:0;
  padding:48px 2rem 56px;
  z-index:1;
}
.wc-hero-inner {
  max-width:1240px; margin:0 auto;
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.wc-hero h1 {
  font-size:clamp(2.25rem, 5vw, 3.6rem);
  font-weight:800;
  color:var(--white);
  letter-spacing:-.03em;
  line-height:1.05;
  margin:0;
  text-shadow:0 2px 8px rgba(8,13,26,.85), 0 1px 2px rgba(0,0,0,.9);
}
.wc-hero-sub {
  color:rgba(255,255,255,.88);
  font-size:clamp(1rem, 1.4vw, 1.18rem);
  line-height:1.5;
  max-width:580px;
  margin:0;
  text-shadow:0 1px 4px rgba(8,13,26,.7);
}
.wc-hero-dates {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:6px;
  font-size:.85rem; color:rgba(255,255,255,.72);
  letter-spacing:.05em;
  text-shadow:0 1px 3px rgba(8,13,26,.7);
}
.wc-hero-dates::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:#4fb3f6;
}

@media (max-width:768px) {
  .wc-hero { height:clamp(320px, 60vh, 480px); }
  .wc-hero-content { padding:32px 1.25rem 36px; }
  .wc-hero-inner { gap:10px; }
}

/* Countdown strip: visible numbers tick every second; the aria-live
   region is updated at most once per minute so screen readers do not
   get one announcement per tick. Numerals use tabular-nums + a
   fixed-min-width slot so the row does not jitter as values change. */
.wc-countdown {
  background:#0d1629;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:22px 2rem;
}
.wc-countdown-inner {
  max-width:1240px; margin:0 auto;
  display:flex; align-items:baseline; justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.85);
}
.wc-countdown-cell {
  display:inline-flex; align-items:baseline; gap:8px;
}
.wc-countdown-num {
  font-family:"JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  font-size:clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight:700;
  color:#4fb3f6;
  font-variant-numeric:tabular-nums;
  min-width:1.6ch;
  text-align:right;
  line-height:1;
}
.wc-countdown-label {
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  font-weight:600;
}
.wc-countdown-sep {
  color:rgba(255,255,255,.22);
  font-weight:700;
}
.wc-countdown-suffix {
  margin-left:6px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  font-weight:600;
}
.wc-countdown-live {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:560px) {
  .wc-countdown-inner { gap:12px; }
  .wc-countdown-sep { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v10: tournament markets section (6 cards, 2x3 grid) inserted
   between breadcrumb and compact editorial band. Mix of 3 LIVE cards
   (Tournament Winner, Group D Winner, USA host) + 3 placeholders
   (Top Goalscorer, First Goal, Group H Winner) until those markets
   list on Polymarket. Card shell reuses .wc-market-card from
   world-cup-team.css; this block adds the section wrapper, the
   3-up grid, and hub-specific overrides for the narrower per-card
   width vs team-page single-column layout.
   ═══════════════════════════════════════════════════════════════════ */

.wc-hub-markets {
  background: var(--off-white);
  padding: 56px 2rem;
  border-top: 1px solid rgba(8,13,26,.06);
}
.wc-hub-markets-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.wc-hub-markets .wc-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}
.wc-hub-markets .wc-section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 14px; height: 3px;
  background: var(--blue);
}
.wc-hub-markets .wc-section-title {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
.wc-hub-markets .wc-section-sub {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: var(--ink-mid);
  margin: 0 0 28px;
  max-width: 60ch;
  line-height: 1.5;
}

.wc-hub-markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .wc-hub-markets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .wc-hub-markets { padding: 40px 1.25rem; }
  .wc-hub-markets-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* The narrower 3-up cards on the hub tighten internal padding + title
   size vs the team page's wider 1-column market cards. */
.wc-hub-markets-grid .wc-market-card { padding: 22px; }
.wc-hub-markets-grid .wc-market-card-title { font-size: 1.08rem; }
.wc-hub-markets-grid .wc-market-card-deck {
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-hub-markets-grid .wc-market-outcomes { padding: 10px; gap: 6px; }
.wc-hub-markets-grid .wc-market-outcome-team { font-size: .9rem; }
.wc-hub-markets-grid .wc-market-outcome-prob { font-size: 1rem; }
.wc-hub-markets-grid .wc-market-outcome-bar { width: 60px; }

/* Placeholder card variant: cards 3, 4, 5 show a "Market opening soon"
   slim navy band where the live data would normally sit. Italic deck,
   no rationale toggle, no save/alert buttons, no <a> wrap. */
.wc-market-card.is-placeholder { opacity: .85; }
.wc-market-card.is-placeholder .wc-market-card-deck {
  font-style: italic;
  color: var(--ink-soft);
}
.wc-market-card-placeholder-band {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 88px;
  margin: 14px 0 14px;
  border-radius: 4px;
  /* Branded fal image sits on top; the navy gradient below is the graceful
     fallback when the image is absent (404 layer renders transparent). */
  background:
    url("/world-cup/assets/heroes/market-pending.webp") center / cover no-repeat,
    radial-gradient(circle at 30% 40%, rgba(41,121,232,.10) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-card) 70%, var(--navy-mid-deep) 100%);
  overflow: hidden;
}
.wc-market-card-placeholder-band::after {
  content: "";
  position: absolute; inset: 0;
  /* Dark scrim so the overlaid label stays legible over the image. */
  background:
    linear-gradient(180deg, rgba(8,13,26,.34) 0%, rgba(8,13,26,.58) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.wc-market-card-placeholder-band span {
  position: relative; z-index: 1;
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(8,13,26,.6);
}
.wc-market-card-placeholder-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(8,13,26,.06);
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: italic;
}

/* Single-outcome big-number variant: Card 6 (USA host). One large
   percentage above the cross-platform note instead of a multi-outcome
   inline grid. */
.wc-market-card-bignumber {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 14px;
  margin: 6px 0 14px;
}
.wc-market-card-bignumber-flag .fi {
  width: 32px; height: 24px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  margin-bottom: 12px;
}
.wc-market-card-bignumber-value {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wc-market-card-bignumber-xplatform {
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* v9: hub-specific live-band rules (.wc-live-band-flag, .wc-live-band-
   context, .wc-live-band-context-item) removed. The hub no longer
   carries a live tournament metrics band as of v9; the shared
   .wc-live-band* rules in world-cup-team.css are retained because
   team and group pages still use them. */

/* v7: in-hero countdown CSS (.wc-hub-countdown / .wc-hub-countdown-*)
   removed. The hub hero reverted to the 41d50f9 editorial state which
   has no countdown markup; the .wc-hub-* classes had no remaining
   consumers, so the rules are dropped rather than left dead. */

/* ── Hub editorial body: single-column full-width after v6 sidebar
   removal. Override the .wc-editorial-body two-column grid that
   world-cup-team.css defines for team/group pages. */
.wc-hub-editorial-body {
  background: var(--off-white);
  padding: 32px 2rem 64px;
}
.wc-hub-editorial-body .wc-editorial-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: block;
}

/* ── Browse by group grid: 4x3 desktop, 2x6 tablet, 1-col mobile ── */
.wc-group-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 960px) {
  .wc-group-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
  .wc-group-grid { grid-template-columns: 1fr; gap: 12px; }
}

.wc-group-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid rgba(8,13,26,.08);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.wc-group-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 6px 16px rgba(8,13,26,.08);
}
.wc-group-card.wc-group-card-live {
  border-color: rgba(33,103,255,.35);
  box-shadow: 0 1px 0 rgba(33,103,255,.08);
}

.wc-group-card-letter {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.wc-group-card-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  flex: 1;
}
.wc-group-card-flag-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.3;
}
.wc-group-card-flag-row .fi {
  width: 22px; height: 16px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.wc-group-card-favourite {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(8,13,26,.06);
  font-family: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wc-group-card-favourite-val {
  font-family: "Syne", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}
.wc-group-card-favourite-val.is-live {
  color: var(--blue);
  font-weight: 700;
}
