/**
 * Facts strip: `border-b bg-surface-cool`, the full container; `dl grid
 * gap-x-8 gap-y-6 py-8 lg:py-10 sm:grid-cols-2 lg:grid-cols-4|5`. A fact
 * is `flex gap-3`: the 40px icon tile `mt-0.5`, the label `text-sm` muted,
 * the value `mt-1 text-sm font-medium leading-snug`. In values mode the
 * value is `text-3xl lg:text-4xl font-bold` above its label, `mt-1 text-sm
 * leading-snug` (Sponsorship's audience). A value too long for its
 * column breaks inside a word rather than run out of it; an email address
 * breaks after its @ first (`<wbr>`, facts-strip.php).
 */

.sba-c-facts.sba-c-facts {
	border-bottom: 1px solid var(--sba-border);
	background-color: var(--sba-surface-cool);
	font-family: var(--sba-font-sans);
}

.sba-c-facts .sba-c-facts-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 32px;
	margin: 0;
	padding: 32px 0;
}

.sba-c-facts .sba-c-fact {
	display: flex;
	gap: 12px;
	min-width: 0;
}

.sba-c-facts .sba-c-icon-tile {
	margin-top: 2px;
}

.sba-c-facts .sba-c-fact-text {
	min-width: 0;
}

.sba-c-facts .sba-c-fact dt {
	color: var(--sba-slate);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.sba-c-facts .sba-c-fact dd {
	margin: 4px 0 0;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.375;
	overflow-wrap: break-word;
}

.sba-c-facts .sba-c-facts-values .sba-c-fact {
	flex-direction: column;
	gap: 4px;
}

.sba-c-facts .sba-c-facts-values .sba-c-fact dd {
	margin: 0;
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.sba-c-facts .sba-c-facts-values .sba-c-fact dt {
	line-height: 1.375;
}

@media (min-width: 1024px) {
	.sba-c-facts .sba-c-facts-values .sba-c-fact dd {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (min-width: 640px) {
	.sba-c-facts .sba-c-facts-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-c-facts .sba-c-facts-list {
		padding: 40px 0;
	}

	.sba-c-facts .sba-c-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sba-c-facts .sba-c-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sba-c-facts .sba-c-facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Tags: the chapter pages' focus areas as the September build drew them
   (`.sba-ch-tag-list` in chapters.css): one centered row, `py-5`, each tag
   a 16px icon in red beside a `text-sm font-medium` label. */
.sba-c-facts .sba-c-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 20px 0;
	list-style: none;
}

.sba-c-facts .sba-c-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sba-charcoal-light);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-facts .sba-c-tag .sba-i {
	color: var(--sba-red);
	font-size: 16px;
	line-height: 1;
}