/* The hire process as a journey (design review, 15 Oct 2026) — the Applications page's five
 * steps stacked down the centre of the page, "one, two, three, four, five in the middle,
 * taking you on a journey", in place of the five-column grid.
 *
 * The markup is page content written by `wp powershift hirejourney`: a .pwr-journey group on a
 * 560px measure holding one .pwr-journey__step group per step, each with its number badge
 * (a numeral glyph in the stroked hexagon since glyphs v2, 2 Nov — `wp powershift iconglyphs`), a bold title paragraph and a text paragraph — lifted out of the old
 * columns unchanged. This file only lays them out.
 *
 * The line down the middle runs the brand ramp, orange to green, the same way the marker rail
 * does on the products index and the service model: the first conversation at the orange end,
 * the steady state once the unit is on site at the green. The badges are padded in the page
 * ground so the line appears to pass behind each one rather than through its number. */

.pwr-journey {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	text-align: center;
	--pwr-journey-badge: 84px; /* the number glyphs are placed at this size in the content */
}
.pwr-journey::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(var(--pwr-journey-badge) / 2);
	bottom: calc(var(--pwr-journey-badge) / 2);
	width: 3px;
	transform: translateX(-50%);
	background: linear-gradient(180deg,
		var(--wp--preset--color--orange-dark) 0%,
		var(--wp--preset--color--orange) 30%,
		var(--wp--preset--color--orange-light) 50%,
		var(--wp--preset--color--green-light) 75%,
		var(--wp--preset--color--green) 100%);
	pointer-events: none;
}

/* The pulse (Wayne, 2 Nov: "the small line between the stacks pulses across to draw the eye").
   A bright segment runs down the line, top to bottom, on a loop — and since the steps sit on
   the ground over the line, it shows only in the gaps, so it reads as a light passing from one
   number to the next. It starts when the journey scrolls into view: journey.js adds .is-live
   while it is on screen and takes it off when it leaves, so the loop is never running unseen.
   The steps are lifted over both pseudo-elements; the pulse is ::after, so on its own it would
   paint OVER them. Reduced motion: no pulse, the line as it was. */
.pwr-journey::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(var(--pwr-journey-badge) / 2);
	bottom: calc(var(--pwr-journey-badge) / 2);
	width: 3px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--base) 50%, transparent) no-repeat;
	background-size: 100% 18%;
	background-position: 0 -30%;
	filter: drop-shadow(0 0 4px var(--wp--preset--color--orange-light));
	opacity: 0;
	pointer-events: none;
}
.pwr-journey.is-live::after {
	opacity: 1;
	animation: pwr-journey-pulse 4.2s cubic-bezier(0.45, 0, 0.55, 1) 0.4s infinite;
}
@keyframes pwr-journey-pulse {
	0%   { background-position: 0 -30%; }
	75%  { background-position: 0 130%; }
	100% { background-position: 0 130%; }
}
@media (prefers-reduced-motion: reduce) {
	.pwr-journey.is-live::after { animation: none; opacity: 0; }
}

/* The whole step sits on the page ground, so the line shows only in the gaps BETWEEN steps —
   badge to badge — and never runs behind the words (measured on the first cut: it did). */
.pwr-journey__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--xs); /* each step is a Stack (tight) group: number, title and text read as one unit */
	padding-block: var(--wp--preset--spacing--s);
	background: var(--wp--preset--color--contrast);
	z-index: 1;
}
.pwr-journey__step > .wp-block-image,
.pwr-journey__step > .pwr-glyph-block {
	margin: 0;
}
.pwr-journey__step > .wp-block-image img { clip-path: none; display: block; }

/* The title: the old columns set it as a bold paragraph with a line break; it keeps that
   markup and takes the H4 voice. The text under it holds a reading measure. */
