/**
 * Supporters
 *
 * Giving tiers in one flow: a pill label over partner logos, a column-flowed list of names,
 * or a paragraph. The logo card is the global `.logo-tile`, shared with Logo Garden — none of
 * its geometry is restated here, only the rows that hold it.
 */

.module.supporters .container {
	row-gap: 0;
}

.module.supporters .container > .heading-3 {
	grid-column: 2 / span 10;
	text-align: center;
}

.module.supporters .container > p.large {
	grid-column: 3 / span 8;
	margin: var(--text-spacing-xxsmall) 0 0;
	text-align: center;
}

.module.supporters .groups {
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-medium);
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.supporters .groups:not(:first-child) {
	margin-top: var(--module-spacing-medium);
}

.module.supporters .group {
	display: flex;
	flex-direction: column;
}

.module.supporters .group > .pill {
	align-self: flex-start;
}

.module.supporters .group.logos > .pill {
	align-self: center;
}

.module.supporters .group.logos {
	gap: var(--text-spacing-xxlarge);
}

.module.supporters .group.names {
	gap: var(--text-spacing-medium);
}

.module.supporters .group.text {
	gap: var(--text-spacing-small);
}

/** Logo rows — off the 12-col grid **/

.module.supporters .four-up,
.module.supporters .six-up {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.supporters .four-up {
	gap: var(--text-spacing-small);
}

.module.supporters .six-up {
	gap: var(--text-spacing-xsmall);
}

/** Name lists — one flat list flowed down four columns **/

.module.supporters .group.names > ul {
	column-count: 4;
	column-gap: var(--gap);
	list-style: none;
	margin: 0 0 calc(var(--text-spacing-xsmall) * -1);
	padding: 0;
}

.module.supporters .group.names li {
	break-inside: avoid;
	margin-bottom: var(--text-spacing-xsmall);
}

/** Prose group and fine print **/

.module.supporters .group.text .content {
	max-width: calc(9 * var(--one-column-width) + 8 * var(--gap));
}

.module.supporters .group.text .content > :first-child {
	margin-top: 0;
}

.module.supporters .group.text .content > :last-child {
	margin-bottom: 0;
}

.module.supporters .legal {
	color: var(--text-gray);
	grid-column: 1 / span 9;
	margin: var(--text-spacing-xsmall) 0 0;
}

/** Background: photo — the band the module's opening instance sits on **/

.module.supporters.bg-photo {
	--focus-ring: var(--white);
	color: var(--white);
	padding: var(--module-spacing-large) 0;
	position: relative;
	--heading-color: currentColor;
}

.module.supporters.bg-photo .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
}

.module.supporters.bg-photo .media::after {
	background: var(--overlay-darker);
	content: '';
	inset: 0;
	position: absolute;
}

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

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

	.module.supporters .container > .heading-3 {
		grid-column: 1 / -1;
	}

	.module.supporters .container > p.large {
		grid-column: 1 / -1;
	}

	.module.supporters .group.names > ul {
		column-count: 2;
	}

	.module.supporters .group.text .content {
		max-width: none;
	}

	.module.supporters .legal {
		grid-column: 1 / -1;
	}

}

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

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

	.module.supporters .group.names > ul {
		column-count: 1;
	}

	.module.supporters .group.logos {
		gap: var(--text-spacing-large);
	}

	.module.supporters .group.names {
		gap: var(--text-spacing-small);
	}

	/* One to a row at this width, so the mark can take the room a row of four gave four of them —
	   a quarter more than the tile's own rung. */
	.module.supporters .four-up > .logo-tile.large {
		height: 158px;
	}

	/* Two across the measure rather than a centred pair: the row left as much white either side as
	   it used between them. The tile's ratio sets the height once the width is the column's. */
	.module.supporters .six-up > .logo-tile {
		flex: 1 1 calc(50% - (var(--text-spacing-xsmall) / 2));
		height: auto;
	}

}