/**
 * Blog hero — white title overlay on the MAIN headline image only.
 * Never intended for .blog-card-grid card titles.
 */

/*
 * Hide the hero H1 (and its Elementor heading widget) until JS splits it.
 * Prevents the full black title flashing, then hopping into the overlay layout.
 */
.blog-hero h1.elementor-heading-title:not([data-blog-hero-title-over-applied="1"]),
h1.blog-hero-headline:not([data-blog-hero-title-over-applied="1"]),
.blog-hero-headline h1.elementor-heading-title:not([data-blog-hero-title-over-applied="1"]),
.blog-hero .elementor-widget-heading:has(
    h1.elementor-heading-title:not([data-blog-hero-title-over-applied="1"])
  ),
.blog-hero-headline.elementor-widget-heading:has(
    h1:not([data-blog-hero-title-over-applied="1"])
  ) {
  visibility: hidden;
}

/* Keep overlay invisible until the H1 has been marked ready (same paint). */
.blog-hero:not(:has(h1[data-blog-hero-title-over-applied="1"])) .blog-hero-title-over,
body:not(:has(h1[data-blog-hero-title-over-applied="1"])) .blog-hero-title-over {
  visibility: hidden;
}

.blog-hero-title-over-host,
.blog-hero-title-over-host > .elementor-widget-container {
  position: relative;
  overflow: visible !important;
}

/* Let the white words dip slightly into the white content below */
.blog-hero-title-over-host,
.blog-hero-title-over-host .elementor-widget-container,
.e-con:has(> .blog-hero-title-over-host),
.e-con:has(.blog-hero-title-over-host) {
  overflow: visible !important;
}

.blog-hero-title-over-host > .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0) 70%
  );
}

.blog-hero-title-over {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: block;
  margin: 0;
  padding: 0 0 0 16px;
  max-width: 100%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: none;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateY(0.18em);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

@supports (text-box-trim: trim-both) {
  .blog-hero-title-over {
    line-height: 1;
    transform: none;
  }
}

.blog-hero-title-over__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tight gap under the black remainder of the hero H1 */
.blog-hero h1.elementor-heading-title[data-blog-hero-title-over-applied="1"],
h1.blog-hero-headline[data-blog-hero-title-over-applied="1"],
.blog-hero-headline h1.elementor-heading-title[data-blog-hero-title-over-applied="1"] {
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}