/* Shared media wrapper for the video banners used by the Why Us pages. */
.banner > .yofoBannerMedia {
    position: absolute;
    top: 1.54rem;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 10.8rem;
    overflow: hidden;
    background: #000;
}

.banner > .yofoBannerMedia > video,
.banner > .yofoBannerMedia > .bannerVideoEmbed,
.banner > .yofoBannerMedia > .banner_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner > .yofoBannerMedia > .bannerVideoEmbed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0 !important;
}

.banner > .yofoBannerMedia > .play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

@media (max-width: 750px) {
    :root {
        --yofo-mobile-banner-copy: #eef1ff;
        --yofo-mobile-banner-label-height: 42px;
    }

    /* Home carousel */
    .hero {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: 0;
        margin-top: 64px;
        padding-top: 0;
        background: var(--yofo-navy);
    }

    .hero .swiper-wrapper,
    .hero .heroSlide {
        height: auto;
    }

    .hero .heroSlide {
        display: flex;
        flex-direction: column;
        background: var(--yofo-mobile-banner-copy);
    }

    .hero .heroSlide > img {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        flex: 0 0 min(600px, calc(100svh - 64px));
        width: 100%;
        height: min(600px, calc(100svh - 64px));
        min-height: 500px;
        object-fit: cover;
    }

    .heroSectionLabel {
        position: relative;
        top: auto;
        left: auto;
        order: -1;
        box-sizing: border-box;
        width: 100%;
        min-height: var(--yofo-mobile-banner-label-height);
        height: auto;
        padding: 12px 16px 10px;
        color: #fff;
        background: var(--yofo-navy);
        font-size: 14px;
        line-height: 1.3;
    }

    .heroSectionLabel::after {
        top: auto;
        bottom: 6px;
        left: 16px;
        width: 46px;
        height: 2px;
    }

    .hero .heroMain,
    .hero .heroAltText {
        position: static;
        order: 2;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        max-width: none;
        min-height: 132px;
        padding: 16px 16px 48px;
        color: var(--yofo-navy);
        background: var(--yofo-mobile-banner-copy);
        text-align: left;
    }

    .hero .heroMain .text {
        position: static;
    }

    .hero .heroMain .text h1,
    .hero .heroAltText h2,
    .hero .heroAltText p {
        margin: 0;
        color: var(--yofo-navy);
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.2;
        text-shadow: none;
    }

    .hero .heroAltTextLeft h2 {
        margin-bottom: 8px;
    }

    .hero .arrowLink {
        margin: 14px 0 0;
        color: var(--yofo-navy);
        font-size: 13px;
    }

    .hero .heroPagination {
        bottom: 18px !important;
    }

    .hero .heroPagination .swiper-pagination-bullet {
        border-color: var(--yofo-navy);
    }

    /* Image banners retain their current media heights; only the copy moves. */
    .piroxHero,
    .hiroxisHero,
    .mobileSolutionHero,
    .aiHero,
    .newsHero,
    .eventsHero,
    .insightsHero,
    .contactHero,
    .banner {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: 0;
        padding-top: 0;
        overflow: hidden;
        color: var(--yofo-navy);
        background: var(--yofo-navy);
    }

    .piroxHeroMain,
    .aiHeroContent,
    .newsHeroInner,
    .eventsHeroInner,
    .insightsHeroInner,
    .contactHeroInner,
    .banner .banner-content {
        display: contents !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .piroxHero > img,
    .hiroxisHero > img,
    .mobileSolutionHero > img {
        position: relative;
        inset: auto;
        order: 2;
        flex: 0 0 600px;
        width: 100%;
        height: 600px !important;
        object-fit: cover;
    }

    .aiHero > img,
    .newsHeroIndex > img,
    .eventsHeroIndex > img,
    .insightsHeroIndex > img,
    .contactHero > img {
        position: relative;
        inset: auto;
        order: 2;
        flex: 0 0 520px;
        width: 100%;
        height: 520px !important;
        object-fit: cover;
    }

    .newsHeroDetail > img,
    .eventsHeroDetail > img,
    .insightsHeroDetail > img {
        position: relative;
        inset: auto;
        order: 2;
        flex: 0 0 380px;
        width: 100%;
        height: 380px !important;
        object-fit: cover;
    }

    .piroxHeroKicker,
    .hiroxisHeroLabel,
    .mobileSolutionHeroLabel,
    .aiHeroLabel,
    .newsHeroLabel,
    .eventsHeroLabel,
    .insightsHeroLabel,
    .contactHeroLabel,
    .banner .banner-content .banner_class {
        position: relative;
        inset: auto;
        z-index: 2;
        order: 1;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: var(--yofo-mobile-banner-label-height);
        margin: 0;
        padding: 12px 16px 10px;
        color: #fff;
        background: var(--yofo-navy);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-shadow: none;
    }

    .piroxHeroKicker::after,
    .hiroxisHeroLabel::after,
    .mobileSolutionHeroLabel::after,
    .aiHeroLabel::after,
    .newsHeroLabel::after,
    .eventsHeroLabel::after,
    .insightsHeroLabel::after,
    .contactHeroLabel::after,
    .banner .banner-content .banner_class::before {
        content: "";
        position: absolute;
        right: auto;
        bottom: 6px;
        left: 16px;
        display: block;
        width: 46px;
        height: 2px;
        margin: 0;
        background: var(--yofo-orange);
    }

    .piroxHero h1,
    .hiroxisHeroCopy,
    .mobileSolutionHero > h1,
    .aiHero h1,
    .newsHeroIndex h1,
    .eventsHeroIndex h1,
    .insightsHeroIndex h1,
    .insightsHeroIndex .insightsHeroInner > p,
    .contactHeroCopy,
    .banner .banner-content .banner_title {
        position: static;
        order: 3;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 16px 20px 20px;
        color: var(--yofo-navy);
        background: var(--yofo-mobile-banner-copy);
        font-size: clamp(24px, 7vw, 30px);
        font-weight: 600;
        line-height: 1.2;
        text-align: left;
        text-shadow: none;
        transform: none;
    }

    .piroxHero h1,
    .hiroxisHeroCopy,
    .hiroxisHeroCopy *,
    .mobileSolutionHero > h1,
    .aiHero h1,
    .newsHeroIndex h1,
    .eventsHeroIndex h1,
    .insightsHeroIndex h1,
    .insightsHeroIndex .insightsHeroInner > p,
    .contactHeroCopy,
    .contactHeroCopy *,
    .banner .banner-content .banner_title {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .piroxHero h1[data-aos],
    .piroxHeroKicker[data-aos] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .hiroxisHeroCopy p,
    .hiroxisHeroCopy h1,
    .contactHeroCopy h1,
    .contactHeroCopy p {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        color: var(--yofo-navy);
        font-size: inherit !important;
        line-height: inherit;
        text-shadow: none;
    }

    .hiroxisHeroCopy p + h1,
    .hiroxisHeroCopy p + p,
    .contactHeroCopy p {
        margin-top: 6px;
    }

    .insightsHeroIndex h1 {
        padding-bottom: 6px;
    }

    .insightsHeroIndex .insightsHeroInner > p,
    .contactHeroCopy p {
        min-height: 0;
        padding-top: 0;
        font-family: 'Inter';
        font-size: 15px !important;
        font-weight: 400;
        line-height: 1.4;
    }

    .newsHeroIndex .newsButton,
    .eventsHeroIndex .eventsButton {
        position: relative;
        z-index: 2;
        order: 4;
        align-self: flex-start;
        margin: -8px 20px 20px;
    }

    .newsHeroIndex,
    .eventsHeroIndex {
        padding-bottom: 0;
        background: var(--yofo-mobile-banner-copy);
    }

    .aiHero::after,
    .mobileSolutionHero::after,
    .newsHeroIndex::after,
    .eventsHeroIndex::after,
    .insightsHeroIndex::after,
    .contactHero::after {
        display: none !important;
    }

    /* Why Us video height follows the actual media ratio. */
    .banner {
        margin-top: 64px;
        overflow: visible;
    }

    .banner > .yofoBannerMedia {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    .banner > .yofoBannerMedia > video,
    .banner > .yofoBannerMedia > .banner_img {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .banner > .yofoBannerMedia > .bannerVideoEmbed {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .banner > .yofoBannerMedia > .bannerVideoEmbed iframe {
        position: absolute;
        inset: 0;
    }

    .banner > .yofoBannerMedia > .play {
        width: 58px;
        height: 58px;
    }

    .banner.yofoMobileVideoBannerEnabled > .yofoBannerMedia > video,
    .banner.yofoMobileVideoBannerEnabled > .yofoBannerMedia > .bannerVideoEmbed,
    .banner.yofoMobileVideoBannerEnabled > .yofoBannerMedia > .play {
        display: none !important;
    }
}