/**
 * Hero-style rolling phrase line — shared by Hero Homepage and Trust strip (rolling layout).
 * Class names match `.cw-hero__rolling-*` so one animation + markup pattern everywhere.
 */

.cw-hero__rolling-block {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cw-text-muted, #8090a8);
	margin-bottom: 2.5rem;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	min-height: 3em;
	height: auto;
	overflow: hidden;
	/* Explicit — don't rely on inheritance from .cw-hero-homepage (survives any
	   future container style tweak or usage outside the hero widget). */
	text-align: center;
}

@media (min-width: 768px) {
	.cw-hero__rolling-block {
		font-size: 1.5rem;
	}
}

.cw-hero__rolling-intro {
	/* `display: inline` + `text-align: center` was a no-op; the block parent
	   now owns centering. Leaving intro text in normal inline flow so the
	   rolling-window can sit inline after "trusted by" on wider screens. */
}

.cw-hero__rolling-window {
	display: inline-flex;
	overflow: hidden;
	height: 1.2em;
	vertical-align: bottom;
	position: relative;
	margin-left: 0.15em;
	text-align: left;
}

.cw-hero__rolling-track {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.cw-hero__rolling-word {
	height: 1.2em;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-weight: 700;
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary, #dc2626),
		var(--cw-accent-secondary, #00b7fa)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.cw-hero__rolling-static {
	font-weight: 700;
	margin-left: 0.15em;
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary, #dc2626),
		var(--cw-accent-secondary, #00b7fa)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/*
 * Mobile: promote the rotating phrase to its own centered line.
 *
 * On narrow viewports the intro text ("…trusted by") wraps and the inline-flex
 * rolling-window lands wherever the soft-break falls — offset from true center
 * by its 0.15em left-margin. Forcing the window (and the single-phrase static
 * variant) to full-width block layout puts the phrase on a fresh line, centered
 * against the rolling-block's own max-width. The track's vertical translate
 * animation is unaffected (we don't touch overflow or track layout).
 */
@media (max-width: 767px) {
	/*
	 * !important + widget-class scoping overrides the per-instance inline
	 * CSS emitted by the widget's "Offset before rolling phrase" Elementor
	 * control (`{{WRAPPER}} .cw-hero__rolling-window { margin-left: … }`),
	 * which would otherwise push the newly-centered full-width window
	 * 0.15em off-axis (+ clip under the rolling-block's overflow: hidden).
	 * Desktop keeps the control fully live — this only neutralises it where
	 * the window is laid out as a centered block.
	 */
	.elementor-widget-cw-hero-homepage .cw-hero__rolling-window,
	.elementor-widget-cw-hero-homepage .cw-hero__rolling-static {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.elementor-widget-cw-hero-homepage .cw-hero__rolling-word {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-hero__rolling-track {
		animation: none !important;
	}
}