/* =========================================================
   AXIS EVENTS PAGE
   ========================================================= */

.events-page{
  margin:0;
  padding:0 0 72px;
  color:#fff;
  background:
    radial-gradient(circle at 50% 18%,rgba(0,174,255,.10),transparent 34%),
    linear-gradient(180deg,#06101a 0%,#04101a 55%,#02080e 100%);
}

/* HERO */

.events-hero{
  position:relative;
  height:760px;
  overflow:hidden;
  background:
    url("../img/axis-events-bg.png?v=2") center 42% / cover no-repeat;
}

.events-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(2,8,14,.04) 0%,
      rgba(3,10,17,.08) 30%,
      rgba(4,12,20,.20) 50%,
      rgba(5,14,23,.42) 66%,
      rgba(6,16,26,.72) 80%,
      rgba(6,16,26,.93) 92%,
      #06101a 100%
    ),
    radial-gradient(circle at 50% 40%,rgba(0,174,255,.06),rgba(0,0,0,.28) 82%);
}

.events-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:275px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(6,16,26,0) 0%,
      rgba(6,16,26,.18) 24%,
      rgba(6,16,26,.46) 50%,
      rgba(6,16,26,.78) 74%,
      #06101a 100%
    );
}

.events-hero-content{
  position:relative;
  z-index:2;
  height:100%;
  box-sizing:border-box;
  padding-top:145px;
  text-align:center;
  text-shadow:
    0 5px 16px rgba(0,0,0,.90),
    0 0 30px rgba(0,0,0,.82);
}

.events-eyebrow{
  margin:0 0 9px;
  color:#35c8ff;
  font-size:13px;
  font-weight:950;
  letter-spacing:4px;
}

.events-hero-content h1{
  margin:0;
  color:#f7f7f8;
  font-size:clamp(48px,5vw,72px);
  line-height:.92;
  font-weight:950;
  letter-spacing:4px;
  text-shadow:
    0 4px 10px rgba(0,0,0,.78),
    0 0 18px rgba(255,255,255,.08);
}

.events-purple-line{
  margin:18px 0 8px;
  color:#55bfff;
  font-size:20px;
  font-weight:950;
  letter-spacing:4px;
  text-shadow:0 0 12px rgba(53,200,255,.45);
}

.events-hero-content strong{
  color:#e7e5ed;
  font-size:16px;
  font-weight:900;
  letter-spacing:1.2px;
}

/* CONTENT */

.events-wrap{
  position:relative;
  z-index:5;
  width:min(1360px,calc(100% - 40px));
  margin:-345px auto 0;
}

/* FEATURED EVENT */

.featured-event{
  position:relative;
  min-height:440px;
  padding:22px;
  background:
    radial-gradient(circle at 70% 20%,rgba(135,63,255,.08),transparent 30%),
    linear-gradient(180deg,rgba(8,13,26,.985),rgba(3,8,18,.995));
  border:1px solid rgba(31,185,255,.72);
  clip-path:polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px),
    0 20px
  );
  box-shadow:
    0 30px 52px rgba(0,0,0,.46),
    0 0 24px rgba(31,185,255,.15),
    inset 0 0 40px rgba(31,185,255,.03);
}

.featured-title{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  min-width:260px;
  padding:10px 34px;
  text-align:center;
  color:#f4efff;
  background:linear-gradient(180deg,#17102d,#090b18);
  border:1px solid rgba(41,190,255,.82);
  font-size:16px;
  font-weight:950;
  letter-spacing:1.1px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}

.featured-event-inner{
  min-height:360px;
  display:grid;
  grid-template-columns:40% 56%;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(137,101,194,.25);
  background:#030913;
}

.featured-art{
  position:relative;
  min-height:440px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:#080513;
}

.featured-art-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0;
}

.featured-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(55,12,92,.40),rgba(39,8,70,.40)),
    radial-gradient(circle at 50% 48%,rgba(108,38,164,.10),rgba(12,3,24,.24) 100%);
}

.featured-art-glow{
  position:absolute;
  z-index:1;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(172,79,255,.18),transparent 68%);
  filter:blur(8px);
}

.featured-symbol,
.featured-art-name{
  position:relative;
  z-index:2;
}

.featured-symbol{
  font-size:88px;
  line-height:1;
  filter:
    drop-shadow(0 0 16px rgba(165,87,255,.65))
    drop-shadow(0 0 28px rgba(106,49,204,.35));
}

