/*-----------------------------------*\
  #HOME PAGE
\*-----------------------------------*/

/* Homepage campaign hero, featured event shell, arena sections, and newsletter treatment. */
.home-page .home-hero--campaign {
  position: relative;
  min-height: clamp(430px, 26.5vw, 510px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: #f4f7fa;
  background: #020a12 url("../../images/home/hero-arena-nbs-screen.png") center / cover no-repeat;
}

.home-hero-campaign__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1, 9, 16, .98) 0%, rgba(2, 11, 19, .9) 25%, rgba(2, 10, 18, .25) 57%, rgba(1, 8, 14, .18) 100%),
    linear-gradient(0deg, rgba(1, 8, 13, .86) 0%, transparent 43%);
}

.home-page .home-hero-campaign__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, .78fr) minmax(520px, 1.22fr);
  align-items: center;
  width: min(88%, 1680px);
  max-width: 1680px;
  min-height: inherit;
  padding: 38px 0 88px;
}

.home-hero-campaign__copy { z-index: 2; }

.home-hero-campaign__eyebrow {
  margin: 0 0 8px;
  color: #19bfee;
  font: 700 12px/1 var(--ff-space-grotesk);
  letter-spacing: .23em;
  text-transform: uppercase;
}

.home-hero-campaign__copy h1 {
  margin: 0;
  color: #f4f5f6;
  font: 700 clamp(43px, 3.45vw, 66px)/.92 var(--ff-oxanium, var(--ff-rajdhani));
  letter-spacing: .018em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .72);
  text-transform: uppercase;
}

.home-hero-campaign__copy h1 .home-hero-campaign__legacy-line {
  display: inline-block;
  color: #f4f5f6;
  white-space: nowrap;
}

.home-hero-campaign__copy h1 .home-hero-campaign__legacy-line em {
  color: #20bff0;
  font-style: normal;
}

.home-hero-campaign__lede {
  margin: 15px 0 0;
  color: #bdc7ce;
  font: 600 clamp(12px, .9vw, 15px)/1.45 var(--ff-space-grotesk);
  text-shadow: 0 2px 8px #000;
}

.home-hero-campaign__actions {
  display: flex;
  gap: 17px;
  margin-top: 20px;
}

