/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
	padding-block: var(--space-section);
	background-color: var(--surface-100);
}

.testimonials__title {
	max-width: 20ch;
	color: var(--brand-blue);
}

/* Phones: stacked. Tablets: featured card full width, then two by two.
   Desktop: featured card two columns wide beside one card, then three cards,
   so five cards fill a 3 x 2 grid and each row sizes to its own content. */
.testimonials__grid {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-7);
	padding: 0;
	list-style: none;
}

.testimonials__grid > li {
	display: flex;
}

/* White card, blue bar across the top. */
.testimonials__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
	padding: var(--space-6);
	background-color: var(--surface);
	border: 1px solid var(--border-subtle);
	border-top: 4px solid var(--brand-blue);
	border-radius: var(--radius-md);
}

.testimonials__quote {
	flex: 1;
}

/* Large opening quote mark. Decorative, so hidden from screen readers. */
.testimonials__quote::before {
	content: "\201C";
	content: "\201C" / "";
	display: block;
	height: 0.6em;
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	line-height: 1;
	color: var(--brand-blue);
}

.testimonials__person {
	display: grid;
	gap: var(--space-1);
	line-height: var(--leading-snug);
}

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

.testimonials__role {
	font-size: var(--text-sm);
	color: var(--ink-muted);
}

/* Featured: the first testimonial. Brand blue, larger quote, yellow quote mark
   (a graphic, so yellow on blue is fine here). */
.testimonials__grid > li:first-child .testimonials__card {
	color: var(--on-blue);
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

.testimonials__grid > li:first-child .testimonials__quote {
	font-size: var(--text-lg);
}

.testimonials__grid > li:first-child .testimonials__quote::before {
	color: var(--accent-yellow);
}

.testimonials__grid > li:first-child .testimonials__role {
	color: var(--on-blue);
}

@media (min-width: 48em) {
	.testimonials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.testimonials__grid > li:first-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64em) {
	.testimonials__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
		margin-top: var(--space-8);
	}

	.testimonials__grid > li:first-child {
		grid-column: span 2;
	}

	.testimonials__grid > li:first-child .testimonials__card {
		padding: var(--space-7);
	}

	/* Wide card, so a larger quote fills it without leaving space under the text. */
	.testimonials__grid > li:first-child .testimonials__quote {
		font-size: var(--text-xl);
		line-height: var(--leading-snug);
	}
}