/**
 * The Wicked — Testimonials (rotating quote from #testimonials).
 * A crossfading quote with prev/next + counter, and a "client index" of tabs
 * that jump to a specific quote. Control-driven values arrive as CSS custom
 * properties on the root so responsive queries can override them.
 */

/* NOTE: control-driven values below are set as REAL CSS properties by the
   controls (this Elementor build's editor drops control-set custom properties).
   Only these non-control statics stay as vars (static stylesheet vars work in
   the editor): the column gap and the two tab-dash widths. */
.tw-testimonials {
	--tw-tq-col-gap: clamp(48px, 6vw, 96px);      /* gap between quote + index */
	--tw-tq-dash: 16px;                           /* inactive tab dash width */
	--tw-tq-dash-active: 32px;                    /* active tab dash width */
}

.tw-tq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;  /* right col = index_width control */
	gap: var(--tw-tq-col-gap);
	align-items: start;
	max-width: var(--tw-maxw);
	margin: 0 auto;
}

/* ---- Quote stage (crossfading slides) ---- */
.tw-tq__stage {
	position: relative;
}

.tw-tq__mark {
	position: absolute;
	left: -.6em;
	top: -.18em;
	font-family: var(--tw-font-display);
	font-size: clamp(4rem, 7vw, 6rem);
	line-height: 1;
	color: var(--tw-tan);
	opacity: .5;
	pointer-events: none;
	z-index: 1;
}

.tw-testimonials[data-mark="no"] .tw-tq__mark {
	display: none;
}

.tw-tq__slides {
	position: relative;
	/* All slides share one grid cell (grid-area:1/1 below) so they overlap AND the cell
	   always tracks the TALLEST quote — the stage height stays fixed regardless of which
	   quote is active, at rest and mid-switch. This is what stops the page jumping when
	   quotes differ in length (no JS height pin needed). */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	min-height: 260px; /* stage_min_height control — additional floor */
	/* The Transition speed control sets transition-duration here purely as a value the JS
	   reads back (getComputedStyle); property:none means nothing on the container actually
	   transitions. */
	transition-property: none;
}

/* Letter-staggered stage. Every slide is stacked in the same grid cell (grid-area:1/1) and
   overlaps the others; the cell sizes to the tallest so the stage height is stable. The
   active slide is opacity 1, the rest opacity 0. During a switch BOTH the outgoing and
   incoming slides carry .is-active and cross-fade in place — the per-letter fade carries the
   animation (container never transitions): the outgoing letters ripple out first→last while
   the incoming letters ripple in, the two overlapping by the Fade-overlap amount, and the
   Easing control shapes the sweep. */
.tw-tq__slide {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
}

.tw-tq__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* The quote text is split into per-letter spans (in JS). Each letter carries an
   inline transition-duration + transition-delay so the fade ripples across the
   text; the Transition speed control drives the overall timing. Words are kept
   whole (inline-block) so lines still wrap between words, never mid-word. */
.tw-tq__word {
	display: inline-block;
}

.tw-tq__ch {
	transition-property: opacity;
	transition-timing-function: ease;
}

.tw-tq__slide.is-hidden .tw-tq__ch {
	opacity: 0;
}

.tw-tq__quote {
	margin: 0;
	font-family: var(--tw-font-display);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	line-height: 1.32;
	letter-spacing: -.01em;
	color: var(--tw-cream);
}

.tw-tq__cite {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
	/* The name/role aren't split into letters — they do a plain opacity crossfade tied to
	   the slide's .is-hidden state. JS sets the per-switch duration (0 = snap). */
	transition-property: opacity;
	transition-timing-function: ease;
	transition-duration: 0ms;
}

.tw-tq__slide.is-hidden .tw-tq__cite {
	opacity: 0;
}

.tw-tq__dash {
	flex: 0 0 auto;
	width: 40px;
	height: 1px;
	background: var(--tw-tan);
}

.tw-tq__name {
	font-family: var(--tw-font-body);
	font-size: .9375rem;
	color: var(--tw-cream);
}

.tw-tq__role {
	font-family: var(--tw-font-body);
	font-size: .875rem;
	color: var(--tw-muted);
}

/* ---- Nav (prev / next / counter) ---- */
.tw-tq__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 44px;
}

.tw-tq__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: none;
	border: 1px solid var(--tw-line2);
	color: var(--tw-body);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	transition: border-color .3s, color .3s;
}

.tw-tq__btn:hover,
.tw-tq__btn:focus-visible {
	border-color: var(--tw-tan);
	color: var(--tw-tan-hi);
	outline: none;
}

.tw-tq__counter {
	margin-left: 8px;
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Client index (tabs) ---- */
.tw-tq__index {
	border-left: 1px solid var(--tw-line);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
}

.tw-tq__tab {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding: 0;
	transition: opacity .3s;
}

.tw-tq__tab:hover {
	opacity: .8;
}

.tw-tq__tab-dash {
	flex: 0 0 auto;
	width: var(--tw-tq-dash);
	height: 1px;
	background: var(--tw-tan);
	transition: width .3s ease;
}

.tw-tq__tab.is-active .tw-tq__tab-dash {
	width: var(--tw-tq-dash-active);
}

.tw-tq__tab-label {
	font-family: var(--tw-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--tw-muted);
	white-space: nowrap;
	transition: color .3s ease;
}

.tw-tq__tab.is-active .tw-tq__tab-label {
	color: var(--tw-cream);
}

.tw-testimonials[data-index="no"] .tw-tq {
	grid-template-columns: minmax(0, 1fr);
}

.tw-testimonials[data-index="no"] .tw-tq__index {
	display: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.tw-tq__ch,
	.tw-tq__cite,
	.tw-tq__tab-dash,
	.tw-tq__tab-label {
		transition-duration: .001ms !important;
	}
}

/* ---- Mobile: stack quote + index ---- */
@media (max-width: 767px) {
	.tw-tq {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tw-tq__index {
		border-left: none;
		border-top: 1px solid var(--tw-line);
		padding-left: 0;
		padding-top: 28px;
	}
}