/* testimonial-block.css — Testimonial block component
 *
 * HTML: .testimonial-block > .container >
 *   .testimonial-block__heading (h2, optional)
 *   .testimonial-block__grid >
 *     blockquote.testimonial-block__item >
 *       p.testimonial-block__quote
 *       footer.testimonial-block__attribution > cite
 *
 * Used on: homepage, community single, about page.
 */

/* ─── Section wrapper ───────────────────────────────────── */

.testimonial-block {
	background-color: var(--cream);
	padding: var(--space-xl) 0;
}

/* ─── Heading ───────────────────────────────────────────── */

.testimonial-block__heading {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2.5rem;
}

/* ─── Grid ──────────────────────────────────────────────── */

.testimonial-block__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ─── Testimonial item ──────────────────────────────────── */

.testimonial-block__item {
	background-color: var(--white);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border-left: 3px solid var(--gold);
}

/* ─── Quote text ────────────────────────────────────────── */

.testimonial-block__quote {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.75;
	flex-grow: 1;
}

/* Opening quotation mark */
.testimonial-block__quote::before {
	content: '\201C'; /* " */
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--gold);
	display: block;
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* ─── Attribution ───────────────────────────────────────── */

.testimonial-block__attribution {
	border-top: 1px solid var(--cream-dark);
	padding-top: 0.875rem;
}

.testimonial-block__attribution cite {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-style: normal;
}

/* ─── Responsive ────────────────────────────────────────── */

@media ( max-width: 1024px ) {

	.testimonial-block__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 640px ) {

	.testimonial-block {
		padding: var(--space-lg) 0;
	}

	.testimonial-block__grid {
		grid-template-columns: 1fr;
	}

	.testimonial-block__item {
		padding: 1.5rem;
	}
}