/**
 * Logo Garden — a centered label over a row of client logos, or a compact left-aligned row
 * rendered inside another module.
 *
 * Each logo's size is its img width attribute (the editor's Width field), so a CSS width on
 * the img overrides every logo at once; the global img max-width shrinks it to a narrow cell.
 */

/*** Module: Logo Garden ***/

.module.logo-garden .eyebrow {
	text-align: center;
}

.module.logo-garden .eyebrow + .logos {
	margin-top: var(--text-spacing-xlarge);
}

.module.logo-garden .logos {
	align-items: center;
	column-gap: var(--module-spacing-small);
	justify-content: center;
	row-gap: var(--gap);
}

.module.logo-garden .logos:has(> li:nth-child(5)):not(:has(> li:nth-child(7))) {
	column-gap: var(--text-spacing-small);
	justify-content: space-between;
}

.module.logo-garden .logos > li {
	min-width: 0;
	text-align: center;
}

.module.logo-garden .logos a {
	display: inline-block;
}

.module.logo-garden .logos img {
	opacity: .75;
}

.module.logo-garden .logos a:hover img,
.module.logo-garden .logos a:focus-visible img {
	opacity: 1;
}

/** Variant: Compact **/

.logo-garden.compact .eyebrow {
	margin: 0;
}

.logo-garden.compact .eyebrow + .logos {
	margin-top: var(--text-spacing-small);
}

.logo-garden.compact .logos {
	align-items: center;
	gap: var(--text-spacing-small) var(--gap);
	justify-content: flex-start;
}

.logo-garden.compact .logos a {
	display: block;
}

.logo-garden.compact .logos img {
	display: block;
	opacity: .75;
}

.logo-garden.compact .logos a:hover img,
.logo-garden.compact .logos a:focus-visible img {
	opacity: 1;
}

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

@media only screen and (max-width: calc(1200rem / 16)) {
	.module.logo-garden .logos,
	.module.logo-garden .logos:has(> li:nth-child(5)):not(:has(> li:nth-child(7))) {
		column-gap: var(--gap);
		justify-content: center;
	}

	.module.logo-garden .logos > li {
		flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
	}
}

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

@media only screen and (max-width: calc(650rem / 16)) {
	.module.logo-garden .logos > li {
		flex-basis: calc((100% - var(--gap)) / 2);
	}

	.module.logo-garden .logos img {
		max-height: calc(32rem / 16);
		width: auto;
	}
}