.featured-art-name{
  margin-top:18px;
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:2px;
  text-shadow:0 3px 10px #000;
}

.featured-copy{
  padding:44px 42px 34px;
}

.featured-status{
  color:#36c8ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:1.6px;
}

.featured-copy h2{
  margin:8px 0 16px;
  color:#f5f4f7;
  font-size:46px;
  line-height:1;
  font-weight:950;
  letter-spacing:1px;
}

.featured-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  color:#d7d4df;
  font-size:13px;
  font-weight:800;
}

.featured-meta span:nth-child(n+3){
  grid-column:1 / -1;
  color:#aabfe8;
}

.featured-reward-line{
  margin-top:18px;
  color:#d8d6df;
  font-size:12px;
  font-weight:850;
  letter-spacing:.8px;
}

.featured-reward-line i{
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 10px 2px;
  border-radius:50%;
  background:#b05cff;
  box-shadow:0 0 8px rgba(176,92,255,.8);
}

.featured-countdown-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  margin:28px 0 16px;
  color:#eeeaf7;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.5px;
}

.featured-countdown-title span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,81,255,.70));
}

.featured-countdown-title span:last-child{
  background:linear-gradient(90deg,rgba(168,81,255,.70),transparent);
}

.featured-countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.featured-countdown > div{
  position:relative;
  text-align:center;
  padding:0 10px;
}

.featured-countdown > div:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:8%;
  bottom:8%;
  width:1px;
  background:rgba(136,117,164,.34);
}

.featured-countdown strong{
  display:block;
  color:#29bfff;
  font-size:40px;
  line-height:1;
  font-weight:950;
  text-shadow:0 0 12px rgba(41,191,255,.38);
}

.featured-countdown small{
  display:block;
  margin-top:7px;
  color:#cac5d6;
  font-size:10px;
  font-weight:900;
}

/* SECTION TITLES */

.events-section-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin:46px 0 22px;
}

.events-section-title span{
  height:1px;
  background:linear-gradient(90deg,transparent,#28bfff);
  box-shadow:0 0 8px rgba(40,191,255,.25);
}

.events-section-title span:last-child{
  background:linear-gradient(90deg,#28bfff,transparent);
}

.events-section-title h2{
  margin:0;
  color:#efeaf7;
  font-size:24px;
  font-weight:950;
  letter-spacing:1px;
}

.past-title{
  margin-top:42px;
}

/* EVENT CARDS */

.event-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.event-card{
  position:relative;
  min-height:325px;
  padding:24px 22px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(135,68,255,.09),transparent 30%),
    linear-gradient(180deg,rgba(10,14,27,.98),rgba(4,9,18,.995));
  border:1px solid rgba(40,176,235,.45);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow:
    0 18px 28px rgba(0,0,0,.30),
    inset 0 0 24px rgba(111,64,199,.04);
}

.event-card-art{
  position:relative;
  height:132px;
  margin:-8px -6px 14px;
  overflow:hidden;
  border:1px solid rgba(81,172,225,.16);
  background:#080513;
}

.event-card-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0;
}

.event-card-art-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(55,12,92,.40),rgba(35,7,64,.40)),
    linear-gradient(180deg,rgba(4,7,15,.04),rgba(4,7,15,.20));
}

.event-card-symbol{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:52px;
  filter:drop-shadow(0 0 12px currentColor);
}

.event-card h3{
  margin:2px 0 18px;
  text-align:center;
  color:#f2eef7;
  font-size:20px;
  font-weight:950;
  letter-spacing:.6px;
}

.event-card-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
}

.event-card-meta p{
  margin:0;
  color:#c9c7d0;
  font-size:11px;
  font-weight:800;
}

.event-map{
  margin-top:14px;
  text-align:center;
  color:#b05cff;
  font-size:12px;
  font-weight:950;
  letter-spacing:1px;
}

.event-cords{
  margin-top:6px;
  text-align:center;
  color:#9ca9ba;
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
}

