/**
 * LOA Testimonial Block — UI-11 (desktop) + UI-12 (mobile). Breakpoint
 * matches the rest of the theme's interim 1024px (Tyler to confirm).
 * Consumes tokens.css exclusively.
 *
 * Copy: CON-07 was never filled in, so quote/name/title were pulled
 * directly from Figma (node 95:190 desktop / 111:54 mobile) per the
 * same precedent as Specialties/Destinations/Process.
 *
 * Avatar: real photo asset BLOCKED — Figma's exported image URL is
 * blocked by this sandbox's outbound network allowlist (same failure
 * mode as the Process icons, see LOA-WORKING-NOTES.md). The avatar
 * slot (.loa-testimonial__avatar) is reserved at spec size and simply
 * renders an empty gold-bordered circle until a real <img> is present,
 * so the photo can drop in later with zero markup/CSS changes.
 *
 * Mobile grayscale technique: Figma's mobile frame achieves the
 * desaturated look via a white overlay + mix-blend-mode: saturation
 * rather than a CSS filter — reproduced literally below so it matches
 * exactly (a plain grayscale() filter would look slightly different).
 */

.loa-testimonial {
	background: var(--loa-testimonial-bg);
	padding-block: var(--loa-testimonial-pad-y);
	padding-inline: var(--loa-testimonial-pad-x);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.loa-testimonial__inner {
	max-width: var(--loa-max-width);
	margin-inline: auto;
	padding-inline: var(--loa-testimonial-inner-pad-x);
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Decorative background quotation mark — desktop only. */
.loa-testimonial__mark {
	position: absolute;
	left: -80px;
	top: 240px;
	margin: 0;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-testimonial-quote-mark-size);
	line-height: 1;
	color: var(--loa-testimonial-quote-mark-color);
	user-select: none;
	pointer-events: none;
}

.loa-testimonial__divider {
	display: block;
	width: var(--loa-testimonial-divider-w);
	height: 1px;
	background: var(--loa-testimonial-divider-color);
	margin-bottom: var(--loa-testimonial-divider-gap);
}

/* Rotator (v0.17.3). The rotator spans the inner's full width so each
 * quote can reach its 1024px max; each item recreates the centered
 * column the single quote used to get from .loa-testimonial__inner.
 * Stacking, fade and the dot/pause controls live in rotator.css. */
.loa-testimonial__rotator {
	width: 100%;
}

.loa-testimonial__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loa-testimonial__quote {
	margin: 0 0 var(--loa-testimonial-quote-gap);
	max-width: var(--loa-testimonial-quote-max);
	padding-inline: 3.31px; /* literal Figma value — negligible, kept for spec fidelity */
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-testimonial-quote-size);
	line-height: var(--loa-testimonial-quote-line);
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}

.loa-testimonial__attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Reserved at spec size (border included) regardless of whether the
 * photo has landed yet — same "empty slot, not a collapsed gap"
 * pattern as .loa-process__icon-slot. */
.loa-testimonial__avatar-wrap {
	width: var(--loa-testimonial-avatar-size);
	height: var(--loa-testimonial-avatar-size);
	margin-bottom: var(--loa-testimonial-avatar-gap);
	border-radius: 9999px;
	border: 1px solid var(--loa-testimonial-avatar-border);
	box-sizing: border-box;
	overflow: hidden;
}

.loa-testimonial__avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loa-testimonial__name {
	margin: 0;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-testimonial-name-size);
	letter-spacing: var(--loa-testimonial-name-tracking);
	text-transform: uppercase;
	color: #fff;
	text-align: center;
}

.loa-testimonial__title {
	margin: 4px 0 0;
	font-family: var(--loa-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--loa-testimonial-title-tracking);
	text-transform: uppercase;
	color: var(--loa-testimonial-title-color);
	text-align: center;
}

/* ==================================================================
 * UI-12 — Mobile testimonial. No decorative mark, no gold divider
 * (doc explicit re: mark; divider left out per interim TBD-defer
 * pattern — flag if Lynette wants one added). Avatar desaturated via
 * a blend-mode overlay to match Figma's technique exactly.
 * ================================================================== */
@media (max-width: 1024px) {
	.loa-testimonial {
		background: var(--loa-testimonial-m-bg);
		padding-block: var(--loa-testimonial-m-pad-y-top) var(--loa-testimonial-m-pad-y-bottom);
		padding-inline: var(--loa-testimonial-m-pad-x);
	}

	.loa-testimonial__inner {
		padding-inline: 0;
	}

	.loa-testimonial__mark,
	.loa-testimonial__divider {
		display: none;
	}

	.loa-testimonial__quote {
		margin-bottom: var(--loa-testimonial-m-quote-gap);
		max-width: var(--loa-testimonial-m-quote-max);
		width: 100%; /* doc: 530px max-width needs to be 100% on narrower viewports */
		padding-inline: 0;
		font-size: var(--loa-testimonial-m-quote-size);
		line-height: 39px;
		color: var(--loa-testimonial-m-quote-color);
	}

	/* Grayscale via blend-mode overlay, matching Figma's mobile
	 * technique literally (a white layer at mix-blend-mode: saturation
	 * strips color without darkening the image like filter:grayscale
	 * can). Applied to the wrapper so it composites over the <img>. */
	.loa-testimonial__avatar-wrap {
		position: relative;
		margin-bottom: var(--loa-testimonial-m-avatar-gap);
		width: var(--loa-testimonial-m-avatar-size);
		height: var(--loa-testimonial-m-avatar-size);
		border: none; /* doc specs no border on mobile, unlike desktop's gold ring */
		border-radius: 9999px;
		overflow: hidden;
	}

	.loa-testimonial__avatar-wrap::after {
		content: "";
		position: absolute;
		inset: 0;
		background: #fff;
		mix-blend-mode: saturation;
		pointer-events: none;
	}

	.loa-testimonial__name {
		font-weight: 400;
		font-size: var(--loa-testimonial-m-name-size);
		letter-spacing: var(--loa-testimonial-m-name-tracking);
		text-transform: none;
		color: var(--loa-testimonial-m-quote-color);
	}

	.loa-testimonial__title {
		font-weight: 400;
		letter-spacing: normal;
		color: var(--loa-testimonial-m-title-color);
	}
}