/*
 * proof/testimonials. Figma Home 2373:1570 (929 tall), see
 * sites/proof/design/home-spec.md: blue band with the brand shape and the
 * dither texture; person (159 photo, logo, name 32, role Cousine 24) at the
 * bottom left, quote 36 / 1.24 at x 977. proof.js adds .is-ready, the
 * active slide and .pf-testi-nav (arrows + counter, top right).
 */

.pf-block.pf-testisec {
	padding-top: calc(58 * var(--pf-u));
	padding-bottom: calc(45 * var(--pf-u));
	background: var(--pf-blue-2);
	color: #fff;
}
.pf-testisec::before {
	content: "";
	position: absolute;
	left: calc(-1662 * var(--pf-u));
	top: 50%;
	width: calc(2622 * var(--pf-u));
	height: calc(2113 * var(--pf-u));
	transform: translateY(-50%);
	background: url("../../assets/img/brand-shape-blue.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-testisec::after {
	content: "";
	position: absolute;
	inset: calc(-35 * var(--pf-u)) calc(-63 * var(--pf-u));
	background: url("../../assets/img/dither.png") center / cover;
	mix-blend-mode: darken;
	opacity: 0.04;
	pointer-events: none;
}
.pf-testisec > * {
	position: relative;
	z-index: 1;
}

/* Short voices since 2026-10: the band follows its content, with room for
   the quote mark and the arrows above. */
.pf-block .pf-testi-slider {
	touch-action: pan-y; /* horizontal swipe is ours (proof.js), vertical scroll stays native */
	min-height: 0;
	padding-top: calc(120 * var(--pf-u));
}
/* Quote mark, top left. */
.pf-block .pf-testi-slider::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(36 * var(--pf-u));
	height: calc(31.6 * var(--pf-u));
	background: url("../../assets/img/quote.svg") no-repeat center / contain;
}
.pf-block .pf-testi-slide {
	display: flex;
	align-items: flex-end;
	min-height: 0;
}
.pf-block .pf-testi-slider.is-ready .pf-testi-slide:not(.is-active) {
	display: none;
}
.pf-block .pf-testi-slider.is-ready .pf-testi-slide.is-active {
	animation: pf-testi-fade 0.4s ease;
}
@keyframes pf-testi-fade {
	from {
		opacity: 0;
	}
}

/* figcaption: no italic from the theme reset. */
.pf-block .pf-testi-person {
	display: flex;
	flex: none;
	align-items: flex-end;
	font-style: normal;
	gap: calc(36 * var(--pf-u));
	width: calc(921 * var(--pf-u));
}
.pf-block .pf-testi-photo {
	flex: none;
	width: calc(159 * var(--pf-u));
	height: calc(159 * var(--pf-u));
	object-fit: cover;
	border-radius: calc(3.3 * var(--pf-u));
}
.pf-testi-meta {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(12 * var(--pf-u));
	min-width: 0;
}
/* 24 above the name in Figma (logo 3822-3867, name 3896): 12 more than
   the column gap. */
.pf-block .pf-testi-logo {
	width: calc(188 * var(--pf-u));
	height: auto;
	margin-bottom: calc(12 * var(--pf-u));
}
.pf-testi-name {
	font-size: calc(32 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.8);
}
.pf-testi-role {
	font-family: var(--pf-mono);
	font-size: calc(24 * var(--pf-t));
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.64);
}
/* 885 in Figma; Chrome sets this text ~1% narrower, so 880 keeps the
   design's line breaks. */
.pf-block .pf-testi-body {
	flex: 1;
	max-width: calc(880 * var(--pf-u));
}
.pf-block .pf-testi-quote {
	font-size: calc(36 * var(--pf-t));
	font-style: normal;
	line-height: 1.24;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.56);
}
.pf-testi-quote p {
	margin: 0;
}
.pf-testi-quote strong {
	font-weight: 400;
	color: #fff;
}
/* Also 20 on tablet / phone (--pf-u is 1px there), as built before. */
.pf-block .pf-testi-text {
	width: min(100%, calc(765 * var(--pf-u)));
	margin-top: calc(48 * var(--pf-u));
	font-size: calc(20 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.04em;
	color: #fff;
	opacity: 0.7;
}

/* Arrows and counter (proof.js), level with the quote mark. */
.pf-block .pf-testi-nav {
	position: absolute;
	top: 0;
	left: calc(921 * var(--pf-u));
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: calc(16 * var(--pf-u));
}
.pf-block .pf-testi-nav button {
	width: calc(30 * var(--pf-u));
	height: calc(26 * var(--pf-u));
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("../../assets/img/arrow-right.svg") no-repeat center / contain;
	cursor: pointer;
	transition: opacity 0.2s;
}
.pf-block .pf-testi-nav .pf-prev {
	transform: scaleX(-1);
}
.pf-block .pf-testi-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}
.pf-block .pf-testi-nav button:focus-visible {
	outline: 2px solid var(--pf-lime);
	outline-offset: 4px;
}
.pf-testi-count {
	margin-left: auto;
	font-family: var(--pf-mono);
	font-size: calc(24 * var(--pf-t));
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.64);
}

/* Label with the rule above. The rule runs 32 past the content edge in
   Figma (x 56-1896), 24 short of the band's right edge. */
.pf-block.pf-testisec .pf-label--bottom {
	width: auto;
	margin-top: calc(56 * var(--pf-u));
	margin-right: calc(-32 * var(--pf-u));
}

/* Tablet / phone: quote first, person below; arrows top right. */
@media (max-width: 1024px) {
	.pf-block.pf-testisec {
		padding-top: 40px;
		padding-bottom: 32px;
	}
	.pf-testisec::before {
		left: -70%;
		width: 170%;
		height: auto;
		aspect-ratio: 2622 / 2113;
	}
	.pf-block .pf-testi-slider {
		min-height: 0;
		padding-top: 72px;
	}
	.pf-block .pf-testi-slider::before {
		width: 30px;
		height: 26px;
	}
	.pf-block .pf-testi-slide {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 40px;
		min-height: 0;
	}
	.pf-block .pf-testi-person {
		gap: 20px;
		width: 100%;
	}
	.pf-block .pf-testi-photo {
		width: 96px;
		height: 96px;
	}
	/* The column gap only, as built before (no Figma for tablet / phone). */
	.pf-block .pf-testi-logo {
		width: 130px;
		margin-bottom: 0;
	}
	.pf-testi-name {
		font-size: 22px;
	}
	.pf-testi-role {
		font-size: 14px;
	}
	.pf-block .pf-testi-quote {
		font-size: 30px;
	}
	.pf-block .pf-testi-nav {
		left: auto;
		gap: 14px;
	}
	.pf-testi-count {
		margin-left: 12px;
		font-size: 18px;
	}
	/* Rule ends at the content edge, as built before. */
	.pf-block.pf-testisec .pf-label--bottom {
		margin-top: 40px;
		margin-right: 0;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-testi-person {
		flex-wrap: wrap;
	}
	.pf-testi-meta {
		flex-basis: 100%;
	}
	.pf-block .pf-testi-nav button {
		width: 26px;
		height: 22px;
	}
}

/* Phone: fixed sizes in place of the former clamp() (see --pf-t in base.css). */
@media (max-width: 767px) {
	.pf-block .pf-testi-quote {
		font-size: 22px;
	}
}