/* DESIGN AUTHORITY — do not delete as "duplicate".
 * This file deliberately overrides the split-gradient hero system compiled
 * into style.css from scss/_hero.scss: it forces the FULL-PHOTO hero look
 * (photo covers the whole banner, no color split / large glyph).
 * Owner decision 2026-06-05: keep the full-photo design site-wide.
 * Loaded after style.css (equal specificity → this file wins) and fed into
 * the critical-CSS bundles by tools/critical/build-critical.mjs. */
body[class*="mr-route-"] {
  --hero-art-accent: #7aadd0;
  --hero-art-accent-2: #c3b7e8;
  --hero-art-image: url('/assets/generated/hero-moon-tools.webp');
  --hero-art-position: center center;
  --hero-art-pattern:
    radial-gradient(circle at 16% 24%, rgba(255,255,255,0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,0.24) 0 1px, transparent 2px),
    linear-gradient(135deg, color-mix(in srgb, var(--hero-art-accent) 20%, transparent), transparent 58%);
}

body.mr-section-astrology { --hero-art-accent:#7aadd0; --hero-art-accent-2:#c3b7e8; --hero-art-image:url('/assets/generated/hero-transits.webp'); }
body.mr-section-divination { --hero-art-accent:#b985d8; --hero-art-accent-2:#d7a86c; --hero-art-image:url('/assets/generated/hero-divination.webp'); }
body.mr-section-explore { --hero-art-accent:#75a987; --hero-art-accent-2:#80c7bd; --hero-art-image:url('/assets/generated/hero-wellness.webp'); }
body.mr-section-horoscope { --hero-art-accent:#d3a46b; --hero-art-accent-2:#7aadd0; --hero-art-image:url('/assets/generated/hero-horoscope.webp'); }

body.mr-route-natal-chart { --hero-art-accent:#7aadd0; --hero-art-accent-2:#d3a46b; --hero-art-image:url('/assets/generated/hero-natal-chart.webp'); }
body.mr-route-synastry { --hero-art-accent:#d986a8; --hero-art-accent-2:#8fb8e8; --hero-art-image:url('/assets/generated/hero-synastry.webp'); }
body.mr-route-moon-today,
body.mr-route-moon-sign-calculator,
body.mr-route-moon-phase-birthday,
body.mr-route-moon-compatibility,
body.mr-route-lunar-return,
body.mr-route-moon-days,
body.mr-route-moon-signs,
body.mr-route-moon-meditation { --hero-art-accent:#8fb8e8; --hero-art-accent-2:#c8d8ef; --hero-art-image:url('/assets/generated/hero-moon-tools.webp'); }
body.mr-route-transits,
body.mr-route-astro-weather,
body.mr-route-retrograde-calendar,
body.mr-route-planetary-hours { --hero-art-accent:#7aadd0; --hero-art-accent-2:#9fb4d8; --hero-art-image:url('/assets/generated/hero-transits.webp'); }
body.mr-route-vedic-chart { --hero-art-accent:#d3a46b; --hero-art-accent-2:#b985d8; --hero-art-image:url('/assets/generated/hero-natal-chart.webp'); }
body.mr-route-numerology,
body.mr-route-numerology-forecast,
body.mr-route-angel-numbers,
body.mr-route-angel-number-single,
body.mr-route-angel-messages { --hero-art-accent:#80c7bd; --hero-art-accent-2:#d7a86c; --hero-art-image:url('/assets/generated/hero-numerology.webp'); }
body.mr-route-dream-calendar,
body.mr-route-dream-dictionary { --hero-art-accent:#9fa8ff; --hero-art-accent-2:#b985d8; --hero-art-image:url('/assets/generated/hero-dreams.webp'); }
body.mr-route-calendar-landing,
body.mr-route-calendar-year,
body.mr-route-calendar-month,
body.mr-route-calendar-day,
body.mr-route-beauty-calendar,
body.mr-route-beauty-calendar-month,
body.mr-route-beauty-calendar-day,
body.mr-route-fertility-calendar,
body.mr-route-business-calendar { --hero-art-accent:#75a987; --hero-art-accent-2:#d3a46b; --hero-art-image:url('/assets/generated/hero-calendar.webp'); }

body[class*="mr-route-"] :is(
  .div-hero, .horo-hero, .lc-hero, .bc-hero, .bcm-hero, .bcd-hero, .fc-hero, .biz-hero,
  .nc-hero, .nc-result-hero, .syn-hero, .syn-result-hero, .tr-hero, .vc-hero, .vc-result-hero,
  .lr-hero, .lr-result-hero, .sr-hero, .aw-hero, .voc-hero, .mt-hero, .msc-hero, .mpb-hero,
  .mc-hero, .mm-hero, .dc-hero, .ts-hero, .palm-hero, .ph-hero, .ecl-hero, .zodiac-single-hero,
  .acg-hero, .cc-hero, .cc-hero-idx, .zc-hero, .zci-hero, .upg-hero
) {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body[class*="mr-route-"] :is(.vc-hero, .vc-result-hero) {
  flex-basis: auto !important;
}

body[class*="mr-route-"] :is(
  .div-hero, .horo-hero, .lc-hero, .bc-hero, .bcm-hero, .bcd-hero, .fc-hero, .biz-hero,
  .nc-hero, .nc-result-hero, .syn-hero, .syn-result-hero, .tr-hero, .vc-hero, .vc-result-hero,
  .lr-hero, .lr-result-hero, .sr-hero, .aw-hero, .voc-hero, .mt-hero, .msc-hero, .mpb-hero,
  .mc-hero, .mm-hero, .dc-hero, .ts-hero, .palm-hero, .ph-hero, .ecl-hero, .zodiac-single-hero,
  .acg-hero, .cc-hero, .cc-hero-idx, .zc-hero, .zci-hero, .upg-hero
)::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  min-width: 100vw !important;
  transform: translateX(-50%) !important;
  background:
    linear-gradient(180deg, rgba(8,12,24,0.72) 0%, rgba(8,12,24,0.38) 50%, rgba(8,12,24,0.65) 100%),
    var(--hero-art-pattern),
    var(--hero-art-image) !important;
  background-size: cover, auto, auto, cover, cover !important;
  background-position: center, center, var(--hero-art-position) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, #000 18%, #000 82%, rgba(0,0,0,0.62) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, #000 18%, #000 82%, rgba(0,0,0,0.62) 100%);
  mask-composite: intersect;
  pointer-events: none !important;
  z-index: 0 !important;
}

body[class*="mr-route-"] :is(
  .div-hero, .horo-hero, .lc-hero, .bc-hero, .bcm-hero, .bcd-hero, .fc-hero, .biz-hero,
  .nc-hero, .nc-result-hero, .syn-hero, .syn-result-hero, .tr-hero, .vc-hero, .vc-result-hero,
  .lr-hero, .lr-result-hero, .sr-hero, .aw-hero, .voc-hero, .mt-hero, .msc-hero, .mpb-hero,
  .mc-hero, .mm-hero, .dc-hero, .ts-hero, .palm-hero, .ph-hero, .ecl-hero, .zodiac-single-hero,
  .acg-hero, .cc-hero, .cc-hero-idx, .zc-hero, .zci-hero, .upg-hero
) > * {
  position: relative;
  z-index: 2;
}

body[class*="mr-route-"] .mt-hero::after {
  opacity: 0.35 !important;
}

body[class*="mr-route-"] .vc-hero > .vc-hero-ring {
  position: absolute !important;
  z-index: 1 !important;
}

body.mr-route-vedic-chart .vc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.mr-route-vedic-chart .vc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: min(980px, 108vh);
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(8,10,18,0.24) 0%, rgba(8,10,18,0.36) 42%, rgba(10,10,20,0.76) 72%, #0a0a14 96%),
    var(--hero-art-pattern),
    var(--hero-art-image);
  background-size: cover, auto, auto, cover, cover;
  background-position: center, center, var(--hero-art-position);
  background-repeat: no-repeat, no-repeat, no-repeat;
  pointer-events: none;
  z-index: 0;
}

body.mr-route-vedic-chart .vc > * {
  position: relative;
  z-index: 2;
}

/* Results view: the giant full-container dark band looked like an empty
 * over-tall hero. Drop it and let the compact .vc-result-hero paint its own
 * (hero-scoped) backdrop instead. The form view keeps the band. */
body.mr-route-vedic-chart .vc--has-result::before {
  display: none !important;
}

body.mr-route-vedic-chart .vc-hero::before {
  display: none !important;
}

body.mr-route-vedic-chart .vc .vc-form-container {
  background: rgba(20,20,42,0.78);
}

@media (max-width: 760px) {
  body[class*="mr-route-"] {
    --hero-art-position: center top;
  }
  body[class*="mr-route-"] :is(
    .div-hero, .horo-hero, .lc-hero, .bc-hero, .bcm-hero, .bcd-hero, .fc-hero, .biz-hero,
    .nc-hero, .nc-result-hero, .syn-hero, .syn-result-hero, .tr-hero, .vc-hero, .vc-result-hero,
    .lr-hero, .lr-result-hero, .sr-hero, .aw-hero, .voc-hero, .mt-hero, .msc-hero, .mpb-hero,
    .mc-hero, .mm-hero, .dc-hero, .ts-hero, .palm-hero, .ph-hero, .ecl-hero, .zodiac-single-hero,
    .acg-hero, .cc-hero, .cc-hero-idx, .zc-hero, .zci-hero, .upg-hero
  )::before {
    background-size: cover, auto, auto, cover, cover !important;
  }
}


/* Mobile: 800w hero art (auto-generated overrides — keep in sync with the map above) */
@media (max-width: 768px) {
	body[class*="mr-route-"] { --hero-art-image: url('/assets/generated/hero-moon-tools-w800.webp'); }
	body.mr-section-astrology { --hero-art-image: url('/assets/generated/hero-transits-w800.webp'); }
	body.mr-section-divination { --hero-art-image: url('/assets/generated/hero-divination-w800.webp'); }
	body.mr-section-explore { --hero-art-image: url('/assets/generated/hero-wellness-w800.webp'); }
	body.mr-section-horoscope { --hero-art-image: url('/assets/generated/hero-horoscope-w800.webp'); }
	body.mr-route-natal-chart { --hero-art-image: url('/assets/generated/hero-natal-chart-w800.webp'); }
	body.mr-route-synastry { --hero-art-image: url('/assets/generated/hero-synastry-w800.webp'); }
	body.mr-route-moon-meditation { --hero-art-image: url('/assets/generated/hero-moon-tools-w800.webp'); }
	body.mr-route-planetary-hours { --hero-art-image: url('/assets/generated/hero-transits-w800.webp'); }
	body.mr-route-vedic-chart { --hero-art-image: url('/assets/generated/hero-natal-chart-w800.webp'); }
	body.mr-route-angel-messages { --hero-art-image: url('/assets/generated/hero-numerology-w800.webp'); }
	body.mr-route-dream-dictionary { --hero-art-image: url('/assets/generated/hero-dreams-w800.webp'); }
	body.mr-route-business-calendar { --hero-art-image: url('/assets/generated/hero-calendar-w800.webp'); }
}