/*
 * Virtina child: home page "Results our clients can measure" testimonials.
 * Loaded only on template-home-vch.php. Colors come from tokens, never hard-coded in components.
 *
 * Sizes come from the Figma frame (1728px wide). Each story is a photo card and a stats card side by side.
 */

:root {
	--vch-color-testimonial-tint-1: #cdf2f6;
	--vch-color-testimonial-tint-2: #ececd5;
	--vch-color-testimonial-tint-3: #d5ecdf;
	--vch-color-testimonial-tint-4: #ecd5d5;
	--vch-color-testimonial-panel: #f6f6f6;
	--vch-color-testimonial-glass: rgba(255, 255, 255, 0.47);
	--vch-color-text-secondary: #383838;
	--vch-color-text-muted: #6f6f6f;
	--vch-color-trend-up: #009c1a;
	--vch-color-star: #ffc300;
}

.vch-testimonials {
	box-sizing: border-box;
	padding: 96px 0 120px;
	background: var(--vch-color-surface);
	color: var(--vch-color-text);
}

.vch-testimonials__inner {
	box-sizing: border-box;
}

/* Heading row: title on the left, intro and CTA on the right. */
.vch-testimonials__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.vch-testimonials__title {
	box-sizing: border-box;
	max-width: 568px;
	margin: 0;
	font-family: 'Archivo', sans-serif;
	/* Fluid: 42px on wide screens, 32px on phones, scaled with the viewport in between. */
	font-size: clamp(32px, calc(28.48px + 0.939vw), 42px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--vch-color-text);
}

.vch-testimonials__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	width: 434px;
	max-width: 100%;
	flex-shrink: 0;
}

.vch-testimonials__intro {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: var(--vch-color-text-secondary);
}

/* Two stories per row, two rows. */
.vch-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 31px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vch-testimonials__item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	aspect-ratio: 784 / 427;
	min-width: 0;
}

/* Photo card */
.vch-testimonials__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--vch-testimonials-tint);
	isolation: isolate;
}

.vch-testimonials__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	z-index: -1;
}

/* Michell's photo is zoomed in the Figma frame: head and shoulders fill the card. */
.vch-testimonials__photo--michell {
	position: absolute;
	top: -0.08%;
	left: -9.03%;
	width: 131.54%;
	height: 149.06%;
	max-width: none;
	object-fit: cover;
}

/* Glass name bar over the bottom of the photo. */
.vch-testimonials__person {
	position: absolute;
	left: 2.4%;
	right: 2.4%;
	bottom: 3%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	height: 22.3%;
	min-height: 84px;
	padding: 0 18px 0 31px;
	border-radius: 50px;
	background: var(--vch-color-testimonial-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.vch-testimonials__name {
	display: block;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: clamp(18px, calc(17.3px + 0.188vw), 20px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vch-color-text);
}

.vch-testimonials__role {
	display: block;
	margin: 4px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--vch-color-text);
}

/* Play button: a white circle with a black glyph. Video playback is not wired up yet. */
.vch-testimonials__play {
	position: relative;
	flex-shrink: 0;
	width: 55px;
	height: 55px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vch-color-surface);
	cursor: pointer;
	transition: transform 0.3s ease;
	animation: vch-play-pulse 3.6s ease-in-out infinite;
	animation-delay: var(--vch-play-delay, 0s);
}

/* The pulse animates a custom property, not the glyph's transform, so hover can take over without the animation restarting. */
@property --vch-play-pulse {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

/* Idle pulse: the glyph zooms once per cycle. Each button gets a random delay so the three do not match. */
@keyframes vch-play-pulse {
	0%,
	100% {
		--vch-play-pulse: 1;
	}
	8% {
		--vch-play-pulse: 1.35;
	}
	16% {
		--vch-play-pulse: 1;
	}
}

.vch-testimonials__play::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 17px;
	transform: translate(-40%, -50%) scale(var(--vch-play-pulse));
	background: var(--vch-color-text);
	-webkit-mask: url('../images/vch-testimonials-play.svg') center / contain no-repeat;
	mask: url('../images/vch-testimonials-play.svg') center / contain no-repeat;
	transition: transform 0.3s ease;
}

/* Hovering the play button or its card grows the circle and zooms the glyph further. The pulse keeps running underneath and resumes on leave. */
.vch-testimonials__play:hover,
.vch-testimonials__item:hover .vch-testimonials__play {
	transform: scale(1.12);
}

.vch-testimonials__play:hover::after,
.vch-testimonials__item:hover .vch-testimonials__play::after {
	transform: translate(-40%, -50%) scale(1.5);
}

.vch-testimonials__play:focus-visible {
	outline: 3px solid var(--vch-color-text);
	outline-offset: 3px;
}

/* Stats card */
.vch-testimonials__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 33px 35px 49px;
	border-radius: 20px;
	background: var(--vch-color-testimonial-panel);
}

.vch-testimonials__stat {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: clamp(44px, calc(38.37px + 1.502vw), 60px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--vch-color-text);
}

/* Animated Lottie graph: the player draws its own colors, so no mask background. */
.vch-testimonials__trend {
	display: block;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
}

.vch-testimonials__trend svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vch-testimonials__revenue-icon,
.vch-testimonials__conversion-icon {
	display: block;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	background: var(--vch-color-trend-up);
}

