/**
 * AdepaTrade — engineering line language.
 * Process stages · From Pole to Plug path · convergence SVG · reveal states.
 * Graphics are conceptual; they render complete without JS / with reduced motion.
 */

.adepa-graphic-caption {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

/* =========================================================
 * Process stages — connected line + red circular nodes (profile p14)
 * One connector per step (node centre → next node centre), so the line always starts
 * at 01 and ends exactly at 06, whatever the text lengths.
 *   < 782px  vertical: nodes on the left, one straight line.
 *   ≥ 782px  3 + 3 serpentine (W1B-R1): 01 → 02 → 03 left-to-right, a continuous
 *            "]" turn through the right gutter from 03 down to 04, then 04 → 05 → 06
 *            right-to-left. DOM / reading order stays 01 … 06; only the grid placement
 *            of 04–06 is mirrored. Small arrowheads mark the direction of travel.
 * ========================================================= */
.adepa-process { margin-block: var(--wp--preset--spacing--70); }
.adepa-process__head > * + * { margin-top: var(--wp--preset--spacing--40); }
.adepa-process__steps {
	--node: 56px;
	--ring: 6px;
	--col-gap: var(--wp--preset--spacing--50);
	--row-gap: var(--wp--preset--spacing--60);
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--col-gap);
	row-gap: var(--row-gap);
	margin-top: var(--wp--preset--spacing--60) !important;
}
.adepa-process__steps > * { margin: 0 !important; }
.adepa-process__step { position: relative; padding-left: calc(var(--node) + var(--wp--preset--spacing--40)); min-height: var(--node); }
.adepa-process__step > * { margin: 0; }
/* connector: vertical on phones (to the next step's node, across the row gap) */
.adepa-process__step:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(var(--node) / 2 - 1px);
	top: calc(var(--node) / 2);
	width: 2px;
	height: calc(100% + var(--row-gap));
	background: var(--wp--preset--color--brand-red);
	transform-origin: top center;
	transition: transform 360ms var(--adepa-ease) calc(var(--step, 0) * 60ms), clip-path 420ms var(--adepa-ease) calc(var(--step, 0) * 60ms);
}
.adepa-process__step:nth-child(2) { --step: 1; }
.adepa-process__step:nth-child(3) { --step: 2; }
.adepa-process__step:nth-child(4) { --step: 3; }
.adepa-process__step:nth-child(5) { --step: 4; }
.adepa-process__step:nth-child(6) { --step: 5; }
.adepa-process .adepa-process__node {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: var(--node);
	height: var(--node);
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 var(--ring) var(--wp--preset--color--white);
	z-index: 1;
	opacity: 1; /* nodes are never faded: only the connectors animate */
}
.adepa-process__title {
	padding-top: 0.875rem;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.adepa-process__text { margin-top: var(--wp--preset--spacing--20) !important; max-width: 34ch; color: var(--wp--preset--color--grey-700); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

@media (min-width: 782px) {
	.adepa-process__steps {
		--col-gap: var(--wp--preset--spacing--70);
		--row-gap: var(--wp--preset--spacing--70);
		--turn: clamp(2rem, 3.2vw, 3rem);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-right: var(--turn);
		margin-top: var(--wp--preset--spacing--70) !important;
	}
	.adepa-process__step { padding-left: 0; padding-top: calc(var(--node) + var(--wp--preset--spacing--40)); }
	.adepa-process__step:nth-child(1) { grid-area: 1 / 1; }
	.adepa-process__step:nth-child(2) { grid-area: 1 / 2; }
	.adepa-process__step:nth-child(3) { grid-area: 1 / 3; }
	.adepa-process__step:nth-child(4) { grid-area: 2 / 3; }
	.adepa-process__step:nth-child(5) { grid-area: 2 / 2; }
	.adepa-process__step:nth-child(6) { grid-area: 2 / 1; }
	.adepa-process__title { padding-top: 0; font-size: var(--wp--preset--font-size--body-lg); line-height: 1.25; }
	.adepa-process__text { margin-top: var(--wp--preset--spacing--30) !important; font-size: var(--wp--preset--font-size--body); }
	/* 01 → 02, 02 → 03: horizontal, rightwards (node centre → next node centre, across the gap) */
	.adepa-process__step:not(:last-child)::after {
		left: calc(var(--node) / 2);
		top: calc(var(--node) / 2 - 1px);
		width: calc(100% + var(--col-gap));
		height: 2px;
		transform-origin: left center;
	}
	/* 03 → 04: one continuous "]" turn through the right gutter (top, right and bottom edges
	   of a 2px box; its bottom edge lands on node 04's centre because grid rows stretch). */
	.adepa-process__step:nth-child(3)::after {
		box-sizing: border-box;
		width: calc(100% - var(--node) / 2 + var(--turn));
		height: calc(100% + var(--row-gap) + 2px);
		background: transparent;
		border: 2px solid var(--wp--preset--color--brand-red);
		border-left: 0;
		clip-path: inset(0 0 0 0);
	}
	/* 04 → 05, 05 → 06: horizontal, leftwards */
	.adepa-process__step:nth-child(4)::after,
	.adepa-process__step:nth-child(5)::after {
		left: calc(var(--node) / 2 - 100% - var(--col-gap));
		transform-origin: right center;
	}
	/* direction arrowheads, just outside the ring of the node they point at */
	.adepa-process__step:not(:last-child)::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: calc(var(--node) / 2 - 5px);
		left: calc(100% + var(--col-gap) - var(--ring) - 12px);
		width: 9px;
		height: 10px;
		background: var(--wp--preset--color--brand-red);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		transition: opacity 200ms linear calc(240ms + var(--step, 0) * 60ms);
	}
	.adepa-process__step:nth-child(3)::before {
		top: calc(100% + var(--row-gap) + var(--node) / 2 - 5px);
		left: calc(var(--node) + var(--ring) + 3px);
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
	}
	.adepa-process__step:nth-child(4)::before,
	.adepa-process__step:nth-child(5)::before {
		left: calc(var(--node) + var(--ring) + 3px - 100% - var(--col-gap));
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
	}
}

/* =========================================================
 * From Pole to Plug — ordered list rendered as a path
 * Lead-in from the "Grid / Utility" cap to the first node, then one connector per
 * item (node centre → next node centre). Nothing is drawn past the last node.
 * ========================================================= */
.adepa-path { margin-block: var(--wp--preset--spacing--70); }
.adepa-path__head > * + * { margin-top: var(--wp--preset--spacing--40); }
.adepa-path__diagram { position: relative; margin-top: var(--wp--preset--spacing--60) !important; --node: 18px; --node-top: 0.2rem; --lead: var(--wp--preset--spacing--40); }
.adepa-path__cap {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.adepa-path__cap::before {
	content: "";
	width: 18px;
	height: 12px;
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	box-shadow: inset 0 3px 0 -1px var(--wp--preset--color--white), inset 0 5px 0 -1px var(--wp--preset--color--ink);
}
/* `.adepa-path__diagram` prefix: beats core's `:root :where(.wp-block-list) { padding-left }`, which
   otherwise wins whenever global styles print after this file and shifts the nodes off the line. */
.adepa-path__diagram .adepa-path__list {
	position: relative;
	list-style: none;
	margin: var(--lead) 0 0;
	padding: 0 0 0 calc(var(--node) + var(--wp--preset--spacing--40));
	counter-reset: adepa-path;
}
/* lead-in: from the cap down to the first node's centre */
.adepa-path__list::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(var(--node) / 2 - 1px);
	top: calc(-1 * var(--lead));
	width: 2px;
	height: calc(var(--lead) + var(--node-top) + var(--node) / 2);
	background: var(--wp--preset--color--brand-red);
	transform-origin: top center;
	transition: transform 240ms var(--adepa-ease);
}
.adepa-path__list > li {
	position: relative;
	counter-increment: adepa-path;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--grey-500);
	font-size: var(--wp--preset--font-size--small);
}
.adepa-path__list > li strong {
	display: inline-block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	letter-spacing: 0.02em;
	/* 0.3.1: no uppercase transform: the labels are written in capitals so "kV" keeps its casing */
}
/* indexed label: 01 … 05 in red above the ink title (W1B-R1) */
.adepa-path__list > li strong::before {
	content: counter(adepa-path, decimal-leading-zero);
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--preset--color--brand-red);
	font-variant-numeric: tabular-nums;
}
/* 1px hairline leader node → label (mobile: horizontal, from the node's ring to the text) */
.adepa-path__list > li strong::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(-1 * var(--wp--preset--spacing--40) + 4px);
	top: calc(var(--node-top) + var(--node) / 2);
	width: calc(var(--wp--preset--spacing--40) - 10px);
	height: 1px;
	background: var(--wp--preset--color--grey-300);
}
/* node: white ring (2px red) with a solid red core */
.adepa-path__list > li::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: calc(-1 * (var(--node) + var(--wp--preset--spacing--40)));
	top: var(--node-top);
	width: var(--node);
	height: var(--node);
	box-sizing: border-box;
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--brand-red) 0 3px, var(--wp--preset--color--white) 3.5px);
	border: 2px solid var(--wp--preset--color--brand-red);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white);
}
/* connector to the next node (vertical on mobile: through this item's full height) */
.adepa-path__list > li:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(-1 * (var(--node) + var(--wp--preset--spacing--40)) + var(--node) / 2 - 1px);
	top: calc(var(--node-top) + var(--node) / 2);
	width: 2px;
	height: 100%;
	background: var(--wp--preset--color--brand-red);
	transform-origin: top center;
	transition: transform 300ms var(--adepa-ease) calc(120ms + var(--step, 0) * 60ms);
}
.adepa-path__list > li:nth-child(2) { --step: 1; }
.adepa-path__list > li:nth-child(3) { --step: 2; }
.adepa-path__list > li:nth-child(4) { --step: 3; }
.adepa-path__bracket {
	margin: 0 0 0 calc(var(--node) + var(--wp--preset--spacing--40));
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--grey-500);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grey-500);
}
.adepa-path__bracket strong {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
}

