/*** ---------- 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; line-clamp: var(--excerpt-line-clamp); -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 { aspect-ratio: 4 / 3; position: relative; overflow: hidden; z-index: 1;
            > 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 {
        height: 100%;
        --card-bg: transparent;
        --card-border: 0;
        --card-p: 0;

        > a { display: flex; flex: 1 1 auto; flex-direction: column; height: 100%; color: inherit; }
        .wpb-card__header.wpb-card__header--ratio { aspect-ratio: 2 / 1; border-radius: .8rem; }
        .wpb-card__header img { border-radius: .8rem; }
        .wpb-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1rem 0 0; }
        .card-title { margin: 0 0 .6rem; font-size: 2.2rem; font-weight: 400; line-height: 1.3; }
        .card-excerpt { --excerpt-line-clamp: 2; margin: 0; font-size: 1.5rem; line-height: 1.55; }
        .wpb-card__categories { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
        .wpb-card__category { display: inline-flex; align-items: center; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--clr-contrast, var(--clr-primary)); font-size: 1.2rem; font-weight: 400; line-height: 1.3; text-decoration: none; text-transform: uppercase;
            &:hover { border-color: currentColor; color: var(--clr-contrast, var(--clr-primary)); }
            &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
        }
        .wpb-card__byline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: auto 0 0; padding-top: 1rem; color: var(--clr-text); font-size: 1.2rem; line-height: 1.5; }
        .wpb-card__author { font-weight: 400; text-decoration: none;
            &:hover { text-decoration: underline; text-underline-offset: .2rem; }
            &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
        }

        .wpb-bg-clr--dark & {
            --card-bg: #fff;
            --clr-contrast: #192638;
            --clr-contrast-text: #5f6978;
            --clr-text: #5f6978;
            color: var(--clr-text);
        }
    }

    &.wpb-card--blurb {
        --card-clr: #5f6978;
        --clr-text: #5f6978;
        --clr-contrast: #192638;
        --clr-contrast-text: #5f6978;
        color: var(--card-clr);
        .wpb-card__header { aspect-ratio: 4 / 3; }
    }
} 

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

}

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

    }
}