.block-page-header.has-background.alignfull {
    position: relative;
    display: flex;
    align-items: center;
}

.editor-styles-wrapper .block-page-header.has-background.alignfull {
    min-height: auto; /* block was massively tall in editor otherwise */
}

.block-page-header .page-header__inner {
    max-width: 960px;
}


/* 1. Only apply background/overlay logic IF an image exists */
.block-page-header.block-page-header--has-image {
    overflow: hidden;
    min-height: clamp(400px, 50vh, 600px);
}

.block-page-header.block-page-header--has-image .block-page-header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    max-width: none;
}

.block-page-header.block-page-header--has-image .block-page-header__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Darkening Scrim (Only when image is present) */
.block-page-header.block-page-header--has-image .block-page-header__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000000; /* Fallback black */
    background-color: inherit; /* Use selected BG color from block settings */
    opacity: 0.55;
}

/* 3. Ensure content is always above the image */
.block-page-header.block-page-header--has-image .page-header__inner {
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 767px) {
    .block-page-header.has-background.alignfull {
        padding: 64px 0;
    }

    .block-page-header.has-background.alignfull.block-page-header--has-image {
        padding: 80px 0;
    }    
}

@media only screen and (min-width: 768px) {
    .block-page-header.has-background.alignfull {
        padding: 80px 0;
    }

    .block-page-header.has-background.alignfull.block-page-header--has-image {
        padding: 120px 0;
    }    
}