/* ============================================================
   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;
    }
}

/* ============================================================
   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;
}

/* ============================================================
   FIXED INNER LEFT PADDING FOR CONTENT — DESKTOP TO 1025px
============================================================ */
@media (min-width: 1025px) {
    .content-image-split__content {
        padding-left: 200px !important; /* adjust value */
    }

    /* If using .image-left, content still needs the same internal padding */
    .image-left .content-image-split__content {
        padding-left: 200px !important;
    }
}

/* Stop auto-centering on desktop so padding stays consistent */
@media (min-width: 1025px) {
    .content-image-split__content > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1025px) {
    .content-image-split__content {
        padding-left: 120px !important; /* whatever you choose */
    }
}

@media (min-width: 1025px) {
    .content-image-split__content > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1025px) {
    .content-image-split__content {
        padding-left: 120px !important; /* adjust to taste */
    }

    .image-left .content-image-split__content {
        padding-left: 120px !important;
    }
}

/* ============================================================
   LARGE DESKTOP — content further RIGHT
============================================================ */
@media (min-width: 1440px) {
    .content-image-split__content {
        padding-left: 200px !important; /* adjust for how far right you want it */
    }
}


/* ============================================================
   LAPTOP / SMALL DESKTOP — content further LEFT
   (Anything from 1025px up to 1439px)
============================================================ */
@media (min-width: 1025px) and (max-width: 1439px) {
    .content-image-split__content {
        padding-left: 80px !important; /* adjust for how far left it should be */
    }
}

/* Large desktop: reduce content width so it sits further left */
@media (min-width: 1440px) {
    .content-image-split__content > * {
        max-width: 550px; /* adjust this number */
    }
}