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

.wpb-card { --p: 1.6rem; border-radius: var(--wpb-br); border: var(--card-border) solid var(--clr-card-border); background-color: var(--clr-card-bg); display: flex; flex-direction: column; position: relative; text-decoration: none;
    a { text-decoration: none; }

    .wpb-card__header { display: flex; overflow: hidden; }
    .wpb-card__header img { transition: transform var(--wpb-timing) ease; width: 100%; height: auto; } 
    .wpb-card__header .badge-group { position: absolute; top: var(--p); right: var(--p); z-index: 5; }
    
    .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; }

    .wpb-text { margin-bottom: unset; }

    > *:first-child { border-top-left-radius: var(--wpb-br); border-top-right-radius: var(--wpb-br); }
    > *:first-child img { border-top-left-radius: var(--wpb-br); border-top-right-radius: var(--wpb-br); } 
    > *:last-child { border-bottom-left-radius: var(--wpb-br); border-bottom-right-radius: var(--wpb-br); }
    
    *:not(.badge-group *, .btn, .btn *) { color: var(--clr-card-text) !important; }
}



.wpb-card.wpb-card--article {
    .excerpt { --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }
    .btn.btn--bookmark { position: absolute; top: 1.6rem; right: 1.6rem; z-index: 1; }
    .wpb-card__title { margin-bottom: .8rem; }
}

.wpb-card.wpb-card__search-result {
    .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }
    .wpb-card__footer { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1.6rem; }
}

:is(.wpb-card--default, .wpb-card--split) .wpb-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }



/*** ---------- Card > Sidebar ---------- ***/
.wpb-card.wpb-card--sidebar { background-color: var(--clr-sidebar); padding: var(--pd-sidebar); border: unset; }
.wpb-card.wpb-card--sidebar > div { margin-top: 0.8rem; }
.wpb-card.wpb-card--sidebar > div:has(h1,h2,h3,h4) { margin-top: 3.2rem; }
.wpb-card.wpb-card--sidebar > div:first-child { margin-top: 0 !important; }
.wpb-card.wpb-card--sidebar :is(ol,ul) { margin-left: 0; }

@media (min-width: 1200px) {
    .sidebar--sticky .wpb-card.wpb-card--sidebar { position: sticky; top: 1.6rem; }
    .wpb-pagewrapper:has(.wpb-navigation.sticky) .sidebar--sticky .wpb-card.wpb-card--sidebar { top: calc(1.6rem + 10rem); }
}



/*** ---------- Card > Blurb ---------- ***/
.wpb-card--blurb .wpb-card__header img { aspect-ratio: 16/9; object-fit: cover; }
.wpb-card--blurb a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

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



/*** ---------- Card > Portfolio ---------- ***/
.wpb-card--portfolio { background-color: transparent; }
.wpb-card--portfolio .wpb-card__header { border-radius: var(--wpb-br) !important; height: 16rem; }
.wpb-card--portfolio .wpb-card__header img { width: 100%; height: 100%; object-fit: cover; }
.wpb-card--portfolio .wpb-card__body { padding: var(--p) 0; }
.wpb-card--portfolio .wpb-card__body * { color: var(--clr-text) !important; }
.wpb-card--portfolio a::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.wpb-card--portfolio:hover .wpb-card__header img { transform: scale(1.07); }

@media (min-width: 992px) {
    .wpb-card--portfolio .wpb-card__header { height: 20rem; }
}
@media (min-width: 1200px) {
    .wpb-card--portfolio .wpb-card__header { height: 24rem; }
}
@media (min-width: 1400px) {
    .wpb-card--portfolio .wpb-card__header { height: 28rem; }
}



/*** ---------- Card > Image ---------- ***/
.wpb-card--image { background-color: transparent; overflow: hidden; height: 24rem; }
.wpb-card--image .wpb-card__header { border-radius: var(--wpb-br) !important; height: 100%; }
.wpb-card--image .wpb-card__header::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.wpb-card--image .wpb-card__header img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.wpb-card--image .wpb-card__body { z-index: 1; }
.wpb-card--image .wpb-card__body * { color: #fff !important; }
.wpb-card--image .wpb-card__body a::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.wpb-card--image:hover .wpb-card__header img { transform: scale(1.07); }

@media (min-width: 992px) {
    .wpb-card--image { height: 32rem; }
}
@media (min-width: 1200px) {
    .wpb-card--image { height: 40rem; }
}



/*** ---------- Card > Mini ---------- ***/
.wpb-card--mini { display: flex; flex-direction: row; gap: 2.4rem; align-items: center; background-color: transparent; }
.wpb-card--mini .wpb-card__header { --w: 16rem; --h: 8rem; min-width: var(--w); width: var(--w); min-height: var(--h); height: 100%; border-radius: var(--wpb-br); overflow: hidden; }
.wpb-card--mini .wpb-card__header img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wpb-br); }
.wpb-card--mini .wpb-card__body { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 0; }
.wpb-card--mini .wpb-card__body *:not(.badge) { color: var(--clr-text) !important; }

@media (min-width: 576px) {
    .wpb-card--mini{ gap: 1.8rem; } 
}



/*** ---------- Card > Split ---------- ***/
.wpb-card--split { flex-direction: row; overflow: hidden; }
.wpb-card--split h3 { --fs: var(--fs-h6); }
.wpb-card--split .wpb-card__header { border-radius: 0; --width: 20rem; min-width: var(--width); max-width: var(--width);}
.wpb-card--split .wpb-card__header img { --hover-offset: 8rem; border-radius: 0; object-fit: cover; width: calc(var(--width, 16rem) + var(--hover-offset, 8rem)); height: 100%; transition: transform var(--wpb-timing) ease, background-position var(--wpb-timing) ease; }
.wpb-card--split .wpb-card__body .badge-group { margin-bottom: 1.2rem; }
.wpb-card--split .wpb-card__body .btn { margin-top: 2.4rem; }
.wpb-card--split .wpb-card__excerpt { font-size: var(--fs-small); }

.wpb-card--split:hover .wpb-card__header img { transform: translateX(calc(-1 * var(--hover-offset))); }



/*** ---------- Card > Category ---------- ***/
.wpb-card--category { --min-height: 27.5rem; overflow: hidden; min-height: var(--min-height); }
.wpb-card--category .wpb-card__header { border-radius: 0; }
.wpb-card--category .wpb-card__header img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.wpb-card--category h3 { display: flex; align-items: center; gap: .8rem; }
.wpb-card--category h3 i[class*="fa-"] { --clr-icon: #fff; }
.wpb-card--category .wpb-card__body { --clr-text: #fff; color: var(--clr-text); z-index: 2; display: flex; flex-direction: column; height: 100%; background: var(--clr-primary); }
.wpb-card--category .wpb-card__body * { color: var(--clr-text); }

.wpb-card--category .card-description{ 
    --wpb-timing: .5s; --line-clamp: 1; --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); transition-property: max-height, opacity, border, margin, padding; transition-duration:var(--wpb-timing); transition-timing-function: ease;
}
.wpb-card--category:hover .card-description{ --line-clamp: 8; --offset: 1.6rem; opacity: 1; border-top: 1px solid #fff4; }