/* Esports page styles - scoped and complementary to base.css */

.esports-hero {
  background: linear-gradient(135deg, rgba(255,70,85,0.08), rgba(0,217,255,0.08));
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.hero-search { margin-top: var(--space-4); max-width: 520px; }

.hero-media img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-800);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.kpi { background: var(--color-bg-tertiary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.kpi-number { font-family: var(--font-heading); font-size: var(--font-size-3xl); color: var(--color-secondary); display: block; }
.kpi-label { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

.section { margin-top: var(--space-16); }
.section-header { margin-bottom: var(--space-6); }
.section-cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.card-grid .card .meta { margin-top: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.stats { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--color-text-secondary); margin-top: var(--space-3); }

.section-figure { margin-top: var(--space-6); }
.section-figure img { border-radius: var(--radius-xl); border: 1px solid var(--color-gray-800); box-shadow: var(--shadow-md); }

.news-grid .badge { margin-bottom: var(--space-2); }

/* Poll */
.poll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.poll-results { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.poll-bar { background: var(--color-bg-tertiary); border: 1px solid var(--color-gray-800); border-radius: var(--radius-full); overflow: hidden; }
.poll-bar > span { display: block; height: 12px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.poll-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

.resources-list { display: grid; gap: var(--space-3); }
.resources-list a { font-weight: var(--font-weight-semibold); }

/* Utilities for this page */
.hidden { display: none !important; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .poll-options { grid-template-columns: 1fr; }
}