/* Root wrapper: full-bleed by default (relies on page section being full width) */
.hero-bg {
  position: relative;
  width: 100%;
  color: var(--hero-text-color, #fff);
  overflow: clip; /* prevents artifacts while respecting rounded corners if any */
}

/* Background image layer */
.hero-bg__image {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* Overlay layer (darken/lighten as needed) */
.hero-bg__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay, rgba(0,0,0,0.6));
  z-index: 1;
}

/* Height handling:
   1) Fixed heights when provided
   2) Fallback to aspect-ratio when no fixed heights
*/
.hero-bg {
  min-height: 200px; /* safety */
}
@media (min-width: 769px) {
  .hero-bg {
    height: var(--hero-height, auto);
  }
}
@media (max-width: 768px) {
  .hero-bg {
    height: var(--hero-height-mobile, auto);
  }
}
/* Aspect-ratio fallback when no fixed heights set */
@supports (aspect-ratio: 1 / 1) {
  .hero-bg:not([style*="--hero-height"]) {
    aspect-ratio: var(--hero-aspect, 16/9);
  }
}

/* Inner layout: anchors the content block to bottom center */
.hero-bg__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: end; /* stick content to bottom */
  justify-items: center; /* horizontally center */
  padding: 16px; /* safe area for small screens */
}

/* Content box: centered, max width, nudged up from the very bottom */
.hero-bg__content {
  width: min(100%, var(--hero-maxw, 960px));
  margin-bottom: var(--hero-bottom-offset, 24px);
  text-align: center;
}

/* Typography defaults */
.hero-bg__heading {
  margin: 0 0 8px 0;
  font-size: clamp(24px, 3.5vw, 40px);
  line-height: 1.15;
  color: currentColor;
}
.hero-bg__subheading {
  font-size: clamp(14px, 2.1vw, 18px);
  line-height: 1.5;
  opacity: .95;
  color: currentColor;
}

/* A little polish for very small screens */
@media (max-width: 480px) {
  .hero-bg__content { margin-bottom: calc(var(--hero-bottom-offset, 24px) * 0.8); }
}