/*
	Testimonial Slider block. Splide (components: carousel.css) owns the
	mechanics and the per-view sizing for the Carousel Display option; this
	file only styles a testimonial's own content — the .testimonial component
	below is shared as-is by the Grid option too (a plain .grid-2 of these, no
	Splide involved), so nothing here should assume a .splide__slide parent.
*/

/* Equal-height slides: the Splide list is a flex row, so a full-height slide
   lets short and long quotes line up. */
.flex-section--testimonial-slider .splide__slide {
	height: auto;
}

.testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	height: 100%;
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);

	/*
		No inset for the arrows any more. They used to be overlaid on the track and
		every text block had to reserve room at the sides; carousel.css now gives
		them their own grid columns beside the track, so the card can use the full
		width it is given.
	*/
	margin: 0;
}

.testimonial__quote {
	margin: 0;
	font-size: var(--font-size-4);
	line-height: var(--line-height-body);
	text-wrap: pretty;

	/* Decorative opening quote mark, out of the accessibility tree. */
	&::before {
		content: "\201C";
		margin-inline-end: 0.1em;
	}

	&::after {
		content: "\201D";
	}
}

.testimonial__cite {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-block-start: auto; /* pin attribution to the bottom of the slide */
	font-style: normal;
}

/*
	Hold the avatar's width against the attribution text beside it.

	.testimonial__cite is a flex row, so this span is a flex item and shrinks by
	default. `min-width: auto` would normally stop a flex item collapsing below
	its content, but the reset's `max-width: 100%` on images makes the <img>
	arbitrarily shrinkable, so the automatic minimum resolves to nothing and the
	span gives way to the text. The height is fixed, so the circle flattened into
	a vertical ellipse — measured at 41.2 x 56 on a 375px viewport.

	object-fit: cover means the photo itself was never distorted, only cropped;
	it's the box (and so the border-radius circle) that was squashed.
*/
.testimonial__photo {
	flex-shrink: 0;
}

.testimonial__photo img {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial__attribution {
	display: flex;
	flex-direction: column;
}

.testimonial__name {
	font-weight: var(--font-weight-bold);
}

.testimonial__role {
	font-size: var(--font-size-1);
	color: var(--color-text-muted);
}

/*
	Grid only — a long quote assigned this class (see
	ZK_TESTIMONIAL_WIDE_THRESHOLD in testimonial-slider.php) spans both
	columns instead of wrapping tall in one and throwing off the row next to
	its neighbour. No effect in Carousel: grid-column does nothing outside a
	grid container. Scoped to the 48em-up breakpoint because .grid-2 is a
	single column below it anyway, so there's nothing to span yet.
*/
@media (min-width: 48em) {
	.grid-2 > .testimonial--wide {
		grid-column: 1 / -1;
	}
}