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

.module.logo-garden {
	background: var(--off-white);
	color: var(--black);
	padding-block: var(--module-spacing-large);
	position: relative;
}

/* Right edge lands at column 7 (left inset + 7 cols + 6 gaps). */
.module.logo-garden::before {
	background: var(--white);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	width: calc(
		var(--container-outer-margin) + var(--container-outer-padding)
		+ (7 * var(--one-column-width)) + (6 * var(--gap))
	);
	z-index: 0;
}

/* Empty 1fr rows above/below center the claim against the taller logo block. */
.module.logo-garden .container.grid {
	grid-template-rows: 1fr auto auto 1fr;
	position: relative;
	z-index: 1;
}

.module.logo-garden .heading-4 {
	grid-column: 1 / span 6;
	grid-row: 2;
}

.module.logo-garden .btn.secondary {
	grid-column: 1 / span 6;
	grid-row: 3;
	justify-self: start;
}

/* margin-right widens the stretched block past the grid. */
.module.logo-garden .logos {
	display: grid;
	gap: 4px;
	grid-column: 7 / -1;
	grid-row: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, 132px);
	margin-right: var(--container-breakout);
}

.module.logo-garden .logo {
	align-items: center;
	background: var(--parchment);
	display: flex;
	justify-content: center;
	padding: var(--text-spacing-small);
	position: relative;
}

