/**
 * JMeks Marquee Cards styles.
 *
 * The belt holds N identical sets of cards and slides left by exactly one set
 * before repeating, so the loop is seamless. N is decided in PHP and written
 * to --jmeks-marquee-cards-shift as -(100 / N)%: two sets are enough for the
 * loop itself, but the sets trailing behind the first are what keep white
 * space off the right of a wide screen at the end of a cycle.
 *
 * Duration comes from the panel, as an animation-duration on the belt.
 * Spacing uses margin-inline-end on the card rather than a gap on the set: a
 * gap would not apply between the last card of one set and the first of the
 * next, so the loop would jump by one gap every cycle.
 */

.jmeks-marquee-cards {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.jmeks-marquee-cards__belt {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: jmeks-marquee-cards 30s linear infinite;
}

.jmeks-marquee-cards__set {
	display: flex;
	flex-shrink: 0;
}

.jmeks-marquee-cards__card {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 280px;
	margin-inline-end: 60px;
	white-space: normal;
}

/*
 * The three text lines are paragraphs, so the browser's own margins have to go:
 * left in place they would put space back around the rule that the panel cannot
 * see, and the rule owns that space deliberately.
 *
 * Colours follow the kit. The two muted ones are the primary at half strength,
 * which is not a global colour and so cannot be a control default — the mix is
 * here instead, and an empty colour control means "whatever this says".
 */
.jmeks-marquee-cards__title,
.jmeks-marquee-cards__subtitle,
.jmeks-marquee-cards__description {
	margin: 0;
}

.jmeks-marquee-cards__title {
	color: var( --e-global-color-primary, #05001c );
	font-size: 26px;
	font-weight: 400;
}

.jmeks-marquee-cards__divider {
	width: 100%;
	height: 1px;
	/*
	 * Both halves at once. Stated here as well as in the control so the widget
	 * is right before Elementor has generated any CSS for it — a control's
	 * value only reaches the page once it is in the saved document.
	 */
	margin-block: 10px;
	background-color: var( --e-global-color-primary, #05001c );
}

/*
 * The subtitle and its note read as one line, so they share a row and sit on a
 * common baseline. Wrapping is allowed: a long subtitle on a narrow card should
 * push the note down rather than overflow the card.
 */
.jmeks-marquee-cards__subtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	/* The one gap that is not the rule's: subtitle line to description. */
	margin-bottom: 8px;
	color: var( --e-global-color-primary, #05001c );
	font-size: 16px;
	font-weight: 500;
}

.jmeks-marquee-cards__note,
.jmeks-marquee-cards__description {
	color: color-mix( in srgb, var( --e-global-color-primary, #05001c ) 50%, transparent );
	font-size: 16px;
}

.jmeks-marquee-cards__note {
	font-weight: 400;
}


@media ( max-width: 767px ) {
	.jmeks-marquee-cards__title {
		font-size: 16px;
	}

	.jmeks-marquee-cards__subtitle,
	.jmeks-marquee-cards__note,
	.jmeks-marquee-cards__description {
		font-size: 12px;
	}
}

@keyframes jmeks-marquee-cards {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--jmeks-marquee-cards-shift, -50%));
	}
}

/* Pausing on hover is opt-in from the panel; focus-within always pauses so a
   keyboard user can reach anything interactive inside a card. */
.jmeks-marquee-cards--pause:hover > .jmeks-marquee-cards__belt,
.jmeks-marquee-cards:focus-within > .jmeks-marquee-cards__belt {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-marquee-cards__belt {
		animation: none;
	}

	.jmeks-marquee-cards {
		overflow-x: auto;
	}
}