/* Testimonial: layout from panel variables over the theme's .testimonial-* look. */
.reland-testimonial {
	--rt-side: 1; /* 1: photo beside the bubble, 0: photo above it */
	--rt-width: 75.5%;
	--rt-gap: 30px;
	--rt-avatar: 80px;
	--rt-avatar-gap: 22px;
	--rt-arrow: 16px;
	--rt-line: var(--tg-secondary-color);
	--rt-line-w: 1.3px;
	--rt-bg: var(--tg-body-background-color);
	--rt-icon: 20px;
	--rt-icon-color: var(--tg-primary-color);
	--rt-icon-offset: 3px;
	--rt-turn: -45deg;
	display: flex;
	flex-direction: column;
	gap: var(--rt-gap);
}
[dir="rtl"] .reland-testimonial {
	--rt-turn: 45deg;
}
.e-con .elementor-widget-tg-testimonial {
	width: 100%;
}

/* Item: wraps, so a full-width bubble drops below the photo (photo above) */
.reland-testimonial .testimonial-item {
	display: flex;
	flex-flow: row wrap;
	align-items: var(--rt-valign, center);
	width: var(--rt-width);
	max-width: 100%;
	margin: 0;
	text-align: start;
}
.reland-testimonial .testimonial-item.is-reverse {
	flex-direction: row-reverse;
	margin-inline-start: auto;
}

/* Photo */
.reland-testimonial .testimonial-thumb {
	width: var(--rt-avatar);
	flex: 0 0 var(--rt-avatar);
	margin: 0 0 calc(var(--rt-avatar-gap) * (1 - var(--rt-side)));
	margin-inline-end: calc(var(--rt-avatar-gap) * var(--rt-side));
}
.reland-testimonial .is-reverse .testimonial-thumb {
	margin-inline-end: 0;
	margin-inline-start: calc(var(--rt-avatar-gap) * var(--rt-side));
}
.reland-testimonial .testimonial-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	/* Theme .size-thumbnail adds 20px below */
	margin: 0;
	border-radius: 50%;
}
.reland-testimonial .testimonial-thumb .icon {
	inset-block: auto var(--rt-icon-offset);
	inset-inline: auto var(--rt-icon-offset);
	color: var(--rt-icon-color);
}
/* RTL: quote mark mirrored */
[dir="rtl"] .reland-testimonial .testimonial-thumb .icon :is(i, svg) {
	transform: scaleX(-1);
}
.reland-testimonial .testimonial-thumb .icon i {
	color: inherit;
	font-size: var(--rt-icon);
}
.reland-testimonial .testimonial-thumb .icon svg {
	display: block;
	width: var(--rt-icon);
	height: var(--rt-icon);
	fill: currentColor;
}

/* Bubble: room for the arrow on the photo side */
.reland-testimonial .testimonial-content {
	flex: 1 1 calc((1 - var(--rt-side)) * 100%);
	min-width: 0;
	margin: calc(var(--rt-arrow) * .75 * (1 - var(--rt-side))) 0 0;
	margin-inline-start: calc(var(--rt-arrow) * .75 * var(--rt-side));
	border: var(--rt-line-w) solid var(--rt-line);
	background-color: var(--rt-bg);
}
.reland-testimonial .is-reverse .testimonial-content {
	margin-inline-start: 0;
	margin-inline-end: calc(var(--rt-arrow) * .75 * var(--rt-side));
}
.reland-testimonial .testimonial-content p {
	margin-bottom: 25px;
}

/* Arrow: a square with two borders. Beside: middle of the photo side. Above: under the photo, pointing up. */
.reland-testimonial .testimonial-content::before {
	inset: auto;
	top: calc(var(--rt-arrow-y, 50%) * var(--rt-side) + (var(--rt-arrow) / -2 - 1px) * (1 - var(--rt-side)));
	inset-inline-start: calc((var(--rt-arrow) / -2 - 1px) * var(--rt-side) + (var(--rt-avatar) / 2 - var(--rt-arrow) / 2 - var(--rt-line-w)) * (1 - var(--rt-side)));
	width: var(--rt-arrow);
	height: var(--rt-arrow);
	transform: translateY(calc(-50% * var(--rt-side))) rotate(calc(var(--rt-turn) * (2 * var(--rt-side) - 1)));
	background: var(--rt-bg);
	border: 0;
	border-top: var(--rt-line-w) solid var(--rt-line);
	border-inline-start: var(--rt-line-w) solid var(--rt-line);
}
.reland-testimonial .is-reverse .testimonial-content::before {
	inset-inline-start: auto;
	inset-inline-end: calc((var(--rt-arrow) / -2 - 1px) * var(--rt-side) + (var(--rt-avatar) / 2 - var(--rt-arrow) / 2 - var(--rt-line-w)) * (1 - var(--rt-side)));
	transform: translateY(calc(-50% * var(--rt-side))) rotate(calc(var(--rt-turn) * (3 - 2 * var(--rt-side))));
	border: 0;
	border-bottom: var(--rt-line-w) solid var(--rt-line);
	border-inline-end: var(--rt-line-w) solid var(--rt-line);
}

/* Arrow off, or no photo to point at */
.elementor-widget-tg-testimonial:not(.reland-testimonial-arrow-yes) .reland-testimonial,
.reland-testimonial .testimonial-item.no-photo {
	--rt-arrow: 0px;
}
.elementor-widget-tg-testimonial:not(.reland-testimonial-arrow-yes) .testimonial-content::before,
.reland-testimonial .no-photo .testimonial-content::before {
	display: none;
}

@media (max-width: 767px) {
	.reland-testimonial .testimonial-content p {
		margin-bottom: 20px;
		/* No lone word on the last line */
		text-wrap: pretty;
	}
}