/**
 * hero.css — Tournament hero, stats rail, bottom nav, card redesign
 * "Augusta Editorial" design system — front page refresh
 *
 * Load order: AFTER variables.css and main.css
 */

/* ============================================================================
   TOURNAMENT HERO BANNER
   ============================================================================ */

.tournament-hero {
  position: relative;
  background: var(--color-primary-dark); /* #0f2419 — deep forest green */
  color: #ffffff;
  /* No overflow:hidden so SVG terrain can bleed without clipping */
}

/* Gold accent bar at top — mirrors the sticky header */
.tournament-hero::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-secondary-dark),
    var(--color-secondary),
    var(--color-secondary-light),
    var(--color-secondary),
    var(--color-secondary-dark)
  );
}

/* Topographic SVG terrain — decorative background */
.hero-terrain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Gradient fade at bottom — blends hero into page background */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-background) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Hero content container */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 28px var(--spacing-lg) 76px;
}

@media (min-width: 640px) {
  .hero-content {
    padding: 40px var(--spacing-xl) 88px;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding: 48px var(--spacing-2xl) 96px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--spacing-2xl);
    align-items: start;
  }
}

/* ── Eyebrow row: LIVE badge + round info ── */

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: 12px;
  grid-column: 1;
}

.hero-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-sm);
  animation: hero-live-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes hero-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  60% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.hero-live-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
  animation: hero-dot-blink 1.3s ease-in-out infinite;
}

@keyframes hero-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-round-info {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Tournament name — editorial serif ── */

.hero-tournament-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.375rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 10px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
  overflow-wrap: break-word;
  grid-column: 1;
}

/* Gold italic year marker */
.hero-name-year {
  color: var(--color-secondary-light);
  font-style: italic;
  font-size: 0.85em;
}

/* ── Venue / course line ── */

.hero-venue {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 26px;
  grid-column: 1;
}

.hero-venue-icon {
  flex-shrink: 0;
  opacity: 0.55;
  display: block;
}

/* ── Meta facts: Players, Par, Year ── */

.hero-meta-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  grid-column: 1;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: var(--spacing-xl);
}

.hero-meta-item + .hero-meta-item {
  padding-left: var(--spacing-xl);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-meta-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.hero-meta-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-secondary-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Dark mode hero: adjust fade ── */
[data-theme="dark"] .hero-fade {
  background: linear-gradient(to bottom, transparent 0%, var(--color-background) 100%);
}

/* ── Reduced motion: disable hero animations ── */
@media (prefers-reduced-motion: reduce) {
  .hero-live-dot { animation: none; }
  .hero-live-dot::before { animation: none; }
}


/* ============================================================================
   STATS RAIL — Sticky sub-header with at-a-glance stats
   ============================================================================ */

.stats-rail {
  position: sticky;
  top: var(--header-height); /* 72px — sits just below the main header */
  z-index: calc(var(--z-sticky) - 1);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .stats-rail {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.stats-rail-inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  height: 42px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stats-rail-inner::-webkit-scrollbar {
  display: none;
}

.rail-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 var(--spacing-md);
  height: 100%;
  flex-shrink: 0;
  white-space: nowrap;
}

.rail-stat:first-child {
  padding-left: 0;
}

.rail-stat + .rail-stat {
  border-left: 1px solid var(--color-border-light);
}

.rail-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.rail-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.rail-value--leader {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.rail-value--score {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

/* Score color states */
.rail-value--score.score-negative {
  color: var(--color-success);
  background: var(--color-active-bg);
}

.rail-value--score.score-positive {
  color: var(--color-danger);
  background: var(--color-cut-bg);
}

.rail-value--score.score-even {
  color: var(--color-text-muted);
  background: var(--color-background-alt);
}

.rail-value--mono {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-xs);
}

/* Compact stats rail on mobile */
@media (max-width: 479px) {
  .stats-rail-inner {
    height: 36px;
    padding: 0 var(--spacing-sm);
    gap: 0;
  }
  .rail-stat {
    padding: 0 var(--spacing-sm);
  }
  .rail-label {
    font-size: 0.625rem;
  }
  .rail-value {
    font-size: var(--font-size-xs);
  }
}


/* ============================================================================
   MOBILE BOTTOM NAVIGATION BAR — REMOVED
   Bottom nav removed in mobile redesign (stats rail shown instead)
   ============================================================================ */

/* .bottom-nav, .bottom-nav-item, .bottom-nav-icon rules removed */


/* ============================================================================
   LEADERBOARD CARD — Grid layout redesign
   ============================================================================ */

/**
 * Override main.css flex-column card with grid layout.
 * DOM structure from leaderboard-card.js:
 *   .leaderboard-card
 *     .leaderboard-card__rank          (1st child)
 *     .leaderboard-card__info          (2nd child: avatar, name, score)
 *     .leaderboard-card__golfers       (3rd child: chips)
 */

.leaderboard-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  padding: 0;   /* override main.css padding */
  gap: 0;
  overflow: hidden;
}

/* Rank column — left strip spanning both rows */
.leaderboard-card__rank {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--color-background-alt);
  border-right: 1px solid var(--color-border-light);
  /* Remove old margin/flex styles */
  margin: 0;
}

/* Info row — avatar, name, score */
.leaderboard-card__info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  min-width: 0;
}

/* Avatar — tighten slightly */
.leaderboard-card__avatar {
  flex-shrink: 0;
}

/* Name — takes available space, truncates */
.leaderboard-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

