/**
 * Customer testimonials.
 *
 * The section was three bare blockquotes floating on the dark background at
 * 1200px, with a 61-character exclamatory heading stretched across the full width.
 * Three problems, fixed here and in the markup:
 *
 *  1. The heading did double duty. "Don't take our word for it! See what our
 *     customers have to say" says the same thing twice, so it now splits — the
 *     first half is the kicker, the second is the title. Same words, real
 *     hierarchy, and the title inherits the shared gold rule.
 *  2. 1200px made each quote a tall narrow ribbon of ~350 characters. Narrowed to
 *     1060px and, more importantly, the quotes now sit in padded cards so the text
 *     has a measure instead of running edge to edge.
 *  3. Attribution was one run of text. Name is now weighted, role and company
 *     recede, and the block sits at the card's foot regardless of quote length.
 */

/**
 * This section's title runs larger than the shared default.
 *
 * "Don't take our word for it!" is the hook — short, and the only exclamation on
 * the page — so it earns more size than a descriptive heading like "Advanced
 * Drilling Rigs for Every Terrain". At 27 characters it still sits on one line
 * inside the 1060px section, which is why 30ch is safe here.
 */
.pd-testimonials h2.pd-section-title {
	max-width: 30ch;
	font-size: clamp( 2rem, 3.8vw, 3rem );
}

.pd-testimonials__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );

	/* Cards stretch to the tallest in the row so their feet line up. */
	align-items: stretch;
}

.pd-testimonials__grid > .pd-testimonial {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;

	/* Column so the attribution can be pushed to the bottom on short quotes. */
	display: flex;
	flex-direction: column;

	padding: 1.75rem;
	border-radius: 12px;

	/* A lifted panel rather than a flat colour: on a dark field a translucent
	   white reads as depth, and it survives a palette change to --dark. */
	background-color: rgba( 255, 255, 255, 0.055 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
}

.pd-testimonial__stars {
	margin: 0 0 0.85rem;

	/* Loosen the glyphs — ★★★★★ set solid reads as one dark blob. */
	letter-spacing: 0.22em;
	font-size: 1.05rem;
	line-height: 1;
}

/**
 * Quote body. Fills the remaining card height so the <cite> inside it lands at the
 * foot of the card even when one quote is much shorter than its neighbours.
 */
.pd-testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;

	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.pd-testimonial__quote p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	opacity: 0.9;
}

.pd-testimonial__quote cite {
	/* Push to the card's foot. */
	margin-top: auto;
	padding-top: 1.25rem;

	display: block;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.7;
}

.pd-testimonial__quote cite strong {
	display: block;
	margin-bottom: 0.15rem;
	font-weight: 700;

	/* Full-strength name against the recessed role and company. */
	opacity: 1;
	color: var( --wp--preset--color--base );
}