/**
 * Cyfinoid Testimonials — zero-JS scroll-snap carousel.
 *
 * Replaces jQuery + Slick + Font Awesome. Legacy .wtwp-* class names are kept
 * so existing site Custom CSS continues to apply.
 */

/*
 * Pause/play toggle, injected by testimonials.js (WCAG 2.2.2 — moving content
 * must be pausable). It only exists when the script runs, so it is positioned
 * relative to the wrapper rather than reserving layout space up front.
 */
.cyf-tm {
	position: relative;
}

.cyf-tm__toggle {
	position: absolute;
	top: -2.35rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--cyf-tm-border);
	border-radius: 50%;
	background: var(--cyf-tm-surface);
	color: currentColor;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.cyf-tm__toggle:hover,
.cyf-tm__toggle:focus-visible {
	opacity: 1;
	border-color: var(--cyf-tm-accent);
}

.cyf-tm__toggle:focus-visible {
	outline: 2px solid var(--cyf-tm-accent);
	outline-offset: 2px;
}

/* Pause glyph (two bars) drawn with borders — no icon font needed. */
.cyf-tm__toggle::before {
	content: "";
	width: 8px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

/* Play glyph (triangle) when paused. */
.cyf-tm__toggle.is-paused::before {
	width: 0;
	height: 0;
	margin-left: 2px;
	border: 5px solid transparent;
	border-left: 8px solid currentColor;
	border-right: 0;
}

.cyf-tm {
	--cyf-tm-columns: 3;
	--cyf-tm-gap: 1.5rem;
	--cyf-tm-accent: #4b9963;
	--cyf-tm-radius: 10px;

	/*
	 * Card surface: a translucent lift off whatever sits behind it.
	 *
	 * Deliberately NOT switched on prefers-color-scheme. This site renders a
	 * dark canvas (#121212 with white text) for every visitor regardless of
	 * their OS setting, so keying the surface to the OS preference would make
	 * cards nearly invisible for light-mode users. These values track the
	 * site's actual palette, not the visitor's system preference.
	 */
	--cyf-tm-surface: rgba(255, 255, 255, 0.05);
	--cyf-tm-border: rgba(255, 255, 255, 0.14);

	width: 100%;
	/* Extra top margin reserves room for the absolutely-positioned toggle. */
	margin-block: 3rem 1.5rem;
}

/* Track: horizontal scroll with snap points, no JS required. */
.cyf-tm__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--cyf-tm-columns) - 1) * var(--cyf-tm-gap)) / var(--cyf-tm-columns)
	);
	gap: var(--cyf-tm-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--cyf-tm-accent) rgba(127, 127, 127, 0.18);
	padding-bottom: 0.75rem;
}

/* Visible scroll affordance: the bar doubles as a position indicator. */
.cyf-tm__track::-webkit-scrollbar {
	height: 6px;
}

.cyf-tm__track::-webkit-scrollbar-track {
	background: rgba(127, 127, 127, 0.18);
	border-radius: 3px;
}

.cyf-tm__track::-webkit-scrollbar-thumb {
	background: var(--cyf-tm-accent);
	border-radius: 3px;
}

.cyf-tm__track:focus-visible {
	outline: 2px solid var(--cyf-tm-accent);
	outline-offset: 4px;
}

.cyf-tm__slide {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-width: 0;
	display: flex;
}

/*
 * The card surface lives on .wtwp-testimonial-inner rather than
 * .wtwp-testimonial-content because the site's Custom CSS forces
 * `background: unset !important` on the latter. Styling the untargeted
 * parent gives the cards a distinct panel without an !important fight.
 */
.cyf-tm__slide .wtwp-testimonial-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--cyf-tm-surface);
	border: 1px solid var(--cyf-tm-border);
	border-radius: var(--cyf-tm-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.cyf-tm__slide:hover .wtwp-testimonial-inner {
	border-color: var(--cyf-tm-accent);
}

/*
 * Quote body. `flex-grow: 1` with `flex-shrink: 0` keeps every card's quote
 * area the same height even when one card's footer wraps to two lines, so the
 * green attribution bars stay aligned across the row.
 */
.cyf-tm .wtwp-testimonial-content {
	position: relative;
	flex: 1 0 auto;
	padding: 1.5rem 1.25rem 1.5rem;
	text-align: left;
}

/*
 * Quote mark: sized up from a 16px glyph in a 32px circle to a 26px glyph in
 * a 48px circle, so it reads as a deliberate mark instead of getting lost.
 */
.cyf-tm .wtwp-testimonial-content .icon {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cyf-tm-accent);
	color: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyf-tm-accent) 18%, transparent);
}

.cyf-tm .wtwp-testimonial-content .icon svg {
	width: 26px;
	height: 26px;
}