/* Score container pushed to the right */
.leaderboard-card__score-container {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Score — editorial serif, tabular numerals */
.leaderboard-card__score {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Golfers row — full width bottom */
.leaderboard-card__golfers {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px var(--spacing-md) 10px;
  margin-top: 0; /* override main.css margin-top */
}

/* Top 3 — left accent border (replaces main.css background gradient) */
.leaderboard-card--first {
  border-left: 3px solid var(--color-rank-first);
  background: var(--color-surface);
}

.leaderboard-card--second {
  border-left: 3px solid var(--color-rank-second);
  background: var(--color-surface);
}

.leaderboard-card--third {
  border-left: 3px solid var(--color-rank-third);
  background: var(--color-surface);
}

/* Top 3 rank column gets a gentle tint */
.leaderboard-card--first .leaderboard-card__rank {
  background: linear-gradient(180deg,
    rgba(197, 160, 68, 0.15),
    rgba(197, 160, 68, 0.07)
  );
}

.leaderboard-card--second .leaderboard-card__rank {
  background: linear-gradient(180deg,
    rgba(176, 176, 176, 0.14),
    rgba(176, 176, 176, 0.06)
  );
}

.leaderboard-card--third .leaderboard-card__rank {
  background: linear-gradient(180deg,
    rgba(160, 112, 78, 0.15),
    rgba(160, 112, 78, 0.07)
  );
}

/* Card hover — lift effect */
.leaderboard-card:hover {
  transform: translateY(-1px);
}

/* Mobile: keep grid but golfers stay hidden until expanded */
@media (max-width: 767px) {
  .leaderboard-card .leaderboard-card__golfers {
    display: none;
  }

  .leaderboard-card.leaderboard-card--expanded .leaderboard-card__golfers {
    display: flex;
  }

  /* On expand, show a visual indicator the card can collapse */
  .leaderboard-card.leaderboard-card--expanded .leaderboard-card__rank::after {
    content: '▲';
    font-size: 0.5rem;
    opacity: 0.3;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Expand hint — shows chevron on mobile to indicate tappability */
.leaderboard-card__expand-hint {
  display: none;
}

@media (max-width: 767px) {
  .leaderboard-card__expand-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-left: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .leaderboard-card__expand-hint::after {
    content: '\25BC';
    font-size: 0.5rem;
    transition: transform 0.2s ease;
  }

  .leaderboard-card--expanded .leaderboard-card__expand-hint::after {
    transform: rotate(180deg);
  }

  .leaderboard-card--expanded .leaderboard-card__expand-hint .hint-text {
    display: none;
  }
}

@media (max-width: 767px) {
  .leaderboard-card__info {
    padding: 12px var(--spacing-md);
  }

  .leaderboard-card__golfers {
    padding: 10px var(--spacing-md) 14px;
  }
}

/* Rank badge — tighter inside the new column */
.leaderboard-card .rank-badge {
  font-size: var(--font-size-sm);
  min-width: 38px;
  height: 38px;
}


/* ============================================================================
   SKELETON CARDS — Augusta shimmer theme
   ============================================================================ */

/* Redefine the shimmer animation with gold tones */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background-alt) 0%,
    rgba(197, 160, 68, 0.1) 45%,
    var(--color-background-alt) 90%
  );
  background-size: 250% 100%;
  animation: augusta-shimmer 2s linear infinite;
  border-radius: var(--radius-sm);
}

@keyframes augusta-shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    rgba(74, 158, 110, 0.13) 45%,
    var(--color-surface) 90%
  );
  background-size: 250% 100%;
  animation: augusta-shimmer 2s linear infinite;
}

/* Skeleton card layout — matches the real card grid */
.skeleton-card--item {
  min-height: unset;  /* override main.css min-height: 180px */
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  padding: 0;
  overflow: hidden;
  gap: 0;
}

/* Rank placeholder column — spans both rows */
.skeleton-rank-col {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--color-background-alt);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-sm);
}

.skeleton-rank-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

/* Info placeholder row */
.skeleton-info-row {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.skeleton-name-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Golfers placeholder row */
.skeleton-golfers-row {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px var(--spacing-md) 10px;
}

/* Size overrides for the new layout */
.skeleton-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.skeleton-text--name {
  height: 14px;
  width: 55%;
  border-radius: 4px;
}

.skeleton-text--sub {
  height: 11px;
  width: 35%;
  border-radius: 3px;
  opacity: 0.6;
}

.skeleton-text--short {
  height: 22px;
  width: 44px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.skeleton-text--chip {
  height: 22px;
  width: 76px;
  border-radius: var(--radius-full);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}


/* ============================================================================
   LEADERBOARD HEADER — Compact, editorial
   ============================================================================ */

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border-light);
}

.leaderboard-header h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.leaderboard-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.participant-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.update-indicator {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
  padding: 1px 8px;
  background: var(--color-active-bg);
  border-radius: var(--radius-full);
}


/* ============================================================================
   GOLFER CHIPS — Score display enhancement
   ============================================================================ */

/**
 * Chip layout: [name] [score-badge] [status-badge?]
 * The score badge shows each golfer's individual tournament score.
 */

.golfer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.golfer-chip__name {
  /* inherits chip text styles from main.css */
}

/* Individual golfer score — small, monospace, color-coded */
.golfer-chip__score {
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
  letter-spacing: 0;
  flex-shrink: 0;
}

.golfer-chip__score.score-under {
  color: var(--color-active);
  background: var(--color-active-bg);
}

.golfer-chip__score.score-over {
  color: var(--color-danger);
  background: var(--color-cut-bg);
}

.golfer-chip__score.score-even {
  color: var(--color-text-muted);
  background: var(--color-background-alt);
}

/* Cut/withdrawn chips — dim the score too */
.golfer-chip--cut .golfer-chip__score,
.golfer-chip--withdrawn .golfer-chip__score {
  opacity: 0.5;
}