/*** ---------- Aspect ratio ---------- ***/
.wpb-ratio {
    .wpb-ratio__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
}

/*** ---------- Background assets ---------- ***/
.wpb-asset { position: absolute; --src: ; --asset-clr: var(--clr-porcelain); --w: 20rem; --ratio: 100%; display: inline-flex; background: transparent; 
    &::before { content: ''; display: block; padding-top: var(--ratio); width: var(--w); min-width: var(--w); }
    &::after { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; background: var(--asset-clr); transition: background var(--ts-duration) var(--ts-function); mask-composite: intersect; -webkit-mask-composite: source-in; }

    /* Variations */
    &.wpb-asset--circle-outline { --w: 120rem; --src: url('/app/themes/wuxnl-theme/assets/img/circle_outline.svg'); }
    &.wpb-asset--circle-half { --w: 93rem; --ratio: 51.5%; --src: url('/app/themes/wuxnl-theme/assets/img/circle_half.svg'); }
    &.wpb-asset--circle-half-top { --w: 93rem; --ratio: 51.5%; --src: url('/app/themes/wuxnl-theme/assets/img/circle_half_top.svg'); 
        &.bg-clr--gradient-1 { --src: linear-gradient(to bottom, black 60%, transparent 100%), url('/app/themes/wuxnl-theme/assets/img/circle_half_top.svg'); }
    }

    &.bg-clr--gradient-1 { --asset-clr: linear-gradient(270deg, #4698CB -2.28%, #3ACFBD 61.85%); } /* gradient--lung-health */
    &.bg-clr--gradient-2 {  } /* gradient--maternal-health */
}


/*** ---------- Typography ---------- ***/
.wpb-text {
    /* p {text-wrap: balance;} */
    p:has(+ :is(h1, h2, h3)) em { font-size: 1.6rem; font-style: normal; font-weight: 700; text-transform: uppercase; }
    p:has(em) + :is(h1, h2, h3) { --mt: 1rem; }
}


/*** ---------- Breadcrumb ---------- ***/
.wpb-breadcrumbs { overflow: hidden; text-overflow: ellipsis;
    :is(span, a) { white-space: nowrap; display: flex; column-gap: .8rem; align-items: center; color: #fff; text-decoration: none; font-size: 1.4rem!important; line-height: 1.2; font-weight: 600!important; }

    .fa-house-blank { font-size: 1.3rem; margin-top: -.1em; }
    .fa-chevron-right { font-size: 1rem; margin-top: -.3em; }

    .breadcrumb_last { font-weight: 500!important; }
}

/*** ---------- Headers ---------- ***/
.wpb-header {

}

@media (min-width: 768px) {
    .wpb-header {
        .wpb-header__info { --gc: 4; }
    }
}

@media (min-width: 992px) {
    .wpb-header {
        &.wpb-header--subpage, &.wpb-header--resources { padding-bottom: 6.4rem; }
    }
}

@media (min-width: 1200px) {
    .wpb-header {
        &.wpb-header--subpage { padding-bottom: 8rem; }

        &.wpb-header--resources { padding-bottom: 8rem;
            .wpb-header__body .container { grid-template-columns: auto 1fr; column-gap: 6.4rem; }
        }
    }
}

@media (min-width: 1400px) {
    .wpb-header {
        &.wpb-header--resources .wpb-header__body .container { column-gap: 12.8rem; }
    }
}

/*** ---------- Block: Search Resources ---------- ***/
.wpb-block--search-resources { --input-mh: 5.5rem; --input-br: .6rem;
    strong { font-size: 2rem; display: flex; align-items: center; column-gap: .8rem; margin-bottom: 1rem;
        i { font-size: 1.8rem; }
    }
    [type="search"] { font-size: 1.6rem;  border: none!important; background-color: var(--clr-blue-100); 
        &::placeholder { color: var(--clr-blue-600); } 
    }

    .search-form__results { display: grid; grid-template-columns: minmax(0, 1fr);
        .wux-search-results__group { margin-top: 2rem; background: var(--clr-blue-100); padding: 2rem; border-radius: .4rem;
            h3 { font-weight: 600; margin-bottom: 1em; }
        }
        .search-result { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; 
            .btn { min-height: 3rem;

                &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
            }
        }
    }
}


/*** ---------- Block: Posts ---------- ***/
.wpb-block--posts { --offset: calc((100vw - (var(--container-width) - 2.6rem))); --bg-clr: #fff; --gradient-offset: calc(var(--offset) / 2); overflow: hidden;
    .wpb-section__header { margin-bottom: 2.4rem;
        .row.row--full {width: 100%; display: flex; justify-content: space-between; margin: 0; column-gap: 2rem;
            .col { padding: 0; }
        }
        .wpb-text__title { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; }
    }
    .wpb-section__body { position: relative;
        &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;
            background: linear-gradient(90deg,var(--bg-clr) 0%, transparent var(--gradient-offset), transparent calc(100% - var(--gradient-offset)), var(--bg-clr) 100%);
        }

    }
    .swiper { overflow: visible;
        .wpb-card { outline: .2rem solid transparent; outline-offset: .4rem; transition: outline var(--ts-duration) var(--ts-function); }
        &.swiper--webinars .swiper-slide-active .wpb-card { outline: .2rem solid var(--clr-border); }
    }
    .wpb-whitepapers { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(0, 1fr)); gap: 1.2rem 1.6rem; }

    &:not(.wpb-block--posts--with-text) .wpb-section__header h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }

    &.wpb-bg-clr--light { --bg-clr: var(--clr-light);
        .wpb-section__body {
            .card-container .wpb-card.wpb-card--references {background: white; border: none;}
        }
    }
}

@media (min-width: 576px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--sm) - 2.6rem))); }
}

@media (min-width: 768px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--md) - 2.6rem))); 
        .wpb-whitepapers { --gc: 2; }
    }
}

@media (min-width: 992px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--lg) - 2.6rem))); }
}

@media (min-width: 1200px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--xl) - 2.6rem)));
        .wpb-whitepapers { --gc: 3; }
    }
}

@media (min-width: 1400px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--xxl) - 2.6rem))); }
}

@media (min-width: 1600px) {
    .wpb-block--posts { --offset: calc((100vw - (var(--container-width--xxxl) - 2.6rem))); }
}