/*
 * "Our Valued Partners" — centered heading + a single row of 4 partner
 * logos separated by thin vertical dividers.
 * Figma ref: node 1752:4343 "Frame 2147227102" (1045x136, centered content
 * within the .tp2026-container--narrow / 1112px container).
 */

.valued-partners {
	text-align: center;
}

/* Figma 1752:4344 — Medium 24px/34px #131313, centred; 24px gap down to the
   logo row (heading ends y=34, row starts y=58). */
.valued-partners__heading {
	font: var(--tp-subhead);
	color: var(--tp-black);
	text-transform: capitalize;
	margin: 0 0 24px;
}

/* Figma 1752:4345 — horizontal auto-layout, itemSpacing 24, centred, 1045
   wide. The dividers are zero-width LINE nodes that also sit in the layout,
   so tile-to-tile spacing is 24 + 0 + 24 = 48px with the hairline centred in
   that gap. Tiles are FIXED width (not stretched), so the row's 911px of
   content is centred inside the 1045px frame. */
.valued-partners__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px;
	max-width: 1045px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Fixed tile width per partner (Figma "Logo" frame), mark centred inside.
   Figma tile heights are 78–80; radius 12 carries over even though the tile
   fill is hidden. */
.valued-partners__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--tp-partner-tile, auto);
	min-height: 80px;
	border-radius: 12px;
}

/* Thin vertical divider between logos — only meaningful in a single row.
   Figma 1752:4348 / 4361 / 4364 — 54px long, 1px, black at 10% stroke
   opacity, centred in the 48px gap. */
.valued-partners__item + .valued-partners__item::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 54px;
	background: rgba(0, 0, 0, 0.1);
}

/* Each mark renders at its exact Figma size (set via the width/height
   attributes) — they are deliberately not normalised to one height, since
   Figma sizes them individually: 204x52, 92x68, 153x64, 165x36. */
.valued-partners__logo {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	/* Figma renders the partner marks in full colour at rest, and the motion
	   manifest lists no prototype interaction anywhere in this section — so
	   the logos have no hover state at all. */
}

/* The duplicated logo row exists only to feed the mobile marquee loop (see
   the max-width:425px block below); everywhere else it's dead weight. */
.valued-partners__row[aria-hidden='true'] {
	display: none;
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile */

/* The Figma row needs ~911px of content plus container padding, so below
   ~1024 the fixed tiles have to be allowed to shrink to stay on one line. */
@media (max-width: 1023px) {
	.valued-partners__row {
		gap: 32px;
	}

	.valued-partners__item {
		flex: 0 1 var(--tp-partner-tile, auto);
		min-width: 0;
	}

	.valued-partners__item + .valued-partners__item::before {
		left: -16px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2308:2706 on the 360 frame:

     heading   95,7275  170x26   18/26 Medium #131313
     row 1     39,7325  282x39.19   AgilePoint 125.68 | Microsoft 102.7
     row 2  73.92,7379  212.16x46   GE 95.95 | RAD 62.16

   Two rows of two, each centred on its own width rather than on a grid, with
   a 0.973px hairline centred in the 54.06px between the pair — the same
   divider-inside-the-gap construction the desktop row uses, halved.

   Two things do not carry over from desktop: each mark is sized individually
   (the four scale factors run 0.616 to 0.676, so no single ratio fits them),
   and the order is 1+4 / 3+2 rather than a straight wrap — both ride in from
   the template as custom properties.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The logo block bottoms out at y7425 and "Our Global Offices" is at
	   y7489; that section supplies 40 of the 64px gap. */
	.valued-partners {
		padding-bottom: 24px;
	}

	.valued-partners__heading {
		font: 500 18px/26px var(--tp-font-heading);
		margin-bottom: 24px;
	}

	.valued-partners__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 14.86px 54.06px;
		max-width: none;
	}

	/* 39.19 is the hairline's own length, and in Figma it is what sets the
	   first row's height — both marks in it are shorter than the rule. */
	.valued-partners__item {
		order: var(--tp-partner-mobile-order, 0);
		flex: 0 0 auto;
		min-height: 39.19px;
	}

	.valued-partners__logo {
		width: var(--tp-partner-mobile-w);
		height: auto;
	}

	/* Every second mark takes the hairline, which is exactly the pair-internal
	   divider — `.item + .item` would also draw one at the start of row 2. */
	.valued-partners__item::before {
		display: none;
	}

	.valued-partners__item:nth-child(even)::before {
		content: '';
		display: block;
		left: -27.03px;
		height: 39.19px;
		width: 0.973px;
		/* Figma 2308:2703 / 2308:2705 are both LINE nodes stroked black at
		   10% opacity — the same wash the desktop rule uses, not solid ink. */
		background: rgba(0, 0, 0, 0.1);
	}
}

/* The 425px marquee that used to run the four marks past on one line is gone:
   Figma 2308:2706 lays them out as two centred pairs at every mobile width,
   and all four fit that way from 320 up (row 1 is 282.44 wide, row 2 is
   212.17). The duplicated row stays in the markup but is inert — see
   `.valued-partners__row[aria-hidden='true']` above — and the marquee
   keyframes below are now unused by any rule. */

@media (max-width: 340px) {
	/* Row 1 is 282.44 wide and the container gives 280 at 320px. */
	.valued-partners__row {
		column-gap: 46px;
	}

	.valued-partners__item:nth-child(even)::before {
		left: -23px;
	}
}

@keyframes valued-partners-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}