.image-text-section {
    position: relative;
}

.image-text-image img {
    height: auto;
    object-fit: cover;
}

/* Explicit width — unlike <img>, a bare <video> has no theme-wide max-width:100% reset, so without this it would render at its intrinsic box instead of filling the column. */
.image-text-image video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-text-title {
    margin-bottom: 1.5rem;
}

.image-text-body p {
    margin-bottom: 1rem;
}

/* Matches the established CTA button convention across flexible-content layouts (e.g. .banner-cta-button in 5050-banner-cta.css) — same colors, padding, radius, and hover text-slide animation. */
.image-text-cta {
    background-color: var(--bs-main-500);
    /* !important: a global link-color rule was winning over the plain (non-:hover) state since :hover carries extra specificity, so only hover rendered black without this. */
    color: var(--bs-black) !important;
    width: fit-content;
    padding: 12px 32px;
    height: 48px;
    font-weight: 600;
    border-radius: 2px;
    gap: 12px;
    margin-top: 1.5rem;
}

/* No color change on hover — same as .banner-cta-button:hover — only the text-slide below animates. */
.image-text-cta:hover {
    color: var(--bs-black) !important;
}

/* Hover text-slide: the visible label and its aria-hidden duplicate both translate up 100%, the same "signature" two-span animation used sitewide (.banner-cta-text, .fixed-cta-text, .btn-404-text). */
.image-text-cta-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2;
}

.image-text-cta-text span {
    display: block;
    transition: transform 0.3s ease;
    white-space: nowrap;
}

.image-text-cta-text span:last-child {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.image-text-cta:hover .image-text-cta-text span {
    transform: translateY(-100%);
}

/* .image-text-image is a flex container, so a plain block child would collapse to 0 width without an in-flow reference — explicit width:100% gives it the same full-column sizing img/video already get. */
.image-text-image .wistia-video-wrapper {
    width: 100%;
}

/* Wistia's JS builds its player chrome/video at runtime with an inline object-fit: contain style that letterboxes it — !important is needed to win over that inline style once it exists in the DOM. */
.image-text-image .wistia-video-wrapper .wistia_embed,
.image-text-image .wistia-video-wrapper .w-chrome,
.image-text-image .wistia-video-wrapper .w-video-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.image-text-image .wistia-video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.image-text-image {
    display: flex;
    width: 50%;
    /* Kept defensively for if this column's own box is ever taller than the image — .image-section-wrapper's align-items (below) does the actual centering now that neither column stretches. */
    align-items: center;
    justify-content: center;
}

/* Opt-in override via the "align_image_bottom" ACF toggle, for images cropped tight at the subject that should ground against the bottom instead of floating from the default vertical centering; align-self (not align-items) since it overrides how the parent positions this column. */
.image-text-image.align-bottom-image {
    align-self: flex-end;
}

/* Opt-in via the "grayscale_image" ACF toggle (color by default). Applied to the column
   wrapper rather than the img/video directly so it also covers Wistia's own video/poster
   markup without needing a separate selector per media type. */
.image-text-image.grayscale-image {
    filter: grayscale(1);
}

/* Mask position's image isn't wrapped by .image-text-image (see content-image-banner.php) —
   on desktop it's a background-image shared with the text column, which the toggle can't
   safely target without also graying out the text, so this only covers its mobile-only <img>. */
.mask-image-mobile img.grayscale-image {
    filter: grayscale(1);
}

.image-text-wrapper {
    display: flex;
    width: 50%;
    padding: 80px 0;
}

/* .image-text-content's default flex min-width is "auto" (its longest unbreakable text run, not the 50% column), so a long unbroken string would overflow past the column instead of wrapping. */
.image-text-content {
    min-width: 0;
    overflow-wrap: break-word;
}

.image-text-body ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 15px;
}

.padding-extended {
    padding: 120px 0;
}

.white-variation .italic-dark {
    color: var(--bs-main-500) !important;
}

.white-variation .image-text-title {
    color: var(--bs-white) !important;
}

.white-variation .image-text-body {
    color: var(--bs-white) !important;
}

.content-right {
    justify-content: flex-end;
}

.content-left {
    justify-content: flex-start;
}

.image-text-image.image-wide {
    justify-content: normal;
    width: fit-content;
}

.image-text-wrapper.image-wide {
    width: fit-content;
}

