/* ==========================
        Banner (home hero)
   ==========================
   Layered beneath the .homepage-header ::before overlay (z-index 1) and ::after
   gradient (z-index 2) declared in header.css, so those effects apply to image,
   slider and video backgrounds alike. */

.banner-video,
.banner-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

    .banner-slide.is-active {
        opacity: 1;
    }

/* Content and search bar sit above both overlays.
   Note: only z-index is set here. The search bar's own `position: absolute`
   (searchbar.css) takes it out of the flex flow so .header-content stays centred;
   overriding position here would drop it back into the flow and push the title aside. */
.banner .header-content {
    position: relative;
    z-index: 3;
}

.banner .row-bottom {
    z-index: 3;
}

/* Below the desktop breakpoint the fixed-width search bar (950px) and the large hero
   type overflow the capped banner, so scale both down fluidly.
   The bound covers tablets (e.g. iPad at 1024px wide) as well, since the 950px search
   bar plus gutters does not fit there either. */
@media (max-width: 1199.98px) {
    .banner .header-title {
        font-size: clamp(1.25rem, 5.5vw, 2rem);
        margin-bottom: 8px;
    }

    .banner .header-subtitle {
        font-size: clamp(0.9rem, 3.2vw, 1.25rem);
    }

    .banner .widget-searchbar {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .banner .search-box {
        padding: 8px;
    }

        .banner .search-box .input-searchbar {
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
            height: 38px;
            font-size: 11pt;
        }

    .banner .select-wrapper {
        width: 110px;
        height: 38px;
    }

        .banner .select-wrapper select {
            height: 38px;
            font-size: 11pt;
            padding-right: 30px;
        }

        .banner .select-wrapper::after {
            width: 32px;
            height: 36px;
            font-size: 12px;
        }

    .banner .btn-search {
        width: 38px;
        height: 38px;
    }

        .banner .btn-search img {
            width: 26px;
            height: 26px;
        }

        .banner .btn-search i,
        .banner .btn-search:hover i {
            font-size: 20px;
        }

    .banner .home-select .select2-container {
        width: 110px !important;
    }

    .banner .searchbar-tabs .nav-item-searchbar {
        width: auto;
        height: auto;
    }

    .banner .searchbar-tabs .nav-link {
        font-size: 10pt;
        padding: 4px 12px;
        margin-right: 6px;
    }
}

/* The hero is capped at 90vh (header*.css). On small and tablet screens that leaves
   little room, and the absolutely positioned search bar (searchbar.css) overlaps the
   centred title, so put it back in the flow and stack the content instead. */
@media (max-width: 1199.98px) {
    .banner {
        flex-direction: column;
        justify-content: flex-start;
    }

        .banner .header-content {
            position: relative;
            top: auto;
            margin-top: auto;
            margin-bottom: auto;
            padding: 0 16px;
            width: 100%;
        }

            .banner .header-content .header-title {
                margin-top: 0;
            }

            .banner .header-content .header-subtitle {
                margin-bottom: 0;
                max-width: 100%;
            }

        .banner .row-bottom {
            position: relative;
            bottom: auto;
            width: 100%;
            margin: 0;
            padding: 0 16px 16px;
            flex-shrink: 0;
        }
}

@media (prefers-reduced-motion: reduce) {
    .banner-slide {
        transition: none;
    }
}