/* ==========================================================================
   Pattern: CTA Card V1
   One rounded card on the secondary colour, sitting on the soft grey ground
   (#EEEDF1, as the listings): text column left, illustration right. Stacks
   on phones with the text first.
   ========================================================================== */

.forge-cta-card-v1 {
    background-color: #EEEDF1;
}

/* The Forge container spaces its children with top margins, which also
   pushes the first child down; a real flex gap replaces that here. */
.forge-cta-card-v1__row.forge-container {
    gap: var(--wp--preset--spacing--xl);
}

.forge-cta-card-v1__row.forge-container > * {
    margin-top: 0;
}

/* Two classes: WordPress prints single-class flex sizing for the container
   children, which would otherwise win on source order. */
.forge-cta-card-v1__card .forge-cta-card-v1__content,
.forge-cta-card-v1__card .forge-cta-card-v1__image {
    flex: 1 1 50%;
    min-width: 0;
    width: auto;
}

.forge-cta-card-v1__image {
    display: flex;
}

.forge-cta-card-v1__image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 640 / 508;
    object-fit: cover;
    border-radius: 24px;
}

/* Campaigns Card V1 (patterns/campaigns-card-v1.php) reuses this layout, but
   its image is a photograph shot square rather than the Trained in Two
   illustration, and the 640/508 box would crop a fifth off its height. */
.forge-campaigns-card-v1 .forge-cta-card-v1__image img {
    aspect-ratio: 1 / 1;
}

/* One column below 992px: text first, then the illustration, both full
   width (the row's centred alignment would otherwise shrink the text column
   to its content). */
@media (max-width: 991.98px) {
    .forge-cta-card-v1__row,
    .forge-cta-card-v1__row.forge-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wp--preset--spacing--sm);
    }

    .forge-cta-card-v1__card .forge-cta-card-v1__content,
    .forge-cta-card-v1__card .forge-cta-card-v1__image {
        flex: 0 0 auto;
        width: 100%;
    }

    .forge-cta-card-v1__content {
        padding: var(--wp--preset--spacing--md) !important;
    }
}