/* CR165 Hub Parallax + Overlay Restore From ZIP V1
   Reference extracted from uploaded "Gridizer Research Hub -_files.zip":
   - research-design-system.css:
     "CR165 hub content spacer parallax transparent v1"
     "CR165 hub hero content overlay v1"
     "CR165 hub background v3 url apply"
   - research-hub-parallax.js:
     --cr165-hub-bg-shift scroll variable
   Adjusted for current state:
   - applies to all EN/DE/ES hub pages via page-template class, not only page-id-523
   - removes later extra hero-overlay darkening layers
   - keeps slate grey-blue panels
*/

html {
  --cr165-hub-bg-shift: 0px;
}

body.page-template-page-gridizer-research-overview-system {
  --cr165-hub-bg-image: url("https://gridizer.com/research/wp-content/uploads/2026/06/researchBackground0226v4.jpg");
  background-color: #06111e !important;
  overflow-x: hidden;
}

/* Restored real parallax stage: image is fixed and shifted by JS. */
body.page-template-page-gridizer-research-overview-system::before {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  height: 980px;
  background-image: var(--cr165-hub-bg-image) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  transform: translate3d(0, calc(var(--cr165-hub-bg-shift) * -1), 0);
  will-change: transform;
}

/* Restored reference overlay from the ZIP: light horizontal overlay, not the later too-dark stack. */
body.page-template-page-gridizer-research-overview-system::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  inset: 0 0 auto 0;
  height: 980px;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 18, 0.38) 0%,
    rgba(2, 8, 18, 0.22) 48%,
    rgba(2, 8, 18, 0.10) 100%
  ) !important;
}

/* Ensure content sits over the background stage and the page wrappers stay transparent. */
body.page-template-page-gridizer-research-overview-system .site,
body.page-template-page-gridizer-research-overview-system .site-content,
body.page-template-page-gridizer-research-overview-system .content-area,
body.page-template-page-gridizer-research-overview-system main.site-main,
body.page-template-page-gridizer-research-overview-system .inside-article {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

body.page-template-page-gridizer-research-overview-system #content,
body.page-template-page-gridizer-research-overview-system #main,
body.page-template-page-gridizer-research-overview-system main.site-main,
body.page-template-page-gridizer-research-overview-system .grz26,
body.page-template-page-gridizer-research-overview-system .grz26-bg-hero {
  position: relative;
  z-index: 2;
}

/* Stop the later CR165 browser/hero overlay stack from darkening the restored body-level image twice. */
body.page-template-page-gridizer-research-overview-system .grz26-hub-hero::before,
body.page-template-page-gridizer-research-overview-system .grz26-hub-hero::after,
body.page-template-page-gridizer-research-overview-system .grz26-hero::before,
body.page-template-page-gridizer-research-overview-system .grz26-hero::after,
body.page-template-page-gridizer-research-overview-system .grz26-overview-hero::before,
body.page-template-page-gridizer-research-overview-system .grz26-overview-hero::after,
body.page-template-page-gridizer-research-overview-system .grz26-hero-shell::before,
body.page-template-page-gridizer-research-overview-system .grz26-hero-shell::after,
body.page-template-page-gridizer-research-overview-system .grz26-hero-overlay,
body.page-template-page-gridizer-research-overview-system .grz26-background-overlay,
body.page-template-page-gridizer-research-overview-system .ggc-hero-overlay,
body.page-template-page-gridizer-research-overview-system .ggc-hero-wide::before,
body.page-template-page-gridizer-research-overview-system .ggc-hero-wide::after {
  background: transparent !important;
  opacity: 0 !important;
}

/* Keep readable slate grey-blue cards/panels, including Edge center panel. */
body.page-template-page-gridizer-research-overview-system .grz26-box,
body.page-template-page-gridizer-research-overview-system .grz26-card,
body.page-template-page-gridizer-research-overview-system .grz26-report,
body.page-template-page-gridizer-research-overview-system .grz26-map,
body.page-template-page-gridizer-research-overview-system .grz26-panel,
body.page-template-page-gridizer-research-overview-system .grz26-surface,
body.page-template-page-gridizer-research-overview-system .grz26-block,
body.page-template-page-gridizer-research-overview-system .grz26-section-card,
body.page-template-page-gridizer-research-overview-system .grz26-main-card,
body.page-template-page-gridizer-research-overview-system .grz26-overview-card,
body.page-template-page-gridizer-research-overview-system .grz26-content-card,
body.page-template-page-gridizer-research-overview-system .grz26-rail-card,
body.page-template-page-gridizer-research-overview-system .grz26-nav-card,
body.page-template-page-gridizer-research-overview-system .grz26-stack > section,
body.page-template-page-gridizer-research-overview-system .grz26-stack > article,
body.page-template-page-gridizer-research-overview-system .grz26-grid > section,
body.page-template-page-gridizer-research-overview-system .grz26-grid > article,
body.page-template-page-gridizer-research-overview-system .grz26-grid > div,
body.page-template-page-gridizer-research-overview-system .grz26-main > section,
body.page-template-page-gridizer-research-overview-system .grz26-main > article,
body.page-template-page-gridizer-research-overview-system .grz26-main > div {
  background-color: rgba(12, 29, 48, 0.74) !important;
  border-color: rgba(120, 154, 196, 0.18) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Preserve current fixed center panel fallback in Edge, but do not make Edge overlay separately darker. */
html.cr165-is-edge-html body.page-template-page-gridizer-research-overview-system .grz26-content-card,
html.cr165-is-edge-html body.page-template-page-gridizer-research-overview-system .grz26-main-card,
html.cr165-is-edge-html body.page-template-page-gridizer-research-overview-system .grz26-main > section,
html.cr165-is-edge-html body.page-template-page-gridizer-research-overview-system .grz26-main > article,
html.cr165-is-edge-html body.page-template-page-gridizer-research-overview-system .grz26-main > div,
body.cr165-is-edge.page-template-page-gridizer-research-overview-system .grz26-content-card,
body.cr165-is-edge.page-template-page-gridizer-research-overview-system .grz26-main-card,
body.cr165-is-edge.page-template-page-gridizer-research-overview-system .grz26-main > section,
body.cr165-is-edge.page-template-page-gridizer-research-overview-system .grz26-main > article,
body.cr165-is-edge.page-template-page-gridizer-research-overview-system .grz26-main > div {
  background-color: rgba(12, 29, 48, 0.78) !important;
}

@media (max-width: 900px) {
  body.page-template-page-gridizer-research-overview-system::before,
  body.page-template-page-gridizer-research-overview-system::after {
    height: 620px;
    transform: none;
  }
}