/*
 * Client logo strip.
 *
 * Figma: 1752:4071 "Client logo_new" — 1111x199 at x=165, y=6186, sitting
 * between the testimonial carousel and Life@ThinkPalm. Two rows
 * (1655:16958 / 1655:16974) of five tiles, 8.967px row gap.
 *
 * Tile 1655:16969 — 211x95, #ffffff fill, 0.897px #e3efff stroke, radius 16.14.
 * Column gap 14.347px. Five 211px tiles + four gaps = 1112.4, which is the
 * 1112 content column, so the row is defined by the tile grid rather than by
 * stretching to fill.
 *
 * The strip sits on the same soft #f4f7ff wash as the testimonial band above
 * it (1752:3947 spans y=5578..6453), so this section paints the tail of that
 * ramp rather than a background of its own.
 *
 * MOTION — the two variants of the component set cross-fade into each other:
 * `AFTER_TIMEOUT 1.1s -> CHANGE_TO, DISSOLVE 0.4s EASE_OUT`. The 0.4s ease-out
 * dissolve is the transition below; the 1.1s hold is a timer in
 * section-client-logos.js, which also decides how many tiles make a page and
 * assigns each one its cell. Every page is placed into the *same* two rows and
 * five columns, so the pages sit on top of one another and only opacity moves.
 *
 * Without JS (or with it not yet run) the grid flows column-first and is
 * clipped to the content column, which shows Default's five columns and
 * nothing else — Figma's resting state, at the right height, with no motion.
 */

.tp2026-client-logos {
	/* Figma: carousel ends y=6134, strip starts y=6186 → 52px above; strip ends
	   y=6385, Life@ThinkPalm starts y=6533 → 148px below. */
	padding: 52px 0 148px;
	/* Tail of the 875px #f4f7ff wash that starts on .tp2026-testimonials
	   (Figma 1752:3947). Same ramp, pulled up by the testimonial band's height so
	   the two slices line up into one continuous fade with no seam. */
	background-image: linear-gradient(180deg, var(--tp-soft-blue) 0%, rgba(244, 247, 255, 0) 100%);
	background-repeat: no-repeat;
	background-size: 100% var(--tp-wash-height, 875px);
	background-position: left calc(-1 * var(--tp-testimonials-height, 576px));

	/* Figma tile box + gaps. Held as custom properties because the script reads
	   nothing from CSS but the mobile block below rescales all five together. */
	--tp-logo-cols: 5;
	--tp-logo-tile-w: 210.722px;
	--tp-logo-tile-h: 95px;
	--tp-logo-col-gap: 14.347px;
	--tp-logo-row-gap: 8.967px;
}

.tp2026-client-logos__grid {
	display: grid;
	/* Column-first so the DOM's column-major order lands as designed, and so a
	   sixth column onwards simply runs off the side instead of adding rows.
	   Once the script places tiles explicitly this only governs the track
	   sizing; the flow itself stops mattering. */
	grid-auto-flow: column;
	grid-template-rows: repeat(2, var(--tp-logo-tile-h));
	/* The Figma tile width, but never wider than an equal share of whatever
	   column we actually have. Five 210.722 tiles plus their gaps come to 1111,
	   which is the 1112 content column, so at full width this resolves to the
	   design figure — and between 769px and there it shrinks the whole row to
	   fit rather than letting the fifth tile fall off the edge. The marks are
	   sized in px, so `max-width: 100%` + `object-fit: contain` on the image is
	   what keeps them inside a narrowed tile without distorting. */
	grid-auto-columns: min(
		var(--tp-logo-tile-w),
		calc((100% - (var(--tp-logo-cols) - 1) * var(--tp-logo-col-gap)) / var(--tp-logo-cols))
	);
	column-gap: var(--tp-logo-col-gap);
	row-gap: var(--tp-logo-row-gap);
	/* Holds the strip to two rows and hides the overflow columns in the no-JS
	   case. Also stops a mid-dissolve page from painting outside the section. */
	overflow: hidden;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Figma 1655:16969 — the white card behind each mark. */
.tp2026-client-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: var(--tp-white);
	border: 0.897px solid #e3efff;
	border-radius: 16.14px;
}

