/*
 * rekos/process-steps.
 * Figma HR 614:7600 (1440 × 619) / mobile 1008:4011 (375 × 1282); same on the other 5
 * solution pages. Tokens only; literal values only for breakpoints, percentages, 1px
 * hairlines, unitless line-heights, icon geometry (48 / 40 px) and the desktop card
 * height (328 px). Rules that override theme.json element styles (h2, h3) start with
 * .rk-process-steps so they win whatever the load order.
 *
 * Background: white → surface-2 at 56 %, then surface-2 (Figma: #E9F4FD at 0 → 90 %
 * opacity over white, flattened).
 * Desktop (≥1200): padding 80; H2 centred; 56 to the line, which runs 12 above the cards.
 * 4 cards 289 wide, 24 apart (row 1228 = 94.75 % of 1296, centred), equal height, at
 * least 328 (Figma's fixed card height on all 6 pages; longer copy grows them), radius 32
 * (Figma 30), padding 24: 48 px gradient icon, 24, H20/28 bold, 12, B16/24, centred.
 * Cards 1 and 3 navy with white text, 2 and 4 white.
 * Line (Figma vector 831:14269): 1 px, Edrana gradient left → right, 12 px outside the
 * cards, corners r 20. It comes in from the left screen edge at 43 % of the card height,
 * climbs to run over card 1, drops between cards 1 and 2 to run under card 2, climbs
 * between 2 and 3, … and after the last card leaves to the right screen edge at 43 %.
 * Mobile (≤767): padding 80; H2 30/42 centred; 48 to the line top, which starts 44 above
 * card 1 at its centre. Cards 289 of 343 (84.3 %), centred, 24 apart, radius 20, padding
 * 16: 40 px icon, 16, H18/28, 12, B14/20. The line turns the same pattern by 90°: right
 * of card 1, left of card 2, …, and leaves 44 below the last card at its centre (Figma
 * vector 1008:4044).
 * Tablet (768–1199, derived): the mobile column with desktop card padding, icon and type,
 * cards at most the prose width (756).
 *
 * How the line is drawn: each card has one .rk-process-steps__line box 12 px outside it.
 * Only some sides of the box get a 1 px stroke (the border area of a masked box, the
 * .rk-btn--ring technique): desktop odd cards top + both sides (rounded top), even
 * cards bottom + both sides (rounded bottom); mobile odd cards top + right + bottom,
 * even cards top + left + bottom. Neighbouring boxes share the line in the 24 px gap.
 * Every straight end stops 20 px (the corner radius) before the neighbour's corner, so
 * no square end shows over a curve. The first and last cards add a stub to or from the
 * screen edge (desktop) or the card centre (mobile).
 * Motion: the line draws once, left → right on the desktop row, top → bottom card by card in
 * the column (view.js, § Line draw at the end).
 */

.rk-process-steps {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--20));
	background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--surface-2) 56%);
	color: var(--wp--preset--color--contrast);
}

.rk-process-steps__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rk-process-steps .rk-process-steps__heading {
	max-inline-size: 100%;
	margin: 0;
	color: inherit;
	text-align: center;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* ---------- Cards (mobile first) ---------- */

.rk-process-steps__steps {
	--rk-ps-out: var(--wp--preset--spacing--30);
	--rk-ps-radius: var(--wp--custom--radius--media);
	--rk-ps-gap: var(--wp--preset--spacing--50);
	--rk-ps-lead: var(--wp--preset--spacing--60);
	--rk-ps-stub: 43%;

	display: flex;
	flex-direction: column;
	gap: var(--rk-ps-gap);
	inline-size: 84.3%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 48 from the heading to the cards. */
.rk-process-steps__heading + .rk-process-steps__steps {
	margin-block-start: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

/* With the line: room for the start and end stubs (44 above the first card, 44 below the last). */
.rk-process-steps--line .rk-process-steps__steps {
	margin-block: calc(var(--rk-ps-lead) + var(--rk-ps-out));
}

.rk-process-steps--line .rk-process-steps__heading + .rk-process-steps__steps {
	margin-block-start: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40) + var(--rk-ps-lead) + var(--rk-ps-out));
}

.rk-process-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.rk-process-steps--alternate .rk-process-steps__step:nth-child(odd) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rk-process-steps__icon.rk-icon {
	inline-size: 40px;
	block-size: 40px;
}

.rk-process-steps__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	min-width: 0;
}

