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

.wpb-card { --card-br: .8rem; --card-p: 2.4rem; --card-bg: #FFFF; --card-border: 1px solid var(--clr-border); --card-clr: var(--clr-text); border-radius: var(--card-br); border: var(--card-border); background-color: var(--card-bg); display: flex; flex-direction: column; position: relative; text-decoration: none;
    a { text-decoration: none; }
    .card-title { --fs: var(--display-md); font-size: var(--fs); font-weight: 700; }
    .card-excerpt { --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }

    .wpb-card__header { display: flex; overflow: hidden; 
        img { width: 100%; height: auto; }

        &.wpb-card__header--ratio { --ratio: 75%; position: relative; overflow: hidden; z-index: 1;
            &::before { content: ''; display: block; width: 100%; padding-top: var(--ratio); }
            > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
        }
        &.wpb-card__header--scale { overflow: hidden;
            img { transition: transform var(--ts-35) ease; }
        }
        &.wpb-card__header--absolute { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: var(--card-br); overflow: hidden;
            img { width: 100%; height: 100%; object-fit: cover; }
            &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.33%, rgba(0, 0, 0, .8) 100%); }
        }
    }
    .wpb-card__body { padding: var(--card-p); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
    .wpb-card__footer  { padding: var(--card-p); padding-top: 0; }
    .wpb-card__text { --mt: .5em; --clr-contrast: var(--card-clr); --clr-contrast-text: var(--card-clr); color: var(--card-clr); 
        > * + * { margin-top: var(--mt); } 
    }

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

    &:hover .wpb-card__header--scale {  
        img { transform: scale(1.1); }
    }

    &:has(.wpb-card__header--absolute) { z-index: 1; color: #FFFF; border: none; min-height: 19.5rem; justify-content: end;
        .wpb-card__body { flex-grow: 0; }
        .card-title { color: #FFFF; }
    }

    /* Card variations */
    &.wpb-card--article {
        .card-title { margin-bottom: .8rem; }

        .wpb-bg-clr--dark & { --card-bg: #FFFF; }
    }

    &.wpb-card--blurb {
        .wpb-card__header { --ratio: 75%; }
    }
} 

@container card-container (min-width: 24rem) {

}

@media (min-width: 768px) {
    @container card-container (min-width: 24rem) {

    }
}