/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

/* ---------------------------------------------------------------------------
 * Block: framework/logo-slider — shared styles (front-end + editor canvas).
 *
 * A wall of logos on one or more rows, each scrolling continuously in
 * alternating directions. Each row is duplicated in render.php / index.js so
 * the CSS keyframe (translateX 0 → -50%) loops seamlessly. The edges fade via
 * a mask, and every row pauses when the whole slider is hovered.
 *
 * The SAME stylesheet loads in the editor canvas (editorStyle), so the block
 * previews the exact front-end animation while editing.
 * ------------------------------------------------------------------------- */

.fw-ls {
	--fw-ls-h: 56px;
	padding: var(--fw-ls-padding, 0);
}

.fw-ls__viewport {
	overflow: hidden;
}

.fw-ls__row {
	display: flex;
	width: max-content;
	align-items: center;
	animation: fw-ls-scroll var( --fw-ls-dur, 90s ) linear infinite;
}

.fw-ls__row + .fw-ls__row {
	margin-top: var(--fw-ls-row-margin-top, 0);
}

.fw-ls__row--rev {
	animation-direction: reverse;
}

.fw-ls:hover .fw-ls__row {
	animation-play-state: paused;
}

.fw-ls__set {
	display: flex;
	align-items: center;
	gap: var(--fw-ls-set-gap, 0);
	padding-right: var(--fw-ls-set-padding-right, 0);
	flex: 0 0 auto;
}

.fw-ls img {
	/* Cap the height (and width), but never upscale: small logos keep their
	   original size instead of being stretched up to the row height. */
	max-height: var( --fw-ls-h );
	max-width: var(--fw-ls-max-width, 0);
	width: auto;
	height: auto;
	flex: 0 0 auto;
	display: block;
}

@keyframes fw-ls-scroll {
	from {
	transform: translateX( 0 );
}
	to {
	transform: translateX( -50% );
}
}

@media ( max-width: 768px ) {
	.fw-ls {
	--fw-ls-h: 42px;
}
	.fw-ls__set {
	gap: var(--fw-ls-set-gap, 0);
	padding-right: var(--fw-ls-set-padding-right, 0);
}
	.fw-ls__row + .fw-ls__row {
	margin-top: var(--fw-ls-row-margin-top, 0);
}
}

/* Respect reduced-motion: hold the first frame instead of scrolling. */
@media ( prefers-reduced-motion: reduce ) {
	.fw-ls__row {
	animation: none;
}
}