/**
 * @file
 * Styles for homepage hero AJAX functionality.
 */

/* Container styling */
.homepage-hero-container {
  position: relative;
  height: calc(100vh - 125px);
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .homepage-hero-container {
    height: 500px;
  }
}

@media (max-width: 575.98px) {
  .homepage-hero-container {
    height: 380px;
  }
}

/* Default image styling - server-side rendered */
.homepage-hero-default-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.homepage-hero-default-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Add overlay to default image */
.homepage-hero-default-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Loading indicator */
.homepage-hero-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  z-index: 2;
}

/* Image background wrapper for homepage hero */
.homepage-hero .hero-image-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Image inside the background wrapper */
.homepage-hero .hero-image-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Legacy support - target direct img child */
.homepage-hero > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Style the contextual region wrapper that contains the image */
.homepage-hero > .contextual-region:not(.hero-content) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Hide the contextual links toolbar but keep the wrapper */
.homepage-hero > .contextual-region:not(.hero-content) > .contextual {
  display: none;
}

/* Hide the empty field markup that comes after the image */
.homepage-hero > .field--type-image,
.homepage-hero .contextual-region > .field--type-image {
  display: none;
}

/* Add overlay to image for better text readability */
.homepage-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content is above the image and overlay */
.homepage-hero .hero-content {
  position: relative;
  z-index: 2;
}

.homepage-hero .homepage-hero-btn{
  z-index: 2;
}