/** top-banner **/

/*
 * The site-wide banner strip that sits above the header, from the
 * `home_banner_image` setting.
 *
 * Not a template module — the Garaze template has nothing above its header.
 * 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.
 */

.top-banner {
    position: relative;
    /* Edge to edge: the header below it is full-bleed too, and a banner inset
       inside a container reads as page content rather than as a strip. */
    display: block;
    width: 100%;
    /* Shows only in the letterboxing of an image narrower than the viewport. */
    background: var(--secondary-color, #017da2);
    /* The div is otherwise a line box and leaves a few px under the image. */
    line-height: 0;
}

/*
 * Width-led with a height ceiling, matching the page header banner: a wide
 * strip keeps its own proportions, and anything taller is cropped from the
 * centre rather than pushing the header off the first screen.
 */
.top-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: cover;
    object-position: center;
}


/** rtl-css **/

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


/** responsive-css **/

@media only screen and (max-width: 991px) {
    .top-banner img {
        max-height: 110px;
    }
}

@media only screen and (max-width: 767px) {
    .top-banner img {
        max-height: 80px;
    }
}