/*
 * Zyrenicus front-page restrained aesthetic pass — v1.47.9
 *
 * This is intentionally a late, reversible override layer. It does not flatten
 * the bespoke panel system, alter portal colours, remove the pinstripe texture,
 * or change the shelves. The pass only clarifies hierarchy in the hero and
 * spotlight components.
 */

/* --------------------------------------------------------------------------
   Hero: let the content lead without throwing away the large visual.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  :is(#dwFrontpage, #dwPortalRoot) {
    --dw-intro-cols: 0.90fr 1.10fr;
    --dw-hero-avatar-maxw: 455px;
    --dw-hero-avatar-mb: 1rem;
    --dw-intro-content-pad: clamp(1.45rem, 2vw, 1.8rem);
  }
}

:is(#dwFrontpage, #dwPortalRoot) .dw-intro-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--dw-z-decor);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 12, 0.02) 0%, rgba(4, 6, 12, 0.08) 48%, rgba(8, 8, 11, 0.60) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.18));
}

:is(#dwFrontpage, #dwPortalRoot) .dw-intro-visual :is(#dwHeroCanvas, .dw-hero-video, .dw-hero-static) {
  filter: saturate(0.90) brightness(0.88) contrast(1.035);
}

/* Replace the always-moving rainbow frame with a quieter house-metal frame.
   Colour remains present, but it now belongs to the page rather than fighting it. */
:is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border {
  --dw-ring: 2px;
  border: var(--dw-ring) solid transparent;
  max-width: var(--dw-hero-avatar-maxw);
  background:
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
    linear-gradient(118deg, #796737 0%, #d8c47c 34%, #c5ccd5 62%, #9d8955 100%) border-box;
  background-size: 100% 100%;
  background-position: 0 0;
  animation: none;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 239, 195, 0.035);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border::after {
  inset: calc(-1 * var(--dw-ring) - 5px);
  background: linear-gradient(118deg, rgba(212, 175, 55, 0.58), rgba(199, 207, 222, 0.38), rgba(157, 137, 85, 0.45));
  background-size: 100% 100%;
  background-position: 0 0;
  animation: none;
  filter: blur(12px);
  opacity: 0.16;
}

@media (hover: hover) and (pointer: fine) {
  :is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border:hover,
  :is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border:focus-within {
    box-shadow:
      0 20px 54px rgba(0, 0, 0, 0.56),
      0 0 0 1px rgba(255, 235, 185, 0.09),
      0 0 24px rgba(139, 111, 160, 0.10);
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border:hover::after,
  :is(#dwFrontpage, #dwPortalRoot) .dw-hero-avatar.dw-gradient-border:focus-within::after {
    opacity: 0.24;
  }
}

/* Preserve all eight coloured routes, but stop each pill broadcasting a glow
   before the visitor interacts with it. */
:is(#dwFrontpage, #dwPortalRoot) .dw-hero-pill {
  color: color-mix(in srgb, var(--accent) 72%, rgba(255, 255, 255, 0.94));
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.12));
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.23)),
    var(--dw-dark-card);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 10px color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-hero-pill svg.dw-fa {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-soft) 68%, transparent)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.36));
}

@media (hover: hover) and (pointer: fine) {
  :is(#dwFrontpage, #dwPortalRoot) .dw-hero-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 64%, rgba(255, 255, 255, 0.18));
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 0 20px var(--accent-soft);
  }
}

/* --------------------------------------------------------------------------
   Spotlight: retain the deluxe display case, lower equal-weight competition.
   -------------------------------------------------------------------------- */
:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-card {
  grid-template-columns: 1.04fr 0.96fr;
  gap: 0;
  border-color: rgba(212, 175, 55, 0.17);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-body {
  padding: clamp(0.85rem, 1.45vw, 1.15rem) clamp(0.9rem, 1.65vw, 1.25rem) clamp(0.72rem, 1.2vw, 1rem);
  gap: 0.46rem;
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-badges {
  opacity: 0.94;
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-title {
  margin-bottom: 0.42rem;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.68),
    0 8px 22px rgba(0, 0, 0, 0.68),
    0 0 12px rgba(212, 175, 55, 0.10);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-desc {
  line-height: 1.62;
  max-width: 34rem;
  color: rgba(220, 224, 233, 0.72);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-stats {
  gap: 0.44rem;
  margin-top: 0.05rem;
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-stat {
  border-color: rgba(255, 255, 255, 0.060);
  background: rgba(0, 0, 0, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-stat .k {
  color: rgba(210, 216, 226, 0.62);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-stat .v {
  color: rgba(126, 245, 174, 0.91);
  text-shadow: 0 0 9px rgba(70, 235, 145, 0.13);
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-cta-row {
  margin-top: 0.04rem;
}

:is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-btn-ghost {
  opacity: 0.82;
  filter: saturate(0.86);
}

@media (hover: hover) and (pointer: fine) {
  :is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-btn-ghost:hover,
  :is(#dwFrontpage, #dwPortalRoot) .dw-spotlight .dw-btn-ghost:focus-visible {
    opacity: 1;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile: cut hero height rather than deleting any of its routes or features.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :is(#dwFrontpage, #dwPortalRoot) {
    --dw-intro-visual-h: auto;
    --dw-intro-visual-minh: clamp(300px, 86vw, 350px);
    --dw-intro-visual-ar: 6 / 5;
    --dw-hero-avatar-maxw: min(84%, 300px);
    --dw-hero-avatar-mb: 0.92rem;
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-intro-visual .dw-hero-static {
    object-fit: cover;
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-intro-visual::after {
    background:
      linear-gradient(180deg, rgba(4, 6, 12, 0.04), rgba(4, 6, 12, 0.02) 58%, rgba(8, 8, 11, 0.54) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.14));
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-intro-content {
    padding-top: 1.25rem;
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  :is(#dwFrontpage, #dwPortalRoot) {
    --dw-intro-visual-minh: clamp(280px, 82vw, 320px);
    --dw-hero-avatar-maxw: min(82%, 282px);
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-intro-content {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  :is(#dwFrontpage, #dwPortalRoot) .dw-spotlight-body {
    padding: 0.78rem 0.78rem 0.7rem;
  }
}