.kdv-program-card {
    --container-padding: var(--space-xs-s);
    container-type: inline-size;
    container-name: program-card;
    border-radius: var(--radius, 32px);
    overflow: hidden;
    box-shadow: 0px 0px var(--step-0) rgba(0,0,0,0.15);
    height: 100%;
    display: block;
    transition:box-shadow 200ms ease;
}

.kdv-program-card--seamless {
    --container-padding: 0;
    box-shadow: none;
}

.kdv-program-card:hover {
    box-shadow: 0px 4px var(--step-1) rgba(0,0,0,0.15);
}

.kdv-program-card--seamless:hover {
    box-shadow: none;
}

.kdv-program-card__grid {
    display: grid;
    grid-template-areas:
        "header"
        "image"
        "body";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: 100%;
}

.kdv-program-card--seamless  .kdv-program-card__grid {
    gap: var(--space-s);
}

.kdv-program-card.has-footer .kdv-program-card__grid {
    grid-template-areas:
        "header"
        "image"
        "body"
        "footer";
    grid-template-rows: auto auto auto 1fr;
}

.kdv-program-card__header {
    grid-area: header;
}

.kdv-program-card__footer {
    grid-area: footer;
    padding: var(--container-padding);
}


.kdv-program-card--seamless .kdv-program-card__header-wrapper {
    background: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.kdv-program-card__header-text {
    color: white;
    padding: var(--container-padding);
    background: var(--card-theme, var(--theme-secondary));
}

.kdv-program-card--seamless .kdv-program-card__header-text {
    color: inherit;
    background: none;
}

h3.kdv-program-card__title {
    color: white;
    font-size: var(--step-1);
    text-wrap:  balance;
}

.kdv-program-card--seamless h3.kdv-program-card__title {
    color: var(--card-theme, var(--theme-secondary));
    font-size: var(--step-3);
}

.kdv-program-card__levels {
    font-size: var(--step-0);
}


.kdv-program-card__header-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    /* display: block; */
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* transform: scale(1);
    transition: transform 600ms ease; */
}

.kdv-program-card--seamless  .kdv-program-card__header-image img {
    border-radius: var(--radius);

}


.kdv-program-card__header-image {
    position: relative;
    grid-area: image;
    display: block;
    overflow: hidden;
    aspect-ratio: 1.778;
}

.kdv-program-card--seamless  .kdv-program-card__header-image{
    min-height: min(380px, calc(56.25vw - 2 * var(--gutter)));
    border-radius: var(--radius);
}

/* .kdv-program-card:hover .kdv-program-card__header-image img {
    transform: scale(1.025);
} */

.kdv-program-card__meta {
    padding: var(--container-padding);
    display: flex;
    gap:  var(--content-gap);
    font-size: var(--step-0);
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.8)), linear-gradient(0deg, var(--card-theme), var(--card-theme));
    color: var( --card-theme, var(--theme-secondary));
    font-weight: 500;
}

.kdv-program-card--seamless .kdv-program-card__meta {
    background: none;
}

.kdv-program-card__body {
    padding: var(--container-padding);
    font-size: var(--step--1);
    grid-area: body;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-xs);
}

.kdv-program-card__body:last-child {
    margin-block-end: var(--space-l);
    padding-block-end: 0;
}

.kdv-program-card .kdv-program-card__section-title{
    font-size: var(--step-0);
    color: var( --card-theme, var(--theme-secondary));
}
.kdv-program-card__list{
    display: grid;
    gap: var(--space-s);
}

.kdv-program-card__list .kdv-program-card__section-title{
    margin: 0;
}

.kdv-program-card__list-item{
    max-inline-size: 65rem;
}

.kdv-program-card__list--columns {
    container-type: inline-size;
}

.kdv-program-card__list-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

@container (width > 300px) {
    .kdv-program-card__list--columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kdv-program-card__overview {
    font-size: var(--step-0);
    line-height: 1.6;
}



.kdv-program-card__timetable-booking-link {
    --button-background-hover: var(--theme-primary);
    --button-text-hover: var(--theme-white);
}

.kdv-program-card__cta {
    display: flex;
    flex-flow: column wrap;
    gap: var(--content-gap);
    flex-direction: row;
    padding: var(--space-xs);
}

.kdv-program-card--seamless .kdv-program-card__cta {
    padding: var(--container-padding);
}

a.kdv-program-card__cta-button.button.btn-small {
    --button-background-hover: var(--theme-primary);
    --button-text-hover: var(--theme-white);
}




/* Grid layout adjustments for medium/large containers
@container program-card (width > 560px){
    .kdv-program-card__grid {
        grid-template-areas:
            "header image"
            "body   body";
        grid-template-columns: 1.1fr 0.9fr;
        grid-template-rows: auto 1fr;
    }
    .kdv-program-card__header-image{
        aspect-ratio: auto;
    }
} */

@container program-card (width > 560px){

    .kdv-program-card.has-footer .kdv-program-card__header-image{
        min-height: 100%;
        aspect-ratio: auto;
    }

    .kdv-program-card__grid {
        grid-template-areas:
            "header image"
            "body   image";
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: auto 1fr;
    }
    .kdv-program-card.has-footer .kdv-program-card__grid {
        grid-template-areas:
            "header image"
            "body   image"
            "footer footer";
        grid-template-rows: auto auto 1fr;
    }

    .kdv-program-card__header-image{
        min-height: 100%;
        aspect-ratio: auto;
        
    }


    .kdv-program-card.has-footer:not(.kdv-program-card--seamless) .kdv-program-card__header-image {
        border-radius: 0 0 0 var(--radius);
    }
}




@container program-card (width > 980px){
    .kdv-program-card.has-footer .kdv-program-card__grid {
        grid-template-areas:
            "header image"
            "body   image"
            "footer   image";
    }

}