/* Wrapper */
.moon-hero {
  background-color: #251637;
}

/* Background image layer (default = overlay mode for desktop/tablet) */
.moon-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--moon-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  pointer-events: none;
  z-index: 0;                 /* explicit: stays under the content */
}

/* Content stays above the bg at ALL sizes */
.moon-hero .container {
  position: relative;
  z-index: 1;
}

.moon-hero .content { color: #fff; }

.moon-hero .container {min-height: inherit;}

.moon-hero .row {
  display: flex;
  align-items: center; /* vertical centering */
  min-height: inherit; /* takes on hero height */
}

/* Desktop / tablet breathing room */
@media (min-width: 992px) {
  .moon-hero { min-height: 520px; }
}

/* Mobile: turn off overlay; stack image block above content */
@media (max-width: 991.98px) {
  .moon-hero { padding: 0; }

  .moon-hero__bg {
    position: static;         /* exits overlay mode, becomes a normal block */
    width: 100%;
    background-position: center top;
    background-size: cover;
    z-index: auto;            /* no stacking needed in flow */
    aspect-ratio: 16 / 9;     /* gives it height; adjust as you like */
  }

  /* aspect-ratio fallback */
  @supports not (aspect-ratio: 1 / 1) {
    .moon-hero__bg::before {
      content: "";
      display: block;
      height: 300px;
      aspect-ratio: 16/9;
    }
  }

  /* content spacing on mobile */
  .moon-hero .container {
    padding: 1.5rem 1rem 2rem;
  }
}