/**
 * Product sections (homepage and any row with Extra class "b3d-product").
 *
 * Row:     b3d-product [b3d-product--alt] [b3d-product--reverse]
 * Columns: b3d-product__media (image), b3d-product__body (text)
 * Label:   text block "b3d-product__tag" with <span class="b3d-tag">…</span>
 *
 * The image sits on a large, light "b" (logo blades) that assembles when the
 * section scrolls in and spreads on hover. Numbering is automatic.
 */

.wpb-content-wrapper {
	counter-reset: b3dp;
}

/* ---------- Row ---------- */

#main .vc_row.b3d-product {
	counter-increment: b3dp;
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: clamp(64px, 7vw, 110px) !important;
	padding-bottom: clamp(64px, 7vw, 110px) !important;
	align-items: center;
}

#main .vc_row.b3d-product {
	display: flex;
	flex-wrap: wrap;
}

/* WPBakery clearfix pseudo-elements would become flex items */
#main .vc_row.b3d-product::before,
#main .vc_row.b3d-product::after {
	display: none;
}

#main .vc_row.b3d-product--alt {
	background-color: var(--b3d-logo-cyan-50) !important;
}

/* ---------- Label line: [b] 01  bioengineering ---------- */

#main .b3d-product__tag {
	margin-bottom: 18px !important;
}

#main .b3d-product__tag p {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
}

#main .b3d-product__tag p::before {
	content: counter(b3dp, decimal-leading-zero);
	padding-left: 22px;
	background: var(--b3d-mark) left center / 11px 21px no-repeat;
	color: var(--b3d-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 23px;
}

/* ---------- Text column ---------- */

#main .b3d-product__body > .vc_column-inner {
	max-width: 680px;
}

#main .b3d-product--reverse .b3d-product__body > .vc_column-inner {
	margin-left: auto;
	margin-right: 0;
	padding-right: 40px;
}

/* ---------- Media: image on the brand "b" ---------- */

#main .b3d-product__media > .vc_column-inner {
	--p: 0;                 /* scroll progress -1..1, set by brand.js */
	position: relative;
	isolation: isolate;
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Both blades share one box with the logo mark's aspect ratio */
#main .b3d-product__media > .vc_column-inner::before,
#main .b3d-product__media > .vc_column-inner::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	height: 112%;
	max-height: 520px;
	aspect-ratio: 249 / 482;
	translate: -50% -50%;
	transition:
		transform 1.1s var(--b3d-ease-out),
		opacity .9s var(--b3d-ease-out);
	pointer-events: none;
}

/* Stem (cyan) */
#main .b3d-product__media > .vc_column-inner::before {
	background: linear-gradient(160deg, rgba(0, 171, 214, .22) 0%, rgba(0, 171, 214, .10) 100%);
	clip-path: var(--b3d-stem-clip);
	transform: translate3d(0, calc(var(--p) * -18px), 0);
}

/* Bowl (pink) */
#main .b3d-product__media > .vc_column-inner::after {
	background: linear-gradient(160deg, rgba(244, 91, 226, .26) 0%, rgba(244, 91, 226, .12) 100%);
	clip-path: var(--b3d-bowl-clip);
	transform: translate3d(0, calc(var(--p) * 18px), 0);
}

/* Assembly: blades start apart and slide into the "b" when revealed */
html.b3d-js #main .b3d-product:not(.is-assembled) .b3d-product__media > .vc_column-inner::before {
	opacity: 0;
	transform: translate3d(0, -60px, 0);
}

html.b3d-js #main .b3d-product:not(.is-assembled) .b3d-product__media > .vc_column-inner::after {
	opacity: 0;
	transform: translate3d(70px, 30px, 0);
	transition-delay: .15s;
}

/* Hover: the blades step apart slightly, image lifts (content.css) */
#main .b3d-product.is-assembled .b3d-product__media:hover > .vc_column-inner::before {
	transform: translate3d(-10px, -12px, 0);
}

#main .b3d-product.is-assembled .b3d-product__media:hover > .vc_column-inner::after {
	transform: translate3d(12px, 12px, 0);
}

#main .b3d-product__media .wpb_single_image {
	position: relative;
	z-index: 1;
	margin-bottom: 0 !important;
}

#main .b3d-product__media .wpb_single_image img {
	max-height: 460px;
	width: auto;
	object-fit: contain;
}

/* ---------- Buttons in product rows ---------- */

#main .b3d-product .vc_btn3-container {
	margin-top: 18px;
	margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	#main .vc_row.b3d-product {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	/* Image first on phones, also in reversed rows */
	#main .b3d-product--reverse .b3d-product__media {
		order: -1;
	}

	#main .b3d-product--reverse .b3d-product__body > .vc_column-inner {
		padding-right: 15px;
	}

	#main .b3d-product__media > .vc_column-inner::before,
	#main .b3d-product__media > .vc_column-inner::after {
		height: 100%;
		max-height: 340px;
	}

	#main .b3d-product__media .wpb_single_image img {
		max-height: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#main .b3d-product__media > .vc_column-inner::before,
	#main .b3d-product__media > .vc_column-inner::after {
		transition: none;
		transform: none !important;
		opacity: 1 !important;
	}
}