.rk-process-steps .rk-process-steps__title {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.556;
	text-transform: none;
	overflow-wrap: break-word;
}

.rk-process-steps__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
	overflow-wrap: break-word;
}

.rk-process-steps__empty {
	padding: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- Decorative line: shared ---------- */

.rk-process-steps__line,
.rk-process-steps__stub {
	position: absolute;
	z-index: -1;
	background-image: var(--wp--preset--gradient--edrana);
	background-repeat: no-repeat;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* ---------- Decorative line: mobile and tablet (top → bottom) ---------- */

@media (max-width: 1199px) {
	/*
	 * Each piece's side cut (where a neighbour's corner is, set per piece below as
	 * --rk-ps-clip-l / -r) is one clip, so the line draw (§ Line draw) can keep it.
	 */
	.rk-process-steps__line,
	.rk-process-steps__stub {
		clip-path: inset(0 var(--rk-ps-clip-r, 0px) 0 var(--rk-ps-clip-l, 0px));
	}

	/* 1px taller than the card + 2 × 12, so a card's bottom stroke and the next card's top
	   stroke cover the same pixel row (not two adjacent rows). */
	.rk-process-steps__line {
		inset: calc(-1 * var(--rk-ps-out)) calc(-1 * var(--rk-ps-out)) calc(-1 * var(--rk-ps-out) - 1px);
		background-size: 100% 100%;
	}

	/* Odd cards: stroke top, right, bottom; the left 20 px are cut (the neighbour's corner). */
	.rk-process-steps__step:nth-child(odd) > .rk-process-steps__line {
		--rk-ps-clip-l: var(--rk-ps-radius);
		padding: 1px 1px 1px 0;
		border-radius: 0 var(--rk-ps-radius) var(--rk-ps-radius) 0;
	}

	/* Even cards: stroke top, left, bottom; the right 20 px are cut. */
	.rk-process-steps__step:nth-child(even) > .rk-process-steps__line {
		--rk-ps-clip-r: var(--rk-ps-radius);
		padding: 1px 0 1px 1px;
		border-radius: var(--rk-ps-radius) 0 0 var(--rk-ps-radius);
	}

	/* First card (and a last odd card): its lines start right of the centre stub's curve. */
	.rk-process-steps__step:first-child > .rk-process-steps__line,
	.rk-process-steps__step:last-child:nth-child(odd) > .rk-process-steps__line {
		--rk-ps-clip-l: calc(50% + var(--rk-ps-radius));
	}

	.rk-process-steps__step:last-child:nth-child(even) > .rk-process-steps__line {
		--rk-ps-clip-r: calc(50% + var(--rk-ps-radius));
	}

	/*
	 * Stubs: from the card centre to one outer edge = half the line box, so a 200 % wide
	 * gradient aligned to that edge matches the main line's gradient.
	 */
	.rk-process-steps__stub {
		block-size: calc(var(--rk-ps-lead) + 1px);
		background-size: 200% 100%;
	}

	/* Down from 44 above the card centre, curving right into the top line. */
	.rk-process-steps__stub--start {
		--rk-ps-clip-r: var(--rk-ps-radius);
		top: calc(-1 * (var(--rk-ps-out) + var(--rk-ps-lead)));
		right: calc(-1 * var(--rk-ps-out));
		left: 50%;
		padding: 0 0 1px 1px;
		border-bottom-left-radius: var(--rk-ps-radius);
		background-position: 100% 0;
	}

	/* After an even (left-stroked) card: the bottom line curves down at the centre. */
	.rk-process-steps__step:nth-child(even) > .rk-process-steps__stub--end {
		--rk-ps-clip-l: var(--rk-ps-radius);
		top: calc(100% + var(--rk-ps-out));
		right: 50%;
		left: calc(-1 * var(--rk-ps-out));
		padding: 1px 1px 0 0;
		border-top-right-radius: var(--rk-ps-radius);
		background-position: 0 0;
	}

	/* After an odd (right-stroked) card: mirrored. */
	.rk-process-steps__step:nth-child(odd) > .rk-process-steps__stub--end {
		--rk-ps-clip-r: var(--rk-ps-radius);
		top: calc(100% + var(--rk-ps-out));
		right: calc(-1 * var(--rk-ps-out));
		left: 50%;
		padding: 1px 0 0 1px;
		border-top-left-radius: var(--rk-ps-radius);
		background-position: 100% 0;
	}
}

/* ---------- Tablet (derived) and desktop: card size and type ---------- */

@media (min-width: 768px) {
	.rk-process-steps {
		padding-block: var(--wp--preset--spacing--80);
	}

	.rk-process-steps__steps {
		inline-size: min(84.3%, var(--wp--custom--layout--prose));
	}

	.rk-process-steps__step {
		gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-process-steps__icon.rk-icon {
		inline-size: 48px;
		block-size: 48px;
	}

	.rk-process-steps .rk-process-steps__title {
		line-height: 1.4;
	}

	.rk-process-steps__text {
		line-height: 1.5;
	}
}

/* ---------- Desktop: one row; the line runs left → right ---------- */

@media (min-width: 1200px) {
	.rk-process-steps__steps {
		display: grid;
		grid-template-columns: repeat(var(--rk-ps-n, 4), minmax(0, 1fr));
		inline-size: 94.75%;
	}

	/* Figma cards are a fixed 328 high (831:16264, 831:16373, 831:16519); mobile hugs the copy. */
	.rk-process-steps__step {
		min-block-size: 328px;
	}

	.rk-process-steps__heading + .rk-process-steps__steps {
		margin-block-start: var(--wp--preset--spacing--70);
	}

	.rk-process-steps--line .rk-process-steps__steps {
		margin-block: var(--rk-ps-out);
	}

	.rk-process-steps--line .rk-process-steps__heading + .rk-process-steps__steps {
		margin-block-start: calc(var(--wp--preset--spacing--70) + var(--rk-ps-out));
	}

	/*
	 * Each box is card + 12 left + 13 right: the extra 1px puts a card's right stroke and
	 * the next card's left stroke on the same pixel column (not two adjacent columns).
	 * One gradient across the whole row: the image is the row width + 25 and is shifted by
	 * this card's position (--rk-ps-pos from render.php: index / (count − 1)), which works
	 * out to exactly −index × (card + gap).
	 */
	.rk-process-steps__line {
		right: calc(-1 * var(--rk-ps-out) - 1px);
		left: calc(-1 * var(--rk-ps-out));
		background-size: calc(var(--rk-ps-n, 4) * (100% - 2 * var(--rk-ps-out) - 1px) + (var(--rk-ps-n, 4) - 1) * var(--rk-ps-gap) + 2 * var(--rk-ps-out) + 1px) 100%;
		background-position: var(--rk-ps-pos, 0%) 0;
	}

	/* Odd cards: stroke over the top (rounded) and down both sides to 8 above the bottom line. */
	.rk-process-steps__step:nth-child(odd) > .rk-process-steps__line {
		top: calc(-1 * var(--rk-ps-out));
		bottom: calc(var(--rk-ps-radius) - var(--rk-ps-out));
		padding: 1px 1px 0;
		border-radius: var(--rk-ps-radius) var(--rk-ps-radius) 0 0;
	}

	/* Even cards: stroke under the bottom (rounded) and up both sides to 8 below the top line. */
	.rk-process-steps__step:nth-child(even) > .rk-process-steps__line {
		top: calc(var(--rk-ps-radius) - var(--rk-ps-out));
		bottom: calc(-1 * var(--rk-ps-out));
		padding: 0 1px 1px;
		border-radius: 0 0 var(--rk-ps-radius) var(--rk-ps-radius);
	}

	/* First card (and a last odd card): the sides stop where the screen-edge stub curves in. */
	.rk-process-steps__step:first-child > .rk-process-steps__line,
	.rk-process-steps__step:last-child:nth-child(odd) > .rk-process-steps__line {
		bottom: calc(100% - var(--rk-ps-stub) + var(--rk-ps-radius));
	}

	.rk-process-steps__step:last-child:nth-child(even) > .rk-process-steps__line {
		top: calc(var(--rk-ps-stub) + var(--rk-ps-radius));
	}

	/*
	 * Stubs to the screen edges, at 43 % of the card height (the section clips them).
	 * Solid ends of the gradient: accent on the left, primary on the right.
	 */
	.rk-process-steps__stub {
		inline-size: 100vw;
		block-size: calc(var(--rk-ps-radius) + 1px);
		background-image: none;
	}

	.rk-process-steps__stub--start {
		top: calc(var(--rk-ps-stub) - var(--rk-ps-radius));
		right: calc(100% + var(--rk-ps-out) - 1px);
		padding: 0 1px 1px 0;
		border-bottom-right-radius: var(--rk-ps-radius);
		background-color: var(--wp--preset--color--accent);
	}

	.rk-process-steps__step:nth-child(even) > .rk-process-steps__stub--end {
		top: var(--rk-ps-stub);
		left: calc(100% + var(--rk-ps-out));
		padding: 1px 0 0 1px;
		border-top-left-radius: var(--rk-ps-radius);
		background-color: var(--wp--preset--color--primary);
	}

	.rk-process-steps__step:nth-child(odd) > .rk-process-steps__stub--end {
		top: calc(var(--rk-ps-stub) - var(--rk-ps-radius));
		left: calc(100% + var(--rk-ps-out));
		padding: 0 0 1px 1px;
		border-bottom-left-radius: var(--rk-ps-radius);
		background-color: var(--wp--preset--color--primary);
	}
}

/*
 * ---------- Line draw (view.js) ----------
 * The decorative line draws itself once, the same technique and timing as every background
 * line of the theme (problem-solution-cards § Motion): a clip-path inset() wipe, 2400 ms,
 * ease-in-out. The line is one box per card plus the two stubs, so view.js gives each piece
 * its offset in the wipe (--rk-ps-draw-o) and the wipe's length (--rk-ps-draw-s) in px, and
 * the clip edges of all pieces move as one.
 * - Desktop row: left → right from the section's left edge to its right edge, when the first
 *   card's top passes 90 % of the window; vertical strokes appear as the wipe passes them.
 * - Tablet / phone column: top → bottom, card by card as each card scrolls in (cards that come
 *   in together share one wipe). The column pieces keep their static side cuts
 *   (--rk-ps-clip-l / -r) during the wipe.
 * Same contract as base.css § Motion: everything needs html.has-motion (head.js: JS and no
 * prefers-reduced-motion) on screen. view.js sets .is-armed on every piece when it takes over,
 * .is-drawn when its wipe starts and .is-done at the end; it never removes a class. Before
 * .is-armed a hold keeps the line hidden 2 s and then shows it (script missing, late or
 * failed). The wipe ends on the whole piece, then the piece's own clip: the static design.
 * Only clip-path and visibility change: no layout shift. The cards keep their own reveal
 * (motion.js), so the line inside them fades in with them.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	html.has-motion :is(.rk-process-steps__line, .rk-process-steps__stub):not(.is-armed) {
		animation: rk-ps-line-hold 2600ms;
	}

	html.has-motion :is(.rk-process-steps__line, .rk-process-steps__stub).is-armed:not(.is-drawn):not(.is-done) {
		clip-path: inset(50%);
	}

	html.has-motion :is(.rk-process-steps__line, .rk-process-steps__stub).is-drawn:not(.is-done) {
		animation: rk-ps-draw-y 2400ms cubic-bezier(0.45, 0, 0.55, 1) backwards; /* Otilija 2026-10-08: slower, even draw (was 2400 ms, ease-in-out) */
	}
}

@media screen and (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
	html.has-motion :is(.rk-process-steps__line, .rk-process-steps__stub).is-drawn:not(.is-done) {
		animation-name: rk-ps-draw-x;
	}
}

/* No 100 % keyframe: it ends on the line's own value (visible), at 2 s. */
@keyframes rk-ps-line-hold {
	0%,
	77% {
		visibility: hidden;
	}
}

/* Row: from the section's left edge to its right edge; then the piece's own value (no clip). */
@keyframes rk-ps-draw-x {
	from {
		clip-path: inset(-1px calc(100% + var(--rk-ps-draw-o, 0px)) -1px calc(-1 * var(--rk-ps-draw-o, 0px)));
	}

	to {
		clip-path: inset(-1px calc(100% + var(--rk-ps-draw-o, 0px) - var(--rk-ps-draw-s, 100%)) -1px calc(-1 * var(--rk-ps-draw-o, 0px)));
	}
}

/* Column: from the top of the wipe to its bottom, with the piece's side cuts; then its own clip. */
@keyframes rk-ps-draw-y {
	from {
		clip-path: inset(calc(-1 * var(--rk-ps-draw-o, 0px)) var(--rk-ps-clip-r, 0px) calc(100% + var(--rk-ps-draw-o, 0px)) var(--rk-ps-clip-l, 0px));
	}

	to {
		clip-path: inset(calc(-1 * var(--rk-ps-draw-o, 0px)) var(--rk-ps-clip-r, 0px) calc(100% + var(--rk-ps-draw-o, 0px) - var(--rk-ps-draw-s, 100%)) var(--rk-ps-clip-l, 0px));
	}
}