/** header-image **/

/*
 * Page header banner, from the `header_image` section block.
 *
 * Not a template module — the Garaze template has no page banner, its inner
 * pages open straight onto the breadcrumb bar. Written here, alongside the
 * template's own module sheets, rather than in the Vite override sheet, so it
 * is live on upload with no build step.
 */

.header-image {
    position: relative;
    margin-top: 24px;
}

.header-image .header-image__frame {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    /* The figure is otherwise a line box, and leaves a few px under the image. */
    line-height: 0;
}

/*
 * Width-led with a height ceiling: a wide banner keeps its own proportions,
 * and anything taller than the ceiling is cropped to it rather than pushing the
 * page content off the first screen. `cover` crops from the centre, so a
 * portrait upload comes out as a band through its middle instead of squashed.
 */
.header-image .header-image__frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
}


/** rtl-css **/

/* Nothing: the banner is a single full-width image with no horizontal offsets. */


/** responsive-css **/

@media only screen and (max-width: 991px) {
    .header-image .header-image__frame img {
        max-height: 260px;
    }
}

@media only screen and (max-width: 767px) {
    .header-image {
        margin-top: 16px;
    }

    .header-image .header-image__frame img {
        max-height: 180px;
    }
}