/*
 * Section: Process.
 *
 * Loaded only on pages carrying the `process` layout.
 *
 * Design: _design/SharpQuery Process.dc.html. Concrete band, numbered phases
 * on a rail, trust callout underneath.
 *
 * The rail is the whole idea. Without it three phases side by side read as
 * three unrelated columns; with it they read as one sequence. It is therefore
 * present at every width — horizontal at desktop, vertical on mobile — and is
 * drawn in CSS rather than shipped as an image so it inherits the band colour.
 */


.process__inner {
	display: flex;
	flex-direction: column;
	gap: 1.625rem; /* 26 */
}

.process__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	max-width: 53.75rem; /* 860 */
}

.process__header > * {
	margin: 0;
}


.process__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.96;
}


/* ============================================================= PHASES ==
 *
 * Mobile: a vertical rail. The marker column is fixed width, the line fills
 * whatever height the copy needs, so the rail always reaches the next marker
 * however long a phase runs.
 */

.process__phases {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.phase {
	display: grid;
	grid-template-columns: 3rem 1fr; /* 48 */
	gap: 0 var(--sq-space-4);
	margin: 0;
}

.phase__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-column: 1;
}

.phase__number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3rem;  /* 48 */
	height: 3rem;
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
	font-family: var(--sq-font-display);
	font-size: 1.6875rem; /* 27 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
}

/* The destination, per the comp — the last marker is the one you are aiming at. */
.phase--last .phase__number {
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-orange);
}

.phase__line {
	flex: 1 1 auto;
	width: 4px;
	min-height: var(--sq-space-5);
	background-color: var(--sq-color-ink);
}

/* The last phase terminates rather than pointing onward. */
.phase--last .phase__line {
	flex: 0 0 var(--sq-space-5);
}

/* Arrow into the next phase, drawn with borders so it scales with the rail. */
.phase__tip {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 10px solid var(--sq-color-ink);
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
}

.phase--last .phase__tip {
	width: 14px;
	height: 14px;
	border: 0;
	background-color: var(--sq-color-ink);
}

.phase__content {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	grid-column: 2;
	padding-bottom: var(--sq-space-6);
}

.phase:last-child .phase__content {
	padding-bottom: 0;
}

.phase__title {
	margin: 0;
	font-family: var(--sq-font-display);
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem); /* 26 → 32 */
	font-weight: var(--sq-weight-bold);
	line-height: 1.05;
	text-transform: uppercase;
}

/*
 * Timeframe.
 *
 * Rendered on every phase when any phase has one, empty ones aria-hidden, so
 * side-by-side phases keep their baselines. min-height rather than content
 * keeps an empty one exactly as tall as a filled one.
 */
.phase__timeframe {
	min-height: 1.5em;
	margin: 0;
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.5;
	text-transform: uppercase;
}

.phase__body > * {
	margin: 0;
	max-width: var(--sq-measure);
}

.phase__body > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================ CALLOUT ==
 *
 * The trust moment. Set larger than body copy so it stops the eye, and padded
 * flow content with no fixed height so two paragraphs and four both work.
 */

.process__callout {
	padding: var(--sq-space-5);
	max-width: 62.5rem; /* 1000 */
}

.process__callout-body > * {
	margin: 0;
	font-size: var(--sq-text-lead);
	line-height: 1.45;
}

.process__callout-body > * + * {
	margin-top: var(--sq-space-4);
}

/* A bold lead-in is how an editor labels the callout — give it the colour the
 * comp uses for that label. */
.process__callout-body strong {
	color: var(--sq-color-blue);
}

.process__callout--bordered {
	border: 3px solid var(--sq-color-ink);
	background-color: var(--sq-color-paper);
	box-shadow: var(--sq-shadow-raised);
}

.process__callout--filled {
	border: 3px solid var(--sq-color-ink);
	background-color: var(--sq-color-ink);
}

.process__callout--filled .process__callout-body strong {
	color: var(--sq-accent);
}

.process__callout--subtle {
	border-left: var(--sq-border-width-accent) solid var(--sq-color-blue);
	background-color: var(--sq-color-surface-raised);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.process__inner {
		gap: 2.75rem; /* 44 */
	}

	.process__header {
		gap: 0.875rem; /* 14 */
	}


	.process__heading {
		line-height: 0.98;
		letter-spacing: var(--sq-tracking-display);
	}

	.process__callout {
		padding: 1.875rem 2rem; /* 30 32 */
	}

	/*
	 * Horizontal. grid-auto-flow: column puts every phase in one row without
	 * the stylesheet needing to know how many there are.
	 *
	 * Five is excluded: at 1180px five columns leaves about 200px each, which
	 * is roughly twenty characters a line. That is below the readability floor
	 * in CLAUDE.md, so a five-phase process stays a vertical rail. Nothing
	 * else here depends on the count.
	 */
	.process--phases-2 .process__phases,
	.process--phases-3 .process__phases,
	.process--phases-4 .process__phases {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: var(--sq-space-6); /* 32 */
	}

	.process--phases-2 .phase,
	.process--phases-3 .phase,
	.process--phases-4 .phase {
		display: flex;
		flex-direction: column;
		gap: 1.125rem; /* 18 */
	}

	/* The rail turns to run along the top of each column. */
	.process--phases-2 .phase__rail,
	.process--phases-3 .phase__rail,
	.process--phases-4 .phase__rail {
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	.process--phases-2 .phase__number,
	.process--phases-3 .phase__number,
	.process--phases-4 .phase__number {
		width: 3.75rem;  /* 60 */
		height: 3.75rem;
		font-size: 2.125rem; /* 34 */
	}

	.process--phases-2 .phase__line,
	.process--phases-3 .phase__line,
	.process--phases-4 .phase__line {
		width: auto;
		height: 4px;
		min-height: 0;
	}

	.process--phases-2 .phase--last .phase__line,
	.process--phases-3 .phase--last .phase__line,
	.process--phases-4 .phase--last .phase__line {
		flex: 1 1 auto;
	}

	/* Arrow rotates to point at the next column. */
	.process--phases-2 .phase__tip,
	.process--phases-3 .phase__tip,
	.process--phases-4 .phase__tip {
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 10px solid var(--sq-color-ink);
		border-right: 0;
	}

	.process--phases-2 .phase--last .phase__tip,
	.process--phases-3 .phase--last .phase__tip,
	.process--phases-4 .phase--last .phase__tip {
		border: 0;
	}

	.process--phases-2 .phase__content,
	.process--phases-3 .phase__content,
	.process--phases-4 .phase__content {
		padding-bottom: 0;
	}
}