/* Card V3: two image cards, each wrapped in a link. The illustration sits at
   the top of the card at its natural proportions, never cropped, on a solid
   background that matches the image; the copy sits below it on that colour,
   with the arrow badge in the top-right corner. */

.forge-card-v3__card {
    position: relative;
    min-height: auto;
    transition: 0.3s ease;
}

.forge-card-v3__card--secondary {
    background-color: var(--wp--preset--color--secondary);
}

.forge-card-v3__card--primary-dark {
    background-color: var(--wp--preset--color--primary-dark);
}

.forge-card-v3__card .wp-block-cover__image-background {
    object-fit: contain;
    object-position: center top;
}

/* Stretch the content box over the card and reserve room for the drawing at
   the top, pushing the copy below it. The image is 1316 x 1120 with the
   drawing in its top four fifths and a plain margin below, so 82% of the
   image height is reserved; the copy overlaps only that margin. The 100% is
   the cover content width, so the padding is added back to get the card
   width. */
.forge-card-v3__card.wp-block-cover .wp-block-cover__inner-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: calc((100% + 2 * var(--wp--preset--spacing--md)) * 1120 / 1316 * 0.82);
}

/* The constrained layout centres children with auto margins, which in a flex
   column shrinks and centres them. Full width keeps the text left-aligned. */
.forge-card-v3__card .wp-block-cover__inner-container > :not(.forge-icon) {
    width: 100%;
}

.forge-card-v3__card .forge-icon {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--wp--preset--color--background);
    z-index: 2;
    transition: transform var(--wp--custom--transition--base);
}

.forge-link-wrapper:hover .forge-card-v3__card .forge-icon {
    transform: translate(2px, -2px);
}
.forge-link-wrapper:hover .forge-card-v3__card {
    filter: contrast(0.8);
}