/* ==========================================================================
   STRATEGIC PARTNERSHIPS — "Strategic Collaboration Highlights" as a marquee

   WHAT WAS THERE

   Section 0991c99 held nine panels stacked in a column: 1017x596 each, 35px
   apart, each one a background-image (87.png … 95.png, all 1800x1125) with
   30px corners. Together they ran 5,764px tall, and they were animated by two
   Elementor features working on scroll:

     7fd0310, 63bc768   motion_fx_motion_fx_scrolling + motion_fx_scale_effect
     00e99c9 … 2a4bce6  sticky: top, sticky_offset 90, sticky_on ["desktop"]

   so each panel pinned and scaled as the page came up to it — the upward
   movement the client turned down.

   WHAT IT IS NOW

   The same nine panels, same files, same corners, same `cover` framing, laid in
   a row and carried past on one continuously moving track.

   Nothing here applies on its own. Every rule is behind `.sud-phm`, a class
   partners-highlights.js adds only after it has taken the section over and
   built the second half of the track. If the script does not run, the section
   is left exactly as Elementor built it.

   HOW THE LOOP IS SEAMLESS

   The script appends one complete copy of the nine panels, in the same order,
   so the track is exactly two identical halves. The animation then travels
   -50%, which is one half EXACTLY — by construction, at any width, before or
   after any image decodes, at any device pixel ratio. At the end of a cycle the
   copy sits precisely where the original began, so restarting at 0 is
   pixel-identical and there is no seam to see.

   The spacing between panels is a trailing MARGIN on each panel, deliberately,
   not the flex `gap` it started as. A gap sits only BETWEEN items: eighteen
   panels take seventeen gaps, so half the track width came up one half-gap
   (17.5px, measured) short of the nine-panel period and every cycle restarted
   with a visible sideways jump. As a margin the panel and its spacing are one
   repeating unit, the track is 18 of them, and half of that is exactly 9 — the
   period, at any gap value and any breakpoint. The last copy carries a trailing
   margin nobody can see: it is past the clip, and at the instant the cycle
   restarts the two positions are identical.

   A measured pixel distance would not hold: these are background images, and a
   late decode or a fractional-DPR rounding changes the track width, leaving the
   travel describing a set that no longer exists — a jump back, or a sliver of
   blank. A percentage resolves against the element's own width, so there is no
   number left to get wrong.

   SPEED is kept constant in pixels per second rather than fixed as a duration:
   the script measures the half-track and writes --sud-phm-duration, so a narrow
   phone and a wide desktop move at the same rate even though their tracks are
   very different lengths.
   ========================================================================== */

/* -------------------------------------------------------------- the frame --- */

/*
 * The clipping happens HERE and only here — on the carousel's own viewport, not
 * on the page. The section keeps its transparent background and its 24px side
 * padding, so the strip is inset exactly as the column was.
 */
.sud-phm > .e-con-inner {
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
}

/* --------------------------------------------------------------- the track --- */

.sud-phm .sud-phm__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	/*
	 * The track is a flex ITEM of .e-con-inner, so its default `flex: 0 1 auto`
	 * would let the flex algorithm shrink it back to the line's width however
	 * wide its contents are. That is fatal for a percentage translate, which
	 * resolves against the element's OWN width: -50% would travel half the
	 * VIEWPORT rather than half the TRACK, landing mid-set and jumping every
	 * cycle. Refusing to shrink is what makes -50% mean what it says.
	 */
	flex: 0 0 auto;
	inline-size: max-content;
	max-inline-size: none;

	/*
	 * Laid out left-to-right in both languages so the strip travels the same
	 * way on the Arabic site as on the English one. The brief asks for right to
	 * left; in an RTL container a flex row would reverse and run the other way.
	 */
	direction: ltr;

	/*
	 * Elementor gives every element `align-self: var(--align-self)`, and this
	 * container asks for `center`. On a column flex parent that is the CROSS
	 * axis, so a track far wider than the viewport was being centred: it opened
	 * mid-sequence, around the seam, instead of at the first panel. Pinned to the
	 * start instead — the inline start, so Arabic opens at its own leading edge.
	 */
	align-self: flex-start;

	/*
	 * Elementor keeps its own 35px container gap here (--gap, via
	 * `gap: var(--row-gap) var(--column-gap)`). Left standing it stacks on top of
	 * the panel margins below and the two together put the half-track 297px past
	 * the period. The container spacing is the margin now, so the gap goes.
	 */
	gap: 0;

	/* Spacing between panels. Applied as each panel's trailing margin — see
	 * "HOW THE LOOP IS SEAMLESS" above for why it cannot be the flex `gap`. */
	--sud-phm-gap: 35px;

	animation: sud-phm-run var(--sud-phm-duration, 40s) linear infinite;
	will-change: transform;
}

@keyframes sud-phm-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------- a panel --- */

/*
 * The column gave each panel the full content width and let its height stand at
 * 596px. In a row it needs a width of its own, and the height follows from the
 * ratio the panels already had (1017 / 596), so the framing of every background
 * is unchanged — same `cover`, same centre, same 30px corners, nothing recropped.
 */
.sud-phm .sud-phm__track > .e-con {
	flex: 0 0 auto;
	inline-size: clamp(380px, 34vw, 520px);
	block-size: auto;
	min-block-size: 0;
	aspect-ratio: 1017 / 596;
	margin: 0;
	margin-inline-end: var(--sud-phm-gap);
}

/*
 * The old mechanism, switched off.
 *
 * The script strips the data-settings so neither feature initialises, but
 * Elementor has usually written `transform: scale(var(--scale))` inline before
 * then, and sticky would set position on scroll. `!important` is what outranks
 * an inline style, and it is the reason the two can never fight the track.
 */
.sud-phm .sud-phm__track > .e-con,
.sud-phm .sud-phm__track > .e-con.elementor-motion-effects-element,
.sud-phm .sud-phm__track > .e-con.elementor-sticky--active {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	opacity: 1 !important;
}

/* ------------------------------------------------------------- responsive --- */

/* Fewer panels in view as the screen narrows, same continuous travel. */
@media (max-width: 1024px) {
	.sud-phm .sud-phm__track { --sud-phm-gap: 24px; }
	.sud-phm .sud-phm__track > .e-con { inline-size: min(52vw, 420px); }
}

@media (max-width: 767px) {
	.sud-phm .sud-phm__track { --sud-phm-gap: 16px; }
	.sud-phm .sud-phm__track > .e-con { inline-size: min(78vw, 340px); }
}

/* Someone who has asked for less movement gets the strip, standing still. */
@media (prefers-reduced-motion: reduce) {
	.sud-phm .sud-phm__track { animation: none; }
}