/* =========================================================================
 * Opener 001 — Heading and Filling Lead
 *
 * Two columns (the block's own grid), weighted 1 : 1.25 here because core's
 * grid has no unequal tracks. The lead's words are split by pattern.js and
 * filled with ink by a background clipped to the text, driven by
 * --word-reveal (0–100%) per word.
 * ========================================================================= */

.opener-001 .opener-001__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	column-gap: 8%;
	align-items: start;
}

.opener-001__heading > * {
	margin: 0;
}

.opener-001__heading .section-label {
	margin-bottom: var(--space-md);
}

.opener-001__lead.opener-001__lead {
	margin: 0;
	line-height: 1.7;
	color: var(--color-text);
}

.opener-001__word {
	color: var(--color-border-alt);
	/* Ink sweeps over a light grey: the grey is the background COLOUR under the
	   ink gradient (after the shorthand, which would reset it), both clipped to
	   the letters — so an unfilled word reads grey, not invisible. */
	background: linear-gradient(var(--color-text), var(--color-text)) no-repeat;
	background-color: var(--color-border-alt);
	background-size: var(--word-reveal, 100%) 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (max-width: 40rem) {
	.opener-001 .opener-001__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-md);
	}
}