/* ==========================================================================
   SUDAIR PHARMA — PARTNERS LOGO MARQUEE

   Converts the "Global Pharmaceutical Partners" nested carousel from a
   slide-stepper into one continuously moving strip.

   Everything is gated behind .sud-marquee, a class the script adds only to that
   one carousel once it has taken it over. Nothing here applies to any other
   carousel, and if the script does not run the widget is left exactly as
   Elementor built it.
   ========================================================================== */

.sud-marquee .swiper,
.sud-marquee.swiper {
	overflow: hidden;
}

/*
 * The track.
 *
 * Swiper positions slides by writing a transform on this element every frame.
 * The script destroys the Swiper instance first, so the animation below owns the
 * transform outright — the two never both drive it.
 *
 * width:max-content is what makes the strip continuous: the wrapper is as wide
 * as all its slides laid end to end, rather than being clamped to the viewport
 * and wrapping.
 */
.sud-marquee .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	inline-size: max-content;
	max-inline-size: none;
	transform: none;

	/*
	 * flex-shrink: 0 — and without it none of the above does anything.
	 *
	 * The wrapper is a flex ITEM of .swiper, so its default `flex: 0 1 auto`
	 * lets the flex algorithm shrink it back to the line's width no matter what
	 * `inline-size: max-content` asks for. Measured: the track laid out at
	 * 8024.63px while the wrapper itself still reported 1337.5px.
	 *
	 * That is fatal for a percentage translate, which resolves against the
	 * element's OWN width: -50% would have travelled 668px instead of the
	 * 4012px that is actually half the track, landing mid-set and jumping every
	 * cycle. Refusing to shrink is what makes the wrapper as wide as its
	 * content, and therefore what makes -50% mean what it says.
	 */
	flex: 0 0 auto;

	/*
	 * Linear, infinite, no pause between cycles — a constant-speed strip.
	 *
	 * THE TRAVEL IS -50%, AND THAT IS THE WHOLE POINT.
	 *
	 * It used to be a measured pixel distance, --sud-marquee-shift, set to the
	 * summed width of one set. That is correct only for as long as the
	 * measurement is: the logos are <img> elements, so a single image finishing
	 * its decode after the build changes the slide widths and leaves the shift
	 * describing a set that no longer exists. The track then travels slightly
	 * too far or too little and the repeat becomes visible — a jump back, or a
	 * sliver of blank. Sub-pixel rounding on a fractional-DPR display does the
	 * same thing more quietly.
	 *
	 * A percentage translate resolves against the element's OWN width. The
	 * script now builds the track as exactly two identical halves, so -50% is
	 * one half exactly, by construction, at any width, before or after any
	 * image loads, on any device pixel ratio. There is no number left to get
	 * wrong.
	 *
	 * Measurement still decides how many repeats go in a half — but that only
	 * affects whether the strip is wide enough to fill the frame, never whether
	 * the seam is clean.
	 */
	animation: sud-marquee-scroll var(--sud-marquee-duration, 40s) linear infinite;
	will-change: transform;
}

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

/* --------------------------------------------------------------------------
   ARABIC — THE SAME STRIP, MIRRORED

   In a right-to-left carousel the track starts at the frame's RIGHT edge and
   its copies run off to the left: the first logo on the right, as Arabic reads.
   Keyed on :dir(rtl) — the carousel's own direction, which is what actually
   lays the track out — rather than on the page's.
   Travelling -50% would slide the track's start away from the right edge and
   leave the frame emptying from the right.

   So in RTL it travels +50%: the same distance, one half of a two-half track,
   exact by construction just as in English — the strip moves the other way,
   with the next logos coming in from the left. Same speed, same duration (only
   the keyframes differ), so the mobile speed-up below and the hover pause apply
   unchanged.

   Wrapped in (prefers-reduced-motion: no-preference) and screen so it can never
   switch the movement back on where the blocks at the end of this file turn it
   off.
   -------------------------------------------------------------------------- */

@keyframes sud-marquee-scroll-rtl {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(50%, 0, 0); }
}

@media screen and (prefers-reduced-motion: no-preference) {
	.sud-marquee .swiper-wrapper:dir(rtl) {
		animation-name: sud-marquee-scroll-rtl;
	}
}

/* --------------------------------------------------------------------------
   MOBILE — FASTER

   The script sets one speed for every viewport: 55px a second, written as a
   duration onto the wrapper as an inline custom property. That reads well on a
   wide screen, where four or five logos are on view at once and the strip is
   plainly moving. On a phone only about two fit, so the same 55px/s reads as
   almost still.

   Below is a 1.6x speed-up on phones only — about 88px/s, a logo crossing a
   375px screen in roughly 4.3s instead of 6.8s. Fast enough to be obviously
   moving, slow enough to still read a mark.

   WHY THIS DIVIDES INSTEAD OF NAMING A TIME
   The duration is not a constant. The script measures the built track and
   recomputes it on every resize, so the strip holds one speed whatever the
   viewport is and however many logos there are. Hard-coding seconds here would
   throw that away and make the phone speed depend on how wide the track
   happened to be. Dividing keeps the measurement doing its job and changes only
   the rate.

   WHY animation-duration AND NOT --sud-marquee-duration
   That custom property is set INLINE by the script, and an inline declaration
   beats a stylesheet one for the same property — overriding it here would need
   `!important`. `animation-duration` is not set inline: it comes from the
   `animation` shorthand in the rule above, which this longhand overrides on
   source order alone, at equal specificity and with nothing forced.

   Placed BEFORE the reduced-motion and print blocks on purpose, so both still
   have the last word on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-marquee .swiper-wrapper {
		animation-duration: calc(var(--sud-marquee-duration, 40s) / 1.6);
	}
}

/* --------------------------------------------------------------------------
   HOVER

   Pause while the reader is looking at a logo, resume when they leave. The
   animation is only suspended, never restarted, so it picks up from exactly
   where it stopped rather than jumping.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-marquee:hover .swiper-wrapper {
		animation-play-state: paused;
	}
}

/* Slides keep the width Elementor gave them; they must simply stop being
   stretched to the container by Swiper's slidesPerView maths. */
.sud-marquee .swiper-slide {
	flex: 0 0 auto;
	block-size: auto;
}

/* The strip moves on its own, so the manual controls no longer have a job. */
.sud-marquee .elementor-swiper-button,
.sud-marquee .swiper-button-next,
.sud-marquee .swiper-button-prev,
.sud-marquee .swiper-pagination {
	display: none !important;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION

   A permanently moving strip is exactly what this setting exists to stop. The
   logos stay, laid out and readable; only the movement goes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-marquee .swiper-wrapper {
		animation: none;
		transform: none;
	}
}

@media print {
	.sud-marquee .swiper-wrapper { animation: none; transform: none; }
}