/* Base gap for the default 50/50 variant — previously undefined, so the columns sat flush together; .image-wide below repeats the value explicitly rather than relying on cascade. */
.image-section-wrapper {
    gap: 40px;
}

.image-section-wrapper.image-wide {
    gap: 40px;
    padding-top: 40px;
}

/* Desktop only — without this, align-items:stretch forces the text column to match the taller image's height, which is why the "Padding Extended" ACF toggle looked like it did nothing; centering both on their natural height fixes it. */
@media (min-width: 1201px) {
    .image-section-wrapper {
        align-items: center;
    }
}

.image-text-body li {
    position: relative;
    padding-left: 20px;
}

.image-text-body li::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 3px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10.0003 1.66675C14.6027 1.66675 18.3337 5.39771 18.3337 10.0001C18.3337 14.6025 14.6027 18.3334 10.0003 18.3334C5.39795 18.3334 1.66699 14.6025 1.66699 10.0001C1.66699 5.39771 5.39795 1.66675 10.0003 1.66675ZM10.0719 12.894C9.61399 12.894 9.24268 13.2639 9.24268 13.72C9.24283 14.1759 9.61409 14.5452 10.0719 14.5452H10.0801C10.5379 14.5452 10.9092 14.1759 10.9093 13.72C10.9093 13.2639 10.538 12.894 10.0801 12.894H10.0719ZM10.0719 5.3785C9.61405 5.3785 9.24277 5.7485 9.24268 6.20451V11.325C9.24276 11.781 9.61404 12.151 10.0719 12.151C10.5298 12.1509 10.9011 11.7809 10.9012 11.325V6.20451C10.9011 5.74852 10.5298 5.37854 10.0719 5.3785Z' fill='%2344C2CE'/></svg>") no-repeat center;
}

@media (max-width: 1200px) {
    .image-section-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .image-text-body ul {
        padding-left: 0;
    }

    .image-text-body li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        width: 8px;
        height: 8px;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M6.29738 3.64457C6.14189 3.72732 5.99028 3.79878 5.84257 3.85896C5.69485 3.91914 5.54325 3.96427 5.38776 3.99436C5.69874 4.05454 6.00194 4.17489 6.29738 4.35543L8 5.3371L7.16035 6.67983L5.45773 5.69817C5.14674 5.53268 4.89796 5.35214 4.71137 5.15656C4.80467 5.42736 4.85131 5.71697 4.85131 6.02539V8H3.14869V6.04796C3.14869 5.88999 3.15646 5.73578 3.17201 5.58533C3.19534 5.43489 3.23032 5.29196 3.27697 5.15656C3.1759 5.26187 3.06317 5.35966 2.93878 5.44993C2.81438 5.53267 2.68222 5.61542 2.54227 5.69817L0.83965 6.65726L0 5.31453L1.70262 4.35543C2.00583 4.18242 2.30515 4.06206 2.60058 3.99436C2.45287 3.97179 2.30126 3.93042 2.14577 3.87024C1.99806 3.80254 1.85034 3.72732 1.70262 3.64457L0 2.6629L0.83965 1.30888L2.54227 2.30183C2.85326 2.46732 3.10204 2.64786 3.28863 2.84344C3.19534 2.57264 3.14869 2.28303 3.14869 1.97461V0H4.85131V1.95204C4.85131 2.11001 4.83965 2.26422 4.81633 2.41467C4.80078 2.56511 4.76968 2.70804 4.72303 2.84344C4.8241 2.73813 4.93683 2.6441 5.06122 2.56135C5.18562 2.47109 5.31778 2.38458 5.45773 2.30183L7.16035 1.33145L8 2.68547L6.29738 3.64457Z' fill='%23ABABAB'/></svg>");
    }
}

@media (max-width: 992px) {
    .image-section-wrapper {
        flex-direction: column-reverse !important;
    }

    .image-text-wrapper {
        padding: 0 !important;
        width: 100% !important;
    }

    .image-text-image {
        width: 100% !important;
    }

    /* Full-bleed edge-to-edge — a mobile max-width:327px cap was removed since it centered the image with visible background instead of filling the column; max-height still caps very tall source images. */
    .image-text-image img,
    .image-text-image video {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }

    .image-section-wrapper {
        padding-top: 24px;
        /* More breathing room between the stacked image and text column than the 16px inherited from the 1200px breakpoint above. */
        gap: 24px;
        background-image: none !important;
    }
}