/* =========================================================
   Corelab Elementor Widgets — Shared Styles
   ========================================================= */

.corelab-hero,
.corelab-carousel,
.corelab-image-panel,
.corelab-stats {
	box-sizing: border-box;
}
.corelab-hero *,
.corelab-carousel *,
.corelab-image-panel *,
.corelab-stats * {
	box-sizing: border-box;
}

/* -------------------------------------------------
   Entrance animation base (IntersectionObserver driven)
   ------------------------------------------------- */
[data-animation]:not([data-animation="none"]) {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animation="fade-up"] {
	transform: translateY(40px);
}
[data-animation="fade-in"] {
	transform: none;
}
[data-animation="zoom-in"] {
	transform: scale(0.92);
}
[data-animation="slide-left"] {
	transform: translateX(-60px);
}
[data-animation="slide-right"] {
	transform: translateX(60px);
}
[data-animation].corelab-in-view {
	opacity: 1;
	transform: none;
}

/* =========================================================
   1. HERO BANNER
   ========================================================= */
.corelab-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #2b2b2b;
}

.corelab-hero__bg-img {
	/* !important guards against theme/WordPress-core global
	   "img { max-width:100%; height:auto; }" resets, which otherwise
	   shrink this to the photo's natural aspect ratio instead of
	   covering the full (often taller-on-mobile) banner height. */
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	margin: 0 !important;
}

.corelab-hero__bg-img--mobile {
	display: none !important;
}

.corelab-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.corelab-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: inherit;
	justify-content: center;
}

.corelab-hero__text {
	max-width: 45%;
}

.corelab-hero__heading {
	margin: 0 0 20px 0;
}

.corelab-hero__subtext {
	margin: 0 0 28px 0;
}

.corelab-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	border-style: solid;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
	line-height: 1;
}

.corelab-hero__button-icon svg,
.corelab-hero__button-icon i {
	display: inline-flex;
	align-items: center;
}

/* =========================================================
   2. PRODUCT CAROUSEL
   ========================================================= */
.corelab-carousel {
	position: relative;
	padding: 0 8px;
}

.corelab-carousel__swiper {
	overflow: hidden;
	width: 100%;
}

.corelab-carousel__card {
	display: flex;
	flex-direction: column;
	position: relative;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.corelab-carousel--hover-lift .corelab-carousel__card:hover {
	transform: translateY(-8px) scale(1.015);
}

.corelab-carousel__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: 0.3px;
	z-index: 2;
}

.corelab-carousel__image-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 16px;
}

.corelab-carousel__image-wrap img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.corelab-carousel__card:hover .corelab-carousel__image-wrap img {
	transform: scale(1.05);
}

.corelab-carousel__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.corelab-carousel__title,
.corelab-carousel__desc,
.corelab-carousel__price {
	margin: 0;
}

.corelab-carousel__price {
	margin-top: 10px;
}

.corelab-carousel__nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid currentColor;
	background: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: background 0.25s ease, transform 0.25s ease;
	padding: 0;
}
.corelab-carousel__nav-btn:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}
.corelab-carousel__nav-prev {
	left: -6px;
}
.corelab-carousel__nav-next {
	right: -6px;
}

.corelab-carousel .swiper-pagination {
	position: relative;
	margin-top: 18px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.corelab-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	opacity: 1;
	margin: 0 !important;
	transition: transform 0.25s ease, background 0.25s ease;
}
.corelab-carousel .swiper-pagination-bullet-active {
	transform: scale(1.3);
}

/* =========================================================
   3. IMAGE PANEL
   ========================================================= */
.corelab-image-panel {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

.corelab-image-panel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.corelab-image-panel--zoom:hover .corelab-image-panel__img {
	transform: scale(1.08);
}

.corelab-image-panel__scrim {
	position: absolute;
	inset: 0;
	display: flex;
	padding: 24px;
	pointer-events: none;
}
.corelab-image-panel__scrim--bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
}
.corelab-image-panel__scrim--top-left {
	align-items: flex-start;
	justify-content: flex-start;
}

.corelab-image-panel__overlay-content {
	max-width: 80%;
}

.corelab-image-panel__overlay-heading {
	margin: 0 0 6px 0;
}

.corelab-image-panel__overlay-text {
	margin: 0;
}

/* --- tag / pill buttons --- */
.corelab-image-panel__tags-wrap {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	pointer-events: none;
}
.corelab-image-panel__tags-wrap--bottom {
	bottom: 0;
}
.corelab-image-panel__tags-wrap--top {
	top: 0;
}

.corelab-image-panel__tags {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	pointer-events: none;
}

.corelab-image-panel__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none;
	cursor: default;
	pointer-events: auto;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.corelab-image-panel__tag[href] {
	cursor: pointer;
}

