/*
  AVERY EMAIL TASKLET
  EMAIL DEPARTMENT HERO ENVIRONMENT — PUNCH 1

  Presentation-only.
  Uses the existing approved transparent Avery foreground PNG unchanged.
  Does not alter Avery Dashboard layout or backend functionality.
*/

.avery-email-department-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #e8f9fb !important;
}

/*
  IMPORTANT:
  The locked Avery dashboard already contains .avery-environment.
  Use that existing layer directly instead of placing another
  background beneath it.
*/
.avery-email-department-hero > .avery-environment {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.08) 30%,
      rgba(255,255,255,0.48) 58%,
      rgba(255,255,255,0.18) 100%
    ),
    url("/assets/avery-email-department-hero.svg") !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}

/* Approved Avery foreground master stays untouched. */
.avery-email-department-hero > img[src*="avery" i],
.avery-email-department-hero > img[alt*="avery" i] {
  position: absolute !important;
  z-index: 24 !important;
  object-fit: contain !important;
}

/* Keep dashboard copy and statistics above the environment. */
.avery-email-department-hero > .hero-copy {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1100px) {
  .avery-email-department-hero > .avery-environment {
    background-position: 42% center !important;
  }
}

@media (max-width: 760px) {
  .avery-email-department-hero > .avery-environment {
    background-position: 36% center !important;
  }
}