@media (min-width: 1024px) {
	.adepa-path__diagram { display: grid; grid-template-columns: auto 1fr; column-gap: var(--lead); align-items: start; --node: 22px; }
	.adepa-path__cap { grid-column: 1; grid-row: 1; padding-top: 0; white-space: nowrap; }
	.adepa-path__diagram .adepa-path__list {
		--item-gap: var(--wp--preset--spacing--40);
		grid-column: 2;
		grid-row: 1;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--item-gap);
		margin: 0;
		padding: calc(var(--node) + var(--wp--preset--spacing--40)) 0 0;
	}
	/* lead-in: from the cap (left) to the first node's centre */
	.adepa-path__list::before {
		left: calc(-1 * var(--lead));
		top: calc(var(--node) / 2 - 1px);
		width: calc(var(--lead) + var(--node) / 2);
		height: 2px;
		transform-origin: left center;
	}
	.adepa-path__list > li { padding: 0; padding-right: var(--wp--preset--spacing--30); }
	.adepa-path__list > li::before { left: 0; top: calc(-1 * (var(--node) + var(--wp--preset--spacing--40))); background: radial-gradient(circle, var(--wp--preset--color--brand-red) 0 4px, var(--wp--preset--color--white) 4.5px); }
	/* hairline leader: vertical, from below the node down to the index label */
	.adepa-path__list > li strong::after {
		left: calc(var(--node) / 2);
		top: calc(-1 * var(--wp--preset--spacing--40) + 6px);
		width: 1px;
		height: calc(var(--wp--preset--spacing--40) - 12px);
	}
	.adepa-path__list > li:not(:last-child)::after {
		left: calc(var(--node) / 2);
		top: calc(-1 * (var(--node) + var(--wp--preset--spacing--40)) + var(--node) / 2 - 1px);
		width: calc(100% + var(--item-gap));
		height: 2px;
		transform-origin: left center;
	}
	/* bracket spans MV → Transformation → LV (first three nodes) */
	.adepa-path__bracket {
		grid-column: 2;
		grid-row: 2;
		margin: var(--wp--preset--spacing--50) 0 0;
		width: calc(60% - var(--wp--preset--spacing--40) * 0.4);
		border: 1px solid var(--wp--preset--color--grey-500);
		border-top: 0;
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* =========================================================
 * Convergence graphic (inline SVG on charcoal)
 * ========================================================= */
.adepa-convergence { padding-block: var(--wp--custom--section--sm); }
.adepa-convergence > * { max-width: var(--wp--style--global--wide-size) !important; }
.adepa-convergence__head > * + * { margin-top: var(--wp--preset--spacing--40); }
.adepa-convergence__title { margin: 0; max-width: 18ch; }
.adepa-convergence__graphic { margin-top: var(--wp--preset--spacing--60) !important; }
.adepa-convergence__figure { margin: 0; }
.adepa-convergence__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--wp--preset--font-family--rubik); }
.adepa-convergence__svg.is-horizontal { display: none; }
/* horizontal view from 1024px: below that its 15px labels would scale under ~11px */
@media (min-width: 1024px) {
	.adepa-convergence__svg.is-horizontal { display: block; }
	.adepa-convergence__svg.is-vertical { display: none; }
}
.adepa-convergence__svg.is-vertical { max-width: 460px; }
.adepa-convergence__svg .adepa-lines path { fill: none; stroke: var(--wp--preset--color--brand-red-bright); stroke-width: 2; stroke-linejoin: round; }
.adepa-convergence__svg .adepa-arrow { fill: none; stroke: var(--wp--preset--color--brand-red-bright); stroke-width: 2; }
.adepa-convergence__svg .adepa-node circle { fill: var(--wp--preset--color--charcoal-2); stroke: var(--wp--preset--color--grey-500); stroke-width: 1; }
.adepa-convergence__svg .adepa-leader { fill: none; stroke: var(--wp--preset--color--grey-500); stroke-width: 1; }
.adepa-convergence__svg .adepa-svg-index { fill: var(--wp--preset--color--grey-300); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.adepa-convergence__svg .adepa-svg-index.is-small { font-size: 11px; }
.adepa-convergence__svg .adepa-node .adepa-node__core { fill: var(--wp--preset--color--brand-red-bright); stroke: none; }
.adepa-convergence__svg .adepa-svg-label { fill: var(--wp--preset--color--white); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.adepa-convergence__svg .adepa-svg-label.is-small { font-size: 12px; }
.adepa-convergence__svg .adepa-hub rect { fill: var(--wp--preset--color--brand-red); }
.adepa-convergence__svg .adepa-svg-hub { fill: var(--wp--preset--color--white); font-size: 26px; font-weight: 700; letter-spacing: 0.06em; }
.adepa-convergence__svg .adepa-svg-hub.is-small { font-size: 17px; }
.adepa-convergence__svg .adepa-target rect { fill: none; stroke: var(--wp--preset--color--white); stroke-width: 1; }
.adepa-convergence__svg .adepa-svg-target { fill: var(--wp--preset--color--white); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; }
.adepa-convergence__svg .adepa-svg-target.is-small { font-size: 13px; }
.adepa-convergence .adepa-graphic-caption { color: var(--wp--preset--color--grey-300); }
.adepa-convergence .adepa-convergence__text { margin-top: var(--wp--preset--spacing--50); max-width: 52ch; font-size: var(--wp--preset--font-size--body-lg); color: var(--wp--preset--color--grey-300); }

/* =========================================================
 * Reveal states (only applied by reveal.js; never in editor / no-JS)
 * ========================================================= */
.adepa-convergence__svg .adepa-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--adepa-ease); }
.adepa-convergence__svg .adepa-node, .adepa-convergence__svg .adepa-hub, .adepa-convergence__svg .adepa-target, .adepa-convergence__svg .adepa-arrow { transition: opacity 0.5s linear; }
.adepa-reveal.is-pending .adepa-draw { stroke-dashoffset: 1; }
.adepa-reveal.is-pending .adepa-node { opacity: 0; }
.adepa-reveal.is-pending .adepa-hub, .adepa-reveal.is-pending .adepa-target, .adepa-reveal.is-pending .adepa-arrow { opacity: 0; }
.adepa-reveal.is-visible .adepa-node { transition-delay: calc(var(--i, 0) * 80ms); }
.adepa-reveal.is-visible .adepa-hub { transition-delay: 700ms; }
.adepa-reveal.is-visible .adepa-arrow, .adepa-reveal.is-visible .adepa-target { transition-delay: 1000ms; }

