/* Testimonial widget. */

.vora-quote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	height: 100%;
	margin: 0;
	quotes: none;
}

.vora-quote__mark {
	font-size: 3rem;
	font-weight: 700;
	line-height: 0.6;
	opacity: 0.28;
}

.vora-quote__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
}

.vora-quote__by {
	/* `inline-flex`, so the quote's `text-align` moves the whole attribution
	   row. A block-level flex row can only be moved with `justify-content`,
	   which meant matching on the alignment — and that selector could never
	   match, because Elementor writes alignment into a stylesheet, not an
	   inline style attribute. */
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
	/* `vertical-align` keeps an inline-flex row from sitting on the text
	   baseline and adding a descender's worth of space beneath it. */
	vertical-align: top;
}


.vora-quote__photo {
	flex: none;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 50%;
}

.vora-quote__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vora-quote__name {
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
}

.vora-quote__role {
	font-size: 0.88em;
	line-height: 1.35;
	opacity: 0.8;
}

.vora-quote__stars {
	display: inline-flex;
	gap: 2px;
	font-size: 1rem;
	line-height: 1;
}

.vora-quote__star.is-empty { opacity: 0.25; }

/* A half star is a clipped full one rather than a second glyph, so it lines up
   whatever the font's metrics are. */
.vora-quote__star.is-half {
	position: relative;
	opacity: 0.25;
}

.vora-quote__star.is-half::before {
	content: "★";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	opacity: 4;
}