.card-container { container: card-container / inline-size; 
    .wpb-card { height: 100%; }
}

.wpb-card {
    .wpb-card__header--ratio { position: relative; z-index: 1;
        &::before { content: ''; display: block; width: 100%; padding-top: 56.25%; }
        > img { transition: transform var(--ts-35) var(--cb--smooth); position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
    }

    .card-label { display: block; width: 100%; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .1em; }

    .card-btn__icon { display: flex; align-items: center; gap: .8rem; }

    .wpb-card__avatar { display: grid; grid-template-columns: 1fr 7.6rem; align-items: center; 
        .wpb-card__avatar-image { width: 7.6rem; height: 7.6rem; padding: .6rem; border-radius: 50%; outline: 1px solid var(--clr-dark-20); outline-offset: -1px;
            img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        }
    }

    /* Card variations */
    &.wpb-card--review { position: relative;
        .google-icon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background-color: #fff; position: absolute; top: var(--p); right: var(--p); }  
        .review-name { text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1; font-weight: 600; letter-spacing: 1px; margin-bottom: 1.4rem; display: block; }
        .review-title { font-size: clamp(1.6rem, 2vw, 2.8rem); line-height: 1.2; font-weight: 600; margin-bottom: 1.2rem; padding-right: 4rem; display: block; }
        .review-description { font-size: clamp(1.3rem, 2vw, 1.6rem); }
    }

    &.wpb-card--review-v2 {  
        .wpb-card__rating{ position: absolute; top: clamp(1.5rem, 1.75vw, 2rem); right: clamp(1.5rem, 1.75vw, 2rem); display: flex; align-items: center; gap: 1rem; }

        .google-icon{ display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; }
        .wpb-stars{ height: 1rem; width: 6rem; min-width: 6rem; }
        .wpb-user{ --size: 4rem; --title-fs: 1.6rem; --text-fs: 1.4rem; margin-bottom: 1.6rem; }
        .card-quote{ --excerpt-line-clamp: 4; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
    }

    &.wpb-card--article-small {
        .wpb-card__header img { --h: 20rem; max-height: var(--h); object-fit: cover; transition: transform var(--ts-25) var(--cb--smooth); }
        .wpb-author { padding: .367rem; margin-left: auto; margin-top: -.5rem; margin-right: -.5rem; 
            > :not(.image){ display: none; }
        }
        &:hover .wpb-card__header img { transform: scale(1.05); }
    }

    &.wpb-card--gform { line-height: 1.2; 
        .card-label { margin-bottom: 1.2rem; font-weight: 500; }
        .card-title { display: block; font-size: clamp(2rem, 4vw, 2.4rem); font-weight: 600; margin-bottom: 1.4rem; }
        .card-description { font-size: 1.4rem; margin-bottom: 2.4rem; }
        .small-text { display: block; text-align: center; margin-top: 2.4rem; opacity: .75; max-width: 42.7rem; margin-inline: auto; }
    }

    &.wpb-card--contact {
        .wpb-card__header .btn { position: absolute; bottom: 2rem; left: 2rem; }

        .contact-links {
            .item {text-decoration: none; display: flex; align-items: center; justify-content: space-between; padding: 2rem 0;
                h3 { color: #fff; display: flex; align-items: center; column-gap: 1rem; }
                p { color: #fff; line-height: 1.1; margin-top: .6rem; font-size: 1.4rem; }
                &:first-child {padding-top: 0;}
                &:last-child {padding-bottom: 0;}
                + .item {border-top: 1px solid rgba(255, 255, 255, .2);}
                .icon {display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); width: 4.4rem; min-width: 4.4rem; height: 4.4rem; transition: var(--ts-35) background-color var(--cb--smooth); overflow: hidden;
                    i { font-size: 1.6rem; transition: var(--ts-35) color var(--cb--smooth);}
                }
                &:hover .icon { background-color: #fff; border-color: #fff;
                    i { animation: var(--animation-switchback-x); color: var(--clr-primary); }
                }
            }
        }
    }

    &.wpb-card--newsletter { position: relative; overflow: clip; 
        form {line-height: 0; position: relative;}
        h3 { margin-bottom: 1rem; }
        .form-privacy-notice { font-size: 1.2rem; line-height: 1.3; margin-top: 2rem; color: rgba(255,255,255,.75);
            a { color: inherit; } 
        }
        .gform_wrapper {
            form {margin-top: 1.8rem;
                .gfield--input-type-email input {background-color: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; min-height: 5.6rem !important; 
                    &::placeholder { color: rgba(255, 255, 255, .75); }
                }

                .btn.btn--gform { --clr: #fff; --bg-clr: transparent; --hover-clr: #FFFF; --hover-bg-clr: transparent; --fs: 1.6rem; position: absolute; right: 0; top: 0; min-height: 5.6rem; width: fit-content; padding-right: 2.4rem;
                    i { color: #fff; }
                }
            }
            .gform_validation_errors {margin-top: 1.2rem; border-radius: .8rem;}
            .gform_confirmation_message {margin-top: 1.2rem; border-radius: .8rem; font-size: 1.4rem; font-weight: 500; background-color: var(--clr-primary); color: #fff; padding: 1.6rem; line-height: 1;}
            .gform_footer {margin-top: 0;}
        }
        &.wux-x::after { --size: 52.3rem; position: absolute; top: -8.9rem; right: -11.5rem; pointer-events: none; }
        &.wpb-bg-clr--groen {
            .gform_wrapper form .btn.btn--gform i { color: var(--clr-primary); }
        }
    }

    &.wpb-card--article {
        .wpb-card__header img {object-fit: cover; transition: transform var(--ts-35) var(--cb--smooth); }
        .wpb-card__body {
            .uppertitle {margin-bottom: 1rem; display: flex; flex-wrap: wrap; }
            .card-title { margin-bottom: 0.6rem; --excerpt-line-clamp: 3; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
            .excerpt {font-size: clamp(1.2rem, 2vw, 1.6rem); --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
        }
        .wpb-card__footer {display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            .icon {min-width: 4.4rem; height: 4.4rem; border-radius: 50%; background-color: var(--clr-dark-15); display: flex; align-items: center; justify-content: center; transition: var(--ts-15) var(--cb--smooth);
                .wpb-icon { --w: 1.4rem; --h: 1.4rem; }
            }
            .author {display: flex; align-items: center;}
        }

        &:not(.is-featured) .wpb-card__header img {height: 180px!important; object-fit: cover; transition: transform var(--ts-35) var(--cb--smooth); }
        &.is-featured .wpb-card__body .excerpt { --excerpt-line-clamp: 10; }
        &:hover {
            .wpb-card__header img { transform: scale(1.05); }
            .wpb-card__footer .icon { background-color: var(--clr-primary);
                .wpb-icon { --clr: #fff; }
            }
        }
    }

    &.wpb-card--article-small { 
        .card-title { transition: color var(--ts-15) ease; }
        &:hover .card-title { color: var(--clr-primary); }
    }

    &.wpb-card--partner-newsletter { background: transparent; display: flex; flex-direction: row; gap: 1.6rem; box-shadow: none; --p: 0; height: fit-content;
        .wpb-card__header {max-height: 9rem; width: 9rem; min-width: 9rem; border-radius: var(--br); overflow: hidden; aspect-ratio: 1 / 1;
            img { object-position: center; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-25) var(--cb--smooth); transform: translateZ(0); will-change: transform; backface-visibility: hidden;}
        }
        .wpb-card__body .card-title {font-size: 2rem; line-height: 1.2; margin: .8rem 0; transition: color var(--ts-25) var(--cb--smooth); }
        &:hover {
            .wpb-card__header img { transform: scale(1.03); }
            .wpb-card__body .card-title { color: var(--clr-primary); }
        }
    }

    &.wpb-card--member { --p: 2rem; --bg: #fff; 
        .wpb-image--action-photo { width: 100%; position: relative;
            .placeholder-image { height: 8rem; }
            img { border-radius: var(--br) var(--br) 0 0; max-height: 8rem; object-fit: cover; }
            &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #0002; }
        }
        .card-title { --fs: clamp(1.8rem, 3vw, 2rem); --lh: 1.2; padding-top: 1.5rem; margin-bottom: 0 !important; }
        .wpb-card__body p { font-size: 1.4rem; }
        .profile-picture { --size: 6.4rem; --mt: -5.5rem; --border-width: .2rem;
            img{ --border-width: .2rem; }
        } 
        .icon { min-width: 3.6rem; height: 3.6rem; border-radius: 50%; background-color: var(--clr-dark-15); display: flex; align-items: center; justify-content: center; transition: background var(--ts-25) ease-in-out; 
            .wpb-icon { --w: 1.2rem; --h: 1.2rem; }
        }
        &:hover {
            .icon { background-color: var(--clr-primary); 
                .wpb-icon { --clr: #fff; }
            }
        }
    }

    &.wpb-card--cta { padding: 2.8rem 3.2rem; margin-bottom: 4rem; overflow: hidden; 
        .wpb-text p{ margin-top: 1.4rem !important; }
        h4{ --fs: clamp(2rem, 3vw, 2.4rem); }
        .btn{ margin-top: 2rem; }
    }

    &.wpb-card--vacancy {
        .card-title { transition: color var(--ts-25) ease-in-out; }
        .wpb-text{ margin-top: 1.2rem; 
            > * + *:not(.btn .blockquote, .modal){ margin-top: 1.2rem; }
        }

        .wpb-card__footer { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: 2rem; 
            .card-btn--icon { gap: 1.9rem; }
        }

        .icon { min-width: 4.9rem; height: 4.9rem; border-radius: 50%; background-color: var(--clr-dark-15); display: flex; align-items: center; justify-content: center; transition: background var(--ts-25) ease-in-out; 
            .wpb-icon { --w: 1.4rem; --h: 1.4rem; }
        }

        &:hover {
            .icon{ background-color: var(--clr-primary); 
                img{ filter: brightness(0) invert(1); }
                .wpb-icon { --clr: #fff; }
            }
        }
    }

    &.wpb-card--vacancy-detail {
        .wpb-card__header{ display: grid; gap: 1.4rem; }

        .card-label { margin-bottom: 1.4rem; }
        .card-title { display: block; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; margin-bottom: 3.2rem; line-height: 1.2; }

        .wpb-author {
            .image img { border: 1px solid #ffffff59; width: 7.6rem; height: 7.6rem; padding: .6rem; }
            text {
                strong { font-size: clamp(1.8rem, 2vw, 2.2rem); }
                span { font-size: clamp(1.4rem, 2vw, 1.6rem); }
            }
        }

        .wpb-offer { display: grid; row-gap: 1.2rem; padding-bottom: 4.7rem; }

        .wpb-card__footer .btn{ width: 100%; }

        &.wpb-bg-clr--primary {
            *:not(.btn, .btn *){ color: #fff; }
            .btn.btn--wit{ --clr: var(--clr-primary); }
        }
    }

    &.card--single-tip { padding: 2.5rem; display: flex; flex-direction: column; gap: 2.4rem;
        .wpb-card__header, .wpb-card__body, .wpb-card__footer {padding: 0;}
    }

    &.wpb-card--usp { --bg-clr: var(--clr-light); --br: 1.4rem; --p: 2.4rem; background-color: var(--bg-clr);
        .card-icon{ --size: 3.7rem; --br: .4rem; --bg-clr: #FFFF; --icon-clr: var(--clr-text); background-color: var(--bg-clr); border-radius: var(--br); width: var(--size); height: var(--size); display: inline-grid; place-items: center;        
            .wpb-icon { --clr: var(--icon-clr); }
        }
        .card-text{ font-size: clamp(1.4rem, 1.6vw, 1.8rem); }

        .wpb-card__header{ display: flex; align-items: center; gap: 1.2rem; padding: var(--p); padding-bottom: 0; 
            .card-title{ display: block; font-size: clamp(1.6rem, 1.8vw, 2.2rem); font-weight: 500; line-height: 1.2; }
        }
        .wpb-card__body{ padding: clamp(1.6rem, 2vw, 2.4rem) var(--p) var(--p) var(--p); }
    }

    &.wpb-card--location {
        .wpb-card__header .badge { position: absolute; top: 3.2rem; left: 3.2rem; }
        .card-title { font-size: clamp(2rem, 2.5vw, 2.2rem); font-weight: 600; }
        .card-location { display: flex; align-items: center; column-gap: .8rem; font-size: 1.6rem; }
        .card-location i { --clr: var(--clr-primary); --w: 1.4rem; --h: 1.4rem; }
        .card-description { font-size: 1.4rem; }
        .wpb-card__footer { display: grid; 
            a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        }
        &:hover {
            .wpb-card__header img { transform: scale(1.03); }
        }
    }

    /* Background variations */
    &.wpb-bg-clr--primary {
        &.wux-x-background::after { --size: 47rem; --bg: rgba(255,255,255,.35); --src: url('/app/themes/wux/assets/img/shapes/wux_x_outline.svg'); content: ''; position: absolute; top: -8.9rem; right: -11.5rem; display: block; width: var(--size); height: calc(var(--size) * 1.06); -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; background-color: var(--bg); }
    }

    &.wpb-bg-clr--groen { color: #fff; 
        .wpb-card__avatar .wpb-card__avatar-image { outline: 1px solid rgba(255,255,255,.5); }
        .btn.btn--wit { --clr-text: var(--clr-dark); }
    }

    &.wpb-card--dark-90 { background-color: var(--clr-dark-90); color: #fff; }
}

@container card-container (min-width: 30rem) {
    .wpb-card {
        &.wpb-card--usp { --p: 3.2rem; }
    }
}

@media (min-width: 576px) {
    .wpb-card {
        &.wpb-card--vacancy .wpb-card__footer { flex-direction: row; align-items: center; }
    }
}

@media (min-width: 768px) {
    .wpb-card {
        .card-label { font-size: 1.4rem; }

        &.wpb-card--gform card-description { font-size: 1.6rem; }

        &.wpb-card--contact .contact-links .item p {font-size: 1.6rem;}

        &.wpb-card--article {
            &:not(.is-featured) .wpb-card__header img {height: 25rem!important;}

            &.is-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                .wpb-card__header { grid-row: span 2; border-radius: var(--br) 0 0 var(--br); position: relative;
                    img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; max-height: 100%; object-fit: cover; border-radius: var(--br) 0 0 var(--br); } 
                }  
                .wpb-card__body {
                    .uppertitle {margin-bottom: 1.2rem;}
                    .card-title { margin-bottom: 1.2rem; }
                }
                .wpb-card__footer .icon {min-width: 4.8rem; height: 4.8rem;
                    img {width: 1.6rem;}
                }
            }
        }
    } 
}

@media (min-width: 992px) {
    .wpb-card {

        &.wpb-card--review { --p: 3.2rem; 
            .review-title {margin-bottom: 1.8rem;}
            .review-name {margin-bottom: 1.6rem;}
            .google-icon {width: 3.4rem; height: 3.4rem; }
        }

        &.wpb-card--article-small .wpb-card__body{ --p: 2.8rem 2.2rem; }

        &.wpb-card--newsletter { --p: 2.8rem 3.2rem; }

        &.wpb-card--article {
            &.is-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 52.9rem); 
                .wpb-card__body { padding-bottom: 6.4rem; }
            }
        }

        &.wpb-card--member img { --br: 0; --mh: 40rem; }
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) { 
    .wpb-card {
        &.wpb-card--partner-newsletter {flex-direction: column;
            .wpb-card__header { width: 100%; max-height: 12rem;}
        } 
    }
}

@media (min-width: 1200px) {
    .wpb-card {

        &.wpb-card--article-small{ flex-direction: row; overflow: hidden;
            .wpb-card__header{ --w: 16rem; min-width: var(--w); max-width: var(--w); border-radius: 0; 
                img { --h: 100%; border-radius: 0; }
            }
        }

        &.wpb-card--contact .wpb-card__header .btn { bottom: 4rem; left: 4rem; }
    }
}

@media (min-width: 1600px) {
    .wpb-carousel:not(.is-compact) .wpb-card.wpb-card--article:not(.is-featured) .wpb-card__header img {height: 350px!important;}
}