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

.wpb-card { --p: 2.4rem; background-color: #fff; display: flex; flex-direction: column; position: relative; text-decoration: none;
    a { text-decoration: none; }
    .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(--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(--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-excerpt { --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }

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

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

    /* Card variations */
    &.wpb-card--article {--p: 4rem 6rem; flex-direction: column; align-items: center; background-color: var(--clr-primary-light); padding: unset !important; border-radius: var(--br); overflow: hidden;
        .wpb-card__header { display: block; overflow: unset; width: 100%; padding: 0;
            .wpb-image { 
                img {  width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-35) ease; }
            }
        }
        .wpb-card__body { width: fit-content; padding: var(--p);
            .card-date { color: var(--clr-grey); margin-bottom: 4rem; }
            .card-title { margin-bottom: .8rem; }
        }

        .card-excerpt { --excerpt-line-clamp: 5; margin-top: 0.4rem; margin-bottom: 4rem; }
        .btn--link { text-decoration: underline; font-weight: normal; }

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

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

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

}