/**
 * Sam4Tech — About page styles.
 *
 * Loaded only on the About template. The stats panel and the value cards are
 * shared primitives defined in style.css; only the About arrangement is here.
 *
 * CONTENTS
 *   1. Story + stats layout
 *   2. Values row
 *   3. Responsive
 */

/* ==========================================================================
   1. Story + stats layout
   Narrative on the left, figures panel on the right.
   ========================================================================== */

.s4t-about-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(2rem, 5vw, var(--s4t-space-8));
}

.s4t-about-story__title {
	font-size: var(--s4t-text-2xl);
	margin-block-end: var(--s4t-space-4);
}

.s4t-about-story__text p {
	font-size: var(--s4t-text-sm);
	line-height: 1.8;
	max-width: 46ch;
}

.s4t-about-story__text p:last-child {
	margin-block-end: 0;
}

/* Nudges the panel down so it sits against the body copy, not the heading. */
.s4t-about-story__stats {
	padding-block-start: var(--s4t-space-6);
}

/* ==========================================================================
   2. Values row
   Four cards across, one per value.
   ========================================================================== */

.s4t-values-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s4t-space-4);
	align-items: start;
}

/* ==========================================================================
   3. Responsive
   ========================================================================== */

@media (max-width: 1000px) {
	.s4t-values-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.s4t-about-story {
		grid-template-columns: minmax(0, 1fr);
	}

	.s4t-about-story__text p {
		max-width: none;
	}

	.s4t-about-story__stats {
		padding-block-start: 0;
	}
}

@media (max-width: 560px) {
	.s4t-values-row {
		grid-template-columns: minmax(0, 1fr);
	}
}