/* Ashen Realms visual-quality layer.
   One coherent low-poly composition: no stitched full-width mockup, no mixed class-art styles. */

/* Header branding stays native SVG/text so it remains crisp on HiDPI screens. */
.arp-brand-link {
  display: flex !important;
  align-items: center !important;
  min-height: 72px !important;
}
.arp-brand {
  font-size: 27px !important;
  letter-spacing: -0.55px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 2px 1px #08111a, 0 5px 14px rgba(0,0,0,.45) !important;
}
.arp-brand .arp-crest {
  width: 84px !important;
  height: 31px !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)) !important;
}

/* Hero: use the existing larger left/right low-poly crops at their real aspect ratio.
   background-size:auto 100% prevents vertical cropping, so the knight helmet/head stays visible. */
.arp-hero {
  min-height: 535px !important;
  background: #173047 !important;
}
.arp-hero-background {
  background-image: url('/marketing/poly/world-hq.webp') !important;
  background-position: center 48% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  overflow: hidden !important;
}
.arp-hero-background::before,
.arp-hero-background::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  pointer-events: none !important;
}
.arp-hero-background::before {
  left: 0 !important;
  width: 58% !important;
  background-image: url('/marketing/poly/hero-left-hq.webp') !important;
  background-position: left top !important;
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.86) 80%,rgba(0,0,0,.38) 91%,transparent 100%) !important;
  mask-image: linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.86) 80%,rgba(0,0,0,.38) 91%,transparent 100%) !important;
}
.arp-hero-background::after {
  right: 0 !important;
  width: 45% !important;
  background-image: url('/marketing/poly/hero-right-hq.webp') !important;
  background-position: right top !important;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 11%,rgba(0,0,0,.86) 25%,#000 39%,#000 100%) !important;
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 11%,rgba(0,0,0,.86) 25%,#000 39%,#000 100%) !important;
}
/* The old tiny DOM image nodes are never used as visible full-width layers. */
.arp-hero-background img {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: none !important;
}
/* Keep the center readable without turning it into a rectangular dark hole. */
.arp-hero::before {
  background:
    radial-gradient(ellipse 36% 86% at 51% 49%,rgba(4,16,28,.82) 0%,rgba(4,17,29,.67) 42%,rgba(4,17,29,.26) 72%,transparent 100%),
    linear-gradient(0deg,rgba(5,16,27,.80) 0%,rgba(5,17,28,.34) 23%,rgba(5,17,28,.04) 56%,transparent 100%) !important;
}
.arp-hero-copy {
  max-width: 720px !important;
  margin-left: 4% !important;
  padding: 26px 20px 30px !important;
}
.arp-brand-large {
  font-size: 84px !important;
}
.arp-brand-large .arp-crest {
  width: 188px !important;
  height: 88px !important;
}
.arp-hero-discover {
  right: 4.5% !important;
  bottom: 46px !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  background: rgba(5,17,28,.30) !important;
  backdrop-filter: blur(3px) !important;
}

/* World band: return to the dedicated landscape instead of the accidental class-row crop. */
.arp-world {
  background-image: url('/marketing/poly/world-hq.webp') !important;
  background-position: center 50% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}
.arp-world::before {
  background: linear-gradient(90deg,#061725ef 0%,#061725cf 23%,#06172558 50%,#061725bd 72%,#061725f3 100%) !important;
}

/* All five class cards use the original coherent class-art family again. */
.arp-class-art {
  background-image: none !important;
  overflow: hidden !important;
}
.arp-class-art img {
  opacity: 1 !important;
  transform: none !important;
  image-rendering: auto !important;
  object-position: center 34% !important;
  filter: none !important;
}
.arp-class-card:hover .arp-class-art img {
  transform: scale(1.025) !important;
}
.arp-news-card > img,
.arp-class-detail > img,
.arp-article img {
  image-rendering: auto !important;
  filter: none !important;
}
.arp-class-detail > img,
.arp-article img[src$='hero-knight.webp'],
.arp-article img[src$='world.webp'],
.arp-article img[src$='mage.webp'] {
  content: normal !important;
}

@media (min-width: 1700px) {
  .arp-hero { min-height: 555px !important; }
  .arp-hero-copy { margin-left: 2% !important; }
}

@media (max-width: 1190px) {
  .arp-brand { font-size: 24px !important; }
  .arp-brand .arp-crest { width: 76px !important; height: 29px !important; }
  .arp-brand-large { font-size: 73px !important; }
  .arp-brand-large .arp-crest { width: 166px !important; height: 79px !important; }
  .arp-hero-copy { max-width: 650px !important; margin-left: 5% !important; }
  .arp-hero-background::before { width: 61% !important; }
  .arp-hero-background::after { width: 42% !important; }
}

@media (max-width: 760px) {
  .arp-brand-link { min-height: 63px !important; }
  .arp-brand { font-size: 22px !important; }
  .arp-brand .arp-crest { width: 70px !important; height: 26px !important; }
  .arp-hero {
    min-height: 520px !important;
    align-items: flex-end !important;
  }
  .arp-hero-background {
    background-position: center 42% !important;
  }
  .arp-hero-background::before {
    width: 100% !important;
    background-size: auto 100% !important;
    background-position: 25% top !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .arp-hero-background::after { display: none !important; }
  .arp-hero::before {
    background:
      linear-gradient(0deg,#061623 0%,rgba(6,22,35,.96) 31%,rgba(6,22,35,.70) 53%,rgba(6,22,35,.16) 78%,rgba(6,22,35,.01) 100%) !important;
  }
  .arp-hero-copy {
    margin: 0 !important;
    max-width: 610px !important;
    padding: 32px 18px 28px !important;
  }
  .arp-brand-large { font-size: 60px !important; }
  .arp-brand-large .arp-crest { width: 130px !important; height: 62px !important; }
}

@media (max-width: 480px) {
  .arp-hero { min-height: 545px !important; }
  .arp-hero-background::before {
    background-position: 22% top !important;
  }
  .arp-hero-copy { padding-top: 102px !important; }
  .arp-brand-large { font-size: clamp(40px,11.7vw,56px) !important; }
  .arp-brand-large .arp-crest { width: 124px !important; height: 58px !important; }
}