/* Shared gallery layer rules: keep the color portrait and its offset monochrome
   duplicate visible together across state, city, and category galleries. */
.editorial-profile .editorial-stage {
  position: relative !important;
  isolation: isolate !important;
}

.editorial-profile .editorial-stage .profile-hologram {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  inset: -5% -14% -5% -14% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: .58 !important;
  mix-blend-mode: screen !important;
  filter: grayscale(1) brightness(1.42) contrast(1.18) !important;
  pointer-events: none !important;
}

.editorial-profile .editorial-stage .profile-hologram[style*="--sheet-x"] {
  background-size: 500% auto !important;
  background-position: var(--sheet-x, 0%) var(--sheet-y, 0%) !important;
}

.editorial-profile .editorial-stage .profile-hologram:not([style*="--sheet-x"]) {
  background-size: contain !important;
}

.editorial-profile:nth-of-type(odd) .editorial-stage .profile-hologram {
  transform: translate(9%, -1%) scale(1.08) !important;
}

.editorial-profile:nth-of-type(even) .editorial-stage .profile-hologram {
  transform: translate(-9%, -1%) scale(1.08) !important;
}

.editorial-profile .editorial-stage > .editorial-photo {
  position: absolute !important;
  z-index: 20 !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  mix-blend-mode: normal !important;
}

/* Regional cards previously used SVG wrappers that fetched the sprite sheet
   from inside the SVG. Render the color tile directly as a CSS background. */
.editorial-profile .editorial-stage > .editorial-photo.regional-portrait {
  background-repeat: no-repeat !important;
  background-size: 500% auto !important;
  background-position: var(--photo-x, 0%) var(--photo-y, 0%) !important;
  opacity: 1 !important;
  z-index: 20 !important;
  mix-blend-mode: normal !important;
}

/* Kairo concept cards use their own layer class names, so enforce the same
   foreground/background order as the shared editorial gallery cards. */
.editorial-profile .kairo-stage .kairo-hologram {
  z-index: 0 !important;
}

.editorial-profile .kairo-stage > .kairo-main {
  position: absolute !important;
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

/* M83 uses one standalone portrait for both layers rather than a sprite cell. */
.editorial-profile .editorial-stage .m83-hologram {
  background-size: contain !important;
  background-position: center !important;
}

@media (max-width: 760px) {
  .editorial-profile .editorial-stage .profile-hologram {
    inset: -3% -9% -3% -9% !important;
  }
}

/* Female galleries use an image element for each layer. Keep the grayscale
   duplicate behind the full-color portrait at every viewport size. */
.f-profile .f-art {
  position: relative !important;
  isolation: isolate !important;
}

.f-profile .f-art > .f-hologram {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: .56 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.f-profile .f-art > .f-hologram img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(1.25) contrast(1.12) !important;
}

.f-profile .f-art > .f-front {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  mask-image: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.f-profile .f-team-frame {
  position: relative !important;
  isolation: isolate !important;
}

.f-profile .f-team-frame > .f-team-hologram {
  position: absolute !important;
  z-index: 0 !important;
  inset: -5% -8% !important;
  width: 116% !important;
  height: 110% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: .58 !important;
  mix-blend-mode: screen !important;
  filter: grayscale(1) brightness(1.25) contrast(1.12) !important;
  transform: translateX(7%) scale(1.06) !important;
  pointer-events: none !important;
}

.f-profile .f-team-frame > .f-front {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}