/* ═══════════════════════════════════════════════════════════════
   Logo row.
   Seven marks, 80px apart, vertically centred on a 132px band.

   Static and centred while the row fits; once it would overflow, JS
   adds .is-marquee and the same two-list track used by the logo
   marquee scrolls it automatically.
   ═══════════════════════════════════════════════════════════════ */
.logo-row {
	--gd-accred-gap: 80px;
}

.logo-row__title {
	margin: 0;
	padding: 0;
}

.logo-row__viewport {
	margin-top: clamp(13px, 10.96px + 0.5232vw, 20px);
	overflow: hidden;
	width: 100%;
}

.logo-row__track {
	display: flex;
	gap: var(--gd-accred-gap);
	justify-content: center;
	width: 100%;
}

.logo-row__list {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--gd-accred-gap);
	list-style: none;
	margin: 0;
	min-height: 132px;
	padding: 0;
}

/* The duplicate only exists for the looping state */
.logo-row:not(.is-marquee) .logo-row__list[aria-hidden="true"] {
	display: none;
}

.logo-row__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	height: 132px;
	padding: 0;
}

/* Design frames run 84–107 wide by 94–132 tall.
   Capping both axes stops the two landscape marks scaling to twice the
   width of the portrait ones. `contain`, not `cover`: the design crops
   the AWD mark square, but cropping a certification logo is not
   something to ship — the full mark is shown. */
.logo-row__item img {
	/* height, not max-height: an unloaded <img> has no intrinsic size, and
	   aspect-ratio from the width/height attributes can only derive a width if
	   one axis is definite. Logos whose original is under 300px wide get no
	   medium size, so no srcset/sizes either — without this they measured 0x0
	   until load and left holes in the loop. Layout-identical once loaded. */
	height: 100%;
	max-width: 107px;
	object-fit: contain;
	width: auto;
}

/* ── Looping state ───────────────────────────────────────────── */
.logo-row.is-marquee {
	--gd-accred-gap: clamp(40px, 34.17px + 1.4948vw, 80px);
}

.logo-row.is-marquee .logo-row__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-row.is-marquee .logo-row__track {
	animation: gd-logo-row-marquee 34s linear infinite;
	justify-content: flex-start;
	width: max-content;
	will-change: transform;
}

@keyframes gd-logo-row-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - var(--gd-accred-gap) / 2));
	}
}

.logo-row.is-marquee .logo-row__viewport:hover .logo-row__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.logo-row.is-marquee .logo-row__track {
		animation: none;
	}

	.logo-row.is-marquee .logo-row__viewport {
		overflow-x: auto;
	}
}