/*
 * Section: Partners - Figma 2219:1717
 *
 * Frame 5 in the design: six 260x162 tiles, 22px apart, running the full
 * 1675px frame width edge to edge (6 * 260 + 5 * 22 = 1670), inside a 254px
 * section. Every measurement is expressed as its share of the 1676px frame so
 * the row keeps those proportions at any width, matching how the rest of the
 * theme scales.
 *
 * The one deliberate departure: Figma puts 50px above the row and 42px below,
 * which reads as visibly top-heavy against the hero photo above and the dark
 * customer cards below. The padding is split evenly instead — 46/46 — so the
 * section keeps its 254px height and the logos sit on the centre line.
 *
 * The row is an infinite marquee: the track holds N identical sets and shifts
 * left by exactly one set, so the loop restarts on an identical frame.
 */

.section-partners {
	--partner-tile-w: clamp(140px, 15.513vw, 260px);
	--partner-tile-h: clamp(87px, 9.666vw, 162px);
	--partner-gap: clamp(12px, 1.313vw, 22px);
	--partner-pad: clamp(14px, 1.432vw, 24px);

	/* Logos are normalised by width, inside a height cap. Height alone made
	   the row lopsided the other way — a squat, heavy mark like CBRE filled
	   the 56 and read huge, a long thin one like Tesla ran into the tile's
	   edge and read tiny. Nearly every partner mark is a wide wordmark, so a
	   common width is what makes them read as one size; the cap catches the
	   few square ones. --partner-logo-scale is per partner (the "Logo size"
	   field), for the marks whose weight still throws the eye. */
	--partner-logo-w: clamp(90px, 9.55vw, 160px);
	--partner-logo-h: clamp(30px, 3.341vw, 56px);

	/* The still row's own box — wider than the marquee's, since each logo has
	   a whole column of the page to sit in. */
	--partner-logo-box-w: clamp(110px, 11.933vw, 200px);

	background: var(--paper);
	padding-block: clamp(26px, 2.745vw, 46px);
}

/* Multifamily (4006:5083) puts the ruled label above the row: 75 over it, then
   the tiles' own 50, and nothing under — the section ends on the row's bottom
   edge. So it drops the symmetric padding HOME's bare row carries. */
.section-partners--labelled {
	padding-block: 0;
}

.section-partners__head {
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	padding: 75px 0 clamp(28px, 2.983vw, 50px); /* 50 over the row */
}

/* Full-bleed: the tiles reach both frame edges in the design, so the viewport
   carries no gutter of its own. */
.section-partners__viewport {
	overflow: hidden;
}

.section-partners__track {
	display: flex;
	width: max-content;

	/* The track paints its own ground: `will-change` below opens a stacking
	   context, and without a background here the logos' multiply blend would
	   have nothing to blend against and white logo boxes would show. */
	background: var(--paper);
	animation: partners-marquee var(--partners-duration, 40s) linear infinite;
	will-change: transform;
}

.section-partners__row {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--partner-gap);

	/* The gap between two sets has to match the gap inside one, or the seam
	   shows every time the loop restarts. */
	padding: 0 var(--partner-gap) 0 0;
	margin: 0;
	list-style: none;
}

.partner-tile {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--partner-tile-w);
	height: var(--partner-tile-h);
	padding: var(--partner-pad);
	border-radius: 6px;
}

.partner-tile__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.partner-tile__logo {
	width: calc(var(--partner-logo-w) * var(--partner-logo-scale, 1));
	max-width: 100%;
	height: var(--partner-logo-h);
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.partner-tile__name {
	color: var(--harbor);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-align: center;
}

@keyframes partners-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-100% / var(--partners-sets, 2)), 0, 0);
	}
}

/* Let a reader stop the row to read a logo, and hold it still for anyone who
   has asked for less motion. */
.section-partners__viewport:hover .section-partners__track,
.section-partners__track:focus-within {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.section-partners__track {
		animation: none;
	}
}

/* The editor preview renders inside a narrow canvas; the marquee still runs,
   it just has less room. Nothing to override. */

