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

.wpb-card { --br: .4rem; --p: 1.6rem; border-radius: var(--br); border: 1px solid var(--clr-secondary); background-color: var(--clr-dark); display: flex; flex-direction: column; position: relative; text-decoration: none; transition-property: background-color, border; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);
    a { text-decoration: none; }
    .wpb-card__header { display: flex; overflow: hidden; 
        img { width: 100%; height: auto; transition: transform var(--ts-25) ease; }

        &.wpb-card__header--ratio { --aspect-ratio: 75%; position: relative;
            &::before { content: ''; display: block; width: 100%; padding-top: var(--aspect-ratio); z-index: 1; }
            &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
            &::before, &::after { transition: opacity var(--ts-duration) var(--ts-function); }
            > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        }
    }

    .card-properties { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: 1.6rem; margin-top: 1.4rem;
        .property { display: flex; align-items: center; gap: .6rem;
            i { color: var(--clr-secondary-60); }
        }
    }

    .wpb-card__body { padding: var(--p); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
    .wpb-card__footer  { padding: var(--p); padding-top: 0; }

    > *:first-child { border-top-left-radius: var(--br); border-top-right-radius: var(--br); 
        img { border-top-left-radius: var(--br); border-top-right-radius: var(--br); } 
    }
    > *:last-child { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }

    .card-title { display: block; font-family: var(--font-primary); font-size: 2rem; font-weight: 400; }
    .card-excerpt { font-size: 1.6rem; line-height: 1.3; font-weight: 300; }
    * + .card-excerpt { margin-top: .5em; }
    .card-author { font-size: 1.4rem; display: flex; align-items: center; gap: .8rem; 
        &::before { content: ''; display: inline-block; width: 1.15rem; height: .2rem; background-color: #fff; }
    }
    * + .card-author { margin-top: 1.6rem; }

    hr { border: none; border-top: 1px solid var(--clr-secondary); transition: border-color var(--ts-duration) var(--ts-function); }

    /* Variations */
    &.wpb-card--vacancy { 
        .wpb-card__header { --aspect-ratio: 57%;
            .wpb-company { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--p); z-index: 2; }

            &::before { background: linear-gradient(0deg, var(--clr-dark) 10%, transparent 60%); }
            &::after { background: linear-gradient(0deg, var(--clr-secondary) 10%, transparent 60%); opacity: 0; }
        }

        .card-title { font-style: italic; font-weight: 700; }

        .wpb-card__footer {
            .btn { width: 100%; margin-top: 1.6rem; }
        }

        &:hover { background-color: var(--clr-secondary);
            hr { border-color: var(--clr-dark); }
            .wpb-card__header {
                &::after { opacity: 1; }
                img { transform: scale(1.1); }
            }
            .wpb-card__footer .btn {
                i { transform: rotate(-45deg); }
            }
        }
    }

    &.wpb-card--article {
        .wpb-card__header { --aspect-ratio: 57%;
            &::before { background: linear-gradient(0deg, var(--clr-dark) 10%, transparent 60%); }
            &::after { background: linear-gradient(0deg, var(--clr-secondary) 10%, transparent 60%); opacity: 0; }
        }

        .wpb-card__footer {
            .btn { width: 100%; margin-top: 1.6rem; }
        }

        &:hover { background-color: var(--clr-secondary);
            hr { border-color: var(--clr-dark); }
            .wpb-card__header {
                &::after { opacity: 1; }
                img { transform: scale(1.1); }
            }
            .wpb-card__footer .btn {
                i { transform: rotate(-45deg); }
            }
        }
    }
    
    &.wpb-card--category { --p: 2.4rem; display: grid; grid-template-columns: 1fr auto; align-items: center;
        .card-title { display: flex; align-items: center; gap: 1rem; font-size: 2.4rem; font-weight: 700; font-style: italic; }
        .wpb-card__footer { padding: var(--p); padding-left: 0;
            i { --size: 3.3rem; width: var(--size); height: var(--size); display: inline-grid; place-items: center; font-size: 1.6rem; border-radius: 50%; background-color: var(--clr-primary); color: #fff; transition-property: background-color, color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-duration); }
        }

        &:hover {
            .wpb-card__footer i { background-color: #fff; color: var(--clr-primary); }
        }
    }

    &.wpb-card--company { --p: 2.4rem; background-color: var(--clr-secondary);
        .wpb-card__header { padding: .7rem var(--p); display: flex; justify-content: space-between; align-items: center; background-color: var(--clr-secondary-120); 
            span { font-size: 1.6rem; font-weight: 300;
                i { font-size: 1.3rem; }
            }
        }  
        .wpb-card__body { padding: 4rem 2.4rem; 
            .wpb-company__logo { position: relative;
                &::before { content: ''; display: block; width: 100%; padding-top: 20%; }
                > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
            }
            .wpb-company__name { text-align: center; font-weight: 700; font-size: 2.4rem; }
        }
        .wpb-card__footer {
            hr { border-color: var(--clr-dark); }
            .btn { width: 100%; margin-top: 1.6rem; }
        }
        &:hover {
            .wpb-card__footer .btn {
                i { transform: rotate(-45deg); }
            }
        }
    }

    &.wpb-card--news {
        .wpb-card__header { --aspect-ratio: 57%;
            .badge-group { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--p); z-index: 2; }

            &::before { background: linear-gradient(0deg, var(--clr-dark) 10%, transparent 60%); }
            &::after { background: linear-gradient(0deg, var(--clr-secondary) 10%, transparent 60%); opacity: 0; }
        }
        .card-title { font-style: italic; font-weight: 700; } 
        .wpb-card__footer {
            .btn { width: 100%; margin-top: 1.6rem; }
        }

        &:hover { background-color: var(--clr-secondary);
            hr { border-color: var(--clr-dark); }
            .wpb-card__header {
                &::after { opacity: 1; }
                img { transform: scale(1.1); }
            }
            .wpb-card__footer .btn {
                i { transform: rotate(-45deg); }
            }
        }
    }

    &.wpb-card--usp { 
        .card-title { font-weight: 700; font-size: 2.4rem; margin-bottom: 1rem; }
    }

    &.wpb-card--step { 
        .card-title { font-weight: 700; font-size: 2.4rem; margin-bottom: 1rem; }
        .count { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; background-color: var(--clr-primary); color: #fff; font-weight: 700; margin-bottom: 1.4rem; }
    }

    &.wpb-card--teammember { background: var(--clr-secondary-125); border: none; 
        .wpb-card__header::before { z-index: 1; background: linear-gradient(0, var(--clr-secondary-125) 0%, transparent 35%); }   
        .wpb-card__body { z-index: 2; margin-top: -6.4rem; }
        .card-title { font-weight: 700; font-size: 2.4rem; margin-bottom: .4rem; }
        .card-job-title { font-size: 1.4rem; font-weight: 300; margin-bottom: .8rem; }
    }

    &.wpb-card--blurb { border: none; background-color: var(--clr-dark);
        .card-title { font-weight: 700; display: flex; align-items: center; gap: .8rem;
            i { font-size: 1.8rem; color: var(--clr-primary); gap: 1.8rem; }
        }
        .card-excerpt { margin-top: 1rem; }
    }

    &.wpb-card--contact-form { border: none; background-color: var(--clr-secondary); }

    &.wpb-card--shortcode, &.wpb-card--contact-form {
        .gform_heading { margin-bottom: 2rem; }
        .gform_title { font-size: var(--fs-h3); }
    }

    &.wpb-card--contact {
        .wpb-card__body + .wpb-card__body { padding-top: 0; }

        .contact-link + .contact-link { margin-top: 1em; }  
    }

    &.wpb-card--bundel { text-align: center; border: none; background-color: var(--clr-secondary);
        .wpb-card__body > * + * { margin-top: 1em; }
        .wpb-icon--favicon { --w: 6.4rem; --h: 3.2rem; }
        .card-title { font-style: italic; display: block; font-family: var(--font-primary); font-size: 2.4rem; font-weight: 700; }
        .card-description { color: var(--clr-primary); }
        .card-prices { margin-top: 1em;
            .card-price { font-style: italic; display: block; 
                &.card-price--main { font-size: 2.4rem; font-family: var(--font-primary); font-weight: 700; }
                &.card-price--old { opacity: .6; font-size: 1.6rem; }
            }
        }
        .card-properties { padding-left: 2rem; flex-direction: column; text-align: left;
            li::marker { color: var(--clr-primary); }
        }
    }
}

.wpb-block {
    &.wpb-bg-clr--gradient {
        .wpb-card.wpb-card--step { border: none; background-color: var(--clr-secondary); }
    }
}

@container card-container (min-width: 32rem) {
    .wpb-card { 
        &.wpb-card--step { --p: 3.2rem; }
        &.wpb-card--blurb { --p: 3.2rem; }
    }
}

@container card-container (min-width: 36rem) {
    .wpb-card { 
        &.wpb-card--category { --p: 3.2rem; }
        &.wpb-card--usp { --p: 3.2rem; }
        &.wpb-card--teammember { --p: 3.2rem; 
            .card-excerpt { font-size: 1.8rem; }
        }
        &.wpb-card--contact-form { --p: 3.2rem; }

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

        &.wpb-card--contact { --p: 2.4rem; }

        &.wpb-card--bundel { --p: 2.4rem; }
    }
}

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

@container card-container (min-width: 48rem) {
    .wpb-card { 
        &.wpb-card--contact-form { --p: 6.4rem; }
    }
}