/**
 * Start page hero: FAL crop, no JS.
 * Image stays in normal flow; search form sits below with a light overlap
 * so most of the image remains visible (esp. on small viewports).
 */

div.start-bg {
    position: relative;
    overflow: visible;
    background-image: none !important;
    background-color: transparent !important;
    background-attachment: scroll;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

div.start-bg.filtered {
    margin-bottom: 0 !important;
}

div.start-bg.start-bg--has-media {
    display: flex;
    flex-direction: column;
}

.start-bg__media {
    position: relative;
    z-index: 0;
    margin: 0;
    width: 100%;
    flex: 0 0 auto;
    line-height: 0;
}

.start-bg__media picture {
    display: block;
    width: 100%;
}

.start-bg__img,
.start-bg__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    vertical-align: top;
}

.start-bg__content {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

/* Same overlap on all viewports: status legend sits on the hero image (desktop look) */
div.start-bg.start-bg--has-media .start-bg__content {
    margin-top: -6.5rem;
}

div.start-bg.start-bg--has-media .start-bg__content .filterform {
    margin-bottom: 0;
}

div.start-bg:not(.start-bg--has-media),
div.start-bg.start-bg--empty:not(.start-bg--has-media) {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
}

div.start-bg.start-bg--empty.start-bg--has-media {
    height: auto !important;
}

div.start-bg + .container-fluid {
    padding-top: 0.5rem;
}

@media screen and (min-width: 992px) {
    div.start-bg:not(.start-bg--has-media),
    div.start-bg.start-bg--empty:not(.start-bg--has-media) {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    div.start-bg + .container-fluid {
        padding-top: 0.75rem;
    }
}