/* ─────────────────────────────────────────────────────────────
   GTD Desco — partner logos.

   WHAT WAS WRONG

   A slick carousel of six-at-a-time, stepping one at a time on an
   8-second cubic ease with `autoplaySpeed: 0` — so it never rested
   and it lurched rather than travelled. That was the last thing on
   the site still using slick.

   Every logo was `width: 200px; height: auto`, which is the one
   dimension a mixed logo set must not be normalised on: a wide
   wordmark and a square mark at the same width sit at completely
   different optical weights. The vertical mess that followed was
   patched with eleven per-logo rules — `.american_well_logo
   { padding-top: 28px }`, `.brightcore_logo { padding-top: 5px }`
   and so on down the list.

   WHAT THIS DOES

   Every logo gets the same BOX and is contained inside it. A wide
   mark is capped by the box width, a tall one by its height, and
   both come out at the same optical weight — which is what makes
   the eleven padding rules unnecessary rather than merely replaced.
   A new partner needs no rule of its own.

   The travel is one linear translation of a track rendered twice,
   moved by exactly half its width forever, so there is no seam and
   no JavaScript. Because every item box is a fixed size, the track
   is a known width and the duration below is a real speed —
   roughly 70px a second, which is a reading pace rather than a
   scroll.
   ───────────────────────────────────────────────────────────── */

.gtd-partners {
	--pl-w:    clamp(9rem, 12vw, 12.5rem);     /* 144 → 200 */
	--pl-h:    clamp(3.25rem, 4.6vw, 4.75rem); /*  52 →  76 */
	--pl-gap:  clamp(2.25rem, 4.5vw, 5rem);    /*  36 →  80 */
	--pl-time: 68s;
	--pl-ease: cubic-bezier(.16, 1, .3, 1);

	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ── the viewport ─────────────────────────────────────────────
   Full-bleed, while the heading above it stays in the container.
   A marquee that stops at a margin has an edge, and an edge is the
   thing a marquee exists not to have.
   ───────────────────────────────────────────────────────────── */

.gtd-partners__viewport {
	/* Escape the container without knowing its width. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);

	/* Not overflow:hidden — that would let a focused link inside scroll the
	   row and leave it stuck off-centre. */
	overflow: clip;

	padding-block: clamp(1.75rem, 3vw, 2.75rem);

	/* The ends dissolve instead of cutting. Without this a logo is sliced in
	   half at both edges of every screen, which is the tell of a marquee that
	   was not designed. */
	-webkit-mask-image: linear-gradient(90deg,
		transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg,
		transparent 0, #000 7%, #000 93%, transparent 100%);
}

.gtd-partners__rail {
	display: flex;
	width: max-content;
	animation: gtdPartnersRoll var(--pl-time) linear infinite;
	will-change: transform;
}

/*
 * Exactly -50%: the rail holds the list twice, so half of it is one full pass.
 * Any other figure leaves a jump at the loop.
 */
@keyframes gtdPartnersRoll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Stops for a look, and stops for a keyboard — a link that slides away while
   you are tabbing to it is not reachable. */
.gtd-partners__viewport:hover .gtd-partners__rail,
.gtd-partners__viewport:focus-within .gtd-partners__rail {
	animation-play-state: paused;
}

/* ── the row ──────────────────────────────────────────────── */

.gtd-partners__track {
	display: flex;
	align-items: center;
	gap: var(--pl-gap);
	margin: 0;
	padding: 0 0 0 var(--pl-gap);   /* the leading gap, so the seam matches */
	list-style: none;
	flex: 0 0 auto;
}

.gtd-partners__item {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

/* ── the box ──────────────────────────────────────────────────
   One box, every logo. This is the whole fix.
   ───────────────────────────────────────────────────────────── */

.gtd-partners__link {
	/*
	 * Flex, not grid. On a grid the implicit row is sized to its content, so
	 * `max-height: 100%` on the image resolved against the image's own
	 * intrinsic height instead of the 76px box — twelve of the seventeen
	 * logos overflowed their box by up to 2.8x. A flex container with a
	 * definite height gives its items a definite percentage to resolve
	 * against, which is the whole reason to use it here.
	 */
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * One fixed box for every logo — the whole fix. A wide wordmark is capped
	 * by the width, a tall mark by the height, and both come out at the same
	 * optical weight, which is what makes the theme's eleven per-logo
	 * padding rules unnecessary rather than merely replaced.
	 *
	 * A narrow mark carries a little air inside its own box. Letting the box
	 * hug its artwork instead was tried and is not worth it: the image has to
	 * be constrained by the box while the box is sized by the image, and the
	 * browser resolves that circle from the artwork's intrinsic width — which
	 * is thousands of pixels on every one of these files.
	 */
	width: var(--pl-w);
	height: var(--pl-h);
	text-decoration: none;
}


.gtd-partners__logo {
	/* Capped in both directions and intrinsic within that: a wide wordmark
	   meets the width first, a tall mark meets the height first, and neither
	   is ever distorted. `height: auto` also agrees with the theme's global
	   `img { height: auto }` rather than fighting it. */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;

	/*
	 * Seventeen logos in seventeen palettes, on a white page, next to a red
	 * brand — at full strength the row reads as noise rather than as a list of
	 * partners. This is a deliberate hold-back rather than a full greyscale
	 * wall: enough desaturation to let them sit as one set, not so much that
	 * a partner loses its colour entirely, and full strength the moment one is
	 * pointed at.
	 */
	filter: grayscale(.85);
	opacity: .62;
	transition:
		filter .45s var(--pl-ease),
		opacity .45s var(--pl-ease),
		transform .45s var(--pl-ease);
}

.gtd-partners__link:hover .gtd-partners__logo,
.gtd-partners__link:focus-visible .gtd-partners__logo {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.06);
}

.gtd-partners__link:focus-visible {
	outline: 2px solid var(--gtd-red, #c60000);
	outline-offset: 8px;
}

/* No address on file: it is a mark, not a link, so it does not respond to a
   pointer as though it were one. */
.gtd-partners__link--static { cursor: default; }

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 800px) {
	.gtd-partners {
		/* The boxes are smaller here, so the track is shorter — the duration
		   comes down with it or the row crawls. */
		--pl-time: 44s;
	}

	.gtd-partners__viewport {
		-webkit-mask-image: linear-gradient(90deg,
			transparent 0, #000 10%, #000 90%, transparent 100%);
		mask-image: linear-gradient(90deg,
			transparent 0, #000 10%, #000 90%, transparent 100%);
	}

	/* Nothing hovers on a phone, so the logos are never going to reach full
	   strength there. They start closer to it. */
	.gtd-partners__logo { filter: grayscale(.6); opacity: .78; }
}

/* ── reduced motion ───────────────────────────────────────────
   The row stops and becomes something you can push instead. The
   logos are links; taking the motion away must not take the
   content with it.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.gtd-partners__rail {
		animation: none;
		width: auto;
	}

	.gtd-partners__viewport {
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* The duplicate pass is decoration once nothing is moving. */
	.gtd-partners__track[aria-hidden="true"] { display: none; }

	.gtd-partners__logo { transition: none; }
}