.corelab-image-panel__tags--no-blur .corelab-image-panel__tag {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Staggered entrance state — JS toggles .corelab-tag-in-view and sets transition-delay/duration inline */
.corelab-tag-anim {
	opacity: 0;
	will-change: transform, opacity;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.corelab-tag-anim--fade-up {
	transform: translateY(16px);
}
.corelab-tag-anim--fade-in {
	transform: none;
}
.corelab-tag-anim--zoom-in {
	transform: scale(0.85);
}
.corelab-tag-anim.corelab-tag-in-view {
	opacity: 1;
	transform: none;
}

/* =========================================================
   4. STATS CHART PANEL
   ========================================================= */
.corelab-stats {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #2b2b2b;
}

.corelab-stats__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.corelab-stats__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.corelab-stats__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.corelab-stats__text {
	max-width: 80%;
}

.corelab-stats__heading {
	margin: 0 0 8px 0;
}

.corelab-stats__desc {
	margin: 0;
}

.corelab-stats__chart-card {
	align-self: flex-start;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 16px 20px;
	min-width: 190px;
	width: 55%;
	box-sizing: border-box;
}

.corelab-stats__chart-label {
	font-size: 11px;
	letter-spacing: 0.8px;
	margin-bottom: 10px;
}

.corelab-stats__sublabel {
	margin-top: 4px;
}

/* --- gauge --- */
.corelab-stats__gauge-wrap {
	position: relative;
	width: 100%;
	min-width: 100%;
	line-height: 0;
}
.corelab-stats__chart .corelab-stats__gauge-svg,
.corelab-stats__gauge-svg {
	/* !important guards against theme/Elementor global "svg { width:1em; height:1em; }"
	   icon-font resets that would otherwise collapse this chart to icon size. */
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	display: block !important;
	flex: none !important;
}
.corelab-stats__gauge-bg,
.corelab-stats__gauge-fg {
	fill: none;
	vector-effect: non-scaling-stroke;
}
.corelab-stats__gauge-fg {
	stroke-dasharray: 251.2;
	stroke-dashoffset: 251.2;
	transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.corelab-stats__gauge-center {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	line-height: normal;
}
.corelab-stats__gauge-number {
	line-height: 1;
}

/* --- line chart --- */
.corelab-stats__chart .corelab-stats__line-svg,
.corelab-stats__line-svg {
	/* !important guards against theme/Elementor global "svg { width:1em; }" resets;
	   height stays controllable via the Chart Height control below (no !important). */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	display: block !important;
	flex: none !important;
	height: 140px;
	margin-top: 8px;
	overflow: visible;
	color: inherit;
}
.corelab-stats__line-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.corelab-stats__line-fill {
	opacity: 0;
	transition: opacity 0.8s ease 0.6s;
}
.corelab-in-view .corelab-stats__line-fill {
	opacity: 1;
}

/* --- bar chart --- */
.corelab-stats__bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 140px;
	margin-top: 8px;
}
.corelab-stats__bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: flex-end;
	gap: 6px;
}
.corelab-stats__bar-track {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	border-radius: 4px;
	overflow: hidden;
}
.corelab-stats__bar {
	width: 100%;
	height: 0%;
	border-radius: 4px 4px 0 0;
	transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.corelab-stats__bar-label {
	font-size: 10px;
	opacity: 0.75;
	white-space: nowrap;
}

/* =========================================================
   5. INLINE IMAGE HEADING
   ========================================================= */
.corelab-inline-heading {
	position: relative;
	width: 100%;
}

.corelab-inline-heading__inner {
	width: 100%;
}

.corelab-inline-heading__eyebrow {
	display: block;
}

.corelab-inline-heading__heading {
	margin: 0;
	display: block;
}

.corelab-inline-heading__img-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	vertical-align: middle;
	line-height: 0;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* !important guards against theme/global "img { max-width:100%; height:auto; }"
	   resets from squashing these inline avatar-style images. */
}

.corelab-inline-heading__img-wrap img.corelab-inline-heading__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
}

.corelab-inline-heading__img-wrap[href] {
	cursor: pointer;
}

/* Individual inline-image entrance (stagger) */
.corelab-inline-img-anim {
	opacity: 0;
	will-change: transform, opacity;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.corelab-inline-img-anim--fade-up {
	transform: translateY(6px) translateY(var(--corelab-img-v-offset, 0px)) scale(0.9);
}
.corelab-inline-img-anim--fade-in {
	transform: scale(0.94);
}
.corelab-inline-img-anim--zoom-in {
	transform: scale(0.4);
}
.corelab-inline-img-anim.corelab-tag-in-view {
	opacity: 1;
}
.corelab-inline-img-anim--fade-up.corelab-tag-in-view,
.corelab-inline-img-anim--fade-in.corelab-tag-in-view,
.corelab-inline-img-anim--zoom-in.corelab-tag-in-view {
	transform: none;
}


@media (max-width: 1024px) {
	.corelab-hero__text {
		max-width: 60%;
	}
	.corelab-stats__text {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.corelab-hero__inner {
		justify-content: flex-end;
		padding-bottom: 32px !important;
	}
	.corelab-hero__text {
		max-width: 100% !important;
	}
	.corelab-hero {
		min-height: 380px !important;
	}
	.corelab-hero--has-mobile-image .corelab-hero__bg-img--mobile {
		display: block !important;
	}
	.corelab-hero--has-mobile-image > .corelab-hero__bg-img:not(.corelab-hero__bg-img--mobile) {
		display: none !important;
	}

	.corelab-carousel__nav-btn {
		width: 34px;
		height: 34px;
	}
	.corelab-carousel__nav-prev {
		left: 2px;
	}
	.corelab-carousel__nav-next {
		right: 2px;
	}

	.corelab-image-panel {
		height: 280px !important;
	}

	.corelab-stats {
		height: auto !important;
		min-height: 320px;
	}
	.corelab-stats__inner {
		gap: 20px;
	}
	.corelab-stats__chart-card {
		min-width: 0;
	}

	.corelab-inline-heading__img-wrap {
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.corelab-inline-heading {
		overflow-wrap: break-word;
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	[data-animation]:not([data-animation="none"]) {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.corelab-stats__gauge-fg,
	.corelab-stats__line-path,
	.corelab-stats__bar {
		transition: none !important;
	}
	.corelab-tag-anim,
	.corelab-inline-img-anim {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}