/* iGenetix — Partners carousel: the bits Elementor has no control for.
 *
 * Everything else (colours, spacing, typography, slides per view, autoplay)
 * lives on the widgets themselves and is edited in the Elementor panel.
 * -------------------------------------------------------------------------
 * .ig-lab-media      → fixed 16:9 logo frame, logo scaled to fit
 * .ig-lab-carousel   → dims the partially-visible edge slides
 */

/* Heading glow ------------------------------------------------------------
   Elementor paints a radial gradient that stretches to an ellipse across the
   container. Sizing the background box square turns it back into a circle;
   the colours and stops stay editable in the Elementor panel. */

.ig-lab-glow {
	background-repeat: no-repeat !important;
	background-position: center top !important;
	background-size: 820px 820px !important;
}

@media (max-width: 1024px) {
	.ig-lab-glow {
		background-size: 640px 640px !important;
	}
}

@media (max-width: 767px) {
	.ig-lab-glow {
		background-size: 460px 460px !important;
	}
}

/* Logo frame ------------------------------------------------------------- */

.ig-lab-media {
	position: relative;
	aspect-ratio: 16 / 9;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ig-lab-media > .elementor-widget,
.ig-lab-media .elementor-widget-container,
.ig-lab-media .elementor-widget-theme-post-featured-image,
.ig-lab-media figure,
.ig-lab-media figure > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

.ig-lab-media img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	object-position: center;
}

/* Card ------------------------------------------------------------------- */

.ig-lab-card {
	height: 100%;
	text-decoration: none;
}

/* Fewer partners than slides-per-view: Swiper never initialises, so the lone
   slide would otherwise stretch the full width of the section. Excluded once
   the marquee takes over, which also leaves Swiper uninitialised but lays the
   strip out itself. */
.ig-lab-carousel:not(.igx-marquee) .swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	justify-content: center;
	gap: 26px;
	width: 100%;
}

.ig-lab-carousel:not(.igx-marquee) .swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 1 460px;
	max-width: 460px;
}

/* Phone -------------------------------------------------------------------
   The card was 643px tall on a 375px screen — nearly a whole phone for one
   lab. Most of that was not the content but the way it was arranged. */

@media (max-width: 767px) {

	/* The worst of it: Elementor lays inner containers out as columns on
	   mobile whatever the desktop setting says, so "Genomics / Healthcare"
	   became three stacked rows 132px tall. It is one line of text. */
	/* Elementor drives container layout through custom properties, and sets
	   --flex-direction on the element itself with a selector far heavier than
	   anything sane. Overriding the property is the least invasive way in;
	   the !important is what it costs. */
	.ig-lab-meta {
		--flex-direction: row !important;
		--flex-wrap: wrap !important;
		--align-items: baseline !important;
		--gap: 7px !important;
		--row-gap: 7px !important;
		--column-gap: 7px !important;
	}

	.ig-lab-meta > * {
		width: auto;
	}

	/* A 16:9 frame around a wordmark leaves a lot of empty box. Shallower
	   here, with the logo still free to sit at its own proportions inside. */
	.ig-lab-media {
		aspect-ratio: 2.4 / 1;
	}

	/* Six lines of description is more than anyone reads on a card sliding
	   past. Three tells one lab from another, and the full text stays in the
	   markup for search engines and screen readers.

	   Clamped on the widget itself: Elementor renders this text editor as a
	   bare text node with no paragraph to hang the clamp on. */
	.ig-lab-desc {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ig-lab-desc p {
		margin: 0;
	}

	/* One line of text does not need 20px of box around it. */
	.ig-lab-meta {
		--padding-top: 0px !important;
		--padding-bottom: 0px !important;
	}

	.ig-lab-body {
		gap: 9px;
	}

	.ig-lab-card {
		padding: 14px 14px 18px;
	}

	.ig-lab-certs .igx-cert {
		padding: 5px 10px;
		font-size: 12px;
	}
}

/* Continuous marquee ------------------------------------------------------
   Swiper's autoplay cannot hold a constant glide — see partners-carousel.js —
   so once the strip has been rebuilt as a repeating run of cards, the motion
   is a plain CSS animation. The wrapper holds a whole number of copies and
   shifts by exactly one copy, so the restart is invisible. */

.ig-lab-carousel.igx-marquee .swiper {
	overflow: hidden;
}

.ig-lab-carousel.igx-marquee .swiper-wrapper {
	display: flex;
	width: max-content;
	animation: igx-lab-marquee var(--igx-duration, 40s) linear infinite;
}

.ig-lab-carousel.igx-marquee .swiper-slide {
	flex: 0 0 auto;
	height: auto;
}

/* The widget asks for pause on hover, and a reader chasing a certificate link
   needs the card to hold still. */
.ig-lab-carousel.igx-marquee:hover .swiper-wrapper,
.ig-lab-carousel.igx-marquee:focus-within .swiper-wrapper {
	animation-play-state: paused;
}

@keyframes igx-lab-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--igx-shift, 0px) * -1), 0, 0);
	}
}

/* Arrows would do nothing without a Swiper instance. */
.ig-lab-carousel:has(.swiper:not(.swiper-initialized)) .elementor-swiper-button {
	display: none;
}

/* Continuous marquee -------------------------------------------------------
   The widget is set to a 1ms autoplay delay with a 6s transition, so Swiper
   never comes to rest between slides. Swiper's default easing would still
   make each step accelerate and brake; linear timing turns it into one
   constant glide. */

.ig-lab-carousel .swiper-slide {
	height: auto;
}

.ig-lab-carousel .swiper-wrapper {
	transition-timing-function: linear !important;
}

/* Dark fade on both edges -------------------------------------------------
   A mask rather than a painted overlay, so it works over any page
   background instead of only the dark one. */

.ig-lab-carousel .swiper {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.35) 4%,
		#000 14%,
		#000 86%,
		rgba(0, 0, 0, 0.35) 96%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.35) 4%,
		#000 14%,
		#000 86%,
		rgba(0, 0, 0, 0.35) 96%,
		transparent 100%
	);
}

/* A narrow screen has no room to spare, so the fade is kept tight — just
   enough to soften the neighbours showing at each edge without eating into
   the card in the middle. */
@media (max-width: 767px) {
	.ig-lab-carousel .swiper {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0%,
			#000 7%,
			#000 93%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0%,
			#000 7%,
			#000 93%,
			transparent 100%
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ig-lab-carousel .swiper-wrapper {
		transition-timing-function: ease !important;
	}

	/* Someone who has asked their system for less motion should not be given a
	   strip that never stops moving. */
	.ig-lab-carousel.igx-marquee .swiper-wrapper {
		animation: none;
	}
}