.image-with-text {
    display: flex;
    align-items: stretch;
    gap: 60px;
    /*
     * Image side: 0 padding — bleeds to the viewport edge.
     * Text side: padding mirrors how WP centers normal content blocks.
     *   max(1.5rem, (100% - contentSize) / 2)
     *   → on narrow viewports: 1.5rem minimum
     *   → on wider viewports: grows so the text's outer edge aligns exactly
     *     with where other page content ends (contentSize boundary).
     */
    padding: 60px max(1.5rem, calc((100% - var(--wp--style--global--content-size, 1390px)) / 2)) 60px 0;
    position: relative;
    overflow: hidden;
}

/* Image section — default: grows to fill, text column is fixed */
.image-with-text__image {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.image-with-text__image img {
    width: 100%;
    height: 100%;
    max-height: inherit;
    display: block;
    /* object-fit set via inline style from ACF */
}

/* Content section — transparent, inherits wrapper bg */
.image-with-text__content {
    flex-shrink: 0;
    width: 446px;
    padding-top: 80px;
    position: relative;
    z-index: 1;
}

/* Ensure all text inherits color */
.image-with-text__content,
.image-with-text__heading,
.image-with-text__text,
.image-with-text__text p,
.image-with-text__text a {
    color: inherit;
}

.image-with-text__heading {
    margin: 0;
    font-size: 48px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.image-with-text__text {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.image-with-text__text p {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.image-with-text__text p:last-child {
    margin-bottom: 0;
}

.image-with-text__cta {
    margin-top: 0;
}

/* Button — colors from CSS vars set inline by ACF */
.image-with-text .btn {
    background-color: var(--iwt-btn-bg, var(--wp--preset--color--navy-blue));
    color: var(--iwt-btn-color, var(--wp--preset--color--white));
    border: none;
    border-radius: 2rem;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    padding: 0 24px;
    text-decoration: none;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.image-with-text .btn:hover {
    background-color: var(--iwt-btn-hover-bg, var(--wp--preset--color--royal-blue));
    color: var(--iwt-btn-hover-color, var(--wp--preset--color--white));
}

/* Overlay (bg image mode) */
.image-with-text__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.image-with-text__content-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

/* Right position — image on right, text on left */
.image-with-text--right {
    flex-direction: row-reverse;
    padding: 60px 0 60px max(60px, calc((100% - var(--wp--style--global--content-size, 1390px)) / 2));
}

/* ─── Aspect-ratio modes ──────────────────────────────────────────────────────
   --iwt-img-w is emitted from PHP: the max-width value in px, or 60% default.
   With an explicit width the height is derived cleanly from aspect-ratio.
   No position:absolute needed — normal flow fills the sized container.
   ─────────────────────────────────────────────────────────────────────────── */
.image-with-text--img-aspect .image-with-text__image {
    flex: none;
    min-height: 0;
    /* aspect-ratio from inline style: height = width × ratio */
}

.image-with-text--img-aspect .image-with-text__image img {
    width: 100%;
    height: 100%;
    max-height: none;
}

/* ─── Constrained layout (aspect-ratio modes + max-width/height fields) ────────
   Image is self-sized; text expands to fill the remaining space. The wrapper
   padding already aligns the text's outer edge with the site content zone.
   ─────────────────────────────────────────────────────────────────────────── */
.image-with-text--img-constrained .image-with-text__image {
    min-height: 0;
}

.image-with-text--img-constrained .image-with-text__content {
    flex: 1;
    width: auto;
    min-width: 0;
}

@media (max-width: 1510px) {
    .image-with-text--img-aspect .image-with-text__image {
        width: var(--iwt-img-w, 60%);
    }
}

/* Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .image-with-text,
    .image-with-text--right {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .image-with-text__image {
        flex: none;
        width: 100%;
        /* height (not just min-height) so the img's `height: 100%` below
           has a definite containing block to resolve against. On desktop
           the row's `align-items: stretch` gives this container its
           height; that goes away once the row becomes a column here, and
           without an explicit height an unconstrained image/icon can
           render at an oversized intrinsic height instead of filling
           this box. */
        height: 260px;
        min-height: 260px;
    }

    /* Aspect-ratio mode on mobile: full width, height from ratio */
    .image-with-text--img-aspect .image-with-text__image {
        width: 100%;
    }

    .image-with-text__content,
    .image-with-text--img-constrained .image-with-text__content {
        flex: none;
        width: 100%;
        padding: 2rem;
        box-sizing: border-box;
    }

    .image-with-text__heading {
        font-size: 1.75rem;
    }

    .image-with-text__text {
        font-size: 1rem;
    }
}

/* ─── No image — text-only panel ──────────────────────────────────────────────
   The image column is omitted, so the content spans the content zone on both
   sides instead of leaving the image's empty gutter.
   ─────────────────────────────────────────────────────────────────────────── */
.image-with-text--no-image,
.image-with-text--no-image.image-with-text--right {
    padding: 60px max(1.5rem, calc((100% - var(--wp--style--global--content-size, 1390px)) / 2));
}

.image-with-text--no-image .image-with-text__content,
.image-with-text--no-image.image-with-text--img-constrained .image-with-text__content {
    flex: 1;
    width: auto;
    padding-top: 0;
}

@media (max-width: 768px) {
    .image-with-text--no-image,
    .image-with-text--no-image.image-with-text--right {
        padding: 0;
    }
}

/* ─── Stacked layout (opt-in "Stacked Layout" checkbox) ───────────────────────
   Image above the text, compact padding — the look previously forced on
   Project pages.
   ─────────────────────────────────────────────────────────────────────────── */
.image-with-text.image-with-text--stacked {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

.image-with-text.image-with-text--stacked .image-with-text__content {
    width: 100%;
    padding: 0;
}

/* ─── Inside a single column (e.g. Project page body) ─────────────────────────
   Keep the side-by-side site look, but scale it down to the column: no
   viewport-edge bleed, a half-width image and tighter text spacing.
   ─────────────────────────────────────────────────────────────────────────── */
:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked, .image-with-text--no-image) {
    padding: 0;
    gap: 1.5rem;
}

:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked) .image-with-text__image {
    flex: none;
    width: 50%;
    max-width: none;
}

:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked, .image-with-text--no-image) .image-with-text__content {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 1.5rem 1.5rem 1.5rem 0;
}

:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked, .image-with-text--no-image).image-with-text--right .image-with-text__content {
    padding: 1.5rem 0 1.5rem 1.5rem;
}

:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked) .image-with-text__heading {
    font-size: 1.75rem;
}

:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked) .image-with-text__text,
:is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked) .image-with-text__text p {
    font-size: 1rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    :is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked) .image-with-text__image {
        width: 100%;
    }

    :is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked, .image-with-text--no-image) .image-with-text__content,
    :is(.services-block-content, .wp-block-column) .image-with-text:not(.image-with-text--stacked, .image-with-text--no-image).image-with-text--right .image-with-text__content {
        padding: 2rem;
    }
}