/* ================================================
   Birla Precision — Divisions Pie
   Pure CSS/SVG. No JS.
   ================================================ */

.bpcc-pie {
	--bpcc-size: 760px;
	--bpcc-content-w: 26%;
	--bpcc-hover-scale: 1.05;
	--bpcc-corner: 40px;

	--bpcc-wedge-bg: #ffffff;
	--bpcc-wedge-bg-hover: #ffffff;
	--bpcc-wedge-shadow: 0 6px 22px rgba(18, 23, 28, .10);
	--bpcc-wedge-shadow-hover: 0 14px 38px rgba(255, 103, 0, .28);

	--bpcc-logo-w: 82%;
	--bpcc-logo-h: 1.8em;
	--bpcc-logo-gap: .45em;

	--bpcc-img-w: 70%;
	--bpcc-img-gap: .6em;

	--bpcc-hub-size: 32%;
	--bpcc-hub-bg: #dfe4e9;
	--bpcc-hub-ring-color: #ff6700;
	--bpcc-hub-ring-w: 4px;
	--bpcc-hub-logo-w: 62%;

	/* Spun-metal disc: a vignette over a multi-sweep conic (the turned
	   finish) over a dome-lighting gradient. A repeating-conic at a fine
	   period moires badly at this size, so the sweeps are explicit.
	   Replaced wholesale if the admin uploads a real texture. */
	--bpcc-hub-metal:
		radial-gradient(circle at 50% 50%,
			rgba(255, 255, 255, 0) 52%,
			rgba(0, 0, 0, .13) 100%),
		conic-gradient(from 35deg at 50% 50%,
			#f7f9fb 0deg, #ccd4dc 30deg, #f3f6f9 64deg, #c5cdd6 98deg,
			#f7f9fb 134deg, #cad2da 170deg, #f4f7f9 206deg, #c7cfd8 242deg,
			#f7f9fb 278deg, #cbd3db 314deg, #f7f9fb 360deg),
		radial-gradient(circle at 42% 28%,
			rgba(255, 255, 255, .92) 0%,
			rgba(255, 255, 255, .22) 42%,
			rgba(120, 130, 142, .20) 100%);

	width: 100%;
}

.bpcc-pie__stage {
	position: relative;
	width: min(var(--bpcc-size), 100%);
	aspect-ratio: 1 / 1;
	margin-inline: auto;

	/* Everything inside sizes in em, so the whole wheel scales with the
	   pie. Elementor typography controls still win when they are set. */
	font-size: calc(min(var(--bpcc-size), 92vw) * .028);
	line-height: 1.25;
}

/* ── Segment ─────────────────────────────────────
   Each segment is a full-stage overlay so a single transform grows the
   wedge and its content together, outward from the wheel's center.
   The overlay itself ignores the pointer; only the drawn wedge and the
   content block take hits, so neighbours stay clickable. */
.bpcc-seg {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	text-decoration: none;
	color: inherit;
	transform-origin: 50% 50%;
	transition: transform .38s cubic-bezier(.22, .68, .3, 1);
	will-change: transform;
}

.bpcc-seg__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(var(--bpcc-wedge-shadow));
	transition: filter .38s ease;
}

.bpcc-seg__path {
	pointer-events: auto;
	fill: var(--bpcc-wedge-bg);
	/* Round join on a stroke of 2×radius is what rounds the wedge corners;
	   the path geometry is inset by the same amount in PHP. */
	stroke: var(--bpcc-wedge-bg);
	stroke-width: var(--bpcc-corner);
	stroke-linejoin: round;
	transition: fill .38s ease, stroke .38s ease;
}

.bpcc-seg__content {
	position: absolute;
	left: var(--bpcc-x, 50%);
	top: var(--bpcc-y, 50%);
	width: var(--bpcc-content-w);
	/* The second translate anchors the block by its inner edge — see the
	   offset maths in the widget's render(). */
	transform: translate(
		calc(-50% + var(--bpcc-ox, 0%)),
		calc(-50% + var(--bpcc-oy, 0%)));
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.bpcc-seg__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .12em;
	width: 100%;
}

/* ── Division logo (replaces the title) ── */
.bpcc-seg__logowrap {
	display: flex;
	justify-content: center;
	width: var(--bpcc-logo-w);
	margin-bottom: var(--bpcc-logo-gap);
}