/* Each mark keeps its Figma box so the optical weights stay as designed
   (RAD is a 99x74 block, Fragomen a 159x19 wordmark, and so on). */
.tp2026-client-logos__logo {
	display: block;
	width: var(--tp-logo-w);
	height: var(--tp-logo-h);
	max-width: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Paged state — added by section-client-logos.js once it has stacked every
   page into the same cells. Tiles are hidden by opacity rather than by
   display/visibility so the dissolve has something to interpolate, and the
   outgoing page keeps its box while the incoming one fades up over it.
   --------------------------------------------------------------------------- */

.tp2026-client-logos__grid.is-paged .tp2026-client-logos__item {
	opacity: 0;
	/* Figma DISSOLVE, 400ms, EASE_OUT. */
	transition: opacity 400ms ease-out;
	pointer-events: none;
}

.tp2026-client-logos__grid.is-paged .tp2026-client-logos__item.is-current {
	opacity: 1;
	pointer-events: auto;
}

/* An automatic cross-fade is exactly the kind of motion this media query
   exists to suppress. The script never enters the paged state under it, so the
   strip stays on the static Default columns; this is here so the transition
   can't fire even if the class is present. */
@media (prefers-reduced-motion: reduce) {
	.tp2026-client-logos__grid.is-paged .tp2026-client-logos__item {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.tp2026-client-logos {
		padding: 40px 0 96px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2283:4692 on the 360 frame. The same ten-logo instance is
   placed at x=20 and the frame clips it, so what the design shows is a 2x2:
   two 154.58x69.73 tiles per row, 10.524 apart, the rows 6.578 apart — i.e.
   the desktop grid at 0.73359 (154.58/210.722). Two tiles plus their gap come
   to 319.68, which is why exactly two fit the 320 column.

   Everything scales off that one factor, tile radius and stroke included, so
   the marks keep their designed optical weights rather than being re-fitted.

   The clipped 2x2 is all the mobile frame commits to, so the cross-fade simply
   runs at that size: pages of four instead of ten, five of them instead of
   two, same 1.1s/0.4s cadence. The section keeps its two-row height either way.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The bar above ends y5737 and the grid starts y5761.7; the band behind
	   both ends y5958, 50.26 under the second row. */
	.tp2026-client-logos {
		/* Both of these are declared on .tp2026-testimonials, which is a
		   sibling — nothing inherits across, so the pair is restated here or
		   the strip silently falls back to the desktop 875/576 band. */
		--tp-wash-height: 814px;
		--tp-testimonials-height: 593.73px;
		/* 24.26 rather than the 50.26 that would end the section on the band's
		   own y5958: Life@ThinkPalm's card starts at y5972 and its section
		   supplies 40 of that 64px gap, the same rhythm as everywhere else.
		   The wash simply stops 26px early, where its alpha is already ~0.03. */
		padding: 24.7px 0 24.26px;
		/* The same three stops the testimonial band uses (2283:4688) — restated
		   rather than inherited, since the two sections are siblings. Keep the
		   pair in step. */
		background-image: linear-gradient(180deg, rgba(244, 247, 255, 1) 1.483%, rgba(244, 247, 255, 0.717) 46.472%, rgba(244, 247, 255, 0) 102.832%);

		--tp-logo-cols: 2;
		--tp-logo-tile-w: 154.58px;
		--tp-logo-tile-h: 69.73px;
		--tp-logo-col-gap: 10.524px;
		--tp-logo-row-gap: 6.578px;
	}

	/* Two 154.58 tiles and their gap come to 319.68 — the 360 frame's content
	   column exactly, but well short of it at the top of this range. Centring
	   keeps the pair balanced there instead of hanging off the left edge.
	   There is no tablet frame in Figma, so 480-768 is a judgement call. */
	.tp2026-client-logos__grid {
		justify-content: center;
	}

	/* No padding: Figma places the marks absolutely inside the tile, and every
	   one of the twenty clears 154.58x69.73 once scaled, so there is nothing
	   for padding to protect. */
	.tp2026-client-logos__item {
		padding: 0;
		border-width: 0.658px;
		border-radius: 11.84px;
	}

	.tp2026-client-logos__logo {
		width: calc(var(--tp-logo-w) * 0.73359);
		height: calc(var(--tp-logo-h) * 0.73359);
	}
}