/* =========================================
   ab-vast-card
========================================= */
.ab-vast-card {
    --ab-overlay-bg: #005ee0;
    --ab-overlay-text: #ffffff;
    --ab-crosshair: #262833;
    --ab-title-color: #ffffff;

    /* These may be overwritten by shortcode inline styles */
    --ab-img-split: 62%;
    --ab-txt-split: 38%;
    --ab-height: clamp(520px, 54vw, 760px);

    /* Responsive sizing */
    --ab-front-title-size: clamp(28px, 2.6vw, 40px);
    --ab-overlay-title-size: clamp(24px, 2.2vw, 36px);
    --ab-text-size: clamp(18px, 1.35vw, 24px);
    --ab-list-gap: clamp(16px, 1.35vw, 24px);

    --ab-overlay-padding-x: clamp(28px, 4vw, 64px);
    --ab-overlay-padding-y: clamp(28px, 3vw, 48px);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--ab-height);
    background: var(--ab-overlay-bg);
    isolation: isolate;
    box-sizing: border-box;
    overflow: visible;
}

.ab-vast-card * {
    box-sizing: border-box;
}

/* ── Image block ─────────────────────── */
.ab-vast-card__bg {
    position: relative;
    flex: 0 0 100%;
    overflow: hidden;
    transition: flex-basis 0.65s cubic-bezier(.22, 1, .36, 1);
    will-change: flex-basis;
}

.ab-vast-card:hover .ab-vast-card__bg,
.ab-vast-card.is-active .ab-vast-card__bg {
    flex-basis: var(--ab-img-split);
}

.ab-vast-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
    transform-origin: center center;
    will-change: transform;
}

.ab-vast-card:hover .ab-vast-card__img,
.ab-vast-card.is-active .ab-vast-card__img {
    transform: scale(1.05);
}

/* dark scrim */
.ab-vast-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 14, .32);
    transition: opacity .45s ease;
    z-index: 1;
    pointer-events: none;
}

.ab-vast-card:hover .ab-vast-card__bg::after,
.ab-vast-card.is-active .ab-vast-card__bg::after {
    opacity: 0.1;
}

/* ── Heading — top left of image ──────── */
.ab-vast-card__heading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: clamp(20px, 4vw, 44px);
    transition: opacity .22s ease;
}

.ab-vast-card:hover .ab-vast-card__heading,
.ab-vast-card.is-active .ab-vast-card__heading {
    opacity: 0;
}

.ab-vast-card__front-title {
    margin: 0;
    color: var(--ab-title-color);
    font-size: var(--ab-front-title-size);
    line-height: 1.06;
    max-width: 85%;
}

/* ── Overlay panel ───────────────────── */
.ab-vast-card__overlay {
    flex: 0 0 0%;
    overflow: hidden;
    background: var(--ab-overlay-bg);
    color: var(--ab-overlay-text);

    padding-left: var(--ab-overlay-padding-x);
    padding-right: var(--ab-overlay-padding-x);
    padding-top: 0;
    padding-bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;

    transition:
        flex-basis 0.65s cubic-bezier(.22, 1, .36, 1),
        padding-top 0.65s cubic-bezier(.22, 1, .36, 1),
        padding-bottom 0.65s cubic-bezier(.22, 1, .36, 1),
        opacity 0.34s ease 0.12s;

    will-change: flex-basis, opacity;
}

.ab-vast-card:hover .ab-vast-card__overlay,
.ab-vast-card.is-active .ab-vast-card__overlay {
    flex-basis: var(--ab-txt-split);
    padding-top: var(--ab-overlay-padding-y);
    padding-bottom: var(--ab-overlay-padding-y);
    opacity: 1;
}

.ab-vast-card__overlay-title {
    margin: 0 0 var(--ab-list-gap);
    font-family: 'PP Neue Montreal - Medium';
    font-weight: normal;
    font-size: var(--ab-overlay-title-size);
    line-height: 1.06;
    color: var(--ab-overlay-text);
}

/* ── List ────────────────────────────── */
.ab-vast-card__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ab-vast-card__list li {
    margin: 0 0 var(--ab-list-gap);
    padding-left: 0;
}

.ab-vast-card__list li:last-child {
    margin-bottom: 0;
}

