/* Testimonials: staggered card carousel (template-parts/testimonials-stagger.php).
 * Site background, white cards with a thin border and black text; the card in
 * focus is black with white text. Fonts are the site's. */

.abs-tst {
	--tst-bg: var(--bg-main, #fcfcfc);
	--tst-card: var(--bg-surface, #ffffff);
	--tst-line: var(--border, #e5e5e5);
	--tst-text: var(--text-primary, #000000);
	--tst-muted: var(--text-muted, #525252);
	--tst-focus: var(--bg-dark-soft, #171717);
	--tst-size: 365px;
	--tst-cut: 50px;
	background: var(--tst-bg);
	color: var(--tst-text);
	padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 7vw, 88px);
	overflow: hidden;
}
.abs-tst__head h2 { color: var(--tst-text); }
.abs-tst__head .label { justify-content: center; }

/* ---------- Card (shared) ---------- */
.abs-tst__list { list-style: none; margin: 0; padding: 0; }
.abs-tst__card {
	position: relative;
	box-sizing: border-box;
	width: var(--tst-size);
	height: var(--tst-size);
	padding: 32px;
	background: var(--tst-card);
	color: var(--tst-text);
	border: 2px solid var(--tst-line);
	/* Cut top-right corner, like a folded page */
	clip-path: polygon(0 0, calc(100% - var(--tst-cut)) 0, 100% var(--tst-cut), 100% 100%, 0 100%);
	text-align: left;
	display: flex; flex-direction: column;
}
.abs-tst__fold {
	position: absolute; right: -2px; top: calc(var(--tst-cut) - 2px);
	width: calc(var(--tst-cut) * 1.4142); height: 2px;
	background: var(--tst-line);
	transform: rotate(45deg); transform-origin: right top;
	pointer-events: none;
}
.abs-tst__avatar {
	flex: none;
	display: grid; place-items: center;
	width: 48px; height: 56px;
	margin-bottom: 18px;
	overflow: hidden;
	background: #f5f5f5;
	color: var(--tst-text);
	font-weight: 600; font-size: 0.95rem;
	box-shadow: 3px 3px 0 var(--tst-bg);
}
.abs-tst__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.abs-tst__quote {
	margin: 0;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
	font-weight: 500; line-height: 1.35; letter-spacing: -0.01em;
	flex: none;
	display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.abs-tst__by {
	margin: auto 0 0; padding-top: 14px;
	display: flex; flex-direction: column; gap: 2px;
	font-size: 0.875rem; color: var(--tst-muted);
}
.abs-tst__by > :first-child { color: inherit; font-weight: 500; }
.abs-tst__by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.abs-tst__role { font-style: italic; }

/* Card in focus: black with white text */
.abs-tst__card.is-center {
	background: var(--tst-focus);
	color: #ffffff;
	border-color: var(--tst-focus);
	--tst-muted: rgba(255, 255, 255, 0.75);
}
.abs-tst__card.is-center .abs-tst__fold { background: rgba(255, 255, 255, 0.25); }
.abs-tst__card.is-center .abs-tst__avatar { background: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: 3px 3px 0 var(--tst-bg); }

/* ---------- Static layout (fewer than 3 quotes, or before the script runs) ---------- */
.abs-tst__stage { position: relative; margin-top: clamp(32px, 4vw, 48px); outline: none; }
.abs-tst__list {
	display: flex; gap: 20px;
	padding: 4px 24px 8px;
	overflow-x: auto; scroll-snap-type: x mandatory;
}
.abs-tst__list .abs-tst__card { flex: none; scroll-snap-align: center; }
/* Centre the row when it fits, scroll it when it doesn't */
.abs-tst__list > :first-child { margin-left: auto; }
.abs-tst__list > :last-child { margin-right: auto; }
.abs-tst__nav { display: none; }

/* ---------- Carousel (script running) ---------- */
.abs-tst__stage.is-ready { height: calc(var(--tst-size) + 200px); }
.abs-tst__stage.is-ready .abs-tst__list { display: block; padding: 0; overflow: visible; height: 100%; }
.abs-tst__stage.is-ready .abs-tst__list > * { margin: 0; }
.abs-tst__stage.is-ready .abs-tst__card {
	position: absolute; left: 50%; top: calc(50% - 36px);
	cursor: pointer;
	transition: transform 0.5s ease-in-out, background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
	will-change: transform;
}
.abs-tst__stage.is-ready .abs-tst__card:not(.is-center):hover { border-color: var(--border-strong, #d4d4d4); }
.abs-tst__stage.is-ready .abs-tst__card.is-center {
	cursor: default;
	z-index: 2;
	box-shadow: 0 8px 0 4px var(--tst-line);
}
.abs-tst__stage.is-ready .abs-tst__card.is-far { visibility: hidden; }
.abs-tst__stage.is-ready .abs-tst__nav {
	position: absolute; left: 50%; bottom: 0;
	display: flex; gap: 8px;
	transform: translateX(-50%);
}
.abs-tst__btn {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	background: var(--tst-card); color: var(--tst-text);
	border: 2px solid var(--tst-line); border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.abs-tst__btn:hover { background: var(--tst-focus); color: #ffffff; border-color: var(--tst-focus); }
.abs-tst__btn:focus-visible,
.abs-tst__stage:focus-visible { outline: 2px solid var(--tst-text); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.abs-tst__stage.is-ready .abs-tst__card { transition: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 639px) {
	.abs-tst { --tst-size: min(290px, 78vw); --tst-cut: 36px; }
	.abs-tst__card { padding: 24px; }
	.abs-tst__avatar { width: 40px; height: 46px; margin-bottom: 14px; }
	.abs-tst__quote { font-size: 0.975rem; -webkit-line-clamp: 5; }
	.abs-tst__stage.is-ready { height: calc(var(--tst-size) + 170px); }
	.abs-tst__btn { width: 48px; height: 48px; }
}