/* Testimonials — "Tried & Tested by the Best" (design.md §testimonials). */

.tt-testimonials {
	padding: 100px 50px;
	background: var(--wp--preset--color--ink, #141412);
}

.tt-testimonials__head {
	margin-bottom: 40px;
}

.tt-testimonials__eyebrow {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif) !important;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-bright, #ff4349) !important;
}

/* This section's rule is much longer than the 40px used elsewhere on the page —
   Figma `Rectangle 6` (node 88:390) is 111.56px. */
.tt-testimonials__eyebrow::before {
	content: "";
	flex: none;
	width: 111.56px;
	height: 1px;
	background: var(--wp--preset--color--red, #cf2026);
}

.tt-testimonials__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 62px;
	line-height: 1.05;
	text-transform: uppercase;
	color: #fff !important;
}

/* Cards */
.tt-testimonials__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tt-testimonial {
	display: flex;
	flex-direction: column;
	flex: 1 1 536px;
	max-width: 536px;
	min-height: 288px;
	box-sizing: border-box;
	padding: 34px 21px 24px;
	background: #1c1c1a;
}

.tt-testimonial__stars {
	color: var(--wp--preset--color--red, #cf2026);
	font-size: 18px;
	letter-spacing: 4px;
	line-height: 1;
}

.tt-testimonial__quote {
	margin: 20px 0 0;
	max-width: 493px;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 20px;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-light, #adadad) !important;
}

.tt-testimonial__divider {
	display: block;
	height: 1px;
	margin-top: auto;
	background: #34342f;
}

.tt-testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

/* Red mark on a BLACK tile — not the inverse. The Figma square (`Vector 8`) is
   filled black with the bottom-right corner chamfered, and the T mark sits on
   top in red. The bundled t-mark SVG is already #cf2026, so it just needs to be
   left alone rather than filtered white. */
.tt-testimonial__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 50px;
	height: 50px;
	background: #000;
	clip-path: polygon(0 0, 100% 0, 100% 91%, 87.89% 100%, 0 100%);
}

.tt-testimonial__avatar img {
	width: 26.62px;
	height: auto;
}

.tt-testimonial__meta {
	display: flex;
	flex-direction: column;
	gap: 0;      /* name and role sit flush — their line boxes butt in the design */
}

.tt-testimonial__name {
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #fff;
}

.tt-testimonial__role {
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-light, #adadad);
}

/* Slider bars — mobile only; testimonials.js builds one per card (node 14:450
   is 100 × 3 across three bars, matching the hero's mobile bars). */
.tt-testimonials__bars {
	display: none;
	gap: 4px;
	margin-top: 40px;
}

.tt-testimonials__bar {
	width: 30.6px;
	height: 3px;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--grey, #73736f);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tt-testimonials__bar--active {
	background: var(--wp--preset--color--red, #cf2026);
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	.tt-testimonials {
		padding: 60px 20px;
	}

	.tt-testimonials__title {
		font-size: 42px;
	}

	/* One card at a time, swiped. The design's track is 1160px of 380 × 308
	   cards with a 10px gap inside a 442 viewport (node 14:495), the first card
	   starting 30px in — so the row bleeds past the section's 20px gutter and
	   re-pads to 30, leaving the next card peeking. Card width tracks the
	   viewport but never exceeds the design's 380. Native scroll-snap, so it
	   swipes with momentum and needs no JS to function. */
	.tt-testimonials__cards {
		flex-wrap: nowrap;
		gap: 10px;
		margin-inline: -20px;
		padding-inline: 30px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 30px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.tt-testimonials__cards::-webkit-scrollbar {
		display: none;
	}

	.tt-testimonial {
		flex: 0 0 86vw;
		max-width: 380px;
		scroll-snap-align: start;
	}

	.tt-testimonials__bars {
		display: flex;
	}
}