/*
==========================================================================
BLUEPRINT — SUBPAGE HEADER
==========================================================================
*/

/* WRAPPER */

.rw-subpage-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* OVERLAY — always on :before, blend mode toggled via CSS var */

.rw-subpage-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var( --subpage-overlay, rgba(0,0,0,0.35) );
    mix-blend-mode: var( --subpage-blend-mode, normal );
    z-index: 1;
}


/* INNER */

.rw-subpage-h-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 300px 5% 130px 5%;
    text-align: center;
}

/* ACCENT OVERLAY — diagonal gradient, shared with image split */
.rw-subpage-wrapper::after {
    content: '';
    position: var( --rw-overlay-display, none );
    bottom: 0;
    right: 0;
    width: 18%;
    height: 75%;
    background-image: linear-gradient(
            var( --rw-grad-angle-img-split, 53.17deg ),
            var( --rw-grad-color-one-img-split, #b8babc69 ) 0%,
            var( --rw-grad-color-two-img-split, #ffffff87 ) 100%
    );
    clip-path: polygon( 100% 0, 100% 100%, 0 100% );
    z-index: 2;
    opacity: var(--rw-home-hero-opacity);
}


/* CONTENT */

.rw-subpage-h-ct {
    max-width: var(--subpage-title-width);
    text-align: left;
}

.rw-subpage-h-ct h1,
.rw-subpage-h-ct .rw-subpage-deco-heading {
    color: var( --subpage-title-color, #ffffff );
    margin: 0;
}

.rw-subpage-h-ct .rw-btns {
    margin-top: 20px;
}

/* Decorative heading — mirrors H1 styles via JS-stamped CSS vars */
.rw-subpage-deco-heading {
    display: block;
    font-family:    var( --h1-font-family );
    font-size:      var( --h1-font-size );
    font-weight:    var( --h1-font-weight );
    line-height:    var( --h1-line-height );
    letter-spacing: var( --h1-letter-spacing );
    text-transform: var( --h1-text-transform );
    font-style:     var( --h1-font-style );
    color: var( --subpage-title-color, #ffffff );
    margin: 0;
}


/* RESPONSIVE */

@media screen and ( max-width: 992px ) {

    .rw-subpage-h-inner {
        min-height: 400px;
        padding: 250px 20px 60px 20px;
    }

}

@media screen and ( max-width: 768px ) {

    .rw-subpage-h-inner {
        min-height: 300px;
        padding: 120px 20px 60px 20px;
    }

    .rw-subpage-wrapper::after {
        width: 30%;
        height: 60%;
    }

    .rw-subpage-h-ct br {
        display: none;
    }

}