.bpcc-seg__logo {
	display: block;
	/* Height is the normaliser so logos of different aspect ratios read as
	   the same size; width only caps the very wide ones. */
	height: var(--bpcc-logo-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	margin-inline: auto;
}

/* Only rendered when an item has no logo. */
.bpcc-seg__title {
	font-size: 1em;
	font-weight: 800;
	letter-spacing: .01em;
	color: #12171c;
	text-wrap: balance;
	margin-bottom: var(--bpcc-logo-gap);
}

/* ── Description: the prominent line under the logo ── */
.bpcc-seg__sub {
	font-size: .82em;
	font-weight: 700;
	line-height: 1.3;
	color: #12171c;
	text-wrap: balance;
}

.bpcc-seg__cta {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin-top: .42em;
	font-size: .6em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #ff6700;
}

.bpcc-seg__arrow {
	width: 1.7em;
	height: .85em;
	flex: none;
	transition: transform .3s ease;
}

.bpcc-seg__imgwrap {
	display: block;
	width: var(--bpcc-img-w);
	margin-top: var(--bpcc-img-gap);
}

.bpcc-seg__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Hover / focus ─────────────────────────────
   Two mechanisms, deliberately. .bpcc-seg carries pointer-events:none so the
   stacked full-stage overlays do not steal one another's hits; that leaves it
   browser-dependent whether the <a> itself joins the :hover chain. :has()
   covers the case where it does not, since the hit child always matches.
   They are separate rules on purpose: an unsupported :has() would invalidate
   an entire selector list, taking the plain :hover rule down with it. */
.bpcc-seg:hover,
.bpcc-seg:focus-visible {
	transform: scale(var(--bpcc-hover-scale));
	z-index: 5;
	outline: none;
}

.bpcc-seg:has(:hover),
.bpcc-seg:has(:focus-visible) {
	transform: scale(var(--bpcc-hover-scale));
	z-index: 5;
}

.bpcc-seg:hover .bpcc-seg__path,
.bpcc-seg:focus-visible .bpcc-seg__path {
	fill: var(--bpcc-wedge-bg-hover);
	stroke: var(--bpcc-wedge-bg-hover);
}

.bpcc-seg:has(:hover) .bpcc-seg__path,
.bpcc-seg:has(:focus-visible) .bpcc-seg__path {
	fill: var(--bpcc-wedge-bg-hover);
	stroke: var(--bpcc-wedge-bg-hover);
}

.bpcc-seg:hover .bpcc-seg__svg,
.bpcc-seg:focus-visible .bpcc-seg__svg {
	filter: drop-shadow(var(--bpcc-wedge-shadow-hover));
}

.bpcc-seg:has(:hover) .bpcc-seg__svg,
.bpcc-seg:has(:focus-visible) .bpcc-seg__svg {
	filter: drop-shadow(var(--bpcc-wedge-shadow-hover));
}

.bpcc-seg:hover .bpcc-seg__arrow,
.bpcc-seg:focus-visible .bpcc-seg__arrow {
	transform: translateX(.22em);
}

.bpcc-seg:has(:hover) .bpcc-seg__arrow,
.bpcc-seg:has(:focus-visible) .bpcc-seg__arrow {
	transform: translateX(.22em);
}

/* Keyboard focus needs a visible ring; hover does not. */
.bpcc-seg:focus-visible .bpcc-seg__path,
.bpcc-seg:has(:focus-visible) .bpcc-seg__path {
	stroke: var(--bpcc-hub-ring-color);
}

/* ── Center hub ──────────────────────────────── */
.bpcc-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--bpcc-hub-size);
	aspect-ratio: 1 / 1;
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	background-color: var(--bpcc-hub-bg);
	background-image: var(--bpcc-hub-metal);
	box-shadow: 0 0 0 var(--bpcc-hub-ring-w) var(--bpcc-hub-ring-color),
		0 10px 30px rgba(18, 23, 28, .16);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	padding: 6%;
	box-sizing: border-box;
}

/* Bevel: a bright top edge and a soft bottom shade, so the disc reads as
   a machined part rather than a flat circle. */
.bpcc-hub::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, .85),
		inset 0 -3px 8px rgba(0, 0, 0, .16);
}

.bpcc-pie[data-bpcc-finish="flat"] .bpcc-hub {
	background-image: none;
}

.bpcc-pie[data-bpcc-finish="flat"] .bpcc-hub::after {
	box-shadow: none;
}

.bpcc-hub__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
}

.bpcc-hub__logo {
	display: block;
	width: var(--bpcc-hub-logo-w);
	height: auto;
}

.bpcc-hub__text {
	font-size: .52em;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-align: center;
	color: #3c444c;
}

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 767px) {

	/* Stacked: drop the geometry, become a plain card list. */
	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-pie__stage {
		width: 100%;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 14px;
		font-size: 16px;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg {
		position: static;
		inset: auto;
		pointer-events: auto;
		background: var(--bpcc-wedge-bg);
		border-radius: 16px;
		box-shadow: var(--bpcc-wedge-shadow);
		padding: 16px 18px;
		transition: box-shadow .3s ease;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__svg {
		display: none;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__content {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		transform: none;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: left;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__text {
		align-items: flex-start;
		flex: 1 1 auto;
		min-width: 0;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__logowrap {
		width: 112px;
		margin-bottom: .35em;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__logo {
		max-height: 34px;
		object-position: left center;
		margin-inline: 0;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__sub {
		font-size: 15px;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__cta {
		font-size: 11px;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg__imgwrap {
		order: -1;
		flex: 0 0 84px;
		width: 84px;
		margin-top: 0;
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg:hover,
	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg:focus-visible {
		transform: none;
		box-shadow: var(--bpcc-wedge-shadow-hover);
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg:has(:hover),
	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-seg:has(:focus-visible) {
		transform: none;
		box-shadow: var(--bpcc-wedge-shadow-hover);
	}

	.bpcc-pie[data-bpcc-mobile="stacked"] .bpcc-hub {
		position: static;
		transform: none;
		order: -1;
		width: 160px;
		margin: 0 auto 6px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bpcc-seg,
	.bpcc-seg__svg,
	.bpcc-seg__path,
	.bpcc-seg__arrow {
		transition: none;
	}

	.bpcc-seg:hover,
	.bpcc-seg:focus-visible {
		transform: none;
	}

	.bpcc-seg:has(:hover),
	.bpcc-seg:has(:focus-visible) {
		transform: none;
	}
}