/* ws-marquee — alignment & mechanics ONLY.
 *
 * No typography, colors, borders, radii, shadows or backgrounds: style those with
 * the class fields in the widget's "CSS classes" section.
 *
 * Two kinds of rules, on purpose:
 *   1. DEFAULTS — spacing, sizes AND all alignment (justify-content, align-items,
 *      align-self, gap, padding, line-clamp…) are wrapped in :where() → specificity
 *      0, so a single class of yours (even `.ws-marquee-item-col-left { … }`)
 *      always wins, whatever the stylesheet order.
 *   2. MECHANICS use `.ws-marquee.ws-marquee .x` (3 classes — above Elementor's global
 *      classes, which come out as `.elementor .x`) and CANNOT be overridden by them:
 *      display, flex-direction, overflow, box-sizing, grid placement, order,
 *      transitions/hover motion, and the button's `justify-content: end`.
 *      They are what keeps the loop, the clipping and the hover effect working.
 *
 * Tune layout with these custom properties — either in the widget's "Layout" section
 * (empty = the default below; Elementor writes the value into the page CSS, responsive),
 * or on the "Widget (root)" class / any ancestor with your own media queries:
 *   --ws-marquee-item-w / -item-h   fixed card size, identical for every card
 *   --ws-marquee-gap                space between cards
 *   --ws-marquee-left-w             left column share of the card (25%)
 *   --ws-marquee-col-gap            space between the two columns
 *   --ws-marquee-padding            card inner padding
 *   --ws-marquee-row-gap            space between stacked pieces inside a column
 *   --ws-marquee-button-gap         text ↔ button
 *   --ws-marquee-label-gap          button label ↔ arrow
 *   --ws-marquee-image-h            image / SVG height
 *   --ws-marquee-fade               edge fade width — currently has no effect (the fade rule is commented out)
 *   --ws-marquee-duration / -easing hover motion
 * Below 768px cards stack vertically (image, highlight + description, text, link).
 */

:where(.ws-marquee) {
	--ws-marquee-item-w: 560px;
	--ws-marquee-item-h: 160px;
	--ws-marquee-gap: 24px;
	--ws-marquee-left-w: 25%;
	--ws-marquee-col-gap: 24px;
	--ws-marquee-padding: 24px;
	--ws-marquee-row-gap: 8px;
	--ws-marquee-button-gap: 16px;
	--ws-marquee-label-gap: 8px;
	--ws-marquee-image-h: 32px;
	--ws-marquee-fade: 160px;
	--ws-marquee-duration: .5s;
	--ws-marquee-easing: cubic-bezier(.33, 1, .68, 1);
}

.ws-marquee {
	position: relative;
	overflow: hidden;
}

/* ---- viewport / track ------------------------------------------------ */

.ws-marquee.ws-marquee .ws-marquee-viewport { overflow: hidden; }

/* Edge fade — DISABLED (commented out). The content itself turned transparent at both
   edges, so it worked on any background. It sat on the viewport (the track moves) and
   applied only while running. To bring it back, uncomment the rule below; the
   --ws-marquee-fade variable and the "Edge fade width" Layout control drive it.
.ws-marquee.is-running .ws-marquee-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ws-marquee-fade), #000 calc(100% - var(--ws-marquee-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--ws-marquee-fade), #000 calc(100% - var(--ws-marquee-fade)), transparent 100%);
}
*/

/* Not auto-scrolling (no JS, reduced motion, or speed 0) → plain scrollable row. */
@media (scripting: none), (prefers-reduced-motion: reduce) {
	.ws-marquee.ws-marquee .ws-marquee-viewport { overflow-x: auto; }
}
.ws-marquee.is-static .ws-marquee-viewport { overflow-x: auto; }

.ws-marquee.ws-marquee .ws-marquee-track {
	display: flex;
	flex-direction: row;
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 0;
}
:where(.ws-marquee-track) {
	gap: var(--ws-marquee-gap);
	align-items: stretch;
}

.ws-marquee.ws-marquee .ws-marquee-item {
	display: flex;
	margin: 0;
	padding: 0;
}
:where(.ws-marquee-item) {
	flex: 0 0 var(--ws-marquee-item-w);
	width: var(--ws-marquee-item-w);
}

/* ---- card ------------------------------------------------------------ */

.ws-marquee.ws-marquee .ws-marquee-item-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;   /* fixed height: anything taller is clipped, never grows the card */
}
:where(.ws-marquee-item-wrapper) {
	height: var(--ws-marquee-item-h);
	padding: var(--ws-marquee-padding);
}

