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

.wpb-card { --p: 1.6rem; --br: var(--radius); border-radius: var(--br); border: var(--card-border) solid var(--clr-card-border); background-color: var(--clr-card-bg); display: flex; flex-direction: column; position: relative; text-decoration: none;
    a { text-decoration: none; }

    .wpb-card__header { display: flex; overflow: hidden; 
        img { transition: transform var(--ts-duration) ease; width: 100%; height: 100%; } 
        .badge-group { position: absolute; top: var(--p); right: var(--p); z-index: 5; }
    }
    .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; }
    .wpb-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    .wpb-text { margin-bottom: unset; }

    > *: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); }
    
    *:not(.badge-group *, .btn, .btn *) { color: var(--clr-card-text)!important; }

    /* Card variations */
    &.wpb-card--article {
        .excerpt { --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
        .btn.btn--bookmark { position: absolute; top: 1.6rem; right: 1.6rem; z-index: 1; }
        .wpb-card__title { margin-bottom: .8rem; }
    }

    &.wpb-card__search-result {
        .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }
        .wpb-card__footer { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1.6rem; }
    }

    /*** Blurb ***/
    &.wpb-card--blurb {
        .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }
        a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        &:hover .wpb-card__header img { transform: scale(1.1); }
    }

    /*** Portfolio ***/
    &.wpb-card--portfolio { background-color: transparent; 
        .wpb-card__header { border-radius: var(--br)!important; height: 16rem; 
            img { width: 100%; height: 100%; object-fit: cover; }
        }
        .wpb-card__body { padding: var(--p) 0; 
            * { color: var(--clr-text)!important; }
        }
        a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        &:hover .wpb-card__header img { transform: scale(1.07); }

        @media (min-width: 992px) { .wpb-card__header { height: 20rem; } }
        @media (min-width: 1200px) { .wpb-card__header { height: 24rem; } }
        @media (min-width: 1400px) { .wpb-card__header { height: 28rem; } }
    }

    /*** Image ***/
    &.wpb-card--image { background-color: transparent; overflow: hidden; height: 24rem; 
        .wpb-card__header { border-radius: var(--br)!important; height: 100%; 
            &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
            img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        }
        .wpb-card__body { z-index: 1; 
            * { color: #fff!important; }
            a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        }
        &:hover .wpb-card__header img { transform: scale(1.07); }

        @media (min-width: 992px) { height: 32rem; }
        @media (min-width: 1200px) { height: 40rem; }
    }

    /*** Mini ***/
    &.wpb-card--mini { display: flex; flex-direction: row; gap: 2.4rem; align-items: center; background-color: transparent; 
        .wpb-card__header { --w: 16rem; --h: 8rem; min-width: var(--w); width: var(--w); min-height: var(--h); height: 100%; border-radius: var(--br); overflow: hidden; 
            img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--br); }
        }
        .wpb-card__body { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0; 
            *:not(.badge) { color: var(--clr-text)!important; }
        }

        @media (min-width: 576px) { gap: 1.8rem; }
    }

    /*** Split ***/
    &.wpb-card--split { flex-direction: row; overflow: hidden; 
        h3 { --heading-fs: var(--fs-h6); }
        .wpb-card__header { --width: 20rem; border-radius: 0; min-width: var(--width); max-width: var(--width);
            img { --hover-offset: 8rem; border-radius: 0; object-fit: cover; width: calc(var(--width, 16rem) + var(--hover-offset, 8rem)); height: 100%; transition: transform var(--ts-duration) ease, background-position var(--ts-duration) ease; }
        }
        .wpb-card__body {
            .badge-group { margin-bottom: 1.2rem; }
            .btn { margin-top: 2.4rem; }
        }
        .wpb-card__excerpt { font-size: var(--fs-small); }
        &:hover .wpb-card__header img { transform: translateX(calc(-1 * var(--hover-offset))); }
    }

    /*** Category ***/
    &.wpb-card--category { --min-height: 27.5rem; overflow: hidden; min-height: var(--min-height); 
        .wpb-card__header { border-radius: 0; 
            img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none!important; }
        }
        h3 { display: flex; align-items: center; gap: .8rem; 
            i[class*="fa-"] { --clr-icon: #fff; }
        }
        .wpb-card__body { --clr-text: #fff; color: var(--clr-text); z-index: 2; display: flex; flex-direction: column; height: 100%; background: var(--clr-primary); 
            * { color: var(--clr-text); }
        }
        .card-description { --ts-duration: .5s; --line-clamp: 1; --offset: .4rem; overflow: hidden; opacity: .6; font-size: var(--fs); max-height: calc((var(--fs) * var(--lh)) * var(--line-clamp)); border-top: 1px solid transparent; box-sizing: content-box; padding-top: calc(var(--offset) / 2); margin-top: calc(var(--offset) / 2); transition-property: max-height, opacity, border, margin, padding; transition-duration: var(--ts-duration); transition-timing-function: ease; }
        &:hover .card-description { --line-clamp: 8; --offset: 1.6rem; opacity: 1; border-top: 1px solid #fff4; }
    }
}