/* ==========================================================================
   Process — The Full Timeline (neilkelly/process-timeline)
   Figma: Full Timeline (6272:883). Copy column 510 on the left, three duration
   tracks 689 wide on the right, 49 between them. Token-driven, plain CSS.
   Wrapper: .wp-block-neilkelly-process-timeline.nk-process-timeline
   ========================================================================== */
.wp-block-neilkelly-process-timeline.nk-process-timeline {
	padding: var(--wp--custom--components--process-page--tl-pad-top) var(--wp--preset--spacing--gutter) var(--wp--custom--components--process-page--tl-pad-bottom);
	background: var(--wp--preset--color--surface-card);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__container {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--components--process-page--tl-column-gap);
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__copy {
	flex: 0 0 var(--wp--custom--components--process-page--tl-copy-width);
	max-width: var(--wp--custom--components--process-page--tl-copy-width);
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__heading {
	/* Size + case from the shared .nk-headline--content class. */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xl-tight);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__body {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--ink-secondary);
	margin: var(--wp--preset--spacing--6) 0 0;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__note {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
	margin: var(--wp--preset--spacing--6) 0 0;
}

/* Tracks ------------------------------------------------------------------ */
.wp-block-neilkelly-process-timeline .nk-process-timeline__tracks {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--process-page--tl-row-gap);
	list-style: none;
	margin: var(--wp--custom--components--process-page--tl-tracks-top) 0 0;
	padding: 0;
	max-width: var(--wp--custom--components--process-page--tl-track-width);
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__track-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__label {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
	text-transform: capitalize;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__duration {
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
	white-space: nowrap;
}

/* The rule is the whole schedule; the fill is this phase's share of it. */
.wp-block-neilkelly-process-timeline .nk-process-timeline__rule {
	display: block;
	position: relative;
	height: var(--wp--custom--components--process-page--tl-rule-height);
	margin-block-start: var(--wp--custom--components--process-page--tl-rule-gap);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--border-subtle);
	overflow: hidden;
}

.wp-block-neilkelly-process-timeline .nk-process-timeline__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	/* Per-phase share arrives as a custom property from render.php — a dynamic
	   per-instance value, which is the documented exception to the no-inline rule. */
	width: var(--nk-timeline-fill, 0%);
	border-radius: inherit;
	background: var(--wp--preset--color--brand-red);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
	/* 36 at tablet, with the rest of the page's headings (50/36/28). */
	.wp-block-neilkelly-process-timeline .nk-process-timeline__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.wp-block-neilkelly-process-timeline .nk-process-timeline__container {
		flex-direction: column;
		gap: var(--wp--preset--spacing--10);
	}
	.wp-block-neilkelly-process-timeline .nk-process-timeline__copy,
	.wp-block-neilkelly-process-timeline .nk-process-timeline__tracks {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
	.wp-block-neilkelly-process-timeline .nk-process-timeline__tracks { margin-block-start: 0; }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-process-timeline.nk-process-timeline {
		padding-inline: var(--wp--preset--spacing--6);
	}

	/* Steps down with nk-process-intro__heading on this page — without this the
	   heading keeps the 50px it takes from .nk-headline--content at every width. */
	.wp-block-neilkelly-process-timeline .nk-process-timeline__heading {
		font-size: var(--wp--preset--font-size--xl-sm);
	}
}

.wp-block-neilkelly-process-timeline { margin-block: 0; }