/**
 * Brand elements derived from the bio3Dtech logo.
 *
 * The logo mark is a letter "b" built from two blades:
 *   - cyan blade = the stem (parallelogram, edges slope down ~30.7deg)
 *   - pink blade = the bowl (tapers to the right), set one step lower-right
 * Rule: never mirror the mark (it would read as "d"), keep the two colors
 * in their positions. Geometry (viewBox 0 0 249 482) lives in
 * assets/img/brand-mark.svg; the percentages below are the same points.
 *
 * Also: tagline bar ("veterinary engineering") → .b3d-tag labels.
 */

:root {
	/* Stem + bowl blades as ONE bar: long cyan stem, gap, short pink bowl at the
	 * end. Always skewed the same way (--b3d-blade-skew) and always drawn from
	 * the left; when the bar grows, the stem extends and the bowl rides along. */
	--b3d-blades: linear-gradient(90deg,
		var(--b3d-logo-cyan) 0 calc(100% - 22px),
		transparent calc(100% - 22px) calc(100% - 17px),
		var(--b3d-pink) calc(100% - 17px) 100%);
	--b3d-blade-skew: skewX(-30deg); /* ends slope like "/" */
	--b3d-stem-clip: polygon(0 0, 45.4% 13.9%, 45.4% 69.5%, 0 55.6%);
	--b3d-bowl-clip: polygon(54.6% 44.4%, 100% 58.3%, 100% 86.3%, 54.6% 100%);
	--b3d-mark: url("../../img/brand-mark.svg");
}

/* ---------- Tagline-bar labels ---------- */

/*
 * Exact logo colors with dark text: cyan 7:1, pink 6.7:1 (white text on
 * these colors would be only ~2.7:1).
 */
.b3d-tag {
	display: inline-block;
	padding: 5px 12px 6px;
	border-radius: 4px;
	background: var(--b3d-logo-cyan);
	color: var(--b3d-ink) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: lowercase;
}

.b3d-tag--pink,
.b3d-tag--logo-pink {
	background: var(--b3d-pink);
}

/* Explicit alias of the default */
.b3d-tag--logo-cyan {
	background: var(--b3d-logo-cyan);
}

.b3d-tag--dark {
	background: var(--b3d-ink);
	color: #fff !important;
}

/* ---------- Mini "b" mark ---------- */

.b3d-mark {
	display: inline-block;
	width: 12px;
	height: 23px;
	background: var(--b3d-mark) center / contain no-repeat;
	vertical-align: middle;
}

/* ---------- Heading accent: stem + bowl blades ----------
 * Section titles (Ultimate Heading h2/h3), .b3d-title and the FAQ title.
 * Reveal: drawn from zero when the heading scrolls in. Hover: the stem extends. */

#main .uvc-heading .uvc-main-heading :is(h2, h3)::before,
.b3d-title::before,
.b3d-faq h2.b3d-faq-title::before {
	content: none !important;
}

#main .uvc-heading .uvc-main-heading :is(h2, h3)::after,
.b3d-title::after,
.b3d-faq h2.b3d-faq-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 66px;
	height: 6px;
	border-radius: 0;
	background: var(--b3d-blades) !important;
	clip-path: none;
	transform: var(--b3d-blade-skew);
	transform-origin: left bottom;
	transition: width .9s var(--b3d-ease-out);
}

/* Centered headings stay centered while the bar grows.
 * Ultimate Heading prints its alignment only as an inline style, hence [style*="center"]. */
#main .uvc-heading[style*="center"] .uvc-main-heading :is(h2, h3)::after,
.b3d-title--center::after {
	left: 50%;
	transform: translateX(-50%) var(--b3d-blade-skew);
	transform-origin: center bottom;
}

/* Hover: stem extends, bowl rides at the end — while the pointer is anywhere
 * over the section (WPBakery row) that holds the title, not only the title itself. */
#main .uvc-heading:hover .uvc-main-heading :is(h2, h3)::after,
#main .vc_row:hover .b3d-title::after,
.b3d-section-head:hover .b3d-title::after,
.b3d-faq:hover h2.b3d-faq-title::after {
	width: 96px;
}

/* Reveal: not drawn until the block has scrolled in */
html.b3d-js #main [class*="b3d-reveal"]:not(.is-revealed) .uvc-main-heading :is(h2, h3)::after,
html.b3d-js #main [class*="b3d-reveal"]:not(.is-revealed) .b3d-title::after,
html.b3d-js #main [class*="b3d-reveal"]:not(.is-revealed) h2.b3d-faq-title::after {
	width: 0;
}

/* ---------- Tagline highlight: pink bowl blade as marker ---------- */

#main strong:has(> .dt-highlight)::before {
	width: 6px !important;
	border-radius: 0 !important;
	background: var(--b3d-pink) !important;
	clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
}

/* ---------- .b3d-title: heading with the blades (see above) ---------- */

.b3d-title {
	position: relative;
	padding-bottom: 18px;
}

/* ---------- Cards: one look for all card-like blocks ----------
 * White card with a hairline border; on hover it lifts, gets a cyan border
 * and the logo's stem + bowl blades grow on its top edge. */

#main :is(
	.articles-list > article,
	.iso-container > .wf-cell > article.post,
	.b3d-service > .vc_column-inner,
	.b3d-value > .vc_column-inner,
	ul.b3d-apps > li.b3d-app,
	.b3d-team-row .team-container,
	.b3d-steps .vc_row.vc_inner > .wpb_column > .vc_column-inner
) {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--b3d-line);
	border-radius: var(--b3d-radius-lg);
	background: var(--b3d-surface) !important;
	box-shadow: var(--b3d-shadow-sm);
	transition: transform var(--b3d-dur) var(--b3d-ease), box-shadow var(--b3d-dur) var(--b3d-ease), border-color var(--b3d-dur) var(--b3d-ease);
}

#main :is(
	.articles-list > article,
	.iso-container > .wf-cell > article.post,
	.b3d-service > .vc_column-inner,
	.b3d-value > .vc_column-inner,
	ul.b3d-apps > li.b3d-app,
	.b3d-team-row .team-container,
	.b3d-steps .vc_row.vc_inner > .wpb_column > .vc_column-inner
):hover {
	transform: var(--b3d-lift);
	border-color: var(--b3d-logo-cyan);
	box-shadow: var(--b3d-shadow-accent);
}

/* blades on the card top (::after on the application cards, whose ::before is the number) */
#main :is(
	.articles-list > article,
	.iso-container > .wf-cell > article.post,
	.b3d-service > .vc_column-inner,
	.b3d-value > .vc_column-inner,
	.b3d-team-row .team-container,
	.b3d-news .vc_grid-item-mini
)::before,
#main ul.b3d-apps > li.b3d-app::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	left: 24px;
	width: 66px;
	height: 6px;
	background: var(--b3d-blades);
	transform: var(--b3d-blade-skew) scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--b3d-ease-out);
	pointer-events: none;
}

#main :is(
	.articles-list > article,
	.iso-container > .wf-cell > article.post,
	.b3d-service > .vc_column-inner,
	.b3d-value > .vc_column-inner,
	.b3d-team-row .team-container,
	.b3d-news .vc_grid-item-mini
):hover::before,
#main ul.b3d-apps > li.b3d-app:hover::after {
	transform: var(--b3d-blade-skew) scaleX(1);
}

/* ---------- Gradient figures (logo cyan → pink text): "<24 h", prices ---------- */

.b3d-stat b,
#main .b3d-course-intro__price b {
	background: var(--b3d-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}