/* =========================
   Elementor widget: Hero Heading
   Structural only - every visual value comes from the widget controls,
   so nothing here fights with what is set in the editor.
========================= */

.hd-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* 100vh, but dvh where supported so mobile browser chrome does not cut it off */
.hd-hero--full-height {
    min-height: 100vh;
}

@supports (height: 100dvh) {
    .hd-hero--full-height {
        min-height: 100dvh;
    }
}

.hd-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hd-hero__inner {
    position: relative; /* keeps text above the overlay */
    z-index: 1;
    width: 100%;
}

/* The three slots inherit the site's typography until a control overrides it.
   Only the margin is reset, otherwise headings bring their own spacing and the
   "space below" control would start from an unpredictable value. */
.hd-hero__eyebrow,
.hd-hero__heading,
.hd-hero__subline {
    margin-top: 0;
    margin-bottom: 0;
}

/* Where the content block sits is set by the "Content block position" control,
   which writes margin-inline. Nothing to do here. */