.pwr-journey__step > p:nth-of-type(1) {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 900;
	line-height: var(--wp--custom--leading--xl);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-transform: uppercase;
}
.pwr-journey__step > p:nth-of-type(1) strong { font-weight: inherit; }
.pwr-journey__step > p:nth-of-type(2) {
	margin: 0;
	max-width: 44ch;
	font-weight: 300;
}

/* DESKTOP: ACROSS (Wayne, 2 Nov: "horizontal on desktop — each step is a stack — vertical on
   mobile"). Everything above is the phone layout; from 1024px the five steps sit in a row on
   the wide measure, the line runs left to right from the first number's centre to the last's,
   and the pulse travels along it the same way. The steps stop painting the ground — in a row
   the line only crosses them at number height, so the NUMBER carries the ground instead, padded
   so the line stops just short of each ring. The page content sets the journey's contentSize to
   560px for the phone column; two classes here outrank core's :where() layout rule. */
@media (min-width: 1024px) {
	.pwr-journey-section .pwr-journey {
		max-width: var(--wp--style--global--wide-size);
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--l);
		--pwr-journey-gap: var(--wp--preset--spacing--l);
		--pwr-journey-col: calc((100% - 4 * var(--pwr-journey-gap)) / 5);
	}
	.pwr-journey-section .pwr-journey > .pwr-journey__step {
		max-width: none;
		margin: 0;
		align-content: start;
		background: none;
	}
	.pwr-journey__step > .pwr-glyph-block {
		padding-inline: var(--wp--preset--spacing--xs);
		background: var(--wp--preset--color--contrast);
	}
	.pwr-journey::before,
	.pwr-journey::after {
		left: calc(var(--pwr-journey-col) / 2);
		right: calc(var(--pwr-journey-col) / 2);
		top: calc(var(--wp--preset--spacing--s) + var(--pwr-journey-badge) / 2);
		bottom: auto;
		width: auto;
		height: 3px;
		transform: translateY(-50%);
	}
	.pwr-journey::before {
		background: linear-gradient(90deg,
			var(--wp--preset--color--orange-dark) 0%,
			var(--wp--preset--color--orange) 30%,
			var(--wp--preset--color--orange-light) 50%,
			var(--wp--preset--color--green-light) 75%,
			var(--wp--preset--color--green) 100%);
	}
	.pwr-journey::after {
		background-image: linear-gradient(90deg, transparent, var(--wp--preset--color--base) 50%, transparent);
		background-size: 18% 100%;
		background-position: -30% 0;
	}
	.pwr-journey.is-live::after {
		animation-name: pwr-journey-pulse-across;
	}
	.pwr-journey__step > p:nth-of-type(2) {
		max-width: 28ch;
	}
}
@keyframes pwr-journey-pulse-across {
	0%   { background-position: -30% 0; }
	75%  { background-position: 130% 0; }
	100% { background-position: 130% 0; }
}

/* The hexagons follow the line (meeting, 3 Nov: "could the hexagon outlines run orange to
   yellow to green like the line between them?"). Each step's glyph takes the ramp's colour at
   its place along the line — core orange first (orange-dark is the hover step only), the light
   orange in the middle, green last — and the numeral inside keeps its own ink. !important
   because the block's text-colour class (has-orange-color) is itself !important. */
.pwr-journey > .pwr-journey__step:nth-child(1) > .pwr-glyph-block { color: var(--wp--preset--color--orange) !important; }
.pwr-journey > .pwr-journey__step:nth-child(2) > .pwr-glyph-block { color: color-mix(in srgb, var(--wp--preset--color--orange) 50%, var(--wp--preset--color--orange-light)) !important; }
.pwr-journey > .pwr-journey__step:nth-child(3) > .pwr-glyph-block { color: var(--wp--preset--color--orange-light) !important; }
.pwr-journey > .pwr-journey__step:nth-child(4) > .pwr-glyph-block { color: var(--wp--preset--color--green-light) !important; }
.pwr-journey > .pwr-journey__step:nth-child(n+5) > .pwr-glyph-block { color: var(--wp--preset--color--green) !important; }