/*
 * Testimonials carousel — one-at-a-time auto-advancing slider.
 *
 * Each slide is a standard .quote-block (styled in main.css), so cards look
 * identical to the quote that shipped before. This file lays out the slider and
 * adds the pause/play control.
 *
 * Two states:
 *   - Base (no JS / prefers-reduced-motion): the viewport is a manually
 *     scrollable, snap-aligned row, so every testimonial stays reachable with
 *     no auto-motion.
 *   - .tcar--js (added by the script when motion is allowed): exactly one
 *     full-width, centered testimonial shows; the script slides the track by
 *     100% to bring in the next one.
 *
 * All brand colors are referenced as var(--token, #fallback) so an undefined
 * custom property can never silently collapse a value to nothing.
 */

.tcar {
	position: relative;
	width: 100%;
	/* Separate the block (and its pause control) from the recognition strip
	   that follows directly below. */
	margin-bottom: var(--sp-10, 3.5rem);
}

/* ---- Base / fallback: manually scrollable row ---- */
.tcar-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.tcar-track {
	display: flex;
	align-items: stretch;
	gap: var(--sp-6, 2rem);
}

.tcar-slide {
	flex: 0 0 auto;
	width: clamp(280px, 88vw, 640px);
	margin: 0;
	max-width: none;
	scroll-snap-align: center;
}

/* Hidden schema carrier — never takes space or shows. */
.tcar-reviewed {
	display: none !important;
}

/* ---- JS-enhanced: one centered slide at a time ---- */
.tcar--js .tcar-viewport {
	overflow: hidden;
	scroll-snap-type: none;
}

.tcar--js .tcar-track {
	gap: 0;
	width: 100%;
	flex-wrap: nowrap;
	/* transform + transition are applied inline by the script. */
}

.tcar--js .tcar-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-inline: var(--sp-4, 1.25rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	scroll-snap-align: none;
	/* Short quotes stay vertically centered; an unusually long one is capped
	   to the viewport and scrolls within its own slide instead of forcing the
	   whole section taller than the screen. */
	max-height: 70vh;
	overflow-y: auto;
}

/* Keep a single centered quote from stretching too wide on desktop. */
.tcar--js .tcar-slide .quote-text {
	max-width: 760px;
	margin-inline: auto;
}

/* ---- Pause / play control (mirrors the map pause pill) ---- */
.tcar-controls {
	/* In normal flow BELOW the viewport (was position:absolute pinned to the
	   bottom-right, which floated over long testimonials and overlapped the
	   text). A dedicated row can never collide with the quote, at any length. */
	display: flex;
	justify-content: center;
	margin: var(--sp-3, 0.85rem) 0 0;
}

.tcar-controls[hidden] {
	display: none;
}

.tcar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4rem 0.85rem;
	background: transparent;
	border: 1px solid var(--gold, #c2a36b);
	border-radius: 999px;
	color: var(--gold, #c2a36b);
	font-family: inherit;
	font-size: var(--fs-micro, 0.72rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	/* Recede at rest so it doesn't compete with the content; brighten on
	   interaction so it stays discoverable. */
	opacity: 0.55;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.tcar-toggle:hover,
.tcar-toggle:focus-visible {
	opacity: 1;
}

.tcar-toggle:hover {
	background: var(--gold, #c2a36b);
	color: var(--obsidian, #0b0b16);
}

/* Keep focus visible — WCAG 2.4.7. Never set outline:none here. */
.tcar-toggle:focus-visible {
	outline: 2px solid var(--gold, #c2a36b);
	outline-offset: 3px;
}

.tcar-toggle-icon {
	font-size: 0.85em;
	line-height: 1;
}

/* Reduced motion: no auto-advance happens, so nothing to pause — hide the
   control and keep the scrollable fallback. */
@media (prefers-reduced-motion: reduce) {
	.tcar-controls {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.tcar-slide {
		width: clamp(260px, 90vw, 520px);
	}
	.tcar-track {
		gap: var(--sp-4, 1.25rem);
	}
}

/* ---- Quote marks + reviewer title (client request) --------------------------
 * Scoped to .tcar-slide so the shared .quote-text/.quote-attr styling used by
 * the standalone quote_block pull-quote is unaffected.
 *   1. Remove the single gold quote mark that sat ABOVE the quote (.quote-mark).
 *   2. Flank the quote with two large gold marks at the TOP CORNERS of the
 *      quote: an opening mark pulled up/left of the top-left corner and a
 *      closing mark pulled up/right of the top-right corner. They are absolutely
 *      positioned on .quote-text (made position:relative) so they don't shift
 *      the text. The quote box is centered with space on either side inside the
 *      full-width slide, so the outward offset stays clear of the carousel's
 *      overflow:hidden viewport on desktop; on small screens the marks are
 *      pulled back to the corners and shrunk so nothing clips.
 *      (The slide has no .quote-block wrapper; .quote-text/.quote-attr are
 *      direct children of .tcar-slide.)
 *   3. Recolor the reviewer's title (.quote-attr) to gold. The quote text
 *      (.quote-text) stays --platinum so the quote itself remains white.
 * ---------------------------------------------------------------------------- */

.tcar-slide .quote-mark {
	display: none; /* was the gold mark above the quote */
}

.tcar-slide .quote-text {
	position: relative; /* anchor for the corner quote marks */
}

.tcar-slide .quote-text::before,
.tcar-slide .quote-text::after {
	position: absolute;
	top: -0.4em; /* raise above the first line */
	color: var(--gold, #c2a36b);
	font-family: var(--font-display, Georgia, serif);
	font-size: 2.4em;
	line-height: 1;
	pointer-events: none;
}

.tcar-slide .quote-text::before {
	content: "\201C"; /* top-left, opening mark */
	left: -0.55em;
}

.tcar-slide .quote-text::after {
	content: "\201D"; /* top-right, closing mark */
	right: -0.55em;
}

.tcar-slide .quote-attr {
	color: var(--gold, #c2a36b); /* reviewer's title -> gold */
}

/* Small screens: the quote box nearly fills the slide, so pull the marks back
   to the corners and shrink them so they can't clip at the viewport edge. */
@media (max-width: 600px) {
	.tcar-slide .quote-text::before,
	.tcar-slide .quote-text::after {
		font-size: 1.8em;
		top: -0.2em;
	}
	.tcar-slide .quote-text::before {
		left: -0.1em;
	}
	.tcar-slide .quote-text::after {
		right: -0.1em;
	}
}