.ws-marquee.ws-marquee .ws-marquee-item-col-left {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* Slides out via negative margin (keeps its width, so its text never re-wraps)
	   while fading — see the hover block. */
	transition:
		margin-left var(--ws-marquee-duration) var(--ws-marquee-easing),
		opacity calc(var(--ws-marquee-duration) * .7) var(--ws-marquee-easing);
}
:where(.ws-marquee-item-col-left) {
	justify-content: center;
	overflow-wrap: anywhere;   /* a long word wraps instead of spilling into the right column */
	width: var(--ws-marquee-left-w);
	padding-right: var(--ws-marquee-col-gap);
	/* gap: var(--ws-marquee-row-gap); */
	margin-left: 0;
}

.ws-marquee.ws-marquee .ws-marquee-item-col-right {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: row;
}
:where(.ws-marquee-item-col-right) {
	align-items: center;
	gap: var(--ws-marquee-button-gap);
}

/* Collapsed and expanded content share one grid cell (crossfade in place). */
.ws-marquee.ws-marquee .ws-marquee-content {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 100%;
	display: grid;
	overflow: hidden;
}
:where(.ws-marquee-content) {
	align-self: stretch;
	align-items: center;   /* vertical position of image + text inside the card; `start` pins rows to the top */
}
.ws-marquee.ws-marquee .ws-marquee-content > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.ws-marquee.ws-marquee .ws-marquee-content-collapsed {
	display: flex;
	flex-direction: column;
	/* outgoing text leaves first, incoming follows with a short lag */
	transition:
		opacity calc(var(--ws-marquee-duration) * .5) var(--ws-marquee-easing) calc(var(--ws-marquee-duration) * .25),
		transform var(--ws-marquee-duration) var(--ws-marquee-easing);
}
:where(.ws-marquee-content-collapsed) { gap: var(--ws-marquee-row-gap); }

.ws-marquee.ws-marquee .ws-marquee-highlight { display: block; }

/* Margins are reset with the mechanics (themes add p margins). */
.ws-marquee.ws-marquee .ws-marquee-description,
.ws-marquee.ws-marquee .ws-marquee-text,
.ws-marquee.ws-marquee .ws-marquee-text-expanded { margin: 0; }

