/* === Page Banner Toggle === */

body.hide-page-banner .page-banner {
    display: none !important;
}

/* === Page Banner: Mobile ===
   Constrain the banner to a compact fixed-height frame so the stacked block
   columns can no longer stretch it to portrait proportions on small screens.
   The wide featured image becomes a full-bleed cover layer with the focal
   point biased to the left (20%), and the title panel is pinned over it.
   Applied below 782px because that is where core stacks .wp-block-columns. */

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

    /* The banner is the positioning context: the featured image and the
       title panel both resolve against it so they span the full 300px frame.
       The columns must stay unpositioned — if they were a positioned
       ancestor, the absolute image layer would be sized to the inset column
       box instead of the banner and leave gaps on the sides. */
    body.page.page-template-default .page-banner {
        position: relative;
        height: 300px;
        min-height: 300px;
        overflow: hidden;
    }

    body.page.page-template-default .page-banner > .wp-block-columns {
        position: static;
        height: 300px;
        min-height: 300px;
        margin: 0;
        padding: 0 !important;
    }

    /* Featured image becomes a full-bleed cover layer */
    body.page.page-template-default .page-banner .page__featured-image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        margin: 0;
        max-width: none !important;
    }

    body.page.page-template-default .page-banner .page__featured-image figure {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        margin: 0 !important;
        max-width: none !important;
    }

    body.page.page-template-default .page-banner .page__featured-image figure img {
        width: 100% !important;
        max-width: none !important;
        height: 300px !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 20% center !important;
    }

    /* Keep only the title column; hide the decorative spacer + empty column */
    body.page.page-template-default .page-banner .wp-block-column:not(:has(.wp-block-post-title)) {
        display: none;
    }

    /* Title panel pinned over the image so it stays readable */
    body.page.page-template-default .page-banner .wp-block-column:has(.wp-block-post-title) {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 20px 24px !important;
        background: rgba(235, 243, 255, 0.75) !important;
        border-radius: 0 !important;
        z-index: 1;
    }

    body.page.page-template-default .page-banner .wp-block-column:has(.wp-block-post-title) > .wp-block-group {
        width: 100%;
    }
}