/* ==========================================================================
   Stravum Builder — Process Timeline (widgets/process-timeline.php)

   PART FILE. Enqueued automatically by st_builder_enqueue_parts() (it globs
   assets/parts/*.css), on the front end and inside the editor canvas.

   Structural minimum + Digital Vanguard dark defaults only. All per-instance
   styling comes from the style engine (control `selectors`), emitted in a
   later <style> element inside the block markup — so engine rules must win.
   That is why every selector the engine also targets is kept to at most TWO
   classes here: the engine's version is `.st-el-{uid} .st-ptl…` (also two) and
   the later stylesheet wins on a tie. Never add a third class (or an id) to
   those selectors — the only three-class rules below set grid-column and
   text-align, which no control targets.

   No Tailwind utilities: the compiled tailwind.css cannot be rebuilt on this
   host, so visuals are plain CSS against the same token values theme.json
   ships.
   ========================================================================== */

.st-ptl {
	--st-ptl-node: 56px;
	--st-ptl-accent: #fd5b38;
	--st-ptl-line: #44474e;
	--st-ptl-low: #191c23;
	--st-ptl-white: #ffffff;
	--st-ptl-text: #a9adc1;
	--st-ptl-border: rgba(255, 255, 255, 0.08);
	min-width: 0;
}

/* ================================================================== Header. */
.st-ptl-head {
	max-width: 680px;
	margin: 0 auto 56px;
	text-align: center;
}

.st-ptl-heading {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--st-ptl-white);
}

.st-ptl-intro {
	margin: 16px 0 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--st-ptl-text);
}

/* =================================================================== Track. */
.st-ptl-track {
	position: relative;
}

/* Decorative spine. Stops at the first/last node centres rather than running
   past them. Explicit z-index (rather than relying on default `auto`) so the
   stacking order against .st-ptl-node below is deterministic: an absolutely
   positioned element with z-index:auto still paints ABOVE normal-flow,
   non-positioned siblings regardless of DOM order, which is what let the line
   cut through the node numbers before .st-ptl-node was made a positioned
   element with a higher z-index. */
.st-ptl-line {
	position: absolute;
	z-index: 0;
	top: calc(var(--st-ptl-node) / 2);
	bottom: calc(var(--st-ptl-node) / 2);
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background-color: var(--st-ptl-line);
	background-image: linear-gradient(180deg, rgba(253, 91, 56, 0.55) 0%, rgba(253, 91, 56, 0) 100%);
	pointer-events: none;
}

.st-ptl-list {
	display: grid;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each step is its own three-track grid: card | node | card. The node always
   sits in the middle track so it lands exactly on the spine. */
.st-ptl-item {
	display: grid;
	grid-template-columns: 1fr var(--st-ptl-node) 1fr;
	column-gap: 40px;
	align-items: start;
	margin: 0;
	list-style: none;
}

.st-ptl-item::marker {
	content: "";
}

/* ---- Layout only (grid-column / text-align): no control targets these, so
   the extra class here cannot outrank the style engine. ---- */
.st-ptl-item > .st-ptl-node {
	grid-column: 2;
	grid-row: 1;
}

.st-ptl-item.is-start > .st-ptl-card {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
}

.st-ptl-item.is-end > .st-ptl-card {
	grid-column: 3;
	grid-row: 1;
	text-align: left;
}

/* ==================================================================== Node. */
.st-ptl-node {
	/* `position: relative` + explicit z-index makes this a positioned element
	   that outranks .st-ptl-line (z-index: 0) in the stacking order, so the
	   opaque node circle fully occludes the spine instead of the line's
	   `position: absolute` letting it paint on top by default. Does not
	   affect grid placement — .st-ptl-item > .st-ptl-node still sets
	   grid-column/grid-row above. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--st-ptl-node);
	height: var(--st-ptl-node);
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid rgba(253, 91, 56, 0.45);
	background-color: var(--st-ptl-low);
	box-shadow: 0 0 0 6px rgba(253, 91, 56, 0.08);
}

.st-ptl-num {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--st-ptl-accent);
}

/* ==================================================================== Card. */
.st-ptl-card {
	min-width: 0;
	padding: 4px 0 0;
}

.st-ptl-title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--st-ptl-white);
}

.st-ptl-desc {
	margin: 10px 0 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--st-ptl-text);
}

/* ====================================== Tablet + mobile: single left rail. */
@media (max-width: 1024px) {
	.st-ptl-line {
		left: calc(var(--st-ptl-node) / 2);
		margin-left: -1px;
	}

	.st-ptl-list {
		gap: 36px;
	}

	.st-ptl-item {
		grid-template-columns: var(--st-ptl-node) minmax(0, 1fr);
		column-gap: 24px;
	}

	.st-ptl-item > .st-ptl-node {
		grid-column: 1;
	}

	.st-ptl-item.is-start > .st-ptl-card,
	.st-ptl-item.is-end > .st-ptl-card {
		grid-column: 2;
		text-align: left;
	}
}

@media (max-width: 767px) {
	.st-ptl {
		--st-ptl-node: 46px;
	}

	.st-ptl-head {
		margin-bottom: 40px;
	}

	.st-ptl-heading {
		font-size: 30px;
	}

	.st-ptl-item {
		column-gap: 18px;
	}

	.st-ptl-title {
		font-size: 19px;
	}

	.st-ptl-desc {
		font-size: 15px;
	}
}