/**
 * Variant CSS: process--circular-cycle
 *
 * Four process steps arranged in a 2x2 quadrant around a central hub, with a
 * dashed accent ring and rotation arrows implying a repeating loop ("cykl").
 * Reads as iterative / continuous improvement rather than a linear sequence —
 * distinct from the timeline, row, node-line, card and ghost variants.
 * Polarity-aware text (--ink); ring + numerals + hub take --accent. Part of the
 * `process` role. Every selector scoped to the variant (no global leak).
 */

body.aibt-universal .universal-process--circular-cycle {
	background: var(--background);
	color: var(--text-primary);
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
}

/* Intro — centered. A8: text-align:center + margin => margin:0 auto. */
body.aibt-universal .universal-process--circular-cycle .universal-process__intro {
	margin: 0 auto var(--space-2xl) auto;
	text-align: center;
}

body.aibt-universal .universal-process--circular-cycle .universal-process__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.16em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-process--circular-cycle .universal-process__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-process--circular-cycle .universal-process__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-process--circular-cycle .universal-process__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.74;
	margin: var(--space-md) auto 0 auto !important;
	max-width: 56ch;
}

/* Cycle stage — relative anchor for the ring + hub overlay. */
body.aibt-universal .universal-process--circular-cycle .universal-process__cycle {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
}

/* Dashed accent ring suggesting the loop, centered behind the quadrants. */
body.aibt-universal .universal-process--circular-cycle .universal-process__cycle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(46vw, 360px);
	height: min(46vw, 360px);
	transform: translate(-50%, -50%) rotate(-8deg);
	border: 2px dashed color-mix(in srgb, var(--accent) 38%, transparent);
	border-radius: var(--radius-pill, 999px);
	z-index: 0;
	pointer-events: none;
}

/* The 2x2 quadrant grid. */
body.aibt-universal .universal-process--circular-cycle .universal-process__ring {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 3vw, 2rem);
	position: relative;
	z-index: 1;
}

/* Center hub badge — circular accent chip with a short label, overlaid. */
body.aibt-universal .universal-process--circular-cycle .universal-process__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: clamp(7rem, 18vw, 9.5rem);
	height: clamp(7rem, 18vw, 9.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	border-radius: var(--radius-pill, 999px);
	box-shadow: 0 0 0 8px var(--background);
	padding: var(--space-md);
}

body.aibt-universal .universal-process--circular-cycle .universal-process__hub-text {
	font-family: var(--font-display) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	/* On the solid accent chip, use the on-accent lift (KI-020 safe). */
	color: var(--on-accent, var(--text-on-dark, #fff)) !important;
	margin: 0 auto !important;
}

/* Step quadrant card. */
body.aibt-universal .universal-process--circular-cycle .universal-process__step {
	background: color-mix(in srgb, var(--ink) 3%, var(--background));
	border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	border-radius: var(--radius-lg, 16px);
	padding: clamp(1.2rem, 3vw, 1.9rem);
}

/* Pull the inner corners toward center so the hub sits in the gap. */
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n1 { text-align: left; }
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n2 { text-align: right; }
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n3 { text-align: left; }
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n4 { text-align: right; }

/* Numbered chip — small accent ring circle. */
body.aibt-universal .universal-process--circular-cycle .universal-process__num {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: var(--text-sm) !important;
	line-height: 1 !important;
	color: var(--accent) !important;
	background: var(--background) !important;
	border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent) !important;
	border-radius: var(--radius-pill, 999px) !important;
	width: 2.4rem;
	height: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--space-sm) 0 !important;
	font-variant-numeric: tabular-nums;
}

/* Mirror the chip alignment for the right-side quadrants. */
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n2 .universal-process__num,
body.aibt-universal .universal-process--circular-cycle .universal-process__step--n4 .universal-process__num {
	margin-left: auto !important;
}

body.aibt-universal .universal-process--circular-cycle h3.universal-process__step-title,
body.aibt-universal .universal-process--circular-cycle .universal-process__step-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	line-height: 1.25 !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-process--circular-cycle .universal-process__step-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.74;
	margin: 0 !important;
}

/* Phone: the ring + hub overlay stop making sense in a single column, so the
   cycle linearizes into a clean stack. Hub becomes an inline closing label. */
@media (max-width: 781px) {
	body.aibt-universal .universal-process--circular-cycle .universal-process__cycle::before {
		display: none !important;
	}
	/* Make the stage a flex column so the hub can reorder below the steps. */
	body.aibt-universal .universal-process--circular-cycle .universal-process__cycle {
		display: flex;
		flex-direction: column;
	}
	body.aibt-universal .universal-process--circular-cycle .universal-process__ring {
		grid-template-columns: 1fr;
	}
	body.aibt-universal .universal-process--circular-cycle .universal-process__step,
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n1,
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n2,
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n3,
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n4 {
		text-align: left;
	}
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n2 .universal-process__num,
	body.aibt-universal .universal-process--circular-cycle .universal-process__step--n4 .universal-process__num {
		margin-left: 0 !important;
	}
	body.aibt-universal .universal-process--circular-cycle .universal-process__hub {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		border-radius: var(--radius-pill, 999px);
		box-shadow: none;
		margin-top: var(--space-md);
		padding: var(--space-md);
		order: 5;
	}
}

/* A5: drop wide kicker tracking on narrow phones. */
@media (max-width: 640px) {
	body.aibt-universal .universal-process--circular-cycle .universal-process__kicker {
		letter-spacing: 0 !important;
	}
}