/**
 * seamlessmd/image-text — front-end styles.
 *
 * BEM root .seamlessmd-image-text with three variants:
 *   --variant-image-left   Image visually on the LEFT at >=992px.
 *   --variant-image-right  Image visually on the RIGHT at >=992px.
 *   --variant-image-top    Image stacked on top, narrow centered container.
 *
 * DOM is always image-first, text-second. Variant names describe where the
 * IMAGE sits on desktop; source order is swapped via flex `order`. Mobile
 * always stacks image above text regardless of variant.
 */

.seamlessmd-image-text {
	/* Horizontal padding + max-width are now owned by the shared
	 * .seamlessmd-container utility on __inner; the outer only owns
	 * vertical rhythm via the section-pad token. */
	padding-block: var(--seamlessmd-section-pad);
	color: var(--seamlessmd-text, #1e2a5c);
	background: var(--seamlessmd-bg, #fff);
}

/* Inner wrapper carries the shared `.seamlessmd-container` class in
 * render.php — that gives it max-width + responsive horizontal gutter.
 * Layout (flex column + gap) stays here; width/margin do not. */
.seamlessmd-image-text__inner {
	display: flex;
	flex-direction: column;
	gap: var(--seamlessmd-space-6, 2rem);
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * Media column
 * ------------------------------------------------------------------ */

.seamlessmd-image-text__media {
	margin: 0;
	width: 100%;
	min-width: 0;
	position: relative;
}

.seamlessmd-image-text__image {
	max-height: 350px;
	/* border-radius: var(--seamlessmd-radius-lg, 16px); */
	/* box-shadow: var(--seamlessmd-shadow-md, 0 4px 16px rgba(30, 42, 92, 0.08)); */
}

/* Optional video-lightbox play overlay (design §5.3). Mirrors the
 * hero-banner use-case play-button affordance but scoped to the
 * image-text figure. The wrapping .seamlessmd-image-text parent
 * selector raises specificity above WP editor-canvas core rules
 * (per .claude/blocks.md §5). */
.seamlessmd-image-text .seamlessmd-image-text__play {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #ffffff;
	border-radius: var(--seamlessmd-radius-lg, 16px);
	transition: background-color 200ms ease;
}

.seamlessmd-image-text .seamlessmd-image-text__play:focus-visible {
	outline: 3px solid var(--seamlessmd-primary, #2563eb);
	outline-offset: 3px;
}

.seamlessmd-image-text .seamlessmd-image-text__play:hover {
	background: rgba(30, 42, 92, 0.22);
}

.seamlessmd-image-text .seamlessmd-image-text__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 8px 24px rgba(30, 42, 92, 0.28);
	transition: transform 200ms ease, background-color 200ms ease;
}

.seamlessmd-image-text .seamlessmd-image-text__play:hover .seamlessmd-image-text__play-icon {
	transform: scale(1.06);
	background: #ffffff;
}

.seamlessmd-image-text .seamlessmd-image-text__play-icon::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-inline-start: 6px; /* visual centring of the triangle within the circle */
	border-style: solid;
	border-width: 14px 0 14px 22px;
	border-color: transparent transparent transparent var(--seamlessmd-primary, #2563eb);
}

@media (prefers-reduced-motion: reduce) {
	.seamlessmd-image-text .seamlessmd-image-text__play,
	.seamlessmd-image-text .seamlessmd-image-text__play-icon {
		transition: none;
	}
}

.seamlessmd-image-text__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	width: 100%;
	background: var(--seamlessmd-surface-alt, #f4f6f8);
	color: var(--seamlessmd-muted, #5a6b7a);
	border-radius: var(--seamlessmd-radius-lg, 16px);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.seamlessmd-image-text__caption {
	margin-top: var(--seamlessmd-space-2, 0.5rem);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--seamlessmd-muted, #5a6b7a);
}

/* ------------------------------------------------------------------ *
 * Multi-image row (`images` array, 1–4 items)
 *
 * Pure flex: images sit next to each other in a single row, each
 * capped at a shared max-height with width auto-derived from the
 * intrinsic aspect ratio. The desktop outer-row layout (defined
 * further down) makes the figure intrinsic-width so content fills
 * the rest of the row. On mobile (<992px) the outer flex switches
 * to column — content stacks above/below the image row — but the
 * image row itself stays flex so images stay side-by-side, just
 * scaled down via a tighter max-height.
 * ------------------------------------------------------------------ */

.seamlessmd-image-text__images {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--seamlessmd-space-3, 0.75rem);
	align-items: center;
	justify-content: center;
}

.seamlessmd-image-text__image-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.seamlessmd-image-text__image-cell .seamlessmd-image-text__image {
	max-height: 28.125rem;     /* 450px at 16px root */
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
}

/* On phones — keep images side-by-side but cap height lower so the
 * row doesn't dominate the viewport. */
@media (max-width: 575px) {
	.seamlessmd-image-text__image-cell .seamlessmd-image-text__image {
		max-height: 14rem; /* 224px */
	}
}

/* Stacked variant keeps the single-column behaviour — each screenshot
 * gets its own row, matching source pages where iOS screenshots sit
 * on top of each other inside the right-hand media column. */
.seamlessmd-image-text--images-layout-stacked .seamlessmd-image-text__images {
	flex-direction: column;
	gap: var(--seamlessmd-space-5, 1.5rem);
	max-width: 360px;
	margin-inline: auto;
}

.seamlessmd-image-text--images-layout-stacked .seamlessmd-image-text__image-cell .seamlessmd-image-text__image {
	width: 100%;
	height: auto;
	max-height: none;
	display: block;
}

.seamlessmd-image-text__caption--per-image {
	display: block;
	margin-top: var(--seamlessmd-space-2, 0.5rem);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--seamlessmd-muted, #5a6b7a);
	text-align: center;
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__caption--per-image {
	color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------ *
 * Text column
 * ------------------------------------------------------------------ */

.seamlessmd-image-text__content {
	width: 100%;
	min-width: 0;
}

.seamlessmd-image-text__eyebrow {
	margin: 0 0 var(--seamlessmd-space-2, 0.5rem);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--seamlessmd-primary, #2563eb);
}

.seamlessmd-image-text__heading {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
	font-size: clamp(1.625rem, 2.8vw, 2.25rem);
	line-height: 1.2;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

/* Body is rendered with `white-space: pre-line` so newlines the editor
 * types in the Body textarea render as visual line breaks — no bullet
 * repeater needed; admins just type one item per line. HTML in the
 * body still works (wp_kses_post-allowed tags) and behaves normally;
 * the pre-line rule only acts on whitespace runs and `\n` characters. */
.seamlessmd-image-text__body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--seamlessmd-text, #1e2a5c);
	white-space: pre-line;
}

.seamlessmd-image-text__body p {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
}

.seamlessmd-image-text__body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * CTAs
 * ------------------------------------------------------------------ */

.seamlessmd-image-text__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--seamlessmd-space-3, 0.75rem);
	margin-top: var(--seamlessmd-space-5, 1.5rem);
}

.seamlessmd-image-text__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------ *
 * Desktop layout — side-by-side for left/right variants
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
	.seamlessmd-image-text--variant-image-left .seamlessmd-image-text__inner,
	.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__inner {
		flex-direction: row;
		gap: var(--seamlessmd-space-8, 3rem);
		align-items: center;
	}

	/* Media at desktop drops the mobile-stack `width: 100%` and sizes
	 * to the intrinsic content width — for single images that's the
	 * image's natural width at max-height; for multi-image rows it's
	 * the sum of each image's auto-derived width plus the row gap.
	 * `max-width: 50%` keeps a single very-wide image from eating the
	 * whole row. Content takes everything left over via `flex: 1 1 0`. */
	.seamlessmd-image-text--variant-image-left .seamlessmd-image-text__media,
	.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__media {
		flex: 0 1 auto;
		width: auto;
		max-width: 60%;
	}

	/* Text fills the rest of the row. When the figure is omitted (no
	 * imageUrl / no images[] / no lightbox / not in admin), content
	 * is the sole flex child and spans the full container width via
	 * the no-media rule below. */
	.seamlessmd-image-text--variant-image-left .seamlessmd-image-text__content,
	.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__content {
		flex: 1 1 0;
		min-width: 0;
	}

	/* No-media variant: figure was omitted server-side, content is
	 * the only flex child. Keep it full-width and centred-content
	 * for prose legibility (max-width on inner prose, not on column). */
	.seamlessmd-image-text--no-media .seamlessmd-image-text__content {
		flex: 1 1 100%;
	}

	/*
	 * image-right: DOM order is media-first, text-second — which at row
	 * direction puts the image on the left. We want the image on the right,
	 * so flip source order via `order`.
	 */
	.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__media {
		order: 2;
	}

	.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__content {
		order: 1;
	}

	/* image-left: DOM order already yields image-left, no order swap needed. */
}

/* ------------------------------------------------------------------ *
 * image-top variant — narrow centered layout
 * ------------------------------------------------------------------ */

.seamlessmd-image-text--variant-image-top .seamlessmd-image-text__inner {
	/* Narrower content-legibility constraint for the centered image-top
	 * layout. This is a deliberate variant override of the shared
	 * container cap, not a duplicated horizontal-width contract. */
	max-width: 720px;
	text-align: center;
}

.seamlessmd-image-text--variant-image-top .seamlessmd-image-text__content {
	text-align: center;
}

.seamlessmd-image-text--variant-image-top .seamlessmd-image-text__ctas {
	justify-content: center;
}

/* ------------------------------------------------------------------ *
 * headingPlacement: above-columns
 *
 * Renders a clean
 *   <section><header/><__row><__media-cell/><__content-cell/></__row></section>
 * anatomy:
 *   - `<header class="__header">`  — eyebrow + heading + subheading,
 *     centred column on top, max-width 56rem.
 *   - `<div class="__row">`        — flex container for the body row,
 *     centred + capped at 60rem so it sits under the heading.
 *       - `<div class="__media-cell">` — wraps the `<img>`.
 *       - `<div class="__content-cell">` — wraps the editor body
 *         (typically two `.__contact-card` blocks).
 *
 * Variant flip: image-left vs image-right is handled by `flex-direction`
 * on `__row`; RTL inherits the existing snapshot convention (AR pages
 * pick the OPPOSITE LTR-named variant so the layout visually mirrors).
 * ------------------------------------------------------------------ */

.seamlessmd-image-text--heading-above-columns .seamlessmd-image-text__inner {
    /* Force column flow + stretch — overrides the desktop image-left /
     * image-right rule that turns __inner into `flex-direction: row` at
     * >=992px. In above-columns mode __inner stacks `<header>` on top
     * of `<__row>`; the side-by-side flow happens INSIDE `__row`, not on
     * `__inner` itself. */
    flex-direction: column;
    align-items: stretch;
}

@media (min-width: 992px) {
    /* Re-assert at the same media query level the inherited row-direction
     * rule lives in, so the cascade order is unambiguous regardless of
     * stylesheet position. */
    .seamlessmd-image-text--heading-above-columns.seamlessmd-image-text--variant-image-left .seamlessmd-image-text__inner,
    .seamlessmd-image-text--heading-above-columns.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__inner {
        flex-direction: column;
        align-items: stretch;
    }
}

.seamlessmd-image-text__header {
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.seamlessmd-image-text__header .seamlessmd-image-text__heading {
    margin-inline: auto;
    max-width: 56rem;
}

.seamlessmd-image-text__header .seamlessmd-image-text__eyebrow,
.seamlessmd-image-text__header .seamlessmd-image-text__subheading {
    text-align: center;
}

.seamlessmd-image-text__subheading {
    margin: var(--seamlessmd-space-3, 0.75rem) auto 0;
    max-width: 56rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--seamlessmd-muted, #5a6b7a);
}

.seamlessmd-image-text__row {
    display: flex;
    flex-direction: column;
    gap: var(--seamlessmd-space-6, 2rem);
    align-items: center;
    /* `__row` is the body wrapper. Centred + width-capped so it sits
     * under the heading. 60rem mirrors the heading's 56rem cap with a
     * small bleed for the side-by-side gap. */
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
}

.seamlessmd-image-text__media-cell {
    flex: 0 1 auto;
    min-width: 0;
}

.seamlessmd-image-text__media-cell .seamlessmd-image-text__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 24rem;
}

.seamlessmd-image-text__content-cell {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

@media (min-width: 992px) {
    /* Desktop: image + content side-by-side under the header. */
    .seamlessmd-image-text--heading-above-columns .seamlessmd-image-text__row {
        flex-direction: row;
        align-items: center;
        gap: var(--seamlessmd-space-8, 3rem);
    }

    .seamlessmd-image-text--heading-above-columns .seamlessmd-image-text__media-cell {
        flex: 0 0 auto;
        max-width: 65%;
    }

    .seamlessmd-image-text--heading-above-columns .seamlessmd-image-text__content-cell {
        flex: 1 1 0;
    }

    /* image-right (LTR): row-reverse so image visually right. */
    .seamlessmd-image-text--heading-above-columns.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__row {
        flex-direction: row-reverse;
    }

    /* RTL: `flex-direction: row` follows writing direction (RTL row is
     * right-to-left), which inverts our LTR visual intent. Flip the
     * direction back so each variant KEEPS its LTR-named visual side
     * (matches the existing image-text RTL convention on the row-based
     * `in-column` layout via `order`). Then the snapshot convention
     * (AR pages pick the OPPOSITE LTR-named variant) drives the AR
     * mirror — AR `image-right` ends up with image visually on the
     * right, AR `image-left` with image visually on the left. */
    [dir="rtl"] .seamlessmd-image-text--heading-above-columns.seamlessmd-image-text--variant-image-left .seamlessmd-image-text__row {
        flex-direction: row-reverse;
    }
    [dir="rtl"] .seamlessmd-image-text--heading-above-columns.seamlessmd-image-text--variant-image-right .seamlessmd-image-text__row {
        flex-direction: row;
    }
}

/* ------------------------------------------------------------------ *
 * Contact-card sub-pattern (used inside the body when the editor seeds
 * stacked contact-info groups — Email Us, Hours — alongside the
 * `headingPlacement: above-columns` treatment).
 *
 * Anatomy mirrors the source's `div-block-136`: a two-cell row per card
 * — `.__contact-card-icon` (narrow, left/start) holding a raw <img>
 * glyph, and `.__contact-card-content` (flex-fill, right/end) stacking
 * the `<h4 class="__contact-card-title">` over the
 * `<div class="__contact-card-body">` paragraphs. In RTL the
 * `flex-direction: row` follows writing direction, so the icon
 * naturally moves to the inline-end (visually right) side.
 *
 * Markup pattern (seeded into `body`, passed through `wp_kses_post`):
 *
 *   <div class="seamlessmd-image-text__contact-card">
 *     <div class="seamlessmd-image-text__contact-card-icon">
 *       <img src=".../mail_icon.svg" alt="" width="36" loading="lazy">
 *     </div>
 *     <div class="seamlessmd-image-text__contact-card-content">
 *       <h4 class="seamlessmd-image-text__contact-card-title">Email Us</h4>
 *       <div class="seamlessmd-image-text__contact-card-body">…</div>
 *     </div>
 *   </div>
 * ------------------------------------------------------------------ */

.seamlessmd-image-text__contact-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--seamlessmd-space-4, 1rem);
    /* Inter-card spacing — `margin-bottom` instead of `gap` on the parent
     * because the parent (`__body`) is shared with non-card content paths
     * and `:has()` parent matching is browser-version-sensitive. Direct
     * margin keeps the layout deterministic across engines and survives
     * the body's `white-space: pre-line` cascade unchanged. */
    margin-bottom: var(--seamlessmd-space-8, 3rem);
}

.seamlessmd-image-text__contact-card:last-child {
    margin-bottom: 0;
}

.seamlessmd-image-text__contact-card-icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: 2.25rem;
    flex-shrink: 0;
}

.seamlessmd-image-text__contact-card-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.seamlessmd-image-text__contact-card-content {
    flex: 1 1 auto;
    min-width: 0;
}

.seamlessmd-image-text__contact-card-title {
    margin: 0 0 var(--seamlessmd-space-1, 0.25rem);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-image-text__contact-card-body {
    /* Paragraphs inside the card body keep the body's default p spacing
     * (see `.__body p` below). No extra rules needed. */
    white-space: normal;
}

.seamlessmd-image-text__contact-card-body p {
    margin: 0 0 var(--seamlessmd-space-1, 0.25rem);
}

.seamlessmd-image-text__contact-card-body p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Responsive — smaller paddings + RTL mirror
 * ------------------------------------------------------------------ */

@media (max-width: 719px) {
	/* Horizontal padding is owned by the shared .seamlessmd-container
	 * utility; vertical rhythm is owned by the global --seamlessmd-section-pad
	 * token (which already steps down at smaller breakpoints). Only the
	 * mobile heading size remains a block-local concern. */
	.seamlessmd-image-text__heading {
		font-size: 1.625rem;
	}
}

/*
 * RTL: the `order` swap for image-right is based on visual LTR left/right.
 * In RTL, flex `row` naturally reverses direction, so we restore DOM order
 * to keep the image visually on the right in the RTL reading direction.
 */
[dir="rtl"] .seamlessmd-image-text--variant-image-right .seamlessmd-image-text__media {
	order: 1;
}

[dir="rtl"] .seamlessmd-image-text--variant-image-right .seamlessmd-image-text__content {
	order: 2;
}

[dir="rtl"] .seamlessmd-image-text--variant-image-left .seamlessmd-image-text__media {
	order: 2;
}

[dir="rtl"] .seamlessmd-image-text--variant-image-left .seamlessmd-image-text__content {
	order: 1;
}

/* ------------------------------------------------------------------ *
 * Appearance: dark
 *
 * Full-bleed dark-navy section with white text and no card chrome.
 * Used for alternating-row hero rhythms where some rows need to
 * anchor the visual flow. Image keeps its rounded corners + shadow
 * so it pops against the dark backdrop instead of dissolving into it.
 *
 * All overrides are scoped to `.--appearance-dark` so the existing
 * light-appearance rules above are untouched and remain the default.
 * ------------------------------------------------------------------ */

.seamlessmd-image-text--appearance-dark {
	background: var(--seamlessmd-dark-navy, #1e2a5c);
	color: #ffffff;
	background-color: #034373;
	background-image: url(/app/themes/seamlessmd/assets/images/decorative/footer-shape.svg);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	/* background-size: contain; */
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__eyebrow {
	color: var(--seamlessmd-primary-soft, #eff4ff);
	opacity: 0.95;
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__heading,
.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__body,
.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__body * {
	color: #ffffff;
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__caption {
	color: rgba(255, 255, 255, 0.72);
}

/* Ghost CTA needs a visible outline against the dark background — the
 * default light variant uses a dark border which would disappear here. */
.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__cta--secondary {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.4);
	background: transparent;
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Placeholder (when imageUrl is empty) needs a darker tone to remain
 * visible on the navy background. */
.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__placeholder {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.5);
	border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* ============================================================
 * Quotes column + bullets list
 *
 * When the editor supplies a `quotes` array, the media slot is
 * replaced with a vertical stack of `<blockquote>`s — mirrors
 * source `.div-block-75.quotes` (DCJ "Elevate the patient
 * experience"). Quote stylings adapt to the appearance modifier:
 * subtle white-on-navy cards on dark, faint border-left chips on
 * light.
 *
 * `bullets` renders inside the content column between the body
 * and the CTAs — used for stat lines like "96% patients would
 * recommend Nabed". Mirrors source `.list-9 .list-item-5/6`.
 * ============================================================ */

.seamlessmd-image-text__quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 1rem);
	width: 100%;
}

.seamlessmd-image-text__quote-item {
	margin: 0;
}

.seamlessmd-image-text__quote {
	margin: 0;
	padding: var(--space-4, 1.25rem) var(--space-5, 1.5rem);
	font-size: 0.9375rem;
	line-height: 1.55;
	font-style: italic;
	border-radius: var(--seamlessmd-radius-md, 12px);
	border-inline-start: 3px solid var(--seamlessmd-primary, #2563eb);
}

/* Light appearance: faint card on white. */
.seamlessmd-image-text--appearance-light .seamlessmd-image-text__quote {
	background: var(--seamlessmd-surface-alt, #f7f9fc);
	color: var(--seamlessmd-text, #1a1a2e);
}

/* Dark appearance: subtle translucent card on navy. */
.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__quote {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	border-inline-start-color: rgba(255, 255, 255, 0.45);
}

/* The figure wrapper shouldn't enforce media-aspect rules on
 * quotes — drop max-width / image padding and let the quotes
 * stack fill the column naturally. */
.seamlessmd-image-text__media--quotes {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
	display: flex;
	flex-direction: column;
}

/* Bullets list (e.g. 96% patient recommendation lines). */
.seamlessmd-image-text__bullets {
	list-style: none;
	margin: var(--space-3, 1rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.seamlessmd-image-text__bullet-item {
	position: relative;
	padding-inline-start: 1.5em;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.seamlessmd-image-text__bullet-item::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	font-weight: 700;
	color: var(--seamlessmd-primary, #2563eb);
}

.seamlessmd-image-text--appearance-dark .seamlessmd-image-text__bullet-item::before {
	color: var(--seamlessmd-accent-green, #53d769);
}

/* ============================================================
 * Awards / accreditation / certificate strip
 *
 * Horizontal row of badge logos rendered inside the content
 * column between the body/bullets and the CTAs. Items wrap on
 * narrow widths and stay vertically centred so badges of
 * different aspect ratios sit on a shared baseline.
 *
 * Heights are driven by the badge logo's intrinsic aspect ratio
 * with a shared `--seamlessmd-image-text-award-height` cap so
 * the row reads as a coherent strip even when SVG / PNG sources
 * have different proportions.
 * ============================================================ */

.seamlessmd-image-text__awards {
	list-style: none;
	margin: var(--seamlessmd-space-5, 1.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--seamlessmd-space-4, 1.25rem);
}

.seamlessmd-image-text__award-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.seamlessmd-image-text__award-link {
	display: inline-flex;
	align-items: center;
	transition: opacity 200ms ease, transform 200ms ease;
}

.seamlessmd-image-text__award-link:hover,
.seamlessmd-image-text__award-link:focus-visible {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* Parent-class selector lifts specificity above the editor canvas's
 * `.editor-styles-wrapper img { max-width: 100%; height: auto }`
 * rule so the explicit height + auto width stick in both the live
 * frontend and the block-editor preview. A definite `height` (not
 * `max-height`) is required because SVG badges declare only a
 * `viewBox` with no intrinsic width/height — `height: auto` would
 * collapse them to 0×0. `width: auto` then derives the rendered
 * width from the SVG/PNG aspect ratio so badges of mixed
 * proportions sit on a shared height baseline. */
.seamlessmd-image-text .seamlessmd-image-text__award-image {
	display: block;
	height: var(--seamlessmd-image-text-award-height, 84px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 575px) {
	.seamlessmd-image-text .seamlessmd-image-text__award-image {
		height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamlessmd-image-text__award-link {
		transition: none;
	}
	.seamlessmd-image-text__award-link:hover,
	.seamlessmd-image-text__award-link:focus-visible {
		transform: none;
	}
}