/* Static grid --------------------------------------------------------------
 *
 * The Partners page (2258:2566) drops the marquee for a four-across block of
 * 285x168 tiles inside the 1280 container, 30.5 apart horizontally and 30
 * vertically. Nothing moves, so the track loses its animation and its own
 * ground along with it.
 */

/* The frame's own 1280 container, not the site column: the grid is measured
   from it (48 of left padding, then four 285 tiles 30.5 apart), and --content
   walks its gutters in more slowly, which would stretch the tiles. */
.section-partners--grid .section-partners__viewport {
	width: 76.372vw; /* 1280 */
	max-width: 100%;
	margin-inline: auto;
	overflow: visible;
}

/* Too few logos to scroll: one still row across the page column.
   The marquee's tiles are a fixed 260 because a moving track has no container
   to answer to — stood still, five of them came to 1388 against a 1200 column,
   so the row hung 94 past it on either side and lined up with nothing on the
   page. Here the row is cut into equal columns instead, so the first logo
   starts on the page's left edge and the last ends on its right. */
.section-partners--static .section-partners__viewport {
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	overflow: visible;
}

/* Block, not flex: the track is a flex row for the marquee, and a grid child
   of it sizes to its content rather than to the column — which is how the row
   came out 1855 wide inside a 1200 column. */
.section-partners--static .section-partners__track {
	display: block;
	width: 100%;
	background: none;
	animation: none;
	will-change: auto;
}

.section-partners--static .section-partners__row {
	display: grid;
	grid-template-columns: repeat(var(--partners-count, 5), minmax(0, 1fr));
	align-items: center;
	width: 100%;
	padding: 0;
}

.section-partners--static .partner-tile {
	width: auto;
	padding-inline: 0;
}

/* Every logo is drawn into the same box and centred in its column, so the row
   reads as one band rather than as marks of five sizes. The box is narrower
   than the column: at full width the long wordmarks ran nearly three times the
   length of the square ones. --partner-logo-scale (the "Logo size" field)
   scales the box on both axes, which is the only handle that moves a mark held
   by the height cap as well as one held by the width. */
.section-partners--static .partner-tile__logo {
	width: calc(var(--partner-logo-box-w) * var(--partner-logo-scale, 1));
	max-width: 100%;
	height: calc(var(--partner-logo-h) * var(--partner-logo-scale, 1));
	margin-inline: auto;
}

@media (max-width: 1024px) {
	/* Five columns on a phone is 60px a logo. Let them wrap instead. */
	.section-partners--static .section-partners__row {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		row-gap: var(--partner-gap);
	}
}

/* 2258:2557 carries no fill of its own, so the grid sits on white — unlike
   the marquee, which the frames above it draw on Paper. */
.section-partners--grid {
	background: #fff;
}

.section-partners--grid .section-partners__track {
	display: block;
	width: auto;
	background: none;
	animation: none;
	will-change: auto;
}

/* 34 above the first row and 10 below the last, both inside the 1280 frame,
   with 48 of left padding and none on the right - 48 + 4x285 + 3x30.5 = 1279.5,
   which is how the frame lands the last tile half a pixel short of its own
   edge. Shares of the 1676 frame so the block scales whole. */
.section-partners--grid .section-partners__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 1.820vw; /* 30.5 */
	row-gap: 1.790vw; /* 30 */
	padding: 2.028vw 0 0.597vw 2.864vw; /* 34 / 10 / 48 */
}

.section-partners--grid .partner-tile {
	width: auto;
	height: 10.024vw; /* 168 */
	min-height: 96px;
}

/* Without the track's own ground the multiply blend has the page to work
   against, which is what the frame draws. */
.section-partners--grid .partner-tile__logo {
	mix-blend-mode: multiply;
}

.section-partners--grid.section-partners--labelled {
	padding-block: 0 50px;
}

/* Partners page head ------------------------------------------------------
 *
 * 8007:13416 nests the head inside the section rather than above it: 50 over a
 * 211 block, then 1.648 before the grid. The row inside it is the same shape as
 * the Approach head - a heading box beside a paragraph, both centred on the
 * row - but at 477 / 571 with the heading in Mars.
 */

.section-partners--headed {
	padding-block: 2.983vw 0; /* 50 */
}