/* Process + path: only the connectors draw; nodes stay solid at all times. Total ≤ 0.8 s. */
.adepa-process__steps.is-pending .adepa-process__step::after { transform: scaleY(0); }
.adepa-process__steps.is-pending .adepa-process__step::before { opacity: 0; }
.adepa-path__diagram.is-pending .adepa-path__list::before,
.adepa-path__diagram.is-pending .adepa-path__list > li::after { transform: scaleY(0); }
@media (min-width: 782px) {
	.adepa-process__steps.is-pending .adepa-process__step::after { transform: scaleX(0); }
	/* the turn is revealed by clipping (a scale would distort its border box) */
	.adepa-process__steps.is-pending .adepa-process__step:nth-child(3)::after { transform: none; clip-path: inset(0 100% 100% 0); }
}
@media (min-width: 1024px) {
	.adepa-path__diagram.is-pending .adepa-path__list::before,
	.adepa-path__diagram.is-pending .adepa-path__list > li::after { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.adepa-reveal .adepa-draw { stroke-dashoffset: 0 !important; }
	.adepa-reveal *,
	.adepa-reveal *::before,
	.adepa-reveal *::after,
	.adepa-reveal::before,
	.adepa-reveal::after { opacity: 1 !important; transform: none !important; transition: none !important; }
	.adepa-reveal *::after { clip-path: none !important; }
}