/*
 * KidzFeed Core: the Fact File.
 *
 * The country- and state-report fields, laid out so a child can copy one into
 * a box on a printed sheet. Two columns where there is room, one where there
 * is not, and a label that never separates from its value.
 *
 * The print rules are not a nicety. This block exists because children arrive
 * with a paper worksheet, so the thing has to survive being printed and
 * photocopied: no background wash, no colour anyone depends on, and no row
 * split across a page break.
 */

.kidzfeed-fact-file {
	--kff-line: #D6DCE5;
	--kff-label: #4A5568;
	--kff-ink: #1A202C;
	--kff-tint: #F7F9FC;
	margin-block: 2.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 2px solid var(--kff-line);
	border-radius: 12px;
	background: var(--kff-tint);
}

.kidzfeed-fact-file > h2 {
	margin-block: 0 1rem;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1.25;
	color: var(--kff-ink);
}

.kidzfeed-fact-file__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

@media (min-width: 46em) {
	.kidzfeed-fact-file__list {
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}
}

.kidzfeed-fact-file__row {
	display: grid;
	grid-template-columns: minmax(8.5rem, 40%) 1fr;
	gap: 0.75rem;
	align-items: baseline;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--kff-line);
	/* A label and its value are one thing. Never break them apart. */
	break-inside: avoid;
}

.kidzfeed-fact-file__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--kff-label);
}

.kidzfeed-fact-file__row dd {
	margin: 0;
	color: var(--kff-ink);
	overflow-wrap: break-word;
}

@media print {
	.kidzfeed-fact-file {
		border-color: #000;
		background: none;
		break-inside: avoid;
	}

	.kidzfeed-fact-file__list {
		grid-template-columns: 1fr;
	}

	.kidzfeed-fact-file__row {
		border-block-end-color: #000;
	}

	.kidzfeed-fact-file__row dt,
	.kidzfeed-fact-file__row dd {
		color: #000;
	}
}