/**
 * seamlessmd/testimonials — front-end styles.
 *
 * BEM root .seamlessmd-testimonials with three variants:
 *   --variant-single-featured  One large quote, centered.
 *   --variant-grid             CSS grid, 2 or 3 columns.
 *   --variant-carousel         Horizontal scroll-snap, no JS.
 */

.seamlessmd-testimonials {
	position: relative;
	padding-block: var(--seamlessmd-section-pad);
	color: var(--seamlessmd-text, #1e2a5c);
	background: var(--seamlessmd-bg, #fff);
}

/* ---- Viewport-fill modifier (optional, all variants) ----
 *
 * When the editor enables `fillViewport: true`, the section grows to fit
 * the visible viewport minus the sticky theme header (80px), then flex-
 * centres its content vertically. The WP admin bar (32px at >=783px,
 * 46px at <783px) is added to the offset whenever it's present
 * (body.admin-bar). Min-height — not height — so very tall content
 * (long quotes wrapping at narrow widths) still expands the section
 * instead of being clipped.
 *
 * Horizontal centring is already owned per-variant (quote-bubble +
 * single-featured both flex-justify the `__list` to centre). This rule
 * only adds the vertical axis.
 *
 * Header offset is hardcoded 80px to match the Nabed primary header
 * height. It does NOT use the existing `--seamlessmd-header-height`
 * token (72px) because the visible top stack uses an 80px header on
 * the published frontend per the editor's intent in the field's help
 * copy. If the theme ever revises the header height the constant
 * here should be revisited.
 */
.seamlessmd-testimonials--fill-viewport {
	min-height: calc(100vh - 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.admin-bar .seamlessmd-testimonials--fill-viewport {
	min-height: calc(100vh - 80px - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .seamlessmd-testimonials--fill-viewport {
		min-height: calc(100vh - 80px - 46px);
	}
}

/* Inner wrapper carries the shared `.seamlessmd-container` class in
 * render.php — that gives it max-width + responsive horizontal gutter.
 * No per-block max-width / margin override needed. */

.seamlessmd-testimonials__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--seamlessmd-space-8, 3rem);
}

.seamlessmd-testimonials__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-testimonials__heading {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
	font-size: clamp(1.75rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-testimonials__subheading {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--seamlessmd-muted, #5a6b7a);
}

/* ------------------------------------------------------------------ *
 * Item — shared card anatomy
 * ------------------------------------------------------------------ */

.seamlessmd-testimonials__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--seamlessmd-space-4, 1rem);
	padding: var(--seamlessmd-space-6, 2rem);
	background: var(--seamlessmd-bg, #fff);
	border-radius: var(--seamlessmd-radius-lg, 16px);
	box-shadow: var(--seamlessmd-shadow-sm, 0 1px 2px rgba(30, 42, 92, 0.06));
	height: 100%;
}

.seamlessmd-testimonials__mark {
	display: inline-block;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--seamlessmd-primary, #2563eb);
	opacity: 0.2;
}

.seamlessmd-testimonials__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--seamlessmd-text, #1e2a5c);
}

.seamlessmd-testimonials__quote p {
	margin: 0;
}

.seamlessmd-testimonials__rating {
	display: inline-flex;
	gap: 0.2em;
	font-size: 1rem;
	color: #f5a623;
}

.seamlessmd-testimonials__star {
	line-height: 1;
}

.seamlessmd-testimonials__author {
	display: flex;
	align-items: center;
	gap: var(--seamlessmd-space-3, 0.75rem);
	margin-top: auto;
	padding-top: var(--seamlessmd-space-3, 0.75rem);
}

.seamlessmd-testimonials__avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--seamlessmd-surface-alt, #f4f6f8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: var(--seamlessmd-primary-dark, #1d4fd7);
}

.seamlessmd-testimonials__avatar--initials {
	font-size: 1.125rem;
	letter-spacing: 0;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--seamlessmd-primary, #2563eb) 15%, transparent);
}

.seamlessmd-testimonials__attribution {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.seamlessmd-testimonials__name {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-testimonials__meta {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--seamlessmd-muted, #5a6b7a);
}

.seamlessmd-testimonials__logo {
	margin-left: auto;
	height: 28px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 * Variant: single-featured
 * ------------------------------------------------------------------ */

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__list {
	display: flex;
	justify-content: center;
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__list-item {
	width: 100%;
	max-width: 820px;
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__item {
	align-items: center;
	text-align: center;
	padding: var(--seamlessmd-space-8, 3rem);
	box-shadow: var(--seamlessmd-shadow-md, 0 4px 16px rgba(30, 42, 92, 0.08));
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__mark {
	font-size: 3rem;
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__quote {
	font-style: italic;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.35;
	max-width: 68ch;
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__author {
	justify-content: center;
	padding-top: var(--seamlessmd-space-4, 1rem);
}

.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__logo {
	margin-left: var(--seamlessmd-space-4, 1rem);
}

/* ------------------------------------------------------------------ *
 * Variant: grid
 * ------------------------------------------------------------------ */

.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__list {
	display: grid;
	gap: var(--seamlessmd-space-5, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.seamlessmd-testimonials--variant-grid.seamlessmd-testimonials--cols-2 .seamlessmd-testimonials__list,
	.seamlessmd-testimonials--variant-grid.seamlessmd-testimonials--cols-3 .seamlessmd-testimonials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.seamlessmd-testimonials--variant-grid.seamlessmd-testimonials--cols-3 .seamlessmd-testimonials__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__item {
	border: 1px solid color-mix(in srgb, var(--seamlessmd-dark-navy, #1e2a5c) 8%, transparent);
	align-items: center;
	text-align: center;
}

/* 5-line clamp on grid quotes so uneven lengths still produce aligned cards. */
.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__quote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Author block — vertical centered stack: portrait (rounded) above the
 * attribution column above the optional org logo. Default layout
 * (`display: flex; align-items: center`) puts avatar + attribution on a
 * horizontal row; in the grid variant the source mirror at /customers/
 * wants the portrait on top with the name + role centered beneath.
 *
 * Affects every grid use of the testimonials block. /about-us/'s patient
 * testimonials (no `authorPhotoUrl`, initials-fallback avatar) gain the
 * same centered stack — visually softer and consistent with the new
 * pattern; no portraits to flip there. */
.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__author {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--seamlessmd-space-2, 0.5rem);
}

.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__avatar {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
}

.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__attribution {
	align-items: center;
	text-align: center;
}

/* Reset the default horizontal-row push (`margin-left: auto`) so the
 * optional org logo, when populated, sits centered below the
 * attribution instead of pinning to the inline-end of an empty row. */
.seamlessmd-testimonials--variant-grid .seamlessmd-testimonials__logo {
	margin-left: 0;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * Variant: carousel (scroll-snap, no JS)
 * ------------------------------------------------------------------ */

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__list {
	display: flex;
	gap: var(--seamlessmd-space-4, 1rem);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--seamlessmd-space-4, 1rem);
	padding: var(--seamlessmd-space-2, 0.5rem) var(--seamlessmd-space-4, 1rem) var(--seamlessmd-space-5, 1.5rem);
	margin-inline: calc(var(--seamlessmd-space-4, 1rem) * -1);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--seamlessmd-primary, #2563eb) 40%, transparent) transparent;
	-webkit-overflow-scrolling: touch;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__list::-webkit-scrollbar {
	height: 6px;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--seamlessmd-primary, #2563eb) 40%, transparent);
	border-radius: 999px;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__list-item {
	flex: 0 0 auto;
	width: min(90%, 480px);
	scroll-snap-align: start;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item {
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--seamlessmd-dark-navy, #1e2a5c) 8%, transparent);
}

/* Per-item backdrop (carousel only — customers page hospital facades).
 * The asset URL flows in via --seamlessmd-testimonials-bg-image on the
 * item's inline style="" (set by render.php). A dark linear-gradient
 * stacked above the image keeps quote + attribution text readable
 * regardless of the underlying photo's brightness. When no backdrop
 * is set, the card falls back to its default white surface — same as
 * carousel items without the field. */
.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
		var(--seamlessmd-testimonials-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.12);
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__quote,
.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__quote p,
.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__name {
	color: #ffffff;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__meta {
	color: rgba(255, 255, 255, 0.78);
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__mark {
	color: #ffffff;
	opacity: 0.55;
}

.seamlessmd-testimonials--variant-carousel .seamlessmd-testimonials__item--has-bg .seamlessmd-testimonials__logo {
	filter: grayscale(100%) brightness(0) invert(1);
	opacity: 0.85;
}

.seamlessmd-testimonials__scroll-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5ch;
	margin: var(--seamlessmd-space-3, 0.75rem) 0 0;
	font-size: 0.8125rem;
	color: var(--seamlessmd-muted, #5a6b7a);
}

@media (min-width: 992px) {
	.seamlessmd-testimonials__scroll-hint {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Responsive — stacking + smaller paddings
 * ------------------------------------------------------------------ */

@media (max-width: 719px) {
	/* Outer vertical padding comes from `padding-block:
	 * var(--seamlessmd-section-pad)` which is already responsive via the
	 * theme tokens — no per-block mobile override needed. Horizontal
	 * padding lives on `.seamlessmd-container` via `--seamlessmd-gutter`. */

	.seamlessmd-testimonials--variant-single-featured .seamlessmd-testimonials__item {
		padding: var(--seamlessmd-space-6, 2rem);
	}

	.seamlessmd-testimonials__logo {
		height: 24px;
	}
}

/* RTL — flip avatar/logo row so logo sits at the inline-start edge. */
[dir="rtl"] .seamlessmd-testimonials__logo {
	margin-left: 0;
	margin-right: auto;
}

[dir="rtl"] .seamlessmd-testimonials__mark {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------ *
 * Variant: quote-cards
 *
 * Mirrors the seamless.md oncology Patient Testimonials block — a
 * minimal text-only 2- or 3-column grid: centered heading + thin
 * horizontal divider, then N cards with a bold headline above each quote.
 * No avatar, no stars, no quote-mark icon, no author attribution. The
 * cards have no border / no background / no shadow — just text columns.
 * ------------------------------------------------------------------ */

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__divider {
	display: block;
	width: 60px;
	height: 4px;
	margin: var(--seamlessmd-space-3, 0.75rem) auto 0;
	background: var(--seamlessmd-primary, #2563eb);
	border-radius: 2px;
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__list {
	display: grid;
	gap: var(--seamlessmd-space-6, 2rem) var(--seamlessmd-space-8, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.seamlessmd-testimonials--variant-quote-cards.seamlessmd-testimonials--cols-2 .seamlessmd-testimonials__list,
	.seamlessmd-testimonials--variant-quote-cards.seamlessmd-testimonials--cols-3 .seamlessmd-testimonials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.seamlessmd-testimonials--variant-quote-cards.seamlessmd-testimonials--cols-3 .seamlessmd-testimonials__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__item {
	display: flex;
	flex-direction: column;
	gap: var(--seamlessmd-space-3, 0.75rem);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__headline {
	margin: 0;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--seamlessmd-text, #1e2a5c);
}

/* Add smart-quote glyphs around the quote text via ::before/::after so the
 * snapshot can hold plain prose (no need to embed “ ” chars). Mirrors the
 * source `text-block-30/31/32/33` divs which carried wrapped curly quotes. */
.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__quote p::before {
	content: "\201C";
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__quote p::after {
	content: "\201D";
}

.seamlessmd-testimonials--variant-quote-cards .seamlessmd-testimonials__quote p {
	margin: 0;
}

/* ------------------------------------------------------------------
 * quote-bubble variant (about-us Dr. Daniel Chu shape)
 *
 * One white card centred on a large section whose background is
 * diagonally split between dark blue (lower-start) and white (upper-end)
 * with the brand wave/dot footer-shape pattern overlaid. The card itself
 * carries a dark navy arc decoration at its top-start corner (via the
 * `testimonial-arc-comp.png` asset) and stacks:
 *   row 1: avatar + name/role at the top-start, organisation logo at top-end
 *   row 2: italic quote below, spanning full width
 *
 * Verbatim colour stops captured from the upstream Webflow CSS:
 *   linear-gradient(336deg,
 *       #122635,
 *       #045089 38%, #045089 49%,
 *       #ffffff 49%, #ffffff)
 *
 * RTL: the diagonal angle is mirrored to 204deg under [dir="rtl"] so the
 * dark wedge stays on the leading edge of the reading direction.
 * The corner-arc image is `scaleX(-1)` flipped so the arc anchor follows
 * the inline-start (visually right) edge in RTL too.
 * ------------------------------------------------------------------ */
.seamlessmd-testimonials--variant-quote-bubble {
	padding-block: clamp(4rem, 8vw, 7rem);
	background-color: #ffffff;
	background-image: linear-gradient(336deg, #122635, #045089 38%, #045089 49%, #ffffff 49%, #ffffff);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
}

.seamlessmd-testimonials--variant-quote-bubble .seamlessmd-testimonials__header {
	color: #ffffff;
}

.seamlessmd-testimonials--variant-quote-bubble .seamlessmd-testimonials__heading,
.seamlessmd-testimonials--variant-quote-bubble .seamlessmd-testimonials__subheading {
	color: #ffffff;
}

.seamlessmd-testimonials--variant-quote-bubble .seamlessmd-testimonials__list {
	display: flex;
	justify-content: center;
}

.seamlessmd-testimonials--variant-quote-bubble .seamlessmd-testimonials__list-item {
	max-width: 760px;
	width: 100%;
}

/* Card: white surface, dark-arc decoration painted on top-start via
 * ::before. `overflow: hidden` clips the arc to the card's rounded
 * border. Padding-block-start is generous to clear the arc + the avatar
 * row that sits over it. */
.seamlessmd-testimonials__item--bubble {
	position: relative;
	background: #ffffff;
	color: var(--seamlessmd-text, #1e2a5c);
	border-radius: 6px;
	padding: 4rem 2rem 2rem 4rem;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Dark navy arc anchored on the top-start corner. The asset is a 693x301
 * PNG curling outward from the corner. Sized as a fraction of the card so
 * it scales with breakpoint, and `inset-inline-start: 0` keeps it pinned
 * to the leading edge in both LTR and RTL. */
.seamlessmd-testimonials__item--bubble::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	background-image: url("/app/themes/seamlessmd/assets/images/decorative/testimonial-arc-comp.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

[dir="rtl"] .seamlessmd-testimonials__item--bubble::before {
	transform: scaleX(-1);
	transform-origin: top right;
}

[dir="rtl"] .seamlessmd-testimonials--variant-quote-bubble {
	background-image: linear-gradient(204deg, #122635, #045089 38%, #045089 49%, #ffffff 49%, #ffffff);
}

/* Logo anchored on the top-end edge of the card, above content. */
.seamlessmd-testimonials__bubble-logo {
	position: absolute;
	inset-block-start: 1.5rem;
	inset-inline-end: 1.75rem;
	max-height: 40px;
	width: auto;
	object-fit: contain;
	z-index: 2;
}

/* Author row at top-start of the card (over the dark arc). Avatar
 * tucks into the arc; the name + role text sits beside it. The `order`
 * override puts this row BEFORE the quote even though the DOM emits
 * the logo + quote first (render.php source order: logo, quote, author). */
.seamlessmd-testimonials__bubble-author {
	display: flex;
	align-items: center;
	gap: 1rem;
	order: 1;
	padding-inline-end: 8rem; /* clear of the top-end logo */
	position: relative;
	z-index: 2;
}

.seamlessmd-testimonials__bubble-avatar {
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 8.5rem;
	border: 4px solid #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.seamlessmd-testimonials__bubble-attribution {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.seamlessmd-testimonials__item--bubble .seamlessmd-testimonials__name {
	margin: 0;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--seamlessmd-dark-navy, #091f3b);
}

.seamlessmd-testimonials__item--bubble .seamlessmd-testimonials__meta {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--seamlessmd-muted, #5a6478);
}

/* Quote sits below the author row, full card width. Italic per source. */
.seamlessmd-testimonials__item--bubble .seamlessmd-testimonials__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.65;
	color: var(--seamlessmd-text, #1e2a5c);
	font-style: italic;
	order: 2;
	position: relative;
	z-index: 1;
}

.seamlessmd-testimonials__item--bubble .seamlessmd-testimonials__quote p {
	margin: 0;
}

@media (max-width: 600px) {
	.seamlessmd-testimonials__item--bubble {
		padding: 1.75rem 1.5rem 2rem;
	}
	.seamlessmd-testimonials__bubble-logo {
		position: static;
		max-height: 32px;
		margin-block-end: 0.25rem;
		align-self: flex-end;
		order: 0;
	}
	.seamlessmd-testimonials__bubble-author {
		padding-inline-end: 0;
		gap: 0.875rem;
	}
	.seamlessmd-testimonials__bubble-avatar {
		width: 60px;
		height: 60px;
		flex: 0 0 60px;
		border-width: 3px;
	}
	.seamlessmd-testimonials__item--bubble::before {
		width: 160px;
		height: 70px;
	}
}

/* ==========================================================================
 * Variant: featured-quote
 *
 * Home "customer testimonial": one wide panel, media bled to the inline-start
 * edge, quote filling the rest. Every selector below is scoped to
 * `.seamlessmd-testimonials--variant-featured-quote`, which is (0,2,0) — enough
 * to outrank the theme bundle's single-class `.seamlessmd-testimonials__quote`
 * rule that loads after this file.
 *
 * The panel is a grid, so under `dir="rtl"` the media column moves to the
 * inline-start side of the reading direction with no mirroring rule. The
 * decorative quote mark is placed with logical properties for the same reason,
 * and the person's image is never flipped.
 * ========================================================================== */

.seamlessmd-testimonials--variant-featured-quote {
	--seamlessmd-fq-panel: #eef3fe;
	--seamlessmd-fq-mark: #3f7fe0;
	--seamlessmd-fq-text: #1e2a5c;
	--seamlessmd-fq-attribution: #33447a;
	--seamlessmd-fq-radius: 18px;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__list {
	display: block;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__list-item {
	inline-size: 100%;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__item--featured-quote {
	display: grid;
	/* Reference proportions: media 28%, quote 72%. */
	grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
	align-items: stretch;
	/* Clips the bled image to the panel's rounded corners. Nothing else
	 * reaches this boundary, so no text is ever cut. */
	overflow: hidden;
	/* The shared `.seamlessmd-testimonials__item` card rule above sets flex,
	 * padding, a border-radius and a shadow. This variant is a panel, not a
	 * card: the padding would inset the image instead of letting it bleed to
	 * the edge, so it is cleared here rather than in the shared rule. */
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: var(--seamlessmd-fq-radius);
	background: var(--seamlessmd-fq-panel);
	box-shadow: none;
}

/* No image configured: the quote takes the whole panel. The modifier comes
 * from render.php rather than a `:has()` test. */
.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__item--fq-no-media {
	grid-template-columns: minmax(0, 1fr);
}

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

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-media {
	min-inline-size: 0;
	overflow: hidden;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-image {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	/* `cover` plus a centred focal point — never a distorted aspect ratio.
	 * Deliberately not mirrored under RTL: flipping a photograph of a person
	 * is wrong regardless of reading direction. */
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ---------- Quote body ---------- */

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.85rem, 1.5vw, 1.15rem);
	min-inline-size: 0;
	/* Extra inline-start room so the quote mark sits beside the text rather
	 * than over it. No fixed height — the panel grows with a longer quote. */
	margin: 0;
	padding: clamp(1.5rem, 2.8vw, 2.5rem);
	padding-inline-start: clamp(2.75rem, 5vw, 4.5rem);
	position: relative;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-mark {
	position: absolute;
	inset-block-start: clamp(1.4rem, 2.6vw, 2.3rem);
	inset-inline-start: clamp(1.2rem, 2.2vw, 1.9rem);
	inline-size: clamp(1.15rem, 1.9vw, 1.6rem);
	block-size: auto;
	color: var(--seamlessmd-fq-mark);
	pointer-events: none;
}

/* SVG glyph paths are physical, not flow-relative, so the two "6" opening
 * quotes stay pointing right under `dir="rtl"` and read as CLOSING quotes
 * against Arabic text. Mirror them. Same convention as the fa-quote-left
 * flip above (line 428) — one rule per mark class. */
[dir="rtl"] .seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-mark {
	transform: scaleX(-1);
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__quote {
	margin: 0;
	padding: 0;
	border: 0;
	/* Caps the measure so a long quote stays readable instead of running the
	 * full panel width. */
	max-inline-size: 62ch;
	font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.65;
	color: var(--seamlessmd-fq-text);
	overflow-wrap: break-word;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__quote p {
	margin: 0;
}

.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-attribution {
	margin: 0;
	min-inline-size: 0;
	font-size: clamp(0.8125rem, 1vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--seamlessmd-fq-attribution);
	overflow-wrap: break-word;
}

/* The em-dash is punctuation, not content — a space after it, and nothing at
 * all when there is no attribution because the whole figcaption is omitted. */
.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-dash {
	margin-inline-end: 0.35em;
}

/* Separator lives between adjacent parts, so an empty field can never leave a
 * stray comma behind. Arabic gets its own comma (U+060C) via the house
 * `[dir="rtl"]` convention rather than a language branch in PHP. */
.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-part + .seamlessmd-testimonials__fq-part::before {
	content: ", ";
}

[dir="rtl"] .seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-part + .seamlessmd-testimonials__fq-part::before {
	content: "، ";
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	/* Mobile: image above the quote. Source order already reads media → body,
	 * so no reordering rule is needed. */
	.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__item--featured-quote {
		grid-template-columns: minmax(0, 1fr);
	}

	.seamlessmd-testimonials--variant-featured-quote .seamlessmd-testimonials__fq-media {
		/* Controlled ratio so the image never dominates a phone screen. */
		aspect-ratio: 16 / 10;
	}
}