/*** ---------- 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; overflow: hidden; height: 100%;
    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); 
        .btn {--br: .4rem;}
    }

    > *: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 { border: none;
        .wpb-card__header {overflow: hidden;
            img {transform: scale(1); transform-origin: center; will-change: transform; transition: transform var(--ts-duration) var(--ts-function);}

            .badge-group {position: absolute; top: var(--p); left: var(--p);}
            &.wpb-card__header--ratio { --ratio: 66.5%;}
        }
        .wpb-card__body {--p: 3.2rem;}
        .wpb-card__footer {--p: 2.4rem 3.2rem; border-top: 1px solid var(--clr-border); display: flex; justify-content: space-between; align-items: center;
            .btn {margin-left: auto;
                &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
            }
        }

        .card-title { font-size: 2rem; line-height: 1.4; text-decoration: none; font-weight: 500; }

        &.article-small {
            .card-title {transition: color var(--ts-duration) var(--ts-function);}
        }

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

            &.article-small {
                .card-title {color: var(--clr-primary);}
            }
        }
    }

    &.wpb-card--study { border: none;
        .wpb-card__header {overflow: hidden;
            img {transform: scale(1); transform-origin: center; will-change: transform; transition: transform var(--ts-duration) var(--ts-function);}
            &.wpb-card__header--ratio { --ratio: 66.5%;}

            .badge-group { position: absolute; top: var(--p); left: var(--p);
            }
        }
        .wpb-card__body {--p: 3.2rem; padding-bottom: calc(var(--p) / 2);}
        .wpb-card__footer {--p: 2.4rem 3.2rem; padding-top: 0;
            .btn {margin-left: auto;
                &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
            }
        }

        .card-title { font-size: 2.8rem; line-height: 1.4; text-decoration: none; font-weight: 600; }
        .card-excerpt { opacity: .5;}

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

    &.wpb-card--signup { border-radius: var(--br-lg); background-color: var(--clr-white); height: fit-content;
        .wpb-card__header {padding: var(--p); padding-bottom: 0;
            .wpb-text {padding-bottom: calc(var(--p) / 2); border-bottom: 1px solid var(--clr-border);}
        }
        .wpb-card__body {padding: var(--p); padding-top: calc(var(--p) / 2);
        
            .wpb-table {
                .wpb-table__label {padding-left: 0;}
                .wpb-table__value { font-weight: 700;
                    ul { list-style-type: square; padding-left: 1.8rem;
                        li::marker { font-size: 1.2rem; }
                    }
                }
            }
        }
        .wpb-card__footer {padding-top: 0; font-size: var(--fs-sm); opacity: 0.5;}

        @media (min-width: 768px) {--p: 3.2rem;} 
        @media (min-width: 1200px) {--p: 4.8rem;} 
    }

    &.wpb-card--sidebar { border-radius: var(--br-lg); background-color: var(--clr-white); height: fit-content;
        .wpb-card__header {padding: var(--p); padding-bottom: 0;}
        .wpb-card__body {padding: calc(var(--p) / 2) var(--p);
            .wpb-specializations { display: flex; flex-direction: column; gap: 1.6rem;
            }
            .wpb-table {
                .wpb-table__label {padding-left: 0;}
                .wpb-table__value { font-weight: 700;
                    ul { list-style-type: square; padding-left: 1.8rem;
                        li::marker { font-size: 1.2rem; }
                    }
                }
            }
        }
        > .wpb-card__footer {padding-top: 0; font-size: var(--fs-sm); opacity: 0.5;}

        @media (min-width: 768px) {--p: 3.2rem;} 
        @media (min-width: 1200px) {--p: 4.8rem;} 
    }

    &.wpb-card--team {--p: 1.4rem; width: 100%; background-color: #000; color: var(--clr-white); aspect-ratio: 4 / 5;
        .wpb-card__header {position: absolute; height: 130%; top: 0; left: 50%; transform: translateX(-50%); width: 100%; pointer-events: none; 
            img {width: 100%; object-fit: cover; object-position: top;}
        }
        .wpb-card__body {z-index: 1; font-family: var(--font-accent); display: flex; justify-content: space-between; align-items: flex-end;
            .card-title {font-size: clamp(2.4rem, 2.4vw, 2.8rem); font-weight: 500; }
            .card-function {color: var(--clr-primary-light);}

            .btn {--min-h: 3.2rem; height: fit-content; 
                &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
            }
            /* &::after  {z-index: 0; pointer-events: none; content: ''; position: absolute; top: 12rem; left: -10%; width: 120%; height: 100%; background-image: url('/app/themes/wux-theme/assets/img/brandmark.svg'); background-position: top center; background-size: cover; background-repeat: no-repeat;  filter: var(--blur-lg);} */
            &::after  {z-index: -1; pointer-events: none; content: ''; position: absolute; bottom: -25%; right: 25%; width: 100%; height: 100%; background-image: url(/app/themes/wux-theme/assets/img/brandmark.svg); background-position: top center; background-size: cover; background-repeat: no-repeat; filter: var(--blur-lg); transform: rotate(-45deg) translate(50%, 50%); opacity: 0.5; transform-origin: center; transition: transform var(--ts-duration) var(--ts-function);}
        }
        
        &::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(180deg, rgba(0, 43, 60, 0) 0%, #002B3C 100%); z-index: 0;}

        &:hover {
            .wpb-card__body {
                &::after { transform: rotate(-25deg) translate(50%, 50%);}
            }
        }

        @media (min-width: 768px) {--p: 3.2rem;
            .wpb-card__body {
                .btn {--min-h: 5.2rem;}
            }
        } 
    }

    &.wpb-card--contact-form {
        .wpb-card__body {padding: var(--p); }
        
        @media (min-width: 768px) {--p: 3.2rem;} 
        @media (min-width: 1200px) {--p: 4.8rem;} 
    }

    &.wpb-card--appointment-form {
        .wpb-card__header {margin: auto;}
        .wpb-card__body {padding:  calc(var(--p) / 2) var(--p); text-align: center; }
        .wpb-card__footer {padding: var(--p); padding-top: 0;}

        @media (min-width: 768px) {--p: 3.2rem;} 
        @media (min-width: 1200px) {--p: 4.8rem;} 
    }

    &.wpb-card--specialization {--p: 2rem; padding: var(--p); flex-direction: row; align-items: center; gap: 1.6rem; transition: border var(--ts-duration) var(--ts-function);
        .wpb-card__header {padding: 0;
            .wpb-icon__wrapper {height: 2.4rem;}
        }
        .wpb-card__body {padding: 0;
            .card-title { line-height: 1; font-family: var(--font-accent); font-size: var(--fs-lg); font-weight: 500; transition: color var(--ts-duration) var(--ts-function); }
        }
        .wpb-card__footer {padding: 0;}

        .btn {
            &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
        }

        &:hover { border: 1px solid var(--clr-primary);
            .wpb-card__body {
                .card-title { color: var(--clr-primary); }
            }
        }

        &.wpb-card--result { align-items: flex-start;
            .wpb-card__body { width: fit-content; 
                .wpb-text { --mt: 1rem;
                    .card-title { font-size: var(--fs-xxl); }
                }
            }
        }

        @media (max-width: 767.98px) {--min-h: 6.8rem; min-height: var(--min-h);}
        @media (min-width: 768px) {--p: 2.8rem 3.2rem;}
    }

    &.wpb-card--membership {--p: 2rem; padding: var(--p); display: grid; grid-template-columns: 5rem 1fr; gap: 1.6rem; transition: border var(--ts-duration) var(--ts-function);
        .wpb-card__body {padding: 0; display: flex; align-items: center; width: 100%; justify-content: space-between; font-weight: 500; font-family: var(--font-accent);}

        &:hover { border: 1px solid var(--clr-primary);
            .wpb-card__body {
                .card-title { color: var(--clr-primary); }
            }
        }

        @media (min-width: 768px) {--p: 2.4rem;}
    }
}

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

}