/* V20 — eventos da home no mesmo padrão visual das notícias */
html body .pro-home-events{
  padding: clamp(76px, 7vw, 112px) 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 91, 124, .14), transparent 32%),
    linear-gradient(180deg, #07101b 0%, #050812 100%) !important;
}

html body .pro-home-events .content-area{
  width: min(1560px, calc(100% - 72px)) !important;
  max-width: 1560px !important;
  margin-inline: auto !important;
}

html body .pro-events-panel{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(34px, 3vw, 52px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(232, 178, 62, .22) !important;
  background:
    radial-gradient(circle at 82% 5%, rgba(82, 178, 205, .10), transparent 36%),
    linear-gradient(135deg, rgba(13, 21, 34, .92), rgba(4, 7, 13, .97)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
}

html body .pro-events-panel .pro-kicker,
html body .pro-events-panel .pro-title,
html body .pro-events-panel .pro-subtitle{
  background: transparent !important;
}

html body .pro-events-panel .pro-title{
  max-width: none !important;
  margin-bottom: 10px !important;
}

html body .pro-events-panel .pro-subtitle{
  max-width: 840px !important;
  margin-bottom: 30px !important;
}

html body .pro-event-home-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

html body .pro-home-event{
  position: relative !important;
  min-height: 300px !important;
  height: 100% !important;
  padding: 26px 24px 22px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(231, 176, 54, .26) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 54px rgba(0,0,0,.28) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  isolation: isolate !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

html body .pro-home-event:hover{
  transform: translateY(-5px) !important;
  border-color: rgba(255, 194, 68, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 70px rgba(0,0,0,.36), 0 0 0 1px rgba(255,179,42,.08) !important;
  filter: saturate(1.08) brightness(1.04) !important;
}

html body .pro-home-event::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: 1 !important;
  background: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  transform: scale(1.04) !important;
  filter: saturate(1.03) contrast(1.02) !important;
  transition: transform .26s ease, filter .26s ease !important;
}

html body .pro-home-event:hover::before{
  transform: scale(1.085) !important;
}

html body .pro-home-event::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(180deg, rgba(3, 6, 11, .12) 0%, rgba(3, 6, 11, .54) 38%, rgba(3, 6, 11, .94) 100%),
    radial-gradient(circle at 78% 12%, rgba(255, 190, 58, .16), transparent 35%) !important;
}

html body .pro-home-event[data-home-event="login"]{
  background-image: url('../images/icarus-news.png') !important;
}
html body .pro-home-event[data-home-event="hot-time"]{
  background-image: url('../images/icarus-patch-notes.webp') !important;
}
html body .pro-home-event[data-home-event="world-boss"]{
  background-image: url('../images/Carleon_Manor_Loading_pic.webp') !important;
}
html body .pro-home-event[data-home-event="guild"]{
  background-image: url('../images/icarus-world-02.jpg') !important;
}

html body .pro-event-tag{
  align-self: flex-start !important;
  margin-bottom: 16px !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #81f6ff, #56dce8) !important;
  color: #061016 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 24px rgba(77,225,238,.15) !important;
}

html body .pro-home-event h3{
  min-height: auto !important;
  margin: 0 0 12px !important;
  font-size: clamp(22px, 1.55vw, 29px) !important;
  line-height: 1.04 !important;
  letter-spacing: .07em !important;
  color: #fff7e7 !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.58) !important;
}

html body .pro-home-event p{
  min-height: 72px !important;
  margin: 0 0 18px !important;
  color: rgba(255, 246, 226, .84) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.52) !important;
}

html body .pro-event-status{
  width: fit-content !important;
  min-width: 158px !important;
  margin: 0 0 12px !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 186, 38, .55) !important;
  background: rgba(10, 7, 4, .54) !important;
  color: #ffd15a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

html body .pro-event-status.is-active{
  background: linear-gradient(180deg, #58f485, #24c862) !important;
  border-color: rgba(111,255,154,.78) !important;
  color: #03120a !important;
  box-shadow: 0 12px 28px rgba(45,222,105,.22) !important;
}

html body .pro-event-cooldown{
  margin: 0 0 12px !important;
  min-height: 28px !important;
  color: #ffd66f !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(21px, 1.45vw, 27px) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.68) !important;
}

html body .pro-event-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body .pro-event-meta span{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

@media (max-width: 1280px){
  html body .pro-event-home-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .pro-home-event{
    min-height: 280px !important;
  }
}

@media (max-width: 767px){
  html body .pro-home-events .content-area{
    width: min(100% - 28px, 560px) !important;
  }
  html body .pro-events-panel{
    padding: 24px !important;
    border-radius: 22px !important;
  }
  html body .pro-event-home-grid{
    grid-template-columns: 1fr !important;
  }
  html body .pro-home-event{
    min-height: 270px !important;
  }
}