/* Surveylet UI V15 — optional visual comparison: reinstate only the ORIGINAL
   page-header illustration assets already referenced in the Razor pages.
   The approved V14 tabs, text layout, forms, and article behavior are unchanged.
   No new hero image is created for pages that never had one. */

/* The V5 and V7 designs deliberately hid the original .site-hero-art. Restore
   only a hero that contains one of Calibrum's existing header images. */
body[data-route] main :is(.fluent-prototype, .fluent-unified)
  section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
  .site-hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  gap: clamp(24px, 3.5vw, 64px) !important;
  align-items: center !important;
}

body[data-route] main :is(.fluent-prototype, .fluent-unified)
  section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
  .site-hero-art {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  max-width: 700px !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: center !important;
  justify-self: end !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

body[data-route] main :is(.fluent-prototype, .fluent-unified)
  section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
  .site-hero-art img {
  display: block !important;
  width: 100% !important;
  max-width: 700px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border: 1px solid #dce8f3 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(27, 67, 109, .12) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Remove only the now-redundant foreground motion panel; preserve the page's
   existing .ds-field animation as the subtle background behind copy and image. */
body[data-route] main :is(.fluent-prototype, .fluent-unified)
  section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
  .fluent-motion-stage {
  display: none !important;
}
body[data-route] main :is(.fluent-prototype, .fluent-unified)
  section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
  .site-hero-copy {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  body[data-route] main :is(.fluent-prototype, .fluent-unified)
    section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
    .site-hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body[data-route] main :is(.fluent-prototype, .fluent-unified)
    section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
    .site-hero-art {
    justify-self: start !important;
    max-width: 680px !important;
    order: 1 !important;
  }
}

@media (max-width: 620px) {
  body[data-route] main :is(.fluent-prototype, .fluent-unified)
    section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):has(.site-hero-art img[src*="/assets/images/calibrum-"])
    .site-hero-art img {
    border-radius: 9px !important;
    box-shadow: 0 6px 18px rgba(27, 67, 109, .11) !important;
  }
}