.module.logo-garden .logo picture {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* --logo-scale is the editor's per-logo percentage (logo-garden.php). It multiplies
   the caps rather than transform: scale() — a transform would resize the logo but
   leave its layout box the old size, throwing the tile's centring off. */
.module.logo-garden .frame {
	height: auto;
	max-height: min(100%, calc(60px * var(--logo-scale, 1)));
	max-width: min(100%, calc(160px * var(--logo-scale, 1)));
	mix-blend-mode: darken;
	object-fit: contain;
	transition: opacity .6s ease;
	width: auto;
}

/* Frames share one grid cell rather than stacking by absolute positioning, so the
   tile centres them without a transform and they stay in flow. */
.module.logo-garden .logo.stacked {
	display: grid;
	place-items: center;
}

/* Direct child, not .frame — an image plugin may wrap each frame in <picture>, which
   would then be the grid item and give every frame its own cell instead of stacking. */
.module.logo-garden .logo.stacked > * {
	grid-area: 1 / 1;
}

/* Sequential, NOT a crossfade: the outgoing logo clears out first, then the incoming
   one arrives. Fading both at once leaves them overlapping at ~50% mid-swap, and
   mix-blend-mode: darken composites that into a muddy double-exposure. Halves sum to
   the FADE_MS the JS rotator budgets for the swap (800ms). */
.module.logo-garden .logo.stacked .frame {
	max-width: min(100%, calc(140px * var(--logo-scale, 1)));
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.module.logo-garden .logo.stacked .frame.is-active {
	opacity: 1;
	transition: opacity 0.4s ease-in-out 0.4s;
}

/** Style: awards **/

.module.logo-garden.style-awards {
	padding-block: 0;
}

/* Filled parchment block needs breathing room so the header and footnote don't
   sit flush against the cuts (the base awards style runs padding-block:0). The
   ledge variant below re-zeros padding-block so it stays flush. */
.module.logo-garden.style-awards.bg-parchment {
	background: var(--parchment);
	padding-block: var(--module-spacing-medium);
}

/* Cut-off ledge — directly above another parchment section, drop the full fill
   and keep only an inset 80px bottom strip so the two read as one continuous
   parchment field with the logos floating above the cut. */
.module.logo-garden.style-awards.bg-parchment:has(+ .bg-parchment) {
	background: transparent;
	padding-block: 0;
	position: relative;
}

.module.logo-garden.style-awards.bg-parchment:has(+ .bg-parchment)::after {
	background: var(--parchment);
	bottom: 0;
	content: "";
	height: 80px;
	left: var(--text-spacing-small);
	position: absolute;
	right: var(--text-spacing-small);
	z-index: -1;
}

.module.logo-garden.style-awards::before {
	display: none;
}

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

.module.logo-garden.style-awards .eyebrow + .heading {
	margin-top: var(--text-spacing-xsmall);
}

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

.module.logo-garden.style-awards .heading {
	margin-inline: auto;
	max-width: calc(10 * var(--one-column-width) + 9 * var(--gap));
	text-align: center;
}

.module.logo-garden.style-awards .logos {
	grid-column: auto;
	grid-row: auto;
	/* --logo-cols (4/5/6) is set inline by the module to minimise orphan tiles on the last row. */
	grid-template-columns: repeat(var(--logo-cols, 6), 1fr);
	grid-template-rows: none;
	list-style: none;
	margin: var(--text-spacing-large) 0 0;
	padding: 0;
}

/* 1–3 logos (--logo-cols = the logo count): cap the columns to tile width and
   center the group so they don't stretch full-width or orphan a column. Higher
   specificity than the responsive rules, so it holds at every breakpoint. */
.module.logo-garden.style-awards .logos.centered {
	grid-template-columns: repeat(var(--logo-cols), minmax(0, 204px));
	justify-content: center;
}

/* Non-centered awards logos use flex (not grid) so a partial last row centres
   rather than left-aligning. Column count comes from the inline --logo-cols. */
.module.logo-garden.style-awards .logos:not(.centered) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.module.logo-garden.style-awards .logos:not(.centered) .logo {
	flex: 0 0 calc((100% - (var(--logo-cols) - 1) * 4px) / var(--logo-cols));
}

.module.logo-garden.style-awards .logo {
	aspect-ratio: 204 / 132;
	padding: var(--text-spacing-small);
}

.module.logo-garden.style-awards.bg-parchment .logo {
	background: var(--white);
}

.module.logo-garden.style-awards.bg-default .logo {
	background: var(--parchment);
}

/* Fewer columns → wider/taller tiles (aspect-ratio 204/132), so the logo caps
   scale with the auto column count to keep the logo-to-tile ratio steady across
   pages. cols-6 is the baseline; the .centered few-logo layout keeps it. */
.module.logo-garden.style-awards .logos {
	--logo-max-height: 60px;
	--logo-max-width: 140px;
}

.module.logo-garden.style-awards .logos.cols-5 {
	--logo-max-height: 38px;
	--logo-max-width: 168px;
}

.module.logo-garden.style-awards .logos.cols-4 {
	--logo-max-height: 48px;
	--logo-max-width: 210px;
}

/* Greyscale so varied brand colours read evenly; opacity/muting is baked into
   the exported assets. The .color-logos modifier opts back into full colour. */
.module.logo-garden.style-awards .logo img {
	filter: grayscale(1);
	height: auto;
	max-height: calc(var(--logo-max-height) * var(--logo-scale, 1));
	max-width: min(100%, calc(var(--logo-max-width) * var(--logo-scale, 1)));
	object-fit: contain;
	width: auto;
}

.module.logo-garden.style-awards.color-logos .logo img {
	filter: none;
}

.module.logo-garden.style-awards .footnote {
	margin-top: var(--text-spacing-medium);
	text-align: center;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.logo-garden.style-awards.bg-parchment:has(+ .bg-parchment)::after {
		left: 0;
		right: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1100 - Mobile Header / Nav */
/***************************************************************************************************************************************************************************************/

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

	.module.logo-garden {
		padding-block: var(--module-spacing-medium);
	}

	/* SVP opens with its own top padding — stacked, the two gaps read as one dead band.
	   Only when this garden has no band of its own (Page Default); the parchment band
	   owns its bottom padding. */
	.module.logo-garden.bg-default:has(+ .module.scrolling-value-props) {
		padding-bottom: 0;
	}

	/* Stacked: the white field caps the heading/link block instead of columning it. */
	.module.logo-garden::before {
		bottom: auto;
		height: 50%;
		width: 100%;
	}

	.module.logo-garden .container.grid {
		grid-template-rows: none;
		row-gap: 0; /* per-element spacing below sets the heading/link/logos hierarchy */
	}

	.module.logo-garden .heading-4,
	.module.logo-garden .btn.secondary,
	.module.logo-garden .logos {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Tight heading+link lockup, then a larger gap before the logos. */
	.module.logo-garden .heading-4 + .btn.secondary {
		margin-top: var(--text-spacing-small);
	}

	.module.logo-garden .heading-4 + .logos,
	.module.logo-garden .btn.secondary + .logos {
		margin-top: var(--text-spacing-xlarge);
	}

	.module.logo-garden .logos {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		margin-right: 0;
	}

	.module.logo-garden .logo {
		aspect-ratio: 204 / 132;
		padding: 0;
	}

	.module.logo-garden .frame {
		max-width: 70%;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MIN-WIDTH 951 - Above Tablet */
/***************************************************************************************************************************************************************************************/

/* bg-default runs too large at the auto count — force 6. Min-width so the
   responsive step-downs below take over on smaller screens. Because the tiles
   are pinned to 6-up here regardless of --logo-cols, the logo caps must stay on
   the 6-up baseline too — the cols-4/5 scaling only applies where the rendered
   column count actually follows --logo-cols (e.g. bg-parchment). */
@media only screen and (min-width: calc(951rem / 16)) {

	.module.logo-garden.style-awards.bg-default .logos:not(.centered) .logo {
		flex-basis: calc((100% - 5 * 4px) / 6);
	}

	.module.logo-garden.style-awards.bg-default .logos:not(.centered) {
		--logo-max-height: 32px;
		--logo-max-width: 140px;
	}

}

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

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

	.module.logo-garden.style-awards .heading {
		max-width: 100%;
	}

	.module.logo-garden.style-awards .heading + .logos {
		margin-top: var(--text-spacing-large);
	}

	.module.logo-garden.style-awards .logos.centered {
		grid-template-columns: repeat(3, 1fr);
	}

	.module.logo-garden.style-awards .logos:not(.centered) .logo {
		flex-basis: calc((100% - 2 * 4px) / 3);
	}

	/* Exactly 4 logos: the 3-up step would orphan one (3 + 1) — go 2×2 instead. */
	.module.logo-garden.style-awards .logos:not(.centered):has(.logo:nth-child(4):last-child) .logo {
		flex-basis: calc((100% - 4px) / 2);
	}

}

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

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

	.module.logo-garden .logos {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Odd count leaves the last logo alone in column 1 — span the row and center it
	   at one column's width (matches the 4px gap so it stays sibling-sized). Awards
	   centers its own orphan (flex justify-content), so scope this to the base grid. */
	.module.logo-garden:not(.style-awards) .logos .logo:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 4px) / 2);
	}

	.module.logo-garden.style-awards .logos.centered {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.logo-garden.style-awards .logos:not(.centered) .logo {
		flex-basis: calc((100% - 4px) / 2);
	}

	.module.logo-garden.style-awards .logo img {
		max-width: 100%;
	}

	.module.logo-garden.style-awards.bg-default .logo {
		padding-inline: var(--text-spacing-medium);
	}

}