.section-partners--headed .section-partners__head {
	width: 71.6vw; /* the frame's 1200, inside its 1280 container */
	padding: 0.716vw 0 2.904vw; /* 12 above; below, the container's own 32 of
	                               padding plus 15.016 of slack, which is what
	                               makes the head 211, and then the 1.648 the
	                               frame leaves before the grid */
}

.section-partners--headed .section-partners__intro {
	display: flex;
	align-items: center;
/* A floor, not a fixed height. The frame's box is still what the section is
   drawn to, so nothing moves while the copy is the length it was designed
   around - but an editor who adds a sentence gets a taller box rather than
   text sliding out from under its own section. */
	gap: 9.666vw; /* 162 */
	min-height: 9.069vw; /* 151.984 */
}

/* Both boxes are set rather than shared out: 477 + 162 + 571 is wider than the
   1200 column they sit in, and the frame lets them overhang it. */
.section-partners--headed .section-partners__heading {
	flex: 0 0 auto;
	width: 28.461vw; /* 477 */
	margin: 0;
	color: var(--mars);
	font-size: 3.461vw; /* 58 */
	font-weight: 700;
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
}

.section-partners--headed .section-partners__description {
	flex: 0 0 auto;
	width: 34.070vw; /* 571 */
	margin: 0;
	color: var(--slate);
	font-size: 1.074vw; /* 18 */
	font-weight: 600;
	line-height: 1.625; /* 29.25 */
}

@media (max-width: 1024px) {
	.section-partners--grid .section-partners__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 24px;
		padding: 0;
	}

	/* Stacked, the frame's shares stop meaning anything. */
	.section-partners--grid .section-partners__viewport {
		width: var(--content);
	}

	.section-partners--headed {
		padding-block: 56px 0;
	}

	.section-partners--headed .section-partners__head {
		width: var(--content);
		padding: 0 0 32px;
	}

	.section-partners--headed .section-partners__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		height: auto;
		min-height: 0;
	}

	.section-partners--headed .section-partners__heading,
	.section-partners--headed .section-partners__description {
		width: auto;
	}

	.section-partners--headed .section-partners__heading {
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-partners--headed .section-partners__description {
		font-size: var(--wp--preset--font-size--body);
	}
}

@media (max-width: 782px) {
	.section-partners--grid .section-partners__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* Rotating ribbon ----------------------------------------------------------
 *
 * The Partners page block at the tile size the frame draws (2258:2566), but
 * looping rather than stood still. Nine logos in a four-across grid leave a
 * row with one tile on it and a band of white beside it; moving them past
 * instead uses the same space for all nine and reads as a roster rather than
 * as a grid that ran out.
 *
 * Motion, ground and the seamless wrap are the marquee's — only the tiles are
 * the Partners page's, so the two layouts stay recognisably the same block.
 */

.section-partners--carousel {
	background: #fff;
}

.section-partners--carousel .section-partners__viewport {
	width: 76.372vw; /* 1280, as the grid */
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
}

/* White rather than the marquee's Paper: the logos blend in multiply, and this
   block sits on the frame's white. */
.section-partners--carousel .section-partners__track {
	background: #fff;
}

.section-partners--carousel .section-partners__row {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 2.028vw 0 0.597vw; /* 34 / 10, as the grid */
	column-gap: 1.820vw; /* 30.5 */
}

/* A quarter of the 1280 column less its share of the gaps, so four tiles sit
   in the viewport at a time and the fifth is the one arriving. */
.section-partners--carousel .partner-tile {
	flex: 0 0 auto;
	width: 17.005vw; /* 285 */
	height: 10.024vw; /* 168 */
	min-height: 96px;
	padding-inline: 0;
}

.section-partners--carousel .partner-tile__logo {
	mix-blend-mode: multiply;
}

/* The row keeps its gap between sets as well, or the loop shows a seam where
   the last tile of one set meets the first of the next. */
.section-partners--carousel .section-partners__row + .section-partners__row {
	padding-left: 1.820vw; /* 30.5 */
}

@media (max-width: 1024px) {
	.section-partners--carousel .section-partners__viewport {
		width: 100%;
	}

	.section-partners--carousel .partner-tile {
		width: 180px;
		height: 110px;
	}
}