/* Battle 2026 page — hero additions */

/* ============================================
   BATTLE PAGE — hero background override
   Same glow stack as the main hero, new image.
   Doubled class = higher specificity, so it wins
   regardless of stylesheet load order.
   ============================================ */

.hero-placeholder.hero-placeholder--battle {
  background:
    radial-gradient(
      ellipse 65vw 35vh at 0% 0%,
      rgba(108, 46, 255, 0.95) 0%,
      rgba(108, 46, 255, 0.5) 45%,
      rgba(108, 46, 255, 0) 100%
    ),
    radial-gradient(
      ellipse 55vw 35vh at 100% 0%,
      rgba(255, 94, 89, 0.95) 0%,
      rgba(255, 94, 89, 0.4) 45%,
      rgba(255, 94, 89, 0) 100%
    ),
    url('../../img/bridge2026/hero-battle.png') center / cover no-repeat,
    var(--color-deep-space);
}

/* Battle page — caption sits ON the gradient strip */

.stats-strip--battle {
  background: linear-gradient(90deg, #00B4FF 0%, #8B5CF6 38%, #FF6B2D 100%);
  overflow: hidden;
  padding-bottom: 3.5rem;
}

.stats-strip--battle .stats-strip__inner {
  background: none;
  overflow: visible;
}

.stats-strip--battle .stats-strip__caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.8rem;
  line-height: 1.4;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 6rem;
}

@media (max-width: 900px) {
  .stats-strip--battle .stats-strip__caption {
    font-size: 1.9rem;
    padding: 0 3rem;
  }
}

/* Phone — match the main hero's darkened/repositioned treatment */
@media (max-width: 560px) {
  .hero-placeholder.hero-placeholder--battle {
    background:
      radial-gradient(
        ellipse 65vw 35vh at 0% 0%,
        rgba(108, 46, 255, 0.95) 0%,
        rgba(108, 46, 255, 0.5) 45%,
        rgba(108, 46, 255, 0) 100%
      ),
      radial-gradient(
        ellipse 55vw 35vh at 100% 0%,
        rgba(255, 94, 89, 0.95) 0%,
        rgba(255, 94, 89, 0.4) 45%,
        rgba(255, 94, 89, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(10, 14, 26, 0.1) 0%,
        rgba(10, 14, 26, 0.5) 45%,
        rgba(10, 14, 26, 0.6) 100%
      ),
      url('../../img/bridge2026/hero-battle.png') 85% center / cover no-repeat,
      var(--color-deep-space);
  }
}

.hero-lead {
  font-size: 2rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 68rem;
  margin-top: 1.6rem;
}

.hero-note {
  font-size: 1.6rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2.4rem;
}

@media (max-width: 900px) {
  .hero-lead  { font-size: 2.2rem; }
  .hero-note  { font-size: 1.9rem; }
}