.ab-vast-card__list p {
    margin: 0;
    font-size: var(--ab-text-size);
    line-height: 1.18;
    color: var(--ab-overlay-text);
}

/* ── Crosshairs killed completely ─────── */
.ab-vast-card__crosshair,
.ab-vast-card__crosshair svg,
.ab-vast-card:hover .ab-vast-card__crosshair,
.ab-vast-card.is-active .ab-vast-card__crosshair {
    display: none !important;
    opacity: 0 !important;
}

/* ── Toggle mobile tap ───────────────── */
.ab-vast-card__toggle {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.ab-vast-card__toggle:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

/* =========================================
   Big desktop
========================================= */
@media (min-width: 1400px) {
    .ab-vast-card {
        --ab-height: clamp(640px, 54vw, 780px) !important;

        --ab-overlay-title-size: clamp(28px, 2vw, 38px);
        --ab-text-size: clamp(20px, 1.3vw, 26px);
        --ab-list-gap: clamp(18px, 1.4vw, 28px);

        --ab-overlay-padding-x: clamp(48px, 4vw, 72px);
        --ab-overlay-padding-y: clamp(36px, 3vw, 52px);
    }
}

/* =========================================
   Medium desktop
========================================= */
@media (min-width: 1101px) and (max-width: 1399px) {
    .ab-vast-card {
        --ab-height: clamp(560px, 58vw, 720px) !important;

        --ab-overlay-title-size: 30px;
        --ab-text-size: 22px;
        --ab-list-gap: 22px;

        --ab-overlay-padding-x: 50px;
        --ab-overlay-padding-y: 38px;
    }
}

/* =========================================
   Small desktop / tablet landscape
========================================= */
@media (min-width: 768px) and (max-width: 1100px) {
    .ab-vast-card {
        --ab-height: clamp(600px, 86vw, 780px) !important;

        --ab-img-split: 54% !important;
        --ab-txt-split: 46% !important;

        --ab-overlay-title-size: 28px;
        --ab-text-size: 21px;
        --ab-list-gap: 20px;

        --ab-overlay-padding-x: 42px;
        --ab-overlay-padding-y: 34px;
    }
}

/* =========================================
   Mobile
========================================= */
@media (max-width: 767px) {
    .ab-vast-card {
        --ab-height: auto !important;

        --ab-img-split: 0% !important;
        --ab-txt-split: auto !important;

        --ab-front-title-size: 28px;
        --ab-overlay-title-size: 30px;
        --ab-text-size: 22px;
        --ab-list-gap: 24px;

        --ab-overlay-padding-x: 28px;
        --ab-overlay-padding-y: 28px;

        height: auto;
        min-height: 0;
    }

    .ab-vast-card__bg {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        aspect-ratio: 1.25 / 1;
    }

    .ab-vast-card:hover .ab-vast-card__bg,
    .ab-vast-card.is-active .ab-vast-card__bg {
        flex-basis: auto;
    }

    .ab-vast-card__overlay {
        flex: 0 0 auto;
        opacity: 1;
        padding: var(--ab-overlay-padding-y) var(--ab-overlay-padding-x) calc(var(--ab-overlay-padding-y) + 14px);
        justify-content: flex-start;
        overflow: visible;
    }

    .ab-vast-card:hover .ab-vast-card__overlay,
    .ab-vast-card.is-active .ab-vast-card__overlay {
        flex-basis: auto;
        opacity: 1;
        padding: var(--ab-overlay-padding-y) var(--ab-overlay-padding-x) calc(var(--ab-overlay-padding-y) + 14px);
    }

    .ab-vast-card__heading {
        display: none;
    }

    .ab-vast-card:hover .ab-vast-card__img,
    .ab-vast-card.is-active .ab-vast-card__img {
        transform: scale(1);
    }

    .ab-vast-card__toggle {
        display: none;
    }
}

/* =========================================
   Very small mobile
========================================= */
@media (max-width: 420px) {
    .ab-vast-card {
        --ab-overlay-title-size: 28px;
        --ab-text-size: 20px;
        --ab-list-gap: 22px;

        --ab-overlay-padding-x: 22px;
        --ab-overlay-padding-y: 24px;
    }

    .ab-vast-card__bg {
        aspect-ratio: 1 / 0.78;
    }
}