.ws-marquee.ws-marquee .ws-marquee-image { display: block; line-height: 0; }
:where(.ws-marquee-image) { height: var(--ws-marquee-image-h); }
.ws-marquee.ws-marquee .ws-marquee-image img,
.ws-marquee.ws-marquee .ws-marquee-image svg {   /* beats `img { height: auto }` of themes / Elementor */
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.ws-marquee.ws-marquee .ws-marquee-text,
.ws-marquee.ws-marquee .ws-marquee-text-expanded {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
:where(.ws-marquee-text) { -webkit-line-clamp: 2; line-clamp: 2; }
:where(.ws-marquee-text-expanded) { -webkit-line-clamp: 4; line-clamp: 4; }
.ws-marquee.ws-marquee .ws-marquee-text-expanded {
	opacity: 0;
	transform: translateX(12px);
	pointer-events: none;
	transition:
		opacity calc(var(--ws-marquee-duration) * .4) var(--ws-marquee-easing),
		transform var(--ws-marquee-duration) var(--ws-marquee-easing);
}

/* ---- button ---------------------------------------------------------- */

.ws-marquee.ws-marquee .ws-marquee-button {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 0fr auto;   /* label collapsed → 1fr on hover */
	justify-content: end;              /* the arrow stays glued to the right edge, never moves */
	transition: grid-template-columns var(--ws-marquee-duration) var(--ws-marquee-easing);
}
:where(.ws-marquee-button) {
	align-self: center;
	align-items: center;
}
/* Label reveal: the text stays anchored next to the arrow (flex-end) and the growing
   box uncovers it right → left, while a linear opacity ramp (a mask 3× the label
   width, slid with `mask-position`) sweeps along with the edge. It ends fully
   opaque, runs on the same clock as the rest, and needs no extra elements. */
.ws-marquee.ws-marquee .ws-marquee-button-label {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;                /* collapsed: the transparent third covers the label */
	transition:                        /* linear: an even opacity ramp that trails just behind the box edge */
		-webkit-mask-position var(--ws-marquee-duration) linear,
		mask-position var(--ws-marquee-duration) linear;
}
:where(.ws-marquee-button-label) {     /* `mask-image: none` on your label class turns the soft edge off */
	-webkit-mask-image: linear-gradient(90deg, transparent 33.3%, #000 66.6%);
	mask-image: linear-gradient(90deg, transparent 33.3%, #000 66.6%);
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.ws-marquee.ws-marquee .ws-marquee-button-label > span {
	display: block;
	flex: 0 0 auto;                    /* never shrinks: it is clipped, not squeezed */
	padding-right: var(--ws-marquee-label-gap);
}
.ws-marquee.ws-marquee .ws-marquee-button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.ws-marquee.ws-marquee .ws-marquee-button-arrow svg { display: block; }

/* ---- pause button (WCAG 2.2.2): created by JS, visible only on keyboard focus ---- */

.ws-marquee.ws-marquee .ws-marquee-pause:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ws-marquee.ws-marquee .ws-marquee-pause:focus-visible {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
}

.ws-marquee.ws-marquee .ws-marquee-empty { margin: 0; }

/* ---- hover / focus → expanded state (desktop, pointer devices) -------- */

@media (hover: hover) and (min-width: 768px) {
	.ws-marquee .ws-marquee-item-wrapper:is(:hover, :focus-within) .ws-marquee-item-col-left {
		margin-left: calc(-1 * var(--ws-marquee-left-w));   /* % resolves against the card, like the width */
		opacity: 0;
	}
	.ws-marquee .ws-marquee-item-wrapper:is(:hover, :focus-within) .ws-marquee-content-collapsed {
		opacity: 0;
		transform: translateX(-12px);
		pointer-events: none;
		transition-delay: 0s;
	}
	.ws-marquee .ws-marquee-item-wrapper:is(:hover, :focus-within) .ws-marquee-text-expanded {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--ws-marquee-duration) * .25);
	}
	.ws-marquee .ws-marquee-item-wrapper:is(:hover, :focus-within) .ws-marquee-button { grid-template-columns: 1fr auto; }
	.ws-marquee .ws-marquee-item-wrapper:is(:hover, :focus-within) .ws-marquee-button-label {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;         /* the opaque third slides in from the right */
	}
}

/* ---- mobile (< 768px): stacked card, no hover interaction -------------
   Rows: 1) image  2) highlight + description (inline)  3) text  4) link.
   The image sits inside the right column in the markup, so the column wrappers
   are flattened (display: contents) and the pieces re-ordered. Consequence: on
   mobile the right column / content boxes have no box of their own — style the
   image, text and button classes instead. */
@media (max-width: 767px) {
	:where(.ws-marquee) {
		--ws-marquee-item-w: min(85vw, 340px);
		--ws-marquee-gap: 16px;
		--ws-marquee-fade: 40px;
		--ws-marquee-padding: 20px;
		--ws-marquee-row-gap: 12px;
	}
	:where(.ws-marquee-item-wrapper) { gap: var(--ws-marquee-row-gap); }

	.ws-marquee.ws-marquee .ws-marquee-item-wrapper {
		flex-direction: column;
		height: auto;   /* mobile text is never cut: cards grow to the tallest, all equal */
	}

	.ws-marquee.ws-marquee .ws-marquee-item-col-right,
	.ws-marquee.ws-marquee .ws-marquee-content,
	.ws-marquee.ws-marquee .ws-marquee-content-collapsed { display: contents; }

	.ws-marquee.ws-marquee .ws-marquee-image { order: 1; }
	.ws-marquee.ws-marquee .ws-marquee-item-col-left { order: 2; }
	.ws-marquee.ws-marquee .ws-marquee-text { order: 3; }
	.ws-marquee.ws-marquee .ws-marquee-button { order: 4; }

	.ws-marquee.ws-marquee .ws-marquee-item-col-left {
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 0;
	}
	:where(.ws-marquee-item-col-left) {
		align-items: baseline;
		justify-content: flex-start;
		width: auto;
		padding-right: 0;
		gap: 0 .4em;
	}
	/* Both inherit from the left-column class, so they always look identical
	   here — put the mobile typography on that class. */
	.ws-marquee.ws-marquee .ws-marquee-highlight,
	.ws-marquee.ws-marquee .ws-marquee-description {
		display: inline;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		color: inherit;
	}

	.ws-marquee.ws-marquee .ws-marquee-text {
		display: block;
		overflow: visible;
		-webkit-line-clamp: unset;
		line-clamp: unset;
	}
	.ws-marquee.ws-marquee .ws-marquee-text-expanded { display: none; }

	.ws-marquee.ws-marquee .ws-marquee-button {
		grid-template-columns: auto auto;
		justify-content: start;
	}
	:where(.ws-marquee-button) {
		align-self: flex-start;
		margin-top: auto;   /* links share one baseline across equal-height cards */
	}
	.ws-marquee.ws-marquee .ws-marquee-button-label {   /* mobile: always open, no reveal */
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ws-marquee *, .ws-marquee *::before, .ws-marquee *::after { transition-duration: 0s !important; }
}