.versus-card-wrapper {
    display: block;
    width: 100%;
}

/* Ensure anchor wrapper doesn't mess text styles */
.versus-card-wrapper > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Main card container */
.versus-card {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Stroke overlay (base + hover) */
.versus-card-stroke {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    transition: border-color 0.25s ease, border-width 0.25s ease;
}

/* Inner layout: 3 columns */
.versus-card-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
    gap: 16px;
}

.versus-card-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
}

/* Image alignment */
.versus-card-image {
    display: flex;
    width: 100%;
}

.versus-valign-center {
    align-items: center;
}

.versus-valign-top {
    align-items: flex-start;
}

.versus-card-image img {
    max-width: 100%;
    height: auto;
    display: block;
    transform-origin: center center;
}

/* Text blocks */
.versus-card-text {
    width: 100%;
    word-break: break-word;
}

/* Overlay text on left/right images */
.versus-card-col-left .versus-card-text,
.versus-card-col-right .versus-card-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    text-align: center;
    padding: 0 8px;
}

/* Kill default theme link styling inside Versus cards */
.versus-card-wrapper a,
.versus-card-wrapper a:hover,
.versus-card-wrapper a:focus,
.versus-card-wrapper a:visited {
    color: inherit;
    text-decoration: none;
}

.versus-card-text a {
    text-decoration: none;
}

/* Mobile scaling helper (optional): keep desktop layout, scale card down */
@media (max-width: 767px) {
    .versus-mobile-scale .versus-card-inner {
        flex-direction: row !important;
        padding: 10px 12px;
        gap: 12px;
    }

    .versus-mobile-scale .versus-card {
        transform: scale(0.85);
        transform-origin: center top;
        width: 100%;
        max-width: 100%;
        height: auto !important;
    }

    .versus-mobile-scale .versus-card-col-left .versus-card-text,
    .versus-mobile-scale .versus-card-col-right .versus-card-text {
        align-items: flex-start;
        text-align: left;
        padding: 0 4px;
    }

    .versus-mobile-scale .versus-card-image img {
        max-width: 100%;
        height: auto;
    }
}