/* ==========================================================================
   TeamCNF client logos (the "Client logo strip" block)
   A small label, then every client logo on a light tile, scrolling sideways in
   an endless loop that pauses on hover. Logos are full colour, so the tiles stay
   light in both themes. Every value comes from the theme tokens (theme.json):
   --wp--preset--* and --wp--custom--*.
   ========================================================================== */
.tcnf-logos {
	position: relative;
	padding-left: var(--wp--style--root--padding-left, var(--wp--custom--gutter));
	padding-right: var(--wp--style--root--padding-right, var(--wp--custom--gutter));
}

.tcnf-logos__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.tcnf-logos__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.tcnf-logos .tcnf-logos__label {
	margin: 0;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* ---- Endless sideways loop ----------------------------------------------- */
/* The edges fade out; the script doubles the logos, so sliding half the track
   lands exactly where it started. */
.tcnf-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--studio-black) 10%, var(--wp--preset--color--studio-black) 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--studio-black) 10%, var(--wp--preset--color--studio-black) 90%, transparent 100%);
}

.tcnf-marquee .tcnf-marquee__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcnf-marquee.is-ready .tcnf-marquee__track {
	animation: tcnf-marquee var(--wp--custom--duration--marquee) linear infinite;
}

.tcnf-marquee:hover .tcnf-marquee__track {
	animation-play-state: paused;
}

@keyframes tcnf-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---- Logo tile ------------------------------------------------------------ */
.tcnf-logo-tile {
	--tcnf-logo-tile-bg: var(--wp--preset--color--marble);
	--tcnf-logo-tile-border: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--wp--custom--size--client-logo--width);
	height: var(--wp--custom--size--client-logo--height);
	margin: 0 var(--wp--custom--grid) 0 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 1px solid var(--tcnf-logo-tile-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--tcnf-logo-tile-bg);
}

:root[data-theme="light"] .tcnf-logo-tile {
	--tcnf-logo-tile-bg: var(--wp--preset--color--white);
	--tcnf-logo-tile-border: color-mix(in srgb, var(--wp--preset--color--charcoal) 8%, transparent);
}

/* Logos keep their own proportions inside the tile */
.tcnf-logo-tile img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Shown in the editor only, when the Client logos list is empty */
.tcnf-logos-empty {
	padding: var(--wp--preset--spacing--60);
	border: 1px dashed var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--secondary);
	text-align: center;
}