/**
 * Impact
 *
 * Shared across the three styles: the centered intro, the eyebrow color, and the row's
 * column count. Everything a style owns alone lives in impact/{style}.css.
 */

.module.impact .intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	margin: 0 auto var(--text-spacing-xxlarge);
	max-width: 990px;
	text-align: center;
}

.module.impact .eyebrow {
	color: var(--storm);
	margin: 0;
}

.module.impact .heading {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.impact .heading > * {
	margin: 0;
}

.module.impact .card.donation .content > :first-child {
	margin-top: 0;
}

.module.impact .card.donation .content > :last-child {
	margin-bottom: 0;
}

.module.impact .stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}

.module.impact .figure {
	margin: 0;
}

.module.impact .stat .description > :first-child {
	margin-top: 0;
}

.module.impact .stat .description > :last-child {
	margin-bottom: 0;
}

.module.impact.bg-linen {
	padding-block: var(--module-spacing-medium);
}

.module.impact .amounts {
	display: grid;
	gap: var(--text-spacing-xsmall);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.impact .amounts:has(> li:nth-child(5):last-child) {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.impact .amounts,
	.module.impact .amounts:has(> li:nth-child(5):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.module.impact .amounts > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		margin-inline: auto;
		max-width: calc((100% - var(--text-spacing-xsmall)) / 2);
	}

	/* Amount Over only — the other impact styles set their own intro and amounts. The statement
	   closes onto its heading, and the amounts, which wrap to two rows here where desktop keeps
	   them on one, get a clear run between the rows instead of the column gap reused as a row gap. */
	.module.impact.style-amount-over .intro {
		gap: var(--text-spacing-xsmall);
	}

	.module.impact.style-amount-over .amounts {
		row-gap: calc(var(--text-spacing-xsmall) + 24px);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.impact .intro {
		margin-bottom: var(--text-spacing-large);
	}

	.module.impact.style-amount-over .card.donation {
		gap: var(--text-spacing-xsmall);
	}

}