/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Stats Row
   ═════════════════════════════════════════════════════════════════
   4-up grid of "big numeral + short body" cards with a 1px rule under
   each card. Markup lives in /template-parts/components/stats-row.php.
   Originally extracted from the product-opening cascade so other pages
   can reuse it with their own content.
   ───────────────────────────────────────────────────────────────── */

.po-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 20px gap so the per-card bottom borders sit 20px apart. */
	gap: 20px;
}
.po-stat {
	padding: clamp(32px, 3.5vw, 56px) 0 clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 20px);
	border-bottom: 1px solid rgba(80, 80, 79, 0.51);
	width: 272px;
}
.po-stat-val {
	font-family: var(--f-sans);
	font-size: clamp(40px, 7vw, 100px);
	font-weight: 500;
	line-height: 1;
	color: var(--accent, var(--green));
	letter-spacing: -.02em;
	white-space: nowrap;
	text-align: center;
	width: 100%;
}
.po-stat-val sup {
	font-size: .55em;
	vertical-align: super;
	line-height: 1;
	margin-left: 2px;
}
.po-stat-body {
	font-size: var(--fs-body-sm);
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.po-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-stats {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.po-stat {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		align-items: center;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		background: rgba(255, 255, 255, 0.35);
		border-bottom: none;
		position: relative;
	}
	.po-stat::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: rgba(80, 80, 79, 0.51);
	}
	.po-stat:last-child::after { display: none; }
	.po-stat-val { text-align: center; }
	.po-stat-body { text-align: center; }
}