/* =========================================================================
   Minimalist Studio — Testimonials (Split Quote)   [section: testimonials]
   Centered max-w-6xl container, min-height 70vh, single column that splits
   into a left aside (heading + proof imagery) and a right testimonial list.
   Noise-texture background + linear-warm overlay, lg shadow, lg radius.
   6xl heading (weight 700, tracking -0.03em), LEFT aligned, 2xl subheading.
   Entrance: slide-up (500ms, 150ms stagger). Card hover = tilt-3d.
   Tablet: columns stack. Mobile: decorative aside media is hidden.
   All values come from design-tokens.css — no hard-coded hex.
   ========================================================================= */

.ms-tst {
	--ms-max: 72rem; /* max-w-6xl */
	--ms-dur: var(--duration-slow); /* 500ms */
	--ms-stagger: 150ms;
	--ms-6xl: clamp(2.75rem, 6vw, 3.75rem); /* 6xl heading */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding-block: var(--space-section);
	background-color: var(--color-surface-soft);
	color: var(--color-ink);
	font-family: var(--font-body);
}

/* ---- Noise-texture background ------------------------------------------- */
.ms-tst__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-color: var(--color-surface-soft);
	/* Fine SVG fractal-noise grain, tinted with the warm-ink token. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* ---- Linear-warm overlay ------------------------------------------------ */
.ms-tst__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		rgba(var(--color-accent-rgb), 0.10) 0%,
		rgba(var(--color-primary-rgb), 0.06) 45%,
		transparent 100%
	);
}

/* ---- Inner container (centered) ---------------------------------------- */
.ms-tst__inner {
	width: 100%;
	max-width: var(--ms-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(var(--space-8), 5vw, var(--space-20));
	align-items: start;
}

/* ---- Left aside -------------------------------------------------------- */
.ms-tst__aside {
	position: sticky;
	top: calc(var(--nav-height) + var(--space-8));
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.ms-tst__head {
	text-align: left;
}

.ms-tst__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-primary-600);
}

.ms-tst__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--ms-6xl);
	font-weight: var(--weight-bold); /* 700 */
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tight); /* -0.03em */
	color: var(--color-ink);
	text-wrap: balance;
}

.ms-tst__subtitle {
	margin: var(--space-5) 0 0;
	max-width: 42ch;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-body);
}

/* Subheading nudged toward the 2xl step on wider viewports. */
@media (min-width: 48rem) {
	.ms-tst__subtitle {
		font-size: var(--text-xl);
	}
}

/* ---- Rating ------------------------------------------------------------ */
.ms-tst__rating {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-body);
}

.ms-tst__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-accent-500);
}

.ms-tst__star {
	flex: 0 0 auto;
}

/* ---- Proof imagery (side_image) — hidden on mobile --------------------- */
.ms-tst__media {
	position: relative;
	padding-right: var(--space-8);
	padding-bottom: var(--space-8);
}

.ms-tst__media-main {
	margin: 0;
	border-radius: var(--radius-lg); /* lg radius */
	overflow: hidden;
	box-shadow: var(--shadow-lg); /* lg shadow */
	aspect-ratio: 5 / 6;
}

.ms-tst__media-inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	margin: 0;
	border: 4px solid var(--color-canvas);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
}

.ms-tst__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Testimonial list -------------------------------------------------- */
.ms-tst__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.ms-tst__item {
	perspective: 1000px;
}

.ms-tst__card {
	position: relative;
	margin: 0;
	padding: var(--space-8);
	background-color: var(--color-canvas);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg); /* lg radius */
	box-shadow: var(--shadow-lg); /* lg shadow */
	transform-style: preserve-3d;
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
	will-change: transform;
}

/* Card hover = tilt-3d (CSS-only, honours reduced-motion via token collapse) */
.ms-tst__item:hover .ms-tst__card,
.ms-tst__item:focus-within .ms-tst__card {
	transform: rotateX(4deg) rotateY(-5deg) translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: var(--color-primary-200);
}

.ms-tst__mark {
	display: block;
	margin-bottom: var(--space-4);
	color: var(--color-primary-300);
}

.ms-tst__quote {
	margin: 0;
	quotes: none;
}

.ms-tst__quote p {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-ink);
	text-wrap: pretty;
}

.ms-tst__cite {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-hairline);
}

.ms-tst__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-full);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
	color: var(--color-on-primary);
	box-shadow: var(--shadow-sm);
}

.ms-tst__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-tst__avatar-initials {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-snug);
	line-height: 1;
}

.ms-tst__cite-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ms-tst__author {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-ink);
}

.ms-tst__role {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

/* ---- Entrance: slide-up (500ms, 150ms stagger) ------------------------- */
[data-ms-anim] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--ms-dur) var(--ease-out),
		transform var(--ms-dur) var(--ease-out);
	transition-delay: calc(var(--ms-delay, 0) * var(--ms-stagger));
}

.ms-tst.is-visible [data-ms-anim] {
	opacity: 1;
	transform: none;
}

/* ---- Responsive: tablet = stack ---------------------------------------- */
@media (max-width: 61.99rem) {
	.ms-tst__inner {
		grid-template-columns: 1fr;
		gap: clamp(var(--space-8), 5vw, var(--space-12));
	}

	.ms-tst__aside {
		position: static;
		top: auto;
	}

	.ms-tst__subtitle {
		max-width: 60ch;
	}
}

/* ---- Responsive: mobile = hidden-aside (decorative media hidden) ------- */
@media (max-width: 47.99rem) {
	.ms-tst__media {
		display: none;
	}

	.ms-tst__card {
		padding: var(--space-6);
	}

	/* Tilt would clip awkwardly on narrow screens — keep a simple lift. */
	.ms-tst__item:hover .ms-tst__card,
	.ms-tst__item:focus-within .ms-tst__card {
		transform: translateY(-4px);
	}
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-ms-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ms-tst__card {
		transition: box-shadow var(--duration-normal) var(--ease-default);
	}

	.ms-tst__item:hover .ms-tst__card,
	.ms-tst__item:focus-within .ms-tst__card {
		transform: none;
		box-shadow: var(--shadow-xl);
	}
}