/**
 * Full-bleed image row stacked behind hero content (replaces section background image).
 *
 * Markup: Divi Image module (.et_pb_image > img) or shortcode [understory_hero_image] (picture > img).
 *
 * Expected DOM (Divi row class: hero-image-row):
 *   .et_pb_row.hero-image-row
 *     .et_pb_column
 *       .understory-hero-picture  OR  .et_pb_module.et_pb_image …
 *
 * Row ::after = gradient overlay (z-index: 1). Image stack stays at z-index: 0.
 * Parent section: "hero-section" (or position: relative). Content rows on top: z-index: 1.
 */

.hero-section.et_pb_section,
.et_pb_section.hero-section {
  position: relative;
}

.hero-image-row.et_pb_row,
.et_pb_row.hero-image-row {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  isolation: isolate;
}

/* Entire image stack under row ::after (z-index: 1). */
.hero-image-row .et_pb_column,
.hero-image-row .et_pb_module.et_pb_image,
.hero-image-row .et_pb_image_wrap,
.hero-image-row .et_pb_image img,
.hero-image-row picture.understory-hero-picture,
.hero-image-row .understory-hero-picture,
.hero-image-row .understory-hero-picture img,
.et_pb_row.hero-image-row .et_pb_column,
.et_pb_row.hero-image-row .et_pb_module.et_pb_image,
.et_pb_row.hero-image-row .et_pb_image_wrap,
.et_pb_row.hero-image-row .et_pb_image img,
.et_pb_row.hero-image-row picture.understory-hero-picture,
.et_pb_row.hero-image-row .understory-hero-picture,
.et_pb_row.hero-image-row .understory-hero-picture img {
  position: relative;
  z-index: 0;
}

.hero-image-row picture.understory-hero-picture,
.hero-image-row .understory-hero-picture,
.et_pb_row.hero-image-row picture.understory-hero-picture,
.et_pb_row.hero-image-row .understory-hero-picture {
  display: block;
  width: 100%;
  max-width: 100%;
}

.hero-image-row .understory-hero-picture img,
.et_pb_row.hero-image-row .understory-hero-picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* Divi blend “passthrough” can reorder compositing vs overlays; normalize for this row. */
.hero-image-row .et_pb_column.et_pb_css_mix_blend_mode_passthrough,
.et_pb_row.hero-image-row .et_pb_column.et_pb_css_mix_blend_mode_passthrough {
  mix-blend-mode: normal;
}

/* Fade image to black at bottom of hero (sits above modules inside this row). */
.hero-image-row.et_pb_row::after,
.et_pb_row.hero-image-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(48%, 20rem);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    var(--black, #000) 100%
  );
}