/* ==========================================================================
   "Why Choose Us" home section (template-parts/home/home-why-choose-us.php)
   — a two-column grid checklist plus the intro copy, stat row and CTA that
   sit above it. The two-col layout, check-list, stat-row and floating-badge
   base styles it builds on live in pages/program-category.css.
   ========================================================================== */
.check-list--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 28px;
}

.stat-row + .btn,
.check-list--grid + .stat-row {
	margin-top: 4px;
}

/* ---- The three fact cards ----
   The plain .stat-row is a flex row sized to its contents, which suits short
   values like "12+" but leaves ragged, uneven boxes once the labels are full
   sentences ("Yoga Course in Budhanilkantha"). This variant lays them out as
   equal columns instead, so they line up whatever the wording, and gives each
   one a coloured edge to pick it out. Only the Home page uses it; the category
   and course pages keep the original row. */
.stat-row--facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	align-items: stretch;
}
.stat-row--facts .stat-pill {
	position: relative;
	overflow: hidden;
	gap: 6px;
	padding: 16px 18px 16px 22px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
/* the coloured edge, a different brand colour for each card */
.stat-row--facts .stat-pill::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--fact-accent, var(--color-primary));
}
.stat-row--facts .stat-pill:nth-child(1) { --fact-accent: var(--color-primary); }
.stat-row--facts .stat-pill:nth-child(2) { --fact-accent: var(--color-secondary); }
.stat-row--facts .stat-pill:nth-child(3) { --fact-accent: var(--accent-dusk-blue); }

.stat-row--facts .stat-pill strong {
	font-size: 1.02rem;
	line-height: 1.25;
	color: var(--color-primary-dark);
}
.stat-row--facts .stat-pill span {
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
}
.stat-row--facts .stat-pill:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(43, 38, 32, 0.12);
}

@media (max-width: 640px) {
	.stat-row--facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.stat-row--facts .stat-pill { padding: 13px 14px 13px 18px; }
	.stat-row--facts .stat-pill strong { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
	.stat-row--facts .stat-pill { transition: none; }
	.stat-row--facts .stat-pill:hover { transform: none; }
}