/* Animated Lottie icon: the player draws its own colors, so drop the mask background. */
.vch-testimonials__revenue-icon {
	background: none;
}

.vch-testimonials__revenue-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Animated Lottie icon: the player draws its own colors, so drop the mask background. */
.vch-testimonials__conversion-icon {
	background: none;
}

/* The conversion drawing sits smaller inside its canvas than the other icons, so enlarge it to match. */
.vch-testimonials__conversion-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(1.3);
}

.vch-testimonials__star {
	display: block;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	margin-left: 2px;
}

/* Animated Lottie icon: the player draws its own colors, so no mask background. */
.vch-testimonials__star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vch-testimonials__headline {
	margin: auto 0;
	font-family: 'Inter', sans-serif;
	font-size: clamp(20px, calc(18.59px + 0.376vw), 24px);
	font-weight: 400;
	line-height: 1.4;
	color: var(--vch-color-text);
}

.vch-testimonials__headline-note {
	display: block;
	font-size: clamp(16px, calc(14.59px + 0.376vw), 20px);
	color: var(--vch-color-text-muted);
}

.vch-testimonials__body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--vch-color-text);
}

/* Text for screen readers only, used beside the arrow and star icons. */
.vch-testimonials__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Tint per story, so each photo card keeps its own background. */
.vch-testimonials__item--tint-1 { --vch-testimonials-tint: var(--vch-color-testimonial-tint-1); }
.vch-testimonials__item--tint-2 { --vch-testimonials-tint: var(--vch-color-testimonial-tint-2); }
.vch-testimonials__item--tint-3 { --vch-testimonials-tint: var(--vch-color-testimonial-tint-3); }
.vch-testimonials__item--tint-4 { --vch-testimonials-tint: var(--vch-color-testimonial-tint-4); }

/* Scroll reveal: set by vch-testimonials-reveal.js. Without that script the cards stay visible. */
.vch-testimonials__item--reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	/* Set per card by the script, so the cards appear one after another. */
	transition-delay: var(--vch-reveal-delay, 0s);
}

.vch-testimonials__item--revealed {
	opacity: 1;
	transform: none;
}

/* Below 1024px: keep the two-card row, but let the height follow the content. */
@media (max-width: 1023px) {
	.vch-testimonials__head {
		flex-direction: column;
		gap: 24px;
	}

	.vch-testimonials__head {
		align-items: center;
		text-align: center;
	}

	.vch-testimonials__title {
		max-width: none;
	}

	.vch-testimonials__aside {
		align-items: center;
		width: 100%;
	}

	.vch-testimonials__cta {
		display: none;
	}

	.vch-testimonials__item {
		aspect-ratio: auto;
	}

	.vch-testimonials__media {
		aspect-ratio: 387 / 427;
	}

	.vch-testimonials__panel {
		padding: 28px 24px 32px;
		gap: 24px;
	}

	.vch-testimonials__headline {
		margin: 0;
	}
}

/* Below 768px: one story per row, stacked photo over stats. */
@media (max-width: 767px) {
	.vch-testimonials {
		padding: 64px 0 80px;
	}

	.vch-testimonials__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.vch-testimonials__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.vch-testimonials__media {
		aspect-ratio: 4 / 5;
	}

	.vch-testimonials__person {
		min-height: 76px;
	}

	.vch-testimonials__panel {
		padding: 24px 20px 28px;
	}
}

/* Arrows for the swipeable row. Hidden on desktop, where all four stories are visible. */
.vch-testimonials__nav {
	display: none;
}

/* Below 1280px: the stories become one swipeable row. It bleeds to the screen edges, the next card
   peeks in, and each card snaps into place. The scroll reveal is off, since cards sit off-screen. */
@media (max-width: 1279px) {
	.vch-testimonials__grid {
		display: flex;
		gap: 16px;
		margin-inline: -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vch-testimonials__grid::-webkit-scrollbar {
		display: none;
	}

	.vch-testimonials__item {
		flex: 0 0 min(640px, 86%);
		scroll-snap-align: start;
	}

	.vch-testimonials__item--reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vch-testimonials__nav {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 24px;
	}

	.vch-testimonials__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--vch-color-text);
		border-radius: 50%;
		background: var(--vch-color-surface);
		color: var(--vch-color-text);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	}

	.vch-testimonials__arrow:hover:not(:disabled) {
		background: var(--vch-color-text);
		color: var(--vch-color-surface);
	}

	.vch-testimonials__arrow:focus-visible {
		outline: 2px solid var(--vch-color-accent-teal);
		outline-offset: 3px;
	}

	.vch-testimonials__arrow:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

@media (max-width: 767px) {
	/* Cards stretch to the tallest one, and the grey panel fills what is left under the photo. */
	.vch-testimonials__item {
		flex-basis: min(340px, 84%);
		grid-template-rows: auto 1fr;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.vch-testimonials__item {
		aspect-ratio: auto;
	}

	.vch-testimonials__media {
		aspect-ratio: 387 / 427;
	}

	.vch-testimonials__panel {
		padding: 28px 24px 32px;
		gap: 24px;
	}

	.vch-testimonials__headline {
		margin: 0;
	}
}

/* Keep the hover and focus styles, but drop the entry motion for users who ask for less. */
@media (prefers-reduced-motion: reduce) {
	.vch-testimonials__play,
	.vch-testimonials__play::after {
		transition: none;
	}

	.vch-testimonials__play {
		animation: none;
	}
}