/* ═══════════════════════════════════════════════════════════════
   /giveaways landing — hero artwork with bottom fade + site-standard
   framed info boxes. Loaded AFTER giveaways.css and scoped to
   .gw-page--gv so raffles / giveaway detail pages are untouched.
   ═══════════════════════════════════════════════════════════════ */
.gw-page--gv{
  --gv-frame: url('/assets/img/stats/inner-bg.webp');
}

/* ── Hero: artwork on ::before so its bottom edge can fade into the
      site background without fading the content on top ── */
.gw-landing--gv{
  isolation: isolate;
  min-height: 460px;
  padding-bottom: 96px;
  background: none;
}
.gw-landing--gv::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8,4,3,.88) 0%, rgba(8,4,3,.62) 34%, rgba(8,4,3,.22) 58%, rgba(8,4,3,.04) 82%),
    url('/assets/img/giveaways/hero.webp') 72% 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%);
}
.gw-landing--gv .gw-landing__title-img{
  width: clamp(300px, 44vw, 640px);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,170,50,.18));
}

/* ── Hero stats → framed boxes (same as referrals / challenges) ── */
.gw-landing--gv .gw-landing__stats{
  border-top: 0; padding-top: 0; margin-top: 30px; gap: 12px;
}
.gw-landing--gv .gw-lstat{
  border: 16px solid transparent;
  border-image: var(--gv-frame) 46 fill / 16px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2px 2px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
  transition: transform .18s ease, filter .18s ease;
}
.gw-landing--gv .gw-lstat:hover{
  transform: translateY(-3px);
  box-shadow: none;
  filter: brightness(1.12) drop-shadow(0 10px 20px rgba(0,0,0,.55));
}
.gw-landing--gv .gw-lstat__icon{
  border-radius: 12px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,213,106,.45);
  animation: none;
  box-shadow: none;
}
.gw-landing--gv .gw-lstat__label{ color: #e3bd72; white-space: normal; }

/* ── Featured giveaway cards → same ornate frame as the leaderboard table ── */
.gw-page--gv .gw-fcard{
  position: relative;
  border: solid transparent;
  border-width: 50px 34px 48px 38px;
  border-image: url('/assets/img/leaderboards/table-bg.webp') 112 160 112 168 fill / 58px 82px 58px 85px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0 2px 2px;
  filter: drop-shadow(0 0 14px rgba(255,190,70,.22)) drop-shadow(0 20px 34px rgba(0,0,0,.6));
  transition: transform .18s ease, filter .18s ease;
}
.gw-page--gv .gw-fcard::before{ display: none; }
.gw-page--gv .gw-fcard--regular:hover,
.gw-page--gv .gw-fcard--vip:hover{
  transform: translateY(-3px);
  box-shadow: none;
  filter: brightness(1.06) drop-shadow(0 0 18px rgba(255,190,70,.32)) drop-shadow(0 22px 36px rgba(0,0,0,.6));
}
.gw-page--gv .gw-fcard__desc{ color: rgba(255,255,255,.72); }
.gw-page--gv .gw-fcard__empty{ color: rgba(255,255,255,.7); }

@media (max-width: 767px){
  .gw-page--gv .gw-fcard{
    border-width: 20px 22px 20px 24px;
    border-image-width: 30px 42px 30px 44px;
    filter: drop-shadow(0 0 8px rgba(255,190,70,.18)) drop-shadow(0 10px 18px rgba(0,0,0,.55));
  }
}

/* ── Past giveaways: heading + cards ── */
.gw-page--gv .gw-past-section__title{
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 0 26px;
  font-size: 14px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  color: #ffd56a;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.gw-page--gv .gw-past-section__title::before,
.gw-page--gv .gw-past-section__title::after{
  content: "";
  width: 56px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffd56a);
}
.gw-page--gv .gw-past-section__title::after{
  background: linear-gradient(270deg, transparent, #ffd56a);
}
.gw-page--gv .gw-past-strip-viewport{ padding: 16px 0 28px; }
.gw-page--gv .gw-past-card{
  border: 16px solid transparent;
  border-image: var(--gv-frame) 46 fill / 16px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2px 4px 4px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
  transition: transform .18s ease, filter .18s ease;
}
.gw-page--gv .gw-past-card:hover{
  transform: translateY(-3px);
  filter: brightness(1.12) drop-shadow(0 10px 20px rgba(0,0,0,.55));
}
.gw-page--gv .gw-past-strip-track .gw-past-card{ flex: 0 0 290px; }
.gw-page--gv .gw-past-card__title{ color: #fff; font-weight: 800; }
.gw-page--gv .gw-past-card__date{ color: #e3bd72; }

@media (max-width: 900px){
  .gw-landing--gv{ min-height: 0; }
  .gw-landing--gv .gw-landing__title-img{ width: clamp(260px, 78vw, 460px); }
  .gw-landing--gv::before{
    background:
      linear-gradient(180deg, rgba(8,4,3,.6) 0%, rgba(8,4,3,.84) 100%),
      url('/assets/img/giveaways/hero.webp') 70% top / cover no-repeat;
  }
}
@media (max-width: 560px){
  .gw-landing--gv{ padding-bottom: 72px; }
  .gw-page--gv .gw-past-section__title{ letter-spacing: .18em; font-size: 13px; }
  .gw-page--gv .gw-past-section__title::before,
  .gw-page--gv .gw-past-section__title::after{ width: 28px; }
  .gw-page--gv .gw-past-strip-track .gw-past-card{ flex-basis: 260px; }
}

/* ── Raffles page: same treatment, its own artwork ── */
.gw-landing--raffles::before{
  background:
    linear-gradient(100deg, rgba(8,4,3,.88) 0%, rgba(8,4,3,.64) 34%, rgba(8,4,3,.26) 56%, rgba(8,4,3,.04) 78%),
    url('/assets/img/giveaways/raffles-hero.webp') 74% 30% / cover no-repeat;
}
@media (max-width: 900px){
  .gw-landing--raffles::before{
    background:
      linear-gradient(180deg, rgba(8,4,3,.6) 0%, rgba(8,4,3,.84) 100%),
      url('/assets/img/giveaways/raffles-hero.webp') 72% top / cover no-repeat;
  }
}

/* ── Giveaways / Raffles hero: keep the artwork well-framed at any zoom / screen size ──
   • height grows with width (up to a cap) so the crop stays consistent
   • on ultra-wide screens the art stops stretching, stays centered and
     fades out at both sides instead of being upscaled
   • on narrow screens the art is capped in height (no extreme zoom-in) */
@media (min-width: 901px){
  .gw-landing--gv{ min-height: clamp(460px, 30vw, 700px); }
}
@media (min-width: 2100px){
  .gw-landing--gv::before{
    left: 50%;
    right: auto;
    width: 2100px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.82) 67%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.22) 89%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
}
@media (max-width: 900px){
  .gw-landing--gv::before{
    bottom: auto;
    height: min(100%, 640px);
  }
}

/* ═══ Mobile / tablet: everything centered (hero, badges, stats, cards, buttons) ═══ */
@media (max-width: 900px){
  .gw-landing--gv .gw-landing__content{
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .gw-landing--gv .gw-landing__title{ display: flex; justify-content: center; width: 100%; }
  .gw-landing--gv .gw-landing__tagline{ align-items: center; text-align: center; }
  .gw-landing--gv .gw-landing__badges{ justify-content: center; }
  .gw-landing--gv .gw-landing__stats{ width: 100%; }
  .gw-landing--gv .gw-lstat{ justify-content: center; }

  /* featured giveaway / raffle cards */
  .gw-page--gv .gw-fcard__head{ flex-direction: column; align-items: center; text-align: center; }
  .gw-page--gv .gw-fcard__headtext{ align-items: center; flex: 0 0 auto; }
  .gw-page--gv .gw-fcard__art-title{ text-align: center; }
  .gw-page--gv .gw-fcard__meta{ justify-content: center; }
  .gw-page--gv .gw-fcard__meta-item{ justify-content: center; text-align: center; flex: 1 1 130px; }
  .gw-page--gv .gw-fcard__actions{ align-items: center; }
  .gw-page--gv .gw-fcard__desc{ text-align: center; }

  /* past cards */
  .gw-page--gv .gw-past-card__head{ flex-direction: column; align-items: center; text-align: center; gap: 2px; }
  .gw-page--gv .gw-past-card__winner-row{ justify-content: center; }
}

/* ═══ Desktop: hero text block centered under the title art ═══════════════
   The title artwork is centered, but the tagline, buttons, badges and stat
   boxes were left-aligned. Everything is now centered on the same axis.
   (Phones/tablets were already centered by the rules above.) */
@media (min-width: 901px){
  .gw-landing--gv .gw-landing__content{
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .gw-landing--gv .gw-landing__title{ display: flex; justify-content: center; width: 100%; }
  .gw-landing--gv .gw-landing__tagline{ align-items: center; text-align: center; }
  .gw-landing--gv .gw-landing__badges{ justify-content: center; }
  .gw-landing--gv .gw-landing__stats{ width: 100%; }
  .gw-landing--gv .gw-lstat{ justify-content: center; }
  .gw-landing--gv .gw-landing__content > .btn-primary,
  .gw-landing--gv .gw-landing__content > .btn-secondary{ align-self: center; }

  /* The old overlay darkened the LEFT side (where the text used to sit).
     With centered text, darken the middle instead so it stays readable. */
  .gw-landing--gv::before{
    background:
      radial-gradient(ellipse 58% 90% at 50% 56%, rgba(8,4,3,.72) 0%, rgba(8,4,3,.46) 50%, rgba(8,4,3,.1) 100%),
      url('/assets/img/giveaways/hero.webp') 72% 30% / cover no-repeat;
  }
  .gw-landing--raffles::before{
    background:
      radial-gradient(ellipse 58% 90% at 50% 56%, rgba(8,4,3,.72) 0%, rgba(8,4,3,.46) 50%, rgba(8,4,3,.1) 100%),
      url('/assets/img/giveaways/raffles-hero.webp') 74% 30% / cover no-repeat;
  }
}