/**
 * CCI Text Testimonials
 *
 * Text-only testimonial cards in the shared carousel engine (a "--text" variant
 * of cci-video-testimonials): a plain bordered card with a circular photo, name
 * and star at the top and the review text below. Reuses the track, peeks, arrows
 * and swipe from cci-video-testimonials.css; this file styles the text card.
 */

/* Make every card fill the slide so all cards share the tallest's height. */
.cci-video-testimonials--text .cci-video-testimonials__slide {
	display: flex;
	flex-direction: column;
}

/*
 * The text card width is always calculated from Slides Per View (there's no
 * Card Width control): the active cards fill the container — each slot an equal
 * share of the row minus the gaps — capped at a max width. Neighbour peeks are
 * shown beyond the container by the fade-edges rule below, not by shrinking the
 * active cards.
 */
.cci-video-testimonials--text {
	--cci-vt-slot: min(
		calc(
			(100% - (var(--cci-vt-gap) * (var(--cci-vt-per-view) - 1))) /
				var(--cci-vt-per-view)
		),
		400px
	);
}

/* Tablet/mobile: same fill, smaller max width. */
@media (max-width: 1024px) {
	.cci-video-testimonials.cci-video-testimonials--text {
		--cci-vt-slot: min(
			calc(
				(100% - (var(--cci-vt-gap) * (var(--cci-vt-per-view) - 1))) /
					var(--cci-vt-per-view)
			),
			320px
		);
	}
}

/*
 * When every slide fits (count <= per-view) size the cards by the actual count
 * instead of per-view, so the few cards fill the full width rather than sitting
 * at the narrower per-view width. Applies on every breakpoint; placed after the
 * tablet/mobile rule so it wins there too. --cci-vt-fit-count is set by the JS.
 */
.cci-video-testimonials--text.cci-video-testimonials--fits {
	--cci-vt-slot: calc(
		(100% - (var(--cci-vt-gap) * (var(--cci-vt-fit-count) - 1))) /
			var(--cci-vt-fit-count)
	);
}

/*
 * Fade Edge Slides on: the active cards keep the container width, and the faded
 * neighbour slides bleed past the container toward the screen edges. The
 * viewport drops its overflow clip so the peeks can show; the page/section is
 * expected to clip horizontal overflow at the screen edge. With fade off the
 * viewport keeps the default overflow:hidden, so only the active cards show.
 */
.cci-video-testimonials--text.cci-video-testimonials--fade-edges .cci-video-testimonials__viewport {
	overflow: visible;
}

/* Replace the video card's gold-gradient frame with a plain bordered card. */
.cci-video-testimonials--text .cci-video-testimonials__card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	height: auto;
	text-align: left;
	border-width: 0.5px;
	border-style: solid;
	border-color: #23345a;
	background: #010f22;
}

/* No media gradient overlay — there's no video here. */
.cci-video-testimonials--text .cci-video-testimonials__card::after {
	display: none;
}

/* Header: photo, name, star. */
.cci-video-testimonials__text-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* !important on the dimensions + object-fit beats a theme's `.elementor img`
   (0,1,1) reset, which would otherwise collapse this fixed circular avatar. */
.cci-video-testimonials__text-photo {
	flex: 0 0 auto;
	width: 44px !important;
	height: 44px !important;
	display: block;
	border-radius: 50%;
	object-fit: cover !important;
}

.cci-video-testimonials__text-photo--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-weight: 600;
}

.cci-video-testimonials__text-name {
	flex: 1 1 auto;
	min-width: 0;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.cci-video-testimonials__text-star {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: auto;
	color: #00b67a;
}

/* Body: the review text. */
.cci-video-testimonials__text-body {
	color: #d3d3d3;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.cci-video-testimonials__text-body p {
	margin: 0 0 1em;
}

.cci-video-testimonials__text-body p:last-child {
	margin-bottom: 0;
}

/* Bold text within the review reads white against the lighter body colour. */
.cci-video-testimonials__text-body strong,
.cci-video-testimonials__text-body b {
	color: #ffffff;
}