/**
 * Purple Lion header hero image
 *
 * Shows optional includes/templates/responsive_classic/images/header.png
 * on the right side of the logo/header area.
 */

#logoWrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}

#logoWrapper #logo {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

#headerHeroImage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 280px;
  max-width: 760px;
  margin-left: auto;
  pointer-events: none;
}

#headerHeroImage .header-hero-image {
  display: block;
  width: 100%;
  max-width: 760px;
  max-height: 148px;
  height: auto;
  object-fit: contain;
  object-position: right center;
  opacity: 0.92;
  filter: drop-shadow(0 16px 28px rgba(92, 47, 163, 0.10));
}

/* Smaller desktops / notebooks */
@media only screen and (max-width: 1199px) {
  #headerHeroImage {
    max-width: 560px;
    min-width: 220px;
  }

  #headerHeroImage .header-hero-image {
    max-height: 130px;
  }
}

/* Tablet: keep it, but make it subtle and smaller */
@media only screen and (max-width: 991px) {
  #logoWrapper {
    gap: 18px;
  }

  #headerHeroImage {
    max-width: 420px;
    min-width: 180px;
  }

  #headerHeroImage .header-hero-image {
    max-height: 105px;
    opacity: 0.82;
  }
}

/* Mobile: hide decorative image, logo area stays clean */
@media only screen and (max-width: 767px) {
  #logoWrapper {
    display: block !important;
  }

  #headerHeroImage {
    display: none;
  }
}