/* ==========================================================================
   Card - Media / Text band
   Single template serving both "text left / image right" (default) and
   "image left / text right". The only difference between the two variants is
   the .media-text--image-left modifier below, which flips the flex direction
   at the desktop breakpoint. Markup and DOM order are identical for both, so
   reading order and focus order stay heading -> copy -> CTA -> image.

   Namespaced entirely under .media-text* so it cannot leak into the existing
   Card templates or into shared Greenheck / Valent widget classes.
   Breakpoint follows the house system in common.css: mobile <=877px.
   ========================================================================== */

.media-text {
    margin-bottom: 48px;
}

.media-text__row {
    display: flex;
    flex-direction: column; /* mobile: copy first, image underneath, both variants */
    gap: 24px;
}

/* min-width:0 stops the flex item itself from being forced wider than its
   track. It does NOT wrap the text inside it, so overflow-wrap below is
   required as well - without it a long part number or pasted URL paints
   straight past the column and scrolls the whole page sideways on mobile. */
.media-text__content,
.media-text__media {
    min-width: 0;
}

.media-text__title {
    margin: 0 0 14px;
    font-family: var(--font-family-bold);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-near-black);
    overflow-wrap: break-word;
}

.media-text__description {
    font-family: var(--font-family-medium);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-near-black);
    overflow-wrap: break-word;
}

.media-text__description p {
    margin-bottom: 1em;
}

.media-text__description p:last-child {
    margin-bottom: 0;
}

/* Empty paragraphs pasted in from Word / Google Docs, same guard as
   card-right-img-para-v2.css */
.media-text__description p:empty {
    display: none;
}

.media-text__cta {
    margin-top: 24px;
}

/* Scoped to this component so the shared .btn-primary is never restyled globally. */
.media-text .btn-primary.media-text__cta {
    width: fit-content;
}

.media-text__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Tablet and up - side by side
   -------------------------------------------------------------------------- */
@media (min-width: 878px) {
    .media-text {
        margin-bottom: 64px;
    }

    .media-text__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 64px;
    }

    .media-text__content {
        flex: 0 1 55%;
    }

    .media-text__media {
        flex: 0 1 40%;
    }

    /* The whole alignment feature. Scoped inside the media query on purpose:
       below 878px both variants must stack copy-first, so the flip must not
       apply there. */
    .media-text--image-left .media-text__row {
        flex-direction: row-reverse;
    }

    .media-text__title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .media-text__description {
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .media-text {
        margin-bottom: 80px;
    }

    .media-text__title {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------------
   No image - copy runs full width
   -------------------------------------------------------------------------- */
.media-text--no-image .media-text__content {
    flex: 1 1 100%;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .media-text__cta {
        transition: none;
    }
}
.sf_colsIn.w-full > section.media-text.media-text--image-right.media-text--no-image:only-child {
  margin-bottom: 12px !important;
}