/* =============================================================
   Reviews template (templates/template-reviews.php). Loaded ONLY
   there via inc/enqueue.php. The card itself is a global
   component in main.css — this sheet only lays it out.
   ============================================================= */

.dm-reviews__heading {
	text-align: center;
	margin-bottom: clamp(28px, 3.4vw, 60px);
}

.dm-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 42px); /* 42px is the testimonial gap in design-system.md §3.6 */
	/*
	 * 1fr rows, not the default auto: every row matches the tallest one, so all
	 * cards on the page share a height rather than only matching their own row.
	 * The card is already a column with space-between, which puts every author
	 * line on the same baseline.
	 */
	grid-auto-rows: 1fr;
}

/* Flex so the card fills the cell the row has sized. */
.dm-reviews__item { display: flex; }

/*
 * The card is built for the carousel, where the track sets its width and a
 * min-height keeps two slides even. In a grid the row does that job, so the
 * flex basis and the min-height are released — a row of short quotes stays
 * short instead of being padded out to the carousel's 284px.
 */
.dm-reviews__grid .dm-testimonial-card {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

/* Long quotes must not push a card wider than its column. */
.dm-reviews__grid .dm-testimonial-card__quote { overflow-wrap: break-word; }

@media (max-width: 1024px) {
	.dm-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.dm-reviews__grid { grid-template-columns: minmax(0, 1fr); }
}