/* ============================================================
   CONTENT + IMAGE SPLIT — CLEAN, CONFLICT-FREE VERSION
============================================================ */

/* Remove global section padding */
.content-image-split {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Remove outer container restriction */
.content-image-split > .content-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   DESKTOP — FULL BLEED LAYOUT
============================================================ */
.content-image-split__inner {
    display: grid;
    grid-template-columns: 48% 52%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
}

.content-image-split__content {
    padding: var(--space-xl) var(--section-padding-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-image-split__image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content-image-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Left-aligned image version */
.image-left .content-image-split__content { order: 2; }
.image-left .content-image-split__image { order: 1; }

/* ============================================================
   TABLET + MOBILE
============================================================ */
@media (max-width: 1024px) {
    .content-image-split__inner {
        display: block !important;
        width: 100% !important;
    }

    .content-image-split__content {
        padding: var(--space-xl) var(--space-md) !important;
        text-align: center !important;
    }

    .content-image-split__text p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .content-image-split__content .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 600px) {
    .content-image-split__content {
        padding: var(--space-lg) var(--space-md) !important;
    }
}

/* ============================================================
   TYPOGRAPHY + TEXT WIDTH
============================================================ */
.content-image-split__text p {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
}

.content-image-split__content h2 {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-purple);
    text-align: left;
}

@media (max-width: 1024px) {
    .content-image-split__content h2 {
        text-align: center;
    }
}

.content-image-split__content > * {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   BUTTON STYLING
============================================================ */
.content-image-split__button {
    display: inline-block !important;
    width: auto !important;
    padding: 10px 24px !important;
    background: var(--color-white);
    border: 2px solid var(--color-gold);
    color: var(--color-purple);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: var(--space-md);
    transition: all 0.25s ease;
}

.content-image-split__button:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #ffffff;
}

/* ============================================================
   ACF BACKGROUND VARIANTS — FINAL CLEAN VERSION
============================================================ */

/* WHITE */
.content-image-split--white .content-image-split__content {
    background: #ffffff !important;
}

/* GREY */
.content-image-split--grey .content-image-split__content {
    background: var(--color-grey-light) !important;
}

/* PURPLE */
.content-image-split--purple .content-image-split__content {
    background: var(--color-purple) !important;
    color: #ffffff !important;
}

.content-image-split--purple .content-image-split__content h2,
.content-image-split--purple .content-image-split__content h3,
.content-image-split--purple .content-image-split__text p {
    color: #ffffff !important;
}