.home-hero-campaign__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 154px;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid rgba(76, 124, 153, .25);
  border-radius: 4px;
  color: #e9f2f7;
  background: rgba(3, 14, 23, .72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font: 700 11px/1 var(--ff-space-grotesk);
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.home-hero-campaign__button ion-icon { font-size: 16px; }
.home-hero-campaign__button--primary { color: #031018; border-color: #21c7f4; background: #20c1ef; }
.home-hero-campaign__button:hover { border-color: #24c7f4; transform: translateY(-2px); }
.home-hero-campaign__button--primary:hover { background: #56d7f8; }

.home-hero-campaign__stats {
  position: absolute;
  bottom: 20px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  width: min(620px, 44%);
  margin: 0;
}

.home-hero-campaign__stats div { padding: 0 22px; border-left: 1px solid rgba(114, 158, 183, .2); }
.home-hero-campaign__stats div:first-child { padding-left: 0; border-left: 0; }
.home-hero-campaign__stats dt { color: #20c4f1; font: 700 22px/1 var(--ff-oxanium, var(--ff-rajdhani)); }
.home-hero-campaign__stats dd { margin: 7px 0 0; color: #7f919d; font: 700 8px/1.15 var(--ff-space-grotesk); letter-spacing: .04em; text-transform: uppercase; }

.home-hero-event {
  position: absolute;
  right: 0;
  bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 34%);
  width: min(610px, 42%);
  min-height: 148px;
  overflow: hidden;
  border: 1px solid rgba(64, 119, 150, .4);
  border-radius: 8px;
  background: rgba(2, 13, 23, .94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .52);
  backdrop-filter: blur(8px);
}

.home-hero-event__copy {
  position: relative;
  z-index: 1;
  padding: 17px 18px 13px 20px;
  background: rgba(2, 13, 23, .94);
}
.home-hero-event__copy > p { margin: 0 0 8px; color: #1bc5f2; font: 700 9px/1 var(--ff-space-grotesk); letter-spacing: .14em; text-transform: uppercase; }
.home-hero-event h2 { margin: 0 0 7px; color: #edf3f6; font: 700 15px/1.1 var(--ff-oxanium, var(--ff-rajdhani)); letter-spacing: .035em; text-transform: uppercase; }
.home-hero-event__copy > span { color: #6f818e; font: 700 8px/1 var(--ff-space-grotesk); letter-spacing: .03em; text-transform: uppercase; }
.home-hero-event__countdown { display: flex; gap: 19px; margin: 16px 0 11px; }
.home-hero-event__countdown div { display: grid; gap: 4px; }
.home-hero-event__countdown strong { color: #1bc8f3; font: 700 20px/1 var(--ff-oxanium, var(--ff-rajdhani)); }
.home-hero-event__countdown small { color: #738894; font: 700 7px/1 var(--ff-space-grotesk); text-transform: uppercase; }
.home-hero-event__copy > a { display: inline-flex; align-items: center; gap: 5px; color: #1fc2ef; font: 700 8px/1 var(--ff-space-grotesk); letter-spacing: .04em; text-transform: uppercase; }
.home-hero-event__art {
  background:
    linear-gradient(90deg, rgba(2, 13, 23, .18), rgba(2, 13, 23, .04)),
    var(--event-image, url("../../images/tournaments/trophy.png")) center / cover no-repeat;
}

@media (max-width: 1050px) {
  .home-page .home-hero-campaign__layout { width: min(91%, 930px); grid-template-columns: 1fr; padding-bottom: 205px; }
  .home-hero-event { grid-template-columns: minmax(0, 1fr) 150px; width: min(48%, 445px); }
  .home-hero-campaign__stats { width: 49%; grid-template-columns: repeat(2, 1fr); gap: 15px 0; }
}

@media (max-width: 767px) {
  .home-page .home-hero--campaign { min-height: auto; background-position: 62% center; }
  .home-hero-campaign__shade { background: linear-gradient(90deg, rgba(1, 9, 16, .98), rgba(2, 10, 18, .68)), linear-gradient(0deg, #020a12 12%, transparent 60%); }
  .home-page .home-hero-campaign__layout { display: block; width: min(89%, 560px); padding: 52px 0 28px; }
  .home-hero-campaign__copy h1 { font-size: clamp(41px, 13vw, 58px); }
  .home-hero-campaign__lede { max-width: 100%; overflow-wrap: anywhere; }
  .home-hero-campaign__desktop-break { display: none; }
  .home-hero-campaign__actions { flex-direction: column; width: min(100%, 310px); }
  .home-hero-campaign__button { width: 100%; min-height: 46px; }
  .home-hero-campaign__stats { position: static; width: 100%; margin-top: 34px; grid-template-columns: repeat(2, 1fr); gap: 0; }
  .home-hero-campaign__stats div { min-width: 0; padding: 12px 8px; border-top: 1px solid rgba(114, 158, 183, .16); }
  .home-hero-campaign__stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-hero-campaign__stats dd { overflow-wrap: anywhere; }
  .home-hero-event { position: static; grid-template-columns: minmax(0, 1fr) 100px; width: 100%; margin-top: 25px; }
  .home-hero-event__copy { min-width: 0; padding-left: 16px; }
  .home-hero-event h2,
  .home-hero-event__copy > span { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .home-page .home-hero--campaign { min-height: auto; }
  .home-hero-event { grid-template-columns: 1fr; }
  .home-hero-event__art { display: none; }
}

.home-page .hero .container {
  display: block;
  max-width: var(--container-max);
}

/* Homepage arena dashboard. */
.home-arena { padding: clamp(34px, 3.3vw, 64px) 0; color: #eaf1f5; background: radial-gradient(circle at 50% 20%, rgba(8,53,74,.18), transparent 46%), #020b12; }
.home-arena__container { width: min(88%, 1680px); margin-inline: auto; }
.arena-block + .arena-block { margin-top: clamp(28px, 2.5vw, 44px); }
.arena-block--broadcast { scroll-margin-top: calc(var(--header-offset, 72px) + 24px); }
.arena-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.arena-heading h2 { margin: 0; color: #e7edf1; font: 700 clamp(13px, .85vw, 16px)/1 var(--ff-oxanium, var(--ff-rajdhani)); letter-spacing: .12em; text-transform: uppercase; }
.arena-heading a { display: inline-flex; align-items: center; gap: 8px; color: #20c3ef; font: 700 10px/1 var(--ff-space-grotesk); letter-spacing: .08em; text-transform: uppercase; }
.arena-heading ion-icon { font-size: 15px; }

.arena-tournaments { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.arena-tournament { min-width: 0; overflow: hidden; border: 1px solid rgba(67,113,137,.38); border-radius: 7px; color: #e9f0f4; background: #06141f; box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.arena-tournament__art { height: clamp(105px, 7.8vw, 150px); background: linear-gradient(180deg, transparent 45%, rgba(3,14,23,.78)), var(--arena-art, var(--game-bg-image, linear-gradient(135deg,#17364a,#07131d))) center/cover no-repeat; transition: transform .3s ease; }
.arena-tournament:hover .arena-tournament__art { transform: scale(1.025); }
.arena-tournament__body { position: relative; padding: 0 18px 13px; }
.arena-tournament__body > span { display: inline-flex; min-height: 21px; margin-top: -15px; padding: 0 10px; align-items: center; color: #021019; background: #24c9ef; font: 800 9px/1 var(--ff-space-grotesk); letter-spacing: .06em; text-transform: uppercase; }
.arena-tournament h3 { margin: 7px 0 4px; overflow: hidden; color: #f1f5f7; font: 700 clamp(15px, 1vw, 19px)/1.1 var(--ff-oxanium, var(--ff-rajdhani)); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.arena-tournament p { overflow: hidden; margin: 0; color: #8798a3; font: 600 9px/1.5 var(--ff-space-grotesk); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.arena-tournament p i { display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px; border-radius: 50%; background: #20c4ef; }
.arena-tournament footer { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(65,109,132,.25); }
.arena-tournament footer small { color: #71838f; font: 700 9px/1 var(--ff-space-grotesk); text-transform: uppercase; }
.arena-tournament footer strong { color: #22c7f2; font: 700 16px/1 var(--ff-oxanium, var(--ff-rajdhani)); }
.arena-tournament--empty { grid-column: span 1; }

.arena-broadcast { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(350px,1fr); gap: 24px; }
.arena-player,.arena-live-card { overflow: hidden; border: 1px solid rgba(67,113,137,.4); border-radius: 7px; background: #05141f; }
.arena-player__media { position: relative; display: grid; place-items: center; height: clamp(285px, 22vw, 420px); background: linear-gradient(180deg,rgba(1,10,17,.08),rgba(1,10,17,.25)), var(--arena-stream-art, url("../../images/home/hero-arena-nbs-screen.png")) center/cover no-repeat; }
.arena-player__media iframe { width: 100%; height: 100%; border: 0; }
.arena-player__media > ion-icon { display: grid; place-items: center; box-sizing: content-box; width: 28px; height: 28px; padding: 18px; color: #fff; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(3,17,27,.55); }
.arena-player__media > ion-icon .ion-icon-fallback { width: 28px; height: 28px; }
.arena-player__offline { display: grid; place-items: center; max-width: 430px; padding: 28px; text-align: center; border: 1px solid rgba(62,118,147,.42); border-radius: 8px; background: rgba(2,13,22,.82); backdrop-filter: blur(5px); }
.arena-player__offline ion-icon { color: #22c4ef; font-size: 42px; }
.arena-player__offline strong { margin-top: 13px; color: #edf3f6; font: 700 clamp(17px,1.2vw,22px)/1.15 var(--ff-oxanium, var(--ff-rajdhani)); text-transform: uppercase; }
.arena-player__offline span { margin-top: 7px; color: #8999a4; font: 500 11px/1.5 var(--ff-space-grotesk); }
.arena-player__media > b { position: absolute; top: 13px; right: 14px; padding: 5px 10px; color: #fff; border-radius: 3px; background: #ef3652; font: 800 9px/1 var(--ff-space-grotesk); text-transform: uppercase; }
.arena-player__caption { padding: 13px 19px 16px; }
.arena-player__caption small { color: #9aa9b1; font-size: 10px; }
.arena-player__caption h3 { margin: 4px 0; font: 700 clamp(17px,1.15vw,22px)/1.15 var(--ff-oxanium, var(--ff-rajdhani)); }
.arena-player__caption p { margin: 0; color: #8999a3; font-size: 10px; }
.arena-live-card { display: flex; flex-direction: column; padding: clamp(22px,2vw,36px); }
.arena-live-card > span,.arena-live-card h4 { color: #20c4ef; font: 700 10px/1 var(--ff-space-grotesk); letter-spacing: .08em; text-transform: uppercase; }
.arena-live-card > h3 { max-width: 18ch; margin: 8px 0 13px; color: #eef4f7; font: 700 clamp(23px,1.7vw,32px)/1.08 var(--ff-oxanium, var(--ff-rajdhani)); }
.arena-live-card > p { max-width: 54ch; margin: 0; color: #8999a4; font: 500 12px/1.6 var(--ff-space-grotesk); }
.arena-live-card > a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 24px 0 21px; color: #03121a; border-radius: 3px; background: #22c4ef; box-shadow: 0 8px 24px rgba(34,196,239,.16); font: 800 11px/1 var(--ff-space-grotesk); text-transform: uppercase; }
.arena-live-card > a.is-secondary { color: #dce8ed; border: 1px solid rgba(54,134,169,.52); background: rgba(18,75,99,.24); box-shadow: none; }
.arena-live-card__unavailable { display: grid; place-items: center; min-height: 44px; margin: 24px 0 21px; color: #758994; border: 1px solid rgba(67,113,137,.3); border-radius: 3px; background: rgba(5,23,34,.7); font: 700 10px/1 var(--ff-space-grotesk); letter-spacing: .05em; text-transform: uppercase; }
.arena-live-card h4 { margin: auto 0 9px; }
.arena-schedule { display: grid; gap: 7px; }
.arena-schedule > a { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px minmax(0,1fr); gap: 8px; color: #9fadb5; font-size: 10px; }
.arena-schedule time { color: #71848f; }.arena-schedule b { color: #657984; text-align: center; }.arena-schedule p { color: #71848f; font-size: 11px; }

.arena-teams { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; }
.arena-team { display: grid; grid-template-columns: 28px 54px minmax(0,1fr); align-items: center; gap: 11px; min-height: 91px; padding: 12px 14px; color: #dce6eb; border: 1px solid rgba(67,113,137,.35); border-radius: 7px; background: linear-gradient(135deg,#071823,#06131d); }
.arena-team em { color: #dce6eb; font: 500 24px/1 var(--ff-oxanium, var(--ff-rajdhani)); font-style: normal; }
.arena-team > span { display: grid; place-items: center; width: 54px; height: 54px; }
.arena-team img { width: 100%; height: 100%; object-fit: contain; }.arena-team ion-icon { color: #20c4ef; font-size: 42px; }
.arena-team strong,.arena-team small,.arena-team b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.arena-team strong { color: #e7eef2; font: 700 11px/1.2 var(--ff-space-grotesk); }.arena-team small { margin-top: 3px; color: #71838f; font-size: 8px; }.arena-team b { margin-top: 4px; color: #8b9ba5; font-size: 8px; }

.arena-coverage { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; }
.arena-story { display: grid; grid-template-columns: minmax(105px,.72fr) minmax(0,1.28fr); min-height: 164px; overflow: hidden; border: 1px solid rgba(67,113,137,.35); border-radius: 7px; background: #071620; }
.arena-story__media { display: grid; place-items: center; min-height: 100%; background: radial-gradient(circle,#123a50,#06131e); }.arena-story__media img { width: 100%; height: 100%; object-fit: cover; }.arena-story__media ion-icon { color: #22c4ef; font-size: 45px; }
.arena-story > div { min-width: 0; padding: 13px; }.arena-story header { display: flex; justify-content: space-between; gap: 8px; color: #71838f; font: 700 7px/1 var(--ff-space-grotesk); text-transform: uppercase; }.arena-story header span { color: #20c4ef; }
.arena-story h3 { margin: 9px 0 7px; font: 700 12px/1.25 var(--ff-oxanium, var(--ff-rajdhani)); }.arena-story h3 a { color: #edf3f6; }.arena-story p { display: -webkit-box; overflow: hidden; margin: 0; color: #7f909b; font-size: 8px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.arena-story__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #20c4ef; font: 700 8px/1 var(--ff-space-grotesk); text-transform: uppercase; }

@media (max-width: 1150px) {
  .home-arena__container { width: min(91%,930px); }.arena-tournaments { gap: 14px; }.arena-broadcast { grid-template-columns: 1.35fr 1fr; gap: 14px; }.arena-player__media { height: 300px; }.arena-teams { grid-template-columns: repeat(3,1fr); }.arena-coverage { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px) {
  .home-arena__container { width: min(90%,620px); }.arena-tournaments { grid-template-columns: 1fr; }.arena-tournament__art { height: 180px; }.arena-broadcast { grid-template-columns: 1fr; }.arena-player__media { height: auto; aspect-ratio: 16/9; }.arena-live-card > h3 { max-width: none; }.arena-live-card h4 { margin-top: 0; }.arena-teams { grid-template-columns: repeat(2,1fr); }.arena-coverage { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .home-arena { padding-block: 30px; }.home-arena__container { width: 100%; padding-inline: 16px; }.arena-heading { align-items: flex-end; }.arena-heading h2 { max-width: 60%; line-height: 1.25; }.arena-heading a { font-size: 8px; text-align: right; }.arena-tournament__art { height: 145px; }.arena-live-card { padding: 20px 17px; }.arena-live-card > h3 { font-size: 24px; }.arena-teams { grid-template-columns: 1fr; }.arena-team { min-height: 82px; }.arena-story { grid-template-columns: 105px minmax(0,1fr); }.arena-schedule > a { grid-template-columns: 38px minmax(0,1fr) 18px minmax(0,1fr); font-size: 9px; }
}

/* Current event-card image polish. */
/* Featured event artwork belongs to the homepage card only. */
.home-hero-event__art {
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(circle at 54% 42%, rgba(31, 197, 239, .18), transparent 42%),
    linear-gradient(90deg, rgba(2, 13, 23, .24), rgba(2, 13, 23, .02)),
    var(--event-image, url("../../images/tournaments/trophy.png")) center / contain no-repeat;
}

.home-hero-event__art::after {
  content: "";
  position: absolute;
  inset: 12px 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(25, 202, 250, .12), transparent 66%);
  filter: blur(8px);
  pointer-events: none;
}

@media(max-width:767px) {
  .home-hero-event {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 25vw, 128px);
    min-height: 178px;
  }

  .home-hero-event__art {
    display: block;
    margin: 10px 10px 10px 0;
    border-radius: 6px;
    background-size: contain;
  }
}

@media(max-width:430px) {
  .home-hero-event {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .home-hero-event__copy {
    padding-right: 8px;
  }

  .home-hero-event__art {
    display: block;
    margin: 12px 8px 12px 0;
  }
}