/* Clears the 48px quote badge in the top-right corner. */
.cyf-tm .wtwp-testimonial-title {
	margin: 0 3.5rem 0.5rem 0;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Clamp the whole quote block to a fixed number of lines so every card is the
 * same height. The site Custom CSS clamps each <p> individually, which makes
 * multi-paragraph testimonials stretch the whole track; the higher-specificity
 * rules below neutralise that and clamp the container instead.
 */
.cyf-tm .wtwp-testimonials-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	line-height: 1.6;
	overflow: hidden;
	/* Long URLs or tool names must not push the card wider than its column. */
	overflow-wrap: anywhere;
}

.cyf-tm .wtwp-testimonials-text p {
	display: inline;
	-webkit-line-clamp: none;
	overflow: visible;
	text-overflow: clip;
}

/* Separate run-on paragraphs once they are inlined by the clamp above. */
.cyf-tm .wtwp-testimonials-text p + p::before {
	content: " ";
}

.cyf-tm .wtwp-testimonials-text > :first-child {
	margin-top: 0;
}

.cyf-tm .wtwp-testimonials-text > :last-child {
	margin-bottom: 0;
}

/* Attribution */
.cyf-tm .wtwp-testimonial-avatar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.75rem 1.25rem;
	background: var(--cyf-tm-accent);
	color: #fff;
	/* Sits flush in the corners; the card wrapper clips the radius. */
	margin-top: auto;
	flex: 0 0 auto;
	/*
	 * Reserve room for a two-line job/company string. Attribution length varies
	 * per testimonial, and without a floor the green bars land at different
	 * heights across a row; this keeps them on one line.
	 */
	min-height: 7.2rem;
	align-content: center;
}

.cyf-tm .wtwp-testimonial-avatar a {
	color: inherit;
	text-decoration: underline;
}

.cyf-tm .wtwp-avtar-image img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.cyf-tm .wtwp-avtar-image img.wtwp-circle {
	border-radius: 50%;
}

.cyf-tm .wtwp-avtar-image img.wtwp-square {
	border-radius: 4px;
}

.cyf-tm .wtwp-testimonial-author {
	flex: 1 1 10rem;
	min-width: 0;
}

/*
 * Long client names and company strings must wrap rather than force the flex
 * row wider than the card, which would otherwise cause horizontal overflow
 * inside each slide on narrow screens.
 */
.cyf-tm .wtwp-testimonial-client,
.cyf-tm .wtwp-testimonial-cdec {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.cyf-tm .wtwp-testimonial-client {
	line-height: 1.3;
}

/* Capped at two lines so it cannot exceed the footer's reserved height. */
.cyf-tm .wtwp-testimonial-cdec {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875em;
	line-height: 1.4;
	opacity: 0.9;
}

/* Rating */
.cyf-tm__rating {
	flex: 0 0 auto;
	letter-spacing: 0.05em;
	line-height: 1;
}

.cyf-tm__star {
	color: #ffb400;
}

.cyf-tm .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Responsive: step down columns as the viewport narrows.
 *
 * Breakpoints are chosen so a card never drops below ~350px. Dropping to a
 * single peeking card at 782px (rather than 600px) avoids the discontinuity
 * where two columns squeezed cards to ~268px just before the switch, then
 * jumped to ~476px right after it.
 */
@media (max-width: 1024px) {
	.cyf-tm {
		--cyf-tm-gap: 1.25rem;
	}

	.cyf-tm__track {
		grid-auto-columns: calc((100% - var(--cyf-tm-gap)) / 2);
	}
}

@media (max-width: 782px) {
	.cyf-tm {
		--cyf-tm-gap: 1rem;
	}

	/* Single card with the next one peeking, signalling more content. */
	.cyf-tm__track {
		grid-auto-columns: min(88%, 420px);
	}
}

@media (max-width: 480px) {
	.cyf-tm__track {
		grid-auto-columns: 88%;
	}

	/* Larger tap target on touch screens (min 44px per WCAG 2.5.5). */
	.cyf-tm__toggle {
		width: 44px;
		height: 44px;
		top: -3.25rem;
		opacity: 0.75;
	}

	.cyf-tm .wtwp-testimonial-content {
		padding: 1rem 1rem 1.25rem;
	}

	.cyf-tm .wtwp-testimonial-avatar {
		padding: 0.75rem 1rem;
	}

	/* Shorter clamp keeps cards from dominating a small screen. */
	.cyf-tm .wtwp-testimonials-text {
		-webkit-line-clamp: 4;
	}

	.cyf-tm .wtwp-testimonial-title {
		margin-right: 3rem;
		font-size: 0.95em;
	}

	.cyf-tm .wtwp-testimonial-content .icon {
		width: 40px;
		height: 40px;
	}

	.cyf-tm .wtwp-testimonial-content .icon svg {
		width: 22px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cyf-tm__track {
		scroll-behavior: auto;
	}

	.cyf-tm__slide .wtwp-testimonial-inner,
	.cyf-tm__toggle {
		transition: none;
	}
}