/**
 * Overlapping Cards component styles
 *
 * @package MBM_Theme
 * @since 1.0.0
 */

.overlapping-cards {
    position: relative;
    z-index: 99;
    isolation: isolate;
    padding: 8rem 0;
}

.overlapping-cards.bg-white { background-color: #ffffff; }
.overlapping-cards.bg-whitesmoke { background-color: #f5f5f5; }
.overlapping-cards.bg-black { background-color: #121212; color: #ffffff; }
.overlapping-cards.bg-xanthous { background-color: var(--la-gold-40); }
.overlapping-cards.bg-light_cyan { background-color: var(--la-blue-40); }
.overlapping-cards.bg-cerulean { background-color: var(--la-blue-60); }
.overlapping-cards.bg-prussian_blue { background-color: var(--la-blue-80); }
.overlapping-cards.bg-blue_charcoal { background-color: var(--la-blue); }

.overlapping-cards__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 600px;
}

.overlapping-cards__card {
    border-radius: 12px;
}

.overlapping-cards__card--left {
    position: relative;
    z-index: 1;
    min-height: clamp(500px, 56vw, 600px);
    width: min(100%, 705px);
    padding: clamp(2.2rem, 3vw, 3.5rem) clamp(1.8rem, 2.8vw, 2.8rem);
    color: #ffffff;
    background-color: #0f1f64;
    background-image: var(--overlapping-cards-left-bg-image, linear-gradient(160deg, #152b7a 0%, #0a164f 100%));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overlapping-cards__card-left-content {
    max-width: 80%;
    padding-top: clamp(3rem, 10vw, 6rem);
}

.overlapping-cards__left-title {
    margin: 0 0 1rem;
    font-size: 2rem;
    line-height: 1.05;
    text-transform: uppercase;
}

.overlapping-cards__left-title-line {
    display: block;
}

.overlapping-cards__left-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.45;
}

.overlapping-cards__card--right {
    position: absolute;
    right: 0;
    top: 51%;
    transform: translateY(-50%);
    z-index: 2;
    width: min(100%, 676px);
    min-height: clamp(390px, 44vw, 470px);
    padding: clamp(2rem, 3.2vw, 3.2rem) clamp(1.8rem, 3vw, 3rem) clamp(1.8rem, 2.4vw, 2.4rem);
    background: var(--la-white);
    box-shadow: 0 14px 40px rgba(14, 24, 54, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overlapping-cards__right-title {
    margin-bottom: 1rem;
    color: var(--la-blue);
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 600;
}

.overlapping-cards__right-text {
    color: var(--la-black);
    line-height: 1.6;
}

.overlapping-cards__right-text p {
    margin-top: 0;
}

.overlapping-cards__right-text p:last-child {
    margin-bottom: 0;
}

.overlapping-cards__right-cta {
    margin-top: 2.25rem;
    text-align: right;
}

@media (max-width: 991px) {
    .overlapping-cards {
        padding: 4rem 0;
    }

    .overlapping-cards__layout {
        min-height: 0;
    }

    .overlapping-cards__card--left {
        min-height: 420px;
        width: 90%;
        padding: 2.5rem 1.6rem;
    }

    .overlapping-cards__card-left-content {
        max-width: 100%;
        padding-top: 6.5rem;
    }

    .overlapping-cards__card--right {
        position: relative;
        top: auto;
        right: -5%;
        transform: none;
        width: 90%;
        margin: -2.2rem auto 0;
        padding: 2.25rem 1.6rem 1.75rem;
        box-shadow: 0 14px 40px rgba(14, 24, 54, 0.14);
    }

    .overlapping-cards__left-title {
        font-size: 1.5rem;
    }
    .overlapping-cards__right-title {
        font-size: 1.3rem;
    }
}