/*** ---------- 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-title { }
    .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: 0; --br: 0; --clr: var(--clr-light); height: var(--h); min-height: 40rem; position: relative; background-color: transparent; border: none; display: flex; flex-direction: column;
        .wpb-card__header { flex: 1;
            .wpb-image {--br: 0; position: absolute; inset: 0; padding: 0; z-index: 0; overflow: hidden;
                img {--br: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease;}
            }
        }
        .wpb-card__body { --p: 3.2rem; position: relative; display: flex; flex-direction: column; flex: 0 0 40%; justify-content: center; padding: var(--p);
            .wpb-text {
                i {font-size: 2rem; color: var(--clr-primary); font-weight: 700;}
                .card-link {transition: color 250ms ease; }
            }
            > * { position: relative; z-index: 1; color: white;}
            &::after { content: ''; position: absolute; inset: 0; background: var(--clr-dark); mix-blend-mode: multiply; z-index: 0;}
        }
        @media (min-width: 1200px) { --h: 68dvh; 
            .wpb-card__body {--p: 6rem;}
        }

        &:hover {
            .wpb-card__header { 
                .wpb-image {
                    img {transform: scale(1.02);}
                }
            }
            .wpb-card__body {
                .wpb-text {
                    .card-link {color: var(--clr-primary); }
                }
            }
        }
    }

    &.wpb-card--blurb {--p: 0; --clr: var(--clr-light); position: relative; background-color: transparent; border: none; min-height: 42dvw; max-height: 80rem; justify-content: flex-end;
        .wpb-card__header{--p: 2.4rem; --g: 1.6rem; padding: var(--p); display: flex; flex-direction: column; gap: var(--g);
            .wpb-card__icon img {max-height: 10rem; width: auto;}
            .wpb-card__title { color: var(--clr); font-size: 3.2rem; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 0.8rem; 
            }
            .wpb-card__icon + .wpb-card__title::before {content: ''; display: block; background: url('/app/themes/wuxnl-theme-bloq/assets/img/label_icon.svg') no-repeat center / contain; width: 3rem; height: 3rem;}
        }
        .wpb-card__body{--p: 2.4rem; padding-top: 0; flex-grow: 0; color: var(--clr);}
        .wpb-card__footer{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; padding: 0; z-index: -1;
            img {width: 100%; height: 100%; object-fit: cover;}
        }

        &::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(160, 143, 160, 0) 0%, #3A343A 71.15%); mix-blend-mode: multiply; z-index: -1;}

        @media (min-width: 768px) {}
        @media (min-width: 992px) {
            .wpb-card__header{--p: 2.4rem 4.8rem; --g: 3.2rem;}
            .wpb-card__body{--p: 4.6rem; padding-bottom: calc(var(--p) * 1.5); }
        }
        @media (min-width: 1200px) {
            .wpb-card__body{padding-bottom: calc(var(--p) * 2); }
        }
    }

    &.wpb-card--reason { background: transparent;
        .wpb-card__label {font-weight: 700; display: inline-flex; align-items: center; gap: 1rem;
            &::before {content: ''; display: block; background: url('/app/themes/wuxnl-theme-bloq/assets/img/label_icon.svg') no-repeat center / contain; width: 3rem; height: 3rem;}
        }
    }
}