/* =========================================================================
   HNZ Constructions — Our Client logo wall

   Owns the reusable client-logo wall.

   Measured off Home.png (1442px = 1440px artboard), section between the
   divider at y2916 and the divider at y3046+130:

     row 1  y3139..3204, 5 logos, x 82..214 / 307..519 / 610..784 / 877..1103
            / 1196..1391 (widths 133 / 213 / 175 / 227 / 196), gaps 93/91/93/93
     row 2  y3260..3386, 4 logos, x 277..396 / 489..628 / 720..842 / 938..1162
            (widths 120 / 140 / 123 / 225), gaps 93/92/96
     row gap 3260 - 3204 = 56px

   The logos are different widths but the gap between them is uniform on
   both rows (~92-93px) — that is a centred flex row with a fixed gap, not
   an equal-column grid (repeat(5, 1fr) would force every cell to the widest
   logo's column and the gaps would vary with each logo's width instead).
   ========================================================================= */

.clients {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 56px 92px;
}

.clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Logo sizing: the export's logos are NOT a uniform height — row 1's
 * tallest (the "Old Beijing" mark) is 66px, row 2 has wordmarks alongside a
 * circular mark measuring 120x127. Reproducing each logo's native size
 * would match the export exactly, but this row is fed by an ACF gallery a
 * client can upload to directly — one oversized or undersized file would
 * blow out the row height or throw off the vertical rhythm. Capping with
 * max-height + object-fit: contain trades a small departure from the export
 * (row 2's circular mark shrinks from 127px to the cap below) for a row
 * that survives arbitrary client uploads. The cap is set just above row 1's
 * measured ceiling (66px) so every row-1 logo, and both of row 2's
 * wordmarks, render at or near native size — only the two circular marks in
 * row 2 are visibly smaller than the export.
 */
.clients__logo {
	display: block;
	max-height: 68px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity var(--transition), filter var(--transition);
}

.clients__item:hover .clients__logo {
	filter: none;
	opacity: 1;
}

/* The supplied nine-logo set has a deliberately taller second row: its
   circular seals and stacked wordmarks reach roughly 127px while the first
   row stays below 68px. Preserve that hierarchy for the design set without
   removing the safety cap for future uploads. */
.clients__item:nth-child(n + 6) .clients__logo {
	max-height: 127px;
}

/* Below 1300px, tighten the logo wall so more marks fit per row. */
@media (max-width: 1299px) {
	.clients {
		gap: var(--sp-6) var(--sp-5);
	}

	.clients__logo {
		max-height: 48px;
	}

	.clients__item:nth-child(n + 6) .clients__logo {
		max-height: 64px;
	}
}

/* The supplied nine-logo wall has measured, intentionally uneven widths.
   Height-only caps make several wide source files overflow into a third row;
   cap this known design set so it resolves to the supplied 5 + 4 layout. */
@media (min-width: 1300px) {
	.section--clients .section__heading--framed {
		margin-bottom: 92px;
	}

	.section--clients .container {
		padding-bottom: 42px;
	}

	.clients__item:nth-child(1) .clients__logo { max-width: 133px; }
	.clients__item:nth-child(2) .clients__logo { max-width: 213px; }
	.clients__item:nth-child(3) .clients__logo { max-width: 175px; }
	.clients__item:nth-child(4) .clients__logo { max-width: 227px; }
	.clients__item:nth-child(5) .clients__logo { max-width: 196px; }
	.clients__item:nth-child(6) .clients__logo { max-width: 120px; }
	.clients__item:nth-child(7) .clients__logo { max-width: 140px; }
	.clients__item:nth-child(8) .clients__logo { max-width: 123px; }
	.clients__item:nth-child(9) .clients__logo { max-width: 225px; }
}

/*
 * Row 1 in the export centres 17px right of the container's true centre
 * (spans x 82..1391, centre 736.5 vs the container's 719.5); row 2 sits
 * dead centre (spans 277..1162, centre 719.5). Five different vendors'
 * logo files each carry their own internal padding, and an asymmetric mix
 * of those on one row is enough to shift its visual centre without any
 * layout rule intending it — row 2, with a more balanced set of shapes,
 * lands exactly centred. Read as an artefact of the source artwork, not a
 * deliberate offset, so this builds one true centred flex row rather than
 * baking in a 17px nudge that would only be correct for this exact set of
 * logos.
 */