/**
 * Logo Garden
 *
 * A full-bleed row of partner logos riding the shared marquee (style.css → Marquee,
 * script.js → MARQUEE), or the same tiles sitting still in a six-across grid. The tile is the
 * global `.logo-tile`, which Supporters also uses, so none of its geometry is restated here —
 * this file is the row around it.
 *
 * `.tiles` carries a max-width because the tile is a fixed size: without a cap a seventh joins
 * the row past ~1660px, and the cap has to be widened alongside any change to `.logo-tile`.
 */

.module.logo-garden > .eyebrow,
.module.logo-garden > .xxlarge-text {
	padding: 0 var(--container-outer-padding);
	text-align: center;
}

.module.logo-garden .marquee {
	--marquee-gap: var(--text-spacing-xsmall);
	margin-top: var(--text-spacing-xxlarge);
}

.module.logo-garden .tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
	justify-content: center;
	list-style: none;
	margin: var(--text-spacing-xxlarge) auto 0;
	max-width: calc(6 * 186px + 5 * var(--text-spacing-xsmall) + 2 * var(--container-outer-padding));
	padding: 0 var(--container-outer-padding);
}

.module.logo-garden > .xxlarge-text + .marquee,
.module.logo-garden > .xxlarge-text + .tiles {
	margin-top: var(--text-spacing-xlarge);
}

.module.logo-garden .pause {
	display: none;
	opacity: 0;
	position: absolute;
	right: var(--text-spacing-small);
	top: var(--text-spacing-small);
	transition: opacity var(--motion) var(--ease-out);
	z-index: 1;
}

.module.logo-garden .marquee.scrolling .pause {
	display: grid;
	place-items: center;
}

.module.logo-garden .pause:is(:hover, :focus-visible) {
	opacity: 1;
}

.module.logo-garden .pause .icon-play {
	display: none;
}

.module.logo-garden .marquee.paused .pause .icon-pause {
	display: none;
}

.module.logo-garden .marquee.paused .pause .icon-play {
	display: block;
}

.module.logo-garden .marquee.scrolling .viewport {
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.module.logo-garden .logo-tile a {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.module.logo-garden > .btn {
	display: flex;
	margin: var(--text-spacing-xxlarge) auto 0;
	width: fit-content;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.logo-garden .marquee,
	.module.logo-garden > .xxlarge-text + .marquee {
		margin-top: var(--text-spacing-xlarge);
	}

}

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

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

	.module.logo-garden .marquee,
	.module.logo-garden > .xxlarge-text + .marquee {
		margin-top: var(--text-spacing-large);
	}

}

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

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

	.module.logo-garden > .btn {
		margin-top: var(--text-spacing-large);
	}

	/* Two across the measure rather than a centred pair of fixed tiles: at 186 apiece the row left
	   as much white either side as it used the middle, and the marks inside them are what the band
	   is for. The tile's own ratio sets the height once the width is the column's. */
	.module.logo-garden .tiles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}

	.module.logo-garden .tiles .logo-tile {
		height: auto;
		width: 100%;
	}

}