.event-red{color:#ff554d;}
.event-purple{color:#ab5cff;}
.event-orange{color:#ff9c2f;}
.event-blue{color:#29b9ff;}
.event-gold{color:#ffc84a;}

.event-red .event-map{color:#ff554d;}
.event-purple .event-map{color:#ab5cff;}
.event-orange .event-map{color:#ff9c2f;}
.event-blue .event-map{color:#29b9ff;}
.event-gold .event-map{color:#ffc84a;}

/* PAST */

.past-event-card{
  min-height:340px;
}

.complete-badge{
  position:absolute;
  right:14px;
  top:14px;
  padding:5px 8px;
  color:#58f344;
  background:rgba(23,84,21,.38);
  border:1px solid rgba(85,234,61,.58);
  font-size:9px;
  font-weight:950;
  letter-spacing:.8px;
}

.winner-block{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(150,87,220,.22);
  display:flex;
  align-items:center;
  gap:12px;
}

.winner-crown{
  width:40px;
  height:40px;
  flex:0 0 40px;
  color:#ffc84a;
  filter:drop-shadow(0 0 8px rgba(255,200,74,.35));
}

.winner-crown svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.winner-copy{
  min-width:0;
}

.winner-block span{
  display:block;
  color:#26cfff;
  font-size:10px;
  font-weight:950;
  letter-spacing:1px;
}

.winner-block strong{
  display:block;
  margin-top:4px;
  color:#5df040;
  font-size:20px;
  line-height:1.1;
  font-weight:950;
}

/* EMPTY STATES */

.events-empty{
  text-align:center;
  color:#a8a4b2;
}

.featured-empty{
  padding:80px 20px;
  background:rgba(8,11,24,.92);
  border:1px solid rgba(154,73,255,.40);
}

.featured-empty h2{
  margin:0 0 8px;
  color:#eeeaf5;
}

.featured-empty p{
  margin:0;
}

.compact-empty{
  grid-column:1 / -1;
  padding:34px 20px;
  border:1px solid rgba(150,85,220,.20);
  background:rgba(6,10,20,.78);
  font-weight:900;
}

/* RESPONSIVE */

@media(max-width:1000px){
  .events-hero{
    height:680px;
  }

  .events-wrap{
    margin-top:-300px;
  }

  .featured-event-inner{
    grid-template-columns:1fr;
  }

  .featured-art{
    min-height:250px;
  }

  .event-card-grid{
    grid-template-columns:1fr 1fr;
  }
}
.event-svg-icon{
  width:1em;
  height:1em;
  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Big NEXT EVENT icon */
.featured-symbol .event-svg-icon{
  width:88px;
  height:88px;
}

/* Upcoming + Past card icons */
.event-card-symbol .event-svg-icon{
  width:52px;
  height:52px;
}

@media(max-width:700px){
  .events-page{
    padding-bottom:42px;
  }

  .events-hero{
    height:560px;
  }

  .events-hero-content{
    padding:118px 14px 0;
  }

  .events-hero-content h1{
    font-size:48px;
  }

  .events-purple-line{
    font-size:15px;
    letter-spacing:2.4px;
  }

  .events-hero-content strong{
    font-size:12px;
  }

  .events-wrap{
    width:calc(100% - 20px);
    margin-top:-235px;
  }

  .featured-event{
    padding:14px;
  }

  .featured-title{
    min-width:210px;
    font-size:13px;
  }

  .featured-copy{
    padding:28px 18px 24px;
  }

  .featured-copy h2{
    font-size:32px;
  }

  .featured-meta{
    grid-template-columns:1fr;
  }

  .featured-meta span:last-child{
    grid-column:auto;
  }

  .featured-countdown strong{
    font-size:28px;
  }

  .event-card-grid{
    grid-template-columns:1fr;
  }

  .events-section-title h2{
    font-size:19px;
  }
}


/* FEATURED EVENT ART ACCENTS */
.featured-event.event-red .featured-symbol{
  color:#ff554d;
  text-shadow:0 0 10px rgba(255,85,77,.45);
  filter:
    drop-shadow(0 0 12px rgba(255,85,77,.72))
    drop-shadow(0 0 24px rgba(255,50,50,.35));
}

.featured-event.event-gold .featured-symbol{
  color:#ffc84a;
  filter:
    drop-shadow(0 0 12px rgba(255,200,74,.66))
    drop-shadow(0 0 24px rgba(255,159,38,.28));
}

.featured-event.event-blue .featured-symbol{
  color:#29b9ff;
}

.featured-event.event-purple .featured-symbol{
  color:#ab5cff;
}
