/*** ---------- 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: clamp(1.8rem, 2vw, 2.4rem); font-size: var(--fs); }
    .card-excerpt { --fs: ; --line-clamp: 3; display: -webkit-box; -webkit-line-clamp: var(--line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
    .card-description { --ts-duration: .5s; --line-clamp: 2; --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); }

    .wpb-card__header { display: flex; overflow: hidden; 
        img { width: 100%; height: auto; }
        .badge-group { --offset: 2rem; position: absolute; top: var(--offset); right: var(--offset); left: var(--offset); justify-content: end; z-index: 5; }

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

    /* Card variations */
    &.wpb-card--default .wpb-card__header--ratio { --ratio: 56.25%; }

    &.wpb-card--blurb {
        .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }
        &:has(.btn--ghost):hover .wpb-card__header img { transform: scale(1.1); }
    }

    &.wpb-card--category { --card-p: 2rem; --card-border: 1px solid var(--clr-border); --card-bg-clr: #FFFF; display: grid; overflow: hidden;
        .wpb-card__image { --ratio: 30rem; grid-area: 1 / 1; position: relative; padding-bottom: var(--ratio); 
            img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-duration) ease; }
        }
        .wpb-card__body { color: var(--clr-text); z-index: 2; display: flex; flex-direction: column; grid-area: 1 / 1; height: fit-content; background: var(--card-bg-clr); 
            h3 { display: flex; align-items: center; gap: .8rem; 
                .wpb-icon { --clr: var(--clr-primary); }
            }
            * { color: var(--clr-text); }
        }
        &:hover {
            .wpb-card__image img { transform: scale(1.07); }
        }
    }


    /* Highlight: blog highlight */
    &.wpb-card--highlight { --card-clr: var(--clr-card-text);
        .card-title { --fs: clamp(2.4rem, 3.2vw, 4rem); }
        .card-excerpt { --fs: clamp(1.6rem, 1.8vw, 2rem); }
        .wpb-card__header img { transition: transform var(--ts-duration) ease; }
        .wpb-card__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
        .wpb-card__footer { margin-top: auto; }
        
        &.wpb-card--overlay { --clr-card-text: #fff; --card-border: none; --min-height: clamp(36rem, 50vw, 64rem); min-height: var(--min-height); justify-content: end; isolation: isolate; color: #fff;
            .wpb-card__body { flex-grow: 0; padding-bottom: 1.6rem; max-width: 80rem; }
            .wpb-card__footer { padding-top: 0; }
            .badge-group { justify-content: start; margin-bottom: 1.2rem; }
        }
        &:hover img { transform: scale(1.05); }
    }
}


@container card-container (min-width: 48rem) {
    .wpb-card { 
        &.wpb-card--highlight { --card-p: 3.2rem; }
    }
}
@container card-container (min-width: 74rem) {
    .wpb-card { 
        &.wpb-card--highlight { --card-p: 4.8rem; }
    }
}
@container card-container (min-width: 104rem) {
    .wpb-card { 
        &.wpb-card--highlight { --card-p: 6.4rem; }
    }
}