/* ============================================================================
   iPhone Repairs Testimonials — SaaS Clean (Single Quote)
   Story: US-OTH-04 · Section ID: tmpl-saas-clean--testimonials--single-quote--0

   Magazine layout on a max-w-7xl dark canvas (min-height 50vh). Noise-texture
   backdrop + dark-gradient overlay. Centered intro (2xl heading / 3xl sub),
   then an asymmetric grid: quote list beside a sticky 3-photo aside. Cards use
   a sm shadow + md radius, no hover motion. Entrance = stagger scale-in (1000ms,
   200ms stagger). All values reference design tokens. Scoped under .iph-test-sq0
   so it can never collide with the Homepage testimonials section.
   ============================================================================ */

.iph-test-sq0 {
	position: relative;
	overflow: hidden;
	min-height: 50vh;
	padding: var(--space-section) var(--container-padding);
	background: var(--color-canvas);
	color: var(--color-body-on-dark);
	isolation: isolate;
}

/* Noise texture — subtle monochrome grain woven into the dark canvas. */
.iph-test-sq0__noise {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	opacity: 0.5;
	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.4'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* Dark-gradient overlay — deepens the corners so quotes stay legible. */
.iph-test-sq0__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 15% 0%, rgba(var(--color-primary-rgb), 0.22), transparent 60%),
		linear-gradient(160deg, rgba(13, 10, 19, 0.20) 0%, rgba(13, 10, 19, 0.85) 100%);
}

.iph-test-sq0__inner {
	max-width: 80rem; /* max-w-7xl */
	margin-inline: auto;
}

/* ---- Intro (centered) ----------------------------------------------------- */
.iph-test-sq0__head {
	max-width: var(--container-narrow);
	margin: 0 auto var(--space-12);
	text-align: center;
}

.iph-test-sq0__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tight); /* -0.02em */
	color: var(--color-text-on-dark);
}

.iph-test-sq0__subheading {
	margin: var(--space-4) auto 0;
	max-width: 52ch;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-body-on-dark);
}

/* ---- Magazine grid: quotes + sticky aside --------------------------------- */
.iph-test-sq0__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

/* ---- Quote list ----------------------------------------------------------- */
.iph-test-sq0__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.iph-test-sq0__card {
	position: relative;
	padding: var(--space-8);
	background: var(--color-surface-card);
	border: var(--border-width) solid var(--color-hairline);
	border-radius: var(--radius-md); /* md radius */
	box-shadow: var(--shadow-sm);    /* sm shadow */
}

.iph-test-sq0__figure {
	margin: 0;
}

.iph-test-sq0__mark {
	display: block;
	font-family: var(--font-heading);
	font-size: 3.25rem;
	font-weight: var(--weight-bold);
	line-height: 0.7;
	color: var(--color-primary-400);
}

.iph-test-sq0__quote {
	margin: var(--space-3) 0 var(--space-6);
	border: 0;
	padding: 0;
}

.iph-test-sq0__quote p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--color-text-on-dark);
}

.iph-test-sq0__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.iph-test-sq0__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--radius-full);
	background: linear-gradient(140deg, var(--color-primary-600), var(--color-primary-900));
	color: var(--color-on-primary);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-wide);
}

.iph-test-sq0__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iph-test-sq0__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.iph-test-sq0__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-text-on-dark);
}

.iph-test-sq0__role {
	font-size: var(--text-sm);
	color: var(--color-muted-on-dark);
}

/* ---- Aside image cluster (sticky on desktop) ------------------------------ */
.iph-test-sq0__aside {
	position: sticky;
	top: calc(var(--nav-height) + var(--space-6));
}

.iph-test-sq0__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.iph-test-sq0__shot {
	margin: 0;
	overflow: hidden;
	border: var(--border-width) solid var(--color-hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* First photo spans the full aside width for a magazine feel. */
.iph-test-sq0__shot:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.iph-test-sq0__shot:not(:first-child) {
	aspect-ratio: 1 / 1;
}

.iph-test-sq0__shot-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iph-test-sq0__aside-note {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-muted-on-dark);
	text-align: center;
}

/* ---- Entrance: stagger scale-in (1000ms, 200ms stagger) ------------------- */
[data-iph-test-sq0-animate] {
	opacity: 0;
	transform: scale(0.92) translateY(16px);
	transition:
		opacity 1000ms var(--ease-out),
		transform 1000ms var(--ease-out);
	will-change: opacity, transform;
}

[data-iph-test-sq0-animate].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Stagger successive animated blocks by 200ms. */
.iph-test-sq0__list .iph-test-sq0__card:nth-child(1) { transition-delay: 0ms; }
.iph-test-sq0__list .iph-test-sq0__card:nth-child(2) { transition-delay: 200ms; }
.iph-test-sq0__list .iph-test-sq0__card:nth-child(3) { transition-delay: 400ms; }
.iph-test-sq0__list .iph-test-sq0__card:nth-child(4) { transition-delay: 600ms; }
.iph-test-sq0__aside { transition-delay: 200ms; }

/* ---- Responsive: tablet = single column ----------------------------------- */
@media (max-width: 1024px) {
	.iph-test-sq0__layout {
		grid-template-columns: 1fr;
	}

	.iph-test-sq0__aside {
		position: static;
		order: -1; /* lead with imagery when stacked */
		max-width: 32rem;
		margin-inline: auto;
	}
}

/* ---- Responsive: mobile = hidden aside ------------------------------------ */
@media (max-width: 640px) {
	.iph-test-sq0__aside {
		display: none;
	}

	.iph-test-sq0__card {
		padding: var(--space-6);
	}
}

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