﻿.apo-card-cta-promo {
    --card-aspect-ratio: 850 / 500;
    --card-body-width: 47cqi;
    --card-cover-image-opacity: 1;
    --card-cover-image-rollover-opacity: 0;
    --card-margin-inline: 0;
    --card-min-height: 31.25rem;
    aspect-ratio: var(--card-aspect-ratio);
    isolation: isolate;
    container: card-cta-promo / inline-size;
    margin-inline: var(--card-margin-inline);
}

/* Force same height / equal columns */
:where(.sf_colsIn:has(> .apo-card-cta-promo)) {
    display: flex;
    flex-direction: column;
}

.apo-card-cta-promo:has(a:hover) {
    --card-cover-image-rollover-opacity: 1;
}


@media (height < 700px) {
    .apo-card-cta-promo {
        --card-aspect-ratio: 850 / 360;
    }
}

@media (width < 37.5rem) {
    .apo-card-cta-promo {
        --card-aspect-ratio: none;
        --card-margin-inline: calc(var(--apo-page-gutter) * -1);
        --card-body-width: 67cqi;
    }
}

.apo-card-cta-promo__body {
    --_card-28-44: clamp(1.75rem, -0.65rem + 6.4cqi, 2.75rem);
    --_card-14-18: clamp(0.875rem, 0.275rem + 1.6cqi, 1.125rem);
    --_card-16-20: clamp(1rem, 0.4rem + 1.6cqi, 1.25rem);
    box-sizing: content-box;
    padding-inline-end: 0;
    width: var(--card-body-width);
}

.apo-card-cta-promo__title {
    font-family: var(--bs-body-font-family);
    font-size: var(--_card-28-44);
    line-height: 1.1636;
}

@media (width < 600px) {
    .apo-card-cta-promo__title {
        line-height: 1;
    }
}

.apo-card-cta-promo__summary {
    font-size: var(--_card-14-18);
}

.apo-card-cta-promo__image {
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 1s var(--apo-easing-out);
}

.apo-card-cta-promo__image--rollover {
    opacity: var(--card-cover-image-rollover-opacity);
}

.apo-card-cta-promo__link {
    --btn-font-size: var(--_card-16-20);
}

    .apo-card-cta-promo__link:not(:first-child) {
        margin-block-start: 1.5rem;
    }

/* Gradient mask for non-treated images */
.apo-card-cta-promo.is-style-gradient {
    position: relative;
    isolation: isolate;
}

    .apo-card-cta-promo.is-style-gradient::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(251.69deg, rgba(0, 31, 99, 0) 30%, rgba(0, 31, 99, 0.9) 69.26%);
        z-index: -1;
    }