.zerodigital-logo-strip {
	padding: clamp(var(--wp--preset--spacing--md, 1.5rem), 3vw, var(--wp--preset--spacing--xl, 3rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
	/* `clip`, not `hidden`. Both crop the bleed identically, but `hidden`
	 * makes this a scroll container — it gains a scrollable overflow region,
	 * it simply is not user-scrollable — and that has a habit of quietly
	 * changing how descendants behave. It broke the scroll-driven version of
	 * the section entrance outright (see LESSONS); the entrance no longer
	 * works that way, but `clip` remains the honest property for "crop this,
	 * do not make it scrollable" and there is no reason to go back. */
	overflow: clip;
}

/* The section is the band — its width follows the block's alignment, and any
 * background runs across it. The content column sits on one edge site-wide
 * (--zd-content-max, the header's edge) whatever that alignment is. */
.zerodigital-logo-strip__container {
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
}

/* This introduces a row of logos — it's a label, not a section heading, and at
 * 1rem in the heading face it was competing with real ones. It belongs in the
 * spec layer with the rest of the labels. */
.zerodigital-logo-strip__heading {
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
	color: var(--wp--preset--color--muted, #565b62);
}

.zerodigital-logo-strip__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--lg, 2.5rem);
}

.zerodigital-logo-strip__logos img {
	max-height: 2.5rem;
	width: auto;
	filter: grayscale(1);
	opacity: 0.7;
}

/* Marquee: one list-width of travel, with the list printed twice in render.php
 * so the seam is invisible. A CSS animation rather than a slider — Swiper locks
 * up when the slides don't fill the container, which a short logo list never
 * does. The strip scrolls continuously and is never paused: no control and no
 * hover-pause, since the logos carry no reading task. Note the duration is
 * fixed, so more logos means a longer track covered in the same time — i.e. a
 * faster crawl. Tuned against a typical 6–10 logo strip. */
.zerodigital-logo-strip--marquee .zerodigital-logo-strip__logos {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: zerodigital-logo-marquee 22s linear infinite;
}

@keyframes zerodigital-logo-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Pause the crawl on hover (mouse), on focus anywhere inside the strip
 * (keyboard reaching the pause button trips :focus-within), and while the
 * toggle holds it stopped. The first two work with no JavaScript; the toggle
 * is the persistent, keyboard-operable mechanism WCAG 2.2.2 asks for. */
.zerodigital-logo-strip--marquee:hover .zerodigital-logo-strip__logos,
.zerodigital-logo-strip--marquee:focus-within .zerodigital-logo-strip__logos,
.zerodigital-logo-strip--marquee.is-paused .zerodigital-logo-strip__logos {
	animation-play-state: paused;
}

/* The pause toggle. Out of the layout and off-screen until focused, so the
 * ticker looks exactly as before to a mouse user, then becomes a real, visible
 * control the moment a keyboard reaches it — the skip-link pattern. The section
 * is the positioning context. */
.zerodigital-logo-strip {
	position: relative;
}

.zerodigital-logo-strip__pause {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -150%);
	z-index: 2;
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--background, #fff);
	background: var(--wp--preset--color--primary, #0e4b52);
	border: 0;
	border-radius: var(--zd-chip-radius, var(--wp--custom--radius--full, 999px));
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
}

.zerodigital-logo-strip__pause:focus-visible {
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
	outline: 2px solid var(--zd-accent, var(--wp--preset--color--accent, #c4263c));
	outline-offset: 2px;
}

/* Under prefers-reduced-motion the animation is already off, so there is
 * nothing to pause — remove the control rather than offer a no-op. */
@media (prefers-reduced-motion: reduce) {
	.zerodigital-logo-strip__pause {
		display: none;
	}
}

/* The one thing that still stops it — an OS-level accessibility preference,
 * not a UI control. Without the animation the doubled list would simply
 * overflow, so fall back to the static row's wrapping. */
@media (prefers-reduced-motion: reduce) {
	.zerodigital-logo-strip--marquee .zerodigital-logo-strip__logos {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
}

/* --- default skin --- */
.zerodigital-logo-strip__heading {
	color: var(--wp--preset--color--muted, #5b6572);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* No hover state — the logos are not links, so un-graying on hover implied an
 * interactivity that isn't there. They stay uniformly monochrome. */

/* --- desktop --- */

/* On a phone the row reads as intended: two or three logos a line, each one
 * large against the screen. Wide viewports were where it fell down. The same
 * 40px cap, a fixed gap and centre alignment left a short list huddled in the
 * middle of a 1600px band with empty space either side — small, and closer to
 * each other than to anything else on the page.
 *
 * Two changes, both desktop-only so the phone layout is untouched. Each logo
 * gets a cell and is fitted inside it, rather than sizing itself and letting
 * the row follow — that is what keeps the rhythm even when a tall stacked mark
 * sits beside a long wordmark. And the cells share the row: they grow to fill
 * a capped track, so five logos spread across the strip instead of clustering,
 * while a longer list still wraps at a sensible width. */
@media (min-width: 783px) {
	.zerodigital-logo-strip__logos {
		--zd-logo-cell: 13rem;
		--zd-logo-height: clamp(3.25rem, 3.5vw, 4rem);
	}

	.zerodigital-logo-strip__logos li {
		display: flex;
		align-items: center;
		justify-content: center;
		height: var(--zd-logo-height);
	}

	/* The image is given the cell as a box and fitted inside it, rather than
	 * sizing itself and letting the cell follow. That is what keeps the row
	 * even, and it also means the file needs no intrinsic dimensions of its
	 * own: an SVG logo carrying only a viewBox has none, and inside the
	 * marquee's width: max-content track it collapses to zero without a length
	 * to work from. Hence the width here is a length, not a percentage. */
	.zerodigital-logo-strip__logos img {
		width: var(--zd-logo-cell);
		height: var(--zd-logo-height);
		max-height: var(--zd-logo-height);
		object-fit: contain;
	}

	/* The growing cells are for the static row only: the marquee is translated
	 * by exactly half of its own content width, so capping that width would put
	 * the seam in the wrong place. */
	.zerodigital-logo-strip--static .zerodigital-logo-strip__logos {
		max-width: 74rem;
		margin-inline: auto;
	}

	.zerodigital-logo-strip--static .zerodigital-logo-strip__logos li {
		flex: 1 1 10rem;
		max-width: var(--zd-logo-cell);
	}

	/* A full row divides the track into cells narrower than the cap, and the
	 * image has to come back down with them. Safe here, where the cell width is
	 * definite and the percentage has something to resolve against. */
	.zerodigital-logo-strip--static .zerodigital-logo-strip__logos img {
		max-width: 100%;
	}
}

/* ---- Two groups side by side ------------------------------------------- */
/* Accreditations on one side, partner brands on the other. Stacked on a phone
 * with a rule between; beside each other with a vertical rule from 783px, where
 * each group's heading and logos align to its own start edge rather than the
 * strip's centre. */
.zerodigital-logo-strip__groups {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

.zerodigital-logo-strip__group + .zerodigital-logo-strip__group {
	padding-top: var(--wp--preset--spacing--lg, 2rem);
	border-top: var(--zd-border, 1px solid #e4e6e9);
}

@media (min-width: 783px) {
	.zerodigital-logo-strip__groups {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--xl, 3rem);
	}

	.zerodigital-logo-strip__group {
		flex: 0 1 auto;
	}

	.zerodigital-logo-strip__group + .zerodigital-logo-strip__group {
		flex: 1 1 auto;
		padding-top: 0;
		padding-inline-start: var(--wp--preset--spacing--xl, 3rem);
		border-top: 0;
		border-inline-start: var(--zd-border, 1px solid #e4e6e9);
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__heading {
		text-align: start;
	}

	/* The growing-cell row is tuned for one strip spanning the section. Inside a
	 * group the logos sit at their natural cell from the start edge instead. */
	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos {
		--zd-logo-cell: 9rem;
		justify-content: flex-start;
		max-width: none;
		margin-inline: 0;
	}

	.zerodigital-logo-strip--groups .zerodigital-logo-strip__logos li {
		flex: 0 1 auto;
	}
}

/* With the crawl off, the marquee is a static row and takes the static row's
 * treatment — the seam it was protecting no longer exists. */
@media (min-width: 783px) and (prefers-reduced-motion: reduce) {
	.zerodigital-logo-strip--marquee .zerodigital-logo-strip__logos {
		max-width: 74rem;
		margin-inline: auto;
	}

	.zerodigital-logo-strip--marquee .zerodigital-logo-strip__logos li {
		flex: 1 1 10rem;
		max-width: var(--zd-logo-cell);
	}

	.zerodigital-logo-strip--marquee .zerodigital-logo-strip__logos img {
		max-width: 100%;
	}
}

/* The editor's prompt for an empty block (zerodigital_editor_placeholder()).
   Printed only in the editor preview, never on the live page. */
.zerodigital-logo-strip__empty {
	margin: 0;
	opacity: 0.7;
	font-style: italic;
}