/* ========================================
   APPLICATION-SPECIFIC HERO BACKGROUNDS
   Fix: "The header picture on all the application should be more related to the application"
   ======================================== */

/* Base hero style - maintains default for pages without specific background */
.hero-intro {
  background: url("../../images/introduction/herointegrations.png") center/cover no-repeat;
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  color: #fff;
  position: relative;
}

/* Application-specific overrides - Uses body ID for specificity */

/* HOME APPLICATION */
body#app-home .hero-intro {
  /* background-image: url("../../images/what-is-better-lighting/men-with-womans.png"); */
}

/* OFFICE APPLICATION */
body#app-office .hero-intro {
  background-image: url("../../images/heroImages/hero2.jpg");
}



/* EDUCATION APPLICATION */
body#app-education .hero-intro {
  background-image: url("../../images/applications/schools.jpg");
}

/* HOSPITALS & NURSING HOMES APPLICATION */
body#app-hospitals .hero-intro {
  background-image: url("../../images/applications/nursing-home.jpg");
}

/* HOSPITALITY APPLICATION */
body#app-hospitality .hero-intro {
  background-image: url("../../images/topics/topic1.jpg");
}

/* COMMUNITIES APPLICATION */
body#app-community .hero-intro {
  background-image: url("../../images/topics/topic4.jpg");
}

/* Overlay for better text readability on all heroes */
.hero-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(59, 49, 100, 0.6) 100%);
  z-index: 1;
}

/* Ensure content is above overlay */
.hero-intro .container {
  position: relative;
  z-index: 2;
}

.hero-intro .hero-title {
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hero-intro {
    min-height: 40vh;
    padding: 80px 0 40px;
  }

  .hero-intro .hero-title {
    font-size: 2rem;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-intro {
    min-height: 50vh;
  }
}

/* High-res display optimization */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  /* Could add @2x images here if available */
  .hero-intro {
    background-size: cover;
  }
}

/* Fallback for when images are not yet available */
body#app-home .hero-intro,
body#app-office .hero-intro,
body#app-education .hero-intro,
body#app-hospitals .hero-intro,
body#app-hospitality .hero-intro,
body#app-community .hero-intro {
  /* Colored gradient fallback if image fails to load */
  background-color: #3b3164;
}

/* Accessibility - Ensure sufficient contrast */
.hero-intro .hero-title {
  color: #fff;
  font-weight: 700;
}

/* Print styles - remove backgrounds */
@media print {
  .hero-intro {
    background: none !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
  }

  .hero-intro::before {
    display: none;
  }
}