.acronym-grid {
	/* Shared, because the CTA cell lays its own ground and so cannot take the
	   card padding from the light variant with the rest of them. */

	--sk-acronym-inset: 1.125rem clamp(1.125rem, 1.5vw, 1.375rem) 1.5rem;
}

.acronym-grid__header {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	align-items: end;

	@media (min-width: 62rem) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

.acronym-grid__heading {
	margin: 0;
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
	line-height: 1;
	letter-spacing: 0.04em;
}

.acronym-grid__intro {
	margin: 0;
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.acronym-grid__list {
	display: grid;

	/* Tight, as in the comp: the cards are meant to read as one panel ruled
		   into cells rather than as eight separate objects. */

	gap: clamp(0.75rem, 1.1vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;

	@media (min-width: 48rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 62rem) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.acronym-grid__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 100%;
}

.acronym-grid__letter {
	color: var(--sk-accent);
	font-family: var(--sk-font-display);

	/* Held to roughly 2.7x the title, the ratio in the comp. Larger and the
		   letter stops labelling the card and starts being its subject. */

	font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.85;
}

/*
	 * Sentence case, against the global uppercase on headings. These run to four
	 * words, and set in caps at this size "Extreme Bias for Action" reads as an
	 * abbreviation before it reads as a phrase.
	 */

.acronym-grid__title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

.acronym-grid__copy p {
	margin: 0;
	color: var(--sk-gray-copy);
	font-size: 0.875rem;
	line-height: 1.55;
}

/*
	 * Settles to the bottom of the cell rather than spreading to fill it. The
	 * lettered cards put their weight low too, so a heading floated to the top of
	 * this one would be the only thing in the row not sitting on the same line.
	 */

.acronym-grid__item--cta {
	justify-content: flex-end;
	gap: 0.625rem;
	padding: var(--sk-acronym-inset);
	background: var(--sk-accent);
	color: var(--sk-white);

	.button--arrow {
		/* Otherwise it stretches as a flex child and its underline runs the
			   full width of the cell, reading as a divider rather than a link. */

		align-self: flex-start;
		border-bottom-color: var(--sk-support);
		color: var(--sk-white);

		&:hover {
			color: var(--sk-white);
		}
	}
}

/* Set as a remark rather than a heading: it is an aside to the seven cards
	   beside it, and at display size it competed with the acronym itself. */

.acronym-grid__cta-heading {
	margin: 0;
	font-family: var(--sk-font-display);
	font-size: 0.9375rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

/*
	 * The cards belong to this variant alone. On the dark ground the letters and
	 * copy stand on the black directly, and dropping white panels behind them
	 * would undo the white-on-black colouring set further down.
	 */

.acronym-grid--light {
	/* Same diagonal artwork as the testimonial band and the pillar cards. The
		   flat colour underneath shows while it loads. */

	background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;

	.acronym-grid__item {
		border-top: 5px solid var(--sk-accent);
		padding: var(--sk-acronym-inset);
	}

	/*
		 * All but the CTA, which lays its own. Its rule is then the colour of its
		 * own ground and runs through it unseen, which is what keeps the tops of
		 * the row level without the cell having to be a special case anywhere.
		 */

	.acronym-grid__item:not(.acronym-grid__item--cta) {
		background: var(--sk-white);
	}
}

.acronym-grid--dark {
	background: var(--sk-black);
	color: var(--sk-white);
	overflow: hidden;

	&::after {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		width: clamp(3.5rem, 10vw, 7.5rem);
		aspect-ratio: 5 / 3;
		background: var(--sk-green);
		clip-path: polygon(100% 0, 100% 100%, 0 0);
		content: "";
		pointer-events: none;
	}

	.acronym-grid__inner {
		position: relative;
		z-index: 1;
	}

	.acronym-grid__heading {
		color: var(--sk-white);
	}

	.acronym-grid__intro {
		color: var(--sk-support);
		font-style: italic;
	}

	.eyebrow {
		color: color-mix(in srgb, var(--sk-white) 85%, transparent);

		&::before {
			background: var(--sk-support);
		}
	}

	.acronym-grid__letter {
		color: var(--sk-support);
	}

	.acronym-grid__title {
		color: var(--sk-white);
	}

	.acronym-grid__copy p {
		color: color-mix(in srgb, var(--sk-white) 78%, transparent);
	}

	.acronym-grid__list {
		@media (min-width: 48rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@media (min-width: 62rem) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}