/*
 * Key facts (helper: sghr_theme_facts() in inc/facts.php), used by the
 * event masthead and the job listing page (sghr-jobs).
 *
 * No boxes: the hero band already groups the masthead. Wide screens
 * set the facts side by side, each as wide as its content, divided by
 * thin rules; a wrapped line starts without a rule (the container is
 * pulled out by one gutter + 1px and clips the leading rules). Phones
 * get label | value rows between hairlines.
 */

.sghr-keyfacts {
	--sghr-keyfacts-gutter: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);

	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
	margin: 0 0 0 calc(-1 * var(--sghr-keyfacts-gutter));
	padding: 0;
	overflow: hidden;
}

.sghr-keyfacts__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 26rem;
	margin-left: -1px;
	padding-inline: var(--sghr-keyfacts-gutter);
	border-left: 1px solid var(--wp--preset--color--border-strong);
}

.sghr-keyfacts__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-muted);
}

.sghr-keyfacts__value,
.sghr-keyfacts__detail {
	margin: 0;
	/* Never "Novem-ber": dates break at their dash only (non-breaking
	 * spaces in the value), long free text wraps at word ends. */
	hyphens: manual;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.sghr-keyfacts__value {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.sghr-keyfacts__detail {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	/* Phones: label | value rows between hairlines. */
	.sghr-keyfacts {
		display: block;
		margin-left: 0;
		overflow: visible;
		border-bottom: 1px solid var(--wp--preset--color--border-strong);
	}

	.sghr-keyfacts__item {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: 0.125rem;
		max-width: none;
		margin: 0;
		padding: 0.75rem 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border-strong);
	}

	.sghr-keyfacts__label {
		grid-row: 1 / span 2;
		padding-top: 0.125rem;
	}

	.sghr-keyfacts__value,
	.sghr-keyfacts__detail {
		grid-column: 2;
	}

	.sghr-keyfacts__value {
		font-size: var(--wp--preset--font-size--base);
	}
}