/**
 * JS Click Testimonial.
 *
 * A quote rotator driven by a row of avatars (Figma 22460:22461): a large
 * square hero photo on the left, the quote on the right, and the people
 * underneath it — clicking one switches both the photo and the quote.
 *
 * The switching model is ported from cci-core's Story Testimonials. CCI scrolls
 * its avatars in a draggable track; this design has a fixed row, so the track
 * machinery is deliberately not carried over — only the active-item model,
 * autoplay and hover-pause.
 *
 * No outer padding is baked in: the Elementor container owns the gutters.
 */

.elementor-widget-js_click_testimonial {
	width: 100%;
}

.js-click-testimonial {
	--js-ct-gap: 52px;
	--js-ct-hero-radius: 24px;
	--js-ct-hero-bg: var(--js-color-light-bg, #edeff4);
	--js-ct-quote: var(--js-color-primary, #111827);
	--js-ct-accent: var(--js-color-highlight, #b28b2c);
	--js-ct-name: var(--js-color-primary, #111827);
	--js-ct-avatar-size: 60px;
	--js-ct-avatar-gap: 12px;
	--js-ct-avatar-stack-gap: 16px;

	display: flex;
	align-items: center;
	gap: var(--js-ct-gap);
	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-click-testimonial *,
.js-click-testimonial *::before,
.js-click-testimonial *::after {
	box-sizing: border-box;
}

/* -------- Hero -------- */

/* Square by default, per the design's 574x574. aspect-ratio keeps it square as
   the column narrows instead of pinning a fixed height. */
.js-click-testimonial__hero {
	position: relative;
	flex: 0 0 auto;
	width: 574px;
	max-width: 50%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--js-ct-hero-radius);
	background: var(--js-ct-hero-bg);
}

/* The <picture> wrapper carries the per-breakpoint sources and takes the
   hero's box, so the image inside resolves against something the hero's size
   whichever source wins.

   Elementor's frontend CSS carries .elementor img { height: auto } at (0,1,1),
   which outranks the (0,1,0) rule under this one — see the extra class on the
   height rule below, which is what lets object-fit do the cropping. */
.js-click-testimonial__hero-picture {
	position: absolute;
	inset: 0;
	display: block;
}

/* Every hero image stays in the DOM and is cross-faded, so switching does not
   re-request an image that has already loaded. */
.js-click-testimonial__hero-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* The height that makes object-fit mean anything. Elementor sets
   .elementor img { height: auto } at (0,1,1), which beats the single class
   above, and an image left at its own ratio is simply clipped by the hero —
   a crop from the top rather than the centred cover the design draws. The
   parent class buys the (0,2,0) needed to say otherwise. */
.js-click-testimonial__hero .js-click-testimonial__hero-img {
	height: 100%;
}

.js-click-testimonial__hero-img.is-active {
	opacity: 1;
}

/* -------- Content -------- */
.js-click-testimonial__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 40px;
	justify-content: center;
	min-width: 0;
}

.js-click-testimonial__quotes {
	/* One grid cell holds every quote, so the block keeps the height of the
	   tallest and the outgoing and incoming quotes overlap while they fade. */
	display: grid;
}

.js-click-testimonial__quote {
	grid-area: 1 / 1;
	margin: 0;
	color: var(--js-ct-quote);
	font-size: 36px;
	font-weight: 600;
	line-height: 48px;
	letter-spacing: 0;
	/* visibility, not display: it can be transitioned, and it still takes the
	   inactive quote out of the accessibility tree. Held until the fade ends on
	   the way out, dropped immediately on the way in. Matches the hero's 0.35s. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.js-click-testimonial__quote.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s;
}

/* -------- Avatars -------- */
.js-click-testimonial__avatars {
	display: flex;
	align-items: flex-start;
	gap: var(--js-ct-avatar-gap);
	width: 100%;
}

.js-click-testimonial__avatar {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--js-ct-avatar-stack-gap);
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.js-click-testimonial__avatar-ring {
	display: block;
	width: var(--js-ct-avatar-size);
	height: var(--js-ct-avatar-size);
	overflow: hidden;
	border: 1px solid var(--js-ct-accent);
	border-radius: 100px;
	transition: border-width 0.2s ease;
}

/* The active person: a heavier ring and the name in the accent colour. */
.js-click-testimonial__avatar.is-active .js-click-testimonial__avatar-ring {
	border-width: 2px;
}

.js-click-testimonial__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.js-click-testimonial__avatar-name {
	display: block;
	/* One line on desktop and tablet — the slot is wider than any of the names
	   at those sizes. Only the phone stacks them (see the 767 block). */
	width: 100%;
	margin-inline: auto;
	/* The avatar is a <button>, and the parent theme's reset puts
	   white-space: nowrap on every button, which the name inherits — without
	   this the cap above just makes the text overflow on one line instead of
	   breaking. */
	white-space: normal;
	color: var(--js-ct-name);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	transition: color 0.2s ease;
}

.js-click-testimonial__avatar.is-active .js-click-testimonial__avatar-name {
	color: var(--js-ct-accent);
}

/* Hovering a person previews what selecting them looks like: the same heavier
   ring and the same accent name as the active one, so the row reads as one
   state rather than two competing treatments. */
@media (hover: hover) {
	.js-click-testimonial__avatar:hover .js-click-testimonial__avatar-ring {
		border-width: 2px;
	}

	.js-click-testimonial__avatar:hover .js-click-testimonial__avatar-name {
		color: var(--js-ct-accent);
	}
}

.js-click-testimonial__avatar:focus-visible {
	outline: 2px solid var(--js-ct-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

/* -------- Responsive -------- */

/* Stack below the desktop breakpoint: the hero goes full width above the
   quote, matching how the rest of the site collapses. */
@media (max-width: 1024px) {
	.js-click-testimonial {
		flex-direction: column;
		/* No gap: the content overlaps the photo instead (see the negative
		   margin below), which is what the frames do. */
		gap: 0;
		/* The row layout centres its two children on the cross axis. Once the
		   axis turns vertical that same rule stops them filling the width and
		   sizes them to their content instead, so the content column took the
		   avatar row's min-content width (404) inside a 295 parent and spilled
		   out of the section. */
		align-items: stretch;
	}

	/* Not square below desktop: both frames run the photo full width at a flat
	   300px (tablet 704x300, mobile 343x300), so the aspect ratio gives way to
	   a fixed height. */
	.js-click-testimonial__hero {
		/* min-width, not width: the Photo Width control is a desktop value but
		   Elementor emits it at (0,3,0) from the page's own stylesheet, which
		   outranks anything here — so a plain width: 100% lost and the photo
		   stayed at the desktop 574 inside a 704 column. A minimum cannot be
		   outranked by a width, and below desktop the photo is full-bleed at
		   every width, so there is nothing here for the control to say. */
		min-width: 100%;
		max-width: 100%;
		aspect-ratio: auto;
		height: var(--js-ct-hero-height, 400px);
	}

	/* The frames stack two things over the photo (22460:23049 and :23050): a
	   vignette, and white that hides the photo's bottom so the quote can ride
	   across it. The vignette is ::before below. The white is the mask here
	   instead — as white it only worked over a white section. */
	.js-click-testimonial__hero {
		/* The photo fades out rather than having white painted over it, so it
		   works over any section background. Masking the hero takes the
		   vignette with it, and gives the hero its own layer so neither can
		   paint over the quote riding across the bottom edge.

		   The bottom of the photo only. These files carry no fade of their own —
		   every one is opaque top to bottom and gets darker toward the foot —
		   so everything the reader sees here is this gradient, and starting it
		   half way up washed out most of the subject. It holds solid through
		   the top two thirds and goes in the last, which is the band the quote
		   rides over and the only part that needs to give way. */
		--js-photo-fade-start: 68%;
		--js-photo-fade-mid: 86%;
		--js-photo-fade-mid-alpha: 0.2;

		-webkit-mask-image: var(--js-photo-fade);
		mask-image: var(--js-photo-fade);
		isolation: isolate;
	}

	/* No vignette on the hero. The design's one (22460:23049) darkens the
	   middle and falls to near-black from just past half way — which the old
	   fade covered and this one no longer reaches, leaving it as a dirty band
	   across the photo instead of an effect. The quote sits on faded-out
	   background rather than on the picture, so there is nothing for it to do.
	   .js-photo-plate keeps it for a photo that does need it. */

	/* The content starts 80px above the photo's bottom in both frames
	   (Content y=220 against a 300 photo) — the quote's first lines land where
	   the photo has faded out. Raised above the hero so the photo cannot paint
	   over the text. */
	.js-click-testimonial__content {
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--js-photo-overlap, 80px));
		gap: 32px;
		/* The photo runs the full width of the column but the words should not:
		   stacked, the quote and the names had nothing between them and the
		   edge. On the column rather than on the quote alone, so the row of
		   people comes in with it. */
		padding-inline: 20px;
	}

	.js-click-testimonial__quote {
		font-size: 28px;
		line-height: 36px;
		text-align: center;
	}

	/* The row stays four across at every width — the tablet frame caps it at
	   430 and centres it under the quote (4 x 98.5 on a 12px gap). */
	.js-click-testimonial__avatars {
		max-width: 430px;
		margin-inline: auto;
	}

	/* Smaller faces below desktop: both frames draw the ring at 40, not the
	   desktop 60. Set on the ring rather than through --js-ct-avatar-size,
	   which the Avatar Size control pins at (0,3,0) from the page stylesheet
	   and would win. */
	.js-click-testimonial__avatar-ring {
		width: 40px;
		height: 40px;
	}

	.js-click-testimonial__avatar-name {
		font-size: 12px;
		line-height: 16px;
		/* overflow-wrap, not word-break: break-word — word-break lets a word
		   break anywhere, which drags min-content (used on the phone below)
		   down to one character and stacks the name letter by letter. This one
		   only breaks a word that has nowhere else to go, and leaves the
		   intrinsic width alone. */
		overflow-wrap: break-word;
	}
}

@media (max-width: 767px) {
	.js-click-testimonial__quote {
		font-size: 24px;
		line-height: 32px;
	}

	.js-click-testimonial {
		--js-ct-hero-height: 360px;
	}

	/* Phone only: first name over last. min-content sizes the box to the widest
	   word, which turns the space into a break — measured from the name itself,
	   so it cannot be off the way a fixed width cap was. */
	.js-click-testimonial__avatar-name {
		width: min-content;
		max-width: 100%;
	}

	/* Full width again on a phone: the mobile frame keeps all four in one row
	   across the 343 column (76.75 each on the same 12px gap), so the 2x2 wrap
	   this used to do was never in the design. */
	.js-click-testimonial__avatars {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-click-testimonial__quote,
	.js-click-testimonial__hero-img,
	.js-click-testimonial__avatar-ring,
	.js-click-testimonial__avatar-name {
		transition: none;
	}
}