/* ============================================================
   CONTENT + IMAGE CLEAN — NEW GENERATION (GLOBAL-COMPATIBLE)
============================================================ */

.content-image-clean {
    width: 100%;
    background: var(--color-white);
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

/* INNER — FLEXIBLE TWO COLUMN DESKTOP */
.content-image-clean__inner {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--space-xl);
    align-items: stretch;     /* IMPORTANT — allows image to fill the entire column */
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* ------------------------------------------------------------
   TEXT COLUMN
------------------------------------------------------------ */

.content-image-clean__heading {
    text-align: left;
    margin-bottom: var(--space-sm);
}

.content-image-clean__text {
    text-align: left;
    max-width: 700px;
}

.content-image-clean__text p {
    margin-bottom: var(--space-sm);
}

/* ------------------------------------------------------------
   IMAGE COLUMN (UPDATED)
------------------------------------------------------------ */

/* Wrapper must stretch so the image can fill it */
.content-image-clean__image {
    width: 100%;
    height: 100%;          /* <— makes column height available to the image */
    overflow: hidden;      /* <— crop the image cleanly */
    display: flex;         /* <— optional: keeps image centered */
    align-items: center;
    justify-content: center;
}

/* The image now fills the entire column */
.content-image-clean__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* <— THIS is the full-column behaviour */
    object-position: center;  
    display: block;
}

/* ------------------------------------------------------------
   LEFT/RIGHT SWITCH
------------------------------------------------------------ */

.content-image-clean.image-right .content-image-clean__content { order: 1; }
.content-image-clean.image-right .content-image-clean__image   { order: 2; }

.content-image-clean.image-left .content-image-clean__content  { order: 2; }
.content-image-clean.image-left .content-image-clean__image    { order: 1; }

/* ============================================================
   TABLET ≤ 1024px — STACKED, CENTERED
============================================================ */

@media (max-width: 1024px) {

    .content-image-clean__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
    }

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

    /* Stack cleanly, always text first */
    .content-image-clean__content { order: 1 !important; }
    .content-image-clean__image   { order: 2 !important; }

    .content-image-clean__image {
        height: auto; /* let image return to natural height on tablet */
    }

    .content-image-clean__image img {
        height: auto;
        max-width: 100%;
        object-fit: contain; /* look nice on smaller screens */
    }
}

/* ============================================================
   MOBILE ≤ 600px
============================================================ */

@media (max-width: 600px) {

    .content-image-clean__image img {
        max-width: 100%;
        height: auto;
    }

    .content-image-clean__text {
        padding: 0 var(--space-xs);
    }
}

/* ============================================================
   CONTENT + IMAGE CLEAN — FIXED, CLEAN, NO EXTRA HEIGHT
============================================================ */

.content-image-clean {
    width: 100%;
    background: var(--color-white);
    padding: var(--section-padding-y) var(--section-padding-x);
}

/* Desktop 50/50 layout — NO STRETCHING */
.content-image-clean__inner {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--space-xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    align-items: start !important; /* prevent tall image column */
}

/* ------------------------------------------------------------
   TEXT
------------------------------------------------------------ */

.content-image-clean__heading {
    text-align: left;
    margin-bottom: var(--space-sm);
}

.content-image-clean__text {
    text-align: left;
    max-width: 700px;
}

.content-image-clean__text p {
    margin-bottom: var(--space-sm);
}

/* ------------------------------------------------------------
   IMAGE — FIX ALL HEIGHT ISSUES
------------------------------------------------------------ */

.content-image-clean__image {
    width: 100%;
    height: auto !important;       /* no forced stretching */
    overflow: hidden;              /* crop any scale overflow */
    display: flex;
    align-items: flex-start;       /* align image to top */
    justify-content: center;
    padding: 0 !important;         /* remove extra padding */
}

.content-image-clean__image img {
    width: 100%;
    height: auto !important;       /* allow natural height */
    object-fit: cover;
    object-position: center;
    display: block;
    transform: none;               /* default — scaled below */
}

/* ============================================================
   TABLET ≤ 1024px — STACKED + IMAGE SMALLER
============================================================ */

@media (max-width: 1024px) {

    .content-image-clean__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
        align-items: start !important;
    }

    .content-image-clean__content {
        order: 1 !important;
    }

    .content-image-clean__image {
        order: 2 !important;
        height: auto !important;
        padding: 0 !important;
    }

    .content-image-clean__image img {
        width: 90%;                 /* smaller image */
        transform: scale(0.9);
        transform-origin: center top;
        object-fit: contain !important;
    }
}

/* ============================================================
   MOBILE ≤ 600px — IMAGE EVEN SMALLER
============================================================ */

@media (max-width: 600px) {

    .content-image-clean__image {
        padding: 0 !important;
        height: auto !important;
    }

    .content-image-clean__image img {
        width: 85%;
        height: auto;
        transform: scale(0.85);
        transform-origin: center top;
    }

    .content-image-clean__text {
        padding: 0 var(--space-xs);
    }
}

/* ============================================================
   OPTIONAL: SCALE IMAGE ON DESKTOP (remove if not needed)
============================================================ */

@media (min-width: 1025px) {
    .content-image-clean__image img {
        transform: scale(0.8);     /* adjust desktop size */
        transform-origin: top center;
    }
}

/* ============================================================
   RESET BROKEN SCALE BEHAVIOUR (critical)
============================================================ */

.content-image-clean__image img {
    transform: none !important;   /* remove scaling */
    height: auto !important;
    width: 100%;
    object-fit: cover;
}


/* ============================================================
   DESKTOP — 50/50, NO EXTRA BOTTOM SPACE
============================================================ */

@media (min-width: 1025px) {

    .content-image-clean__inner {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: start;              /* stops columns from stretching */
    }

    .content-image-clean__image {
        height: auto !important;         /* wrapper collapses to image height */
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;            /* remove ghost spacing */
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .content-image-clean__image img {
        width: 85%;                      /* smaller desktop image */
        height: auto;
        object-fit: cover;
    }
}


/* ============================================================
   TABLET ≤ 1024px — STACK + SMALLER IMAGE
============================================================ */

@media (max-width: 1024px) {

    .content-image-clean__inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-lg);
    }

    .content-image-clean__image {
        height: auto !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-image-clean__image img {
        width: 80%;               /* tablet size */
        height: auto;
        object-fit: contain;
    }
}


/* ============================================================
   MOBILE ≤ 600px — EVEN SMALLER IMAGE
============================================================ */

@media (max-width: 600px) {

    .content-image-clean__image {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-image-clean__image img {
        width: 75%;               /* mobile size */
        height: auto;
        object-fit: contain;
    }
}