/*
 * Story: an editorial passage that weighs the same on both sides.
 *   top      columns 1–5: eyebrow and heading; columns 7–12: the text at
 *            reading width (its opening paragraph a little larger), then
 *            any second passage
 *   facts    beneath, across the full width: an even row of columns, each
 *            under a fine neutral rule, a small label over a serif value
 *            (the language of the criteria grid)
 * Phones: heading, text, then the facts in two columns.
 */
@layer blocks {
	.story__layout {
		display: grid;
		gap: var(--space-8);
	}

	.story__aside {
		display: grid;
		align-content: start;
		gap: var(--space-3);
	}

	.story__title {
		max-width: 14em;
		text-wrap: balance;
	}

	.story__main {
		display: grid;
		align-content: start;
		gap: var(--space-6);
	}

	.story__body,
	.story__more {
		max-width: 38rem;
		color: var(--muted-foreground);
	}

	.story__body > p:first-child {
		font-size: var(--type-lead-size);
		line-height: var(--type-lead-line);
		color: var(--foreground);
	}

	.story__details {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8) var(--grid-gap);
		margin: var(--space-4) 0 0;
	}

	.story__detail {
		display: grid;
		align-content: start;
		gap: var(--space-2);
		padding-top: var(--space-5);
		box-shadow: inset 0 1px var(--border);
	}

	.story__detail-value {
		margin: 0;
		font-family: var(--font-heading);
		font-size: var(--type-editorial-title);
		line-height: var(--type-editorial-line);
		font-variant-numeric: lining-nums;
		color: var(--heading);
	}

	/* Tablets: three facts share one row instead of leaving one alone. */
	@media (min-width: 40rem) {
		.story__details:has(> :nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.story__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			row-gap: var(--space-16);
		}

		.story__aside {
			grid-column: 1 / 6;
		}

		/* Level with the heading, below the eyebrow. */
		.story__main {
			grid-column: 7 / -1;
			padding-top: var(--space-7);
		}

		.story__details {
			grid-column: 1 / -1;
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: minmax(0, 1fr);
			margin: 0;
		}
	}
}