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

.wpb-card { --br: .8rem; --p: 2.4rem; border-radius: var(--br); border: 1px solid var(--clr-border); 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 { --br: 0; border: none;
        .wpb-card__header {position: relative;
            .wpb-card__thumb {position: relative; width: 100%; min-width: 40rem; -webkit-mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-3.svg'); mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-3.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top right; mask-position: top right;
                img { width: 100%; aspect-ratio: 667 / 388; object-fit: cover; transition: transform var(--ts-25) ease; transform-origin: center; will-change: transform; }
            }
            .badge-group {position: absolute; top: 2rem; left: 2rem; font-weight: 700;}
        }
        .wpb-card__body {--p: 3.2rem; padding-top: 4rem;
            .card-title { margin-bottom: .8rem; }
        }
        .wpb-card__footer {--p: 3.2rem; padding-top: 0; }

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

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

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

}