/*
 * trust-strip.css — S2, the slim certification band under the hero.
 *
 * A single quiet rule of proof: no heading, just the real third-party marks
 * drifting right to left between dot separators, hairlines top and bottom.
 * The marks keep their own colours — they are certificates, and a greyed-out
 * certificate reads as a dead one. They are sized optically and kept small:
 * this is a footnote of credibility, not a section.
 *
 * The motion is ambient, not an animation anyone has to wait for: it is slow,
 * it pauses when a visitor hovers or tabs in so a certificate can actually be
 * read, and it stops entirely under reduced motion (where the strip falls back
 * to a centred wrapping row).
 */

.trust-strip {
	/* One value drives both the gap between a mark and its dot AND the gap
	   between that dot and the next mark, so the dots sit optically centred. */
	--trust-gap: clamp(var(--s-6), 3vw, var(--s-12));

	/*
	 * A tint of its own, on the client's instruction (27.7): sharing the page
	 * background with the statement below made the two read as one flat
	 * expanse. This is the one step warmer already in the palette, not a new
	 * colour — enough to separate the rail from the section without turning it
	 * into the coloured slab an earlier pass (rightly) rejected.
	 */
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(var(--s-4), 1.6vw, var(--s-6));
}

/* Stationary label, travelling marks. */
.trust-strip__inner {
	display: flex;
	align-items: center;
	gap: var(--trust-gap);
}

.trust-strip__label {
	flex: none;
	margin: 0;
	padding-left: var(--container-pad);
	max-width: none;
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Below this the label would eat the width the marks need. */
@media (max-width: 767px) {
	.trust-strip__label {
		display: none;
	}
}

/*
 * Full-bleed and clipped: the strip has to run off both edges or the loop
 * reads as a row sliding inside a box. The mask dissolves the marks into the
 * band at each edge instead of chopping them at a hard line.
 */
.trust-strip__marquee {
	flex: 1 1 auto;
	min-width: 0; /* a flex item must be allowed to shrink or it forces overflow */
	overflow: hidden;
	/* Short fade where the marks emerge past the label, long fade at the far
	   edge where they leave. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}

.trust-strip__track {
	display: flex;
	width: max-content;
	/* Only transform is animated, so this stays on the compositor.
	   The speed depends on the track's width, so the time follows the number
	   of marks and passes: trust-strip.php sets --trust-duration (90s for
	   today's five marks printed twelve times, ~64 px/sec as held since
	   August). Switching the AAA badge on in the launch config keeps the pace. */
	animation: trustMarquee var(--trust-duration, 90s) linear infinite;
}

/* Half the track = six of the twelve sets. Landing there shows an identical
   picture, which is what makes the loop seamless. */
@keyframes trustMarquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* Let people stop it and read a certificate. focus-within covers the keyboard. */
.trust-strip__marquee:hover .trust-strip__track,
.trust-strip__marquee:focus-within .trust-strip__track {
	animation-play-state: paused;
}

.trust-strip__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--trust-gap);
	/* Matches the gap so the last dot sits the same distance from the first
	   mark of the next set as every other dot does from its neighbour. */
	padding: 0 var(--trust-gap) 0 0;
	margin: 0;
	max-width: none;
	list-style: none;
}

/*
 * Each mark carries its own trailing dot. In a loop that produces a dot
 * between every pair forever, with no separator markup to keep in sync.
 */
.trust-strip__item {
	display: flex;
	align-items: center;
	gap: var(--trust-gap);
	margin: 0;
	flex: none;
}

.trust-strip__item::after {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--muted);
	opacity: 0.4;
	flex: none;
}

/*
 * Optical sizing: wide wordmarks are shorter than square stamps so every mark
 * reads at roughly the same visual weight.
 *
 * ⚠ The wordmarks were deliberately SHRUNK once, because at their old size the
 * marks dominated the page instead of footnoting it. This raises them again on
 * the client's explicit instruction (Felix, 20.8: "you should be able to see
 * the logos quite well"), so the earlier note is not lost, it is overridden.
 * 34px -> 52px on desktop and 26px -> 40px on mobile: a real jump rather than
 * a nudge, which is what was asked for.
 *
 * Headroom checked against the real files rather than guessed. At 52px the
 * Isännöintiliitto mark (500x245) renders ~106px wide and ISA (500x183) ~142px,
 * both far inside their native widths even at 2x, so neither softens.
 */
.trust-strip__item--wide .trust-strip__logo {
	height: clamp(40px, 3.8vw, 52px);
}

/*
 * The old 'capped' class (a 300x76 Kauppalehti file held small) is gone: the
 * 2026 seal Kaisa sent on 5.10.2026 is an 800px original and sizes as 'tall'.
 */
.trust-strip__item--tall .trust-strip__logo {
	height: clamp(40px, 3.6vw, 50px);
}

.trust-strip__logo {
	width: auto;
	max-width: none; /* the global img cap would squash marks inside a max-content track */
	object-fit: contain;
}

/*
 * Reduced motion: no travel at all. The repeats are dropped and the one real
 * set becomes a centred wrapping row, capped so the marks read as one
 * confident bar rather than five items drifting across a 1240px row. The dots
 * go too — a trailing dot at the end of a static row reads as a mistake.
 */
@media (prefers-reduced-motion: reduce) {
	.trust-strip__inner {
		display: block;
	}

	.trust-strip__label {
		padding: 0 var(--container-pad);
		margin-bottom: var(--s-4);
		text-align: center;
	}

	.trust-strip__marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.trust-strip__track {
		width: auto;
		animation: none;
	}

	.trust-strip__list[aria-hidden="true"] {
		display: none;
	}

	.trust-strip__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--s-6) clamp(var(--s-6), 3vw, var(--s-8));
		margin-inline: auto;
		padding: 0 var(--container-pad);
		max-width: 1000px;
	}

	.trust-strip__item::after {
		display: none;
	}
}