/* PathChooser: three ruled panels (COMPONENTS 12). Panels without content use .path-soon (text, no link).
   Motion is transform/opacity/stroke only; the class-driven .rm rule in base.css switches it off. */

.paths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-block: var(--hairline) solid var(--ln-s);
}

.path {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	min-block-size: clamp(340px, 34vw, 480px);
	padding: clamp(22px, 2.4vw, 36px);
	border-inline-start: var(--hairline) solid var(--ln-s);
	overflow: hidden;
	color: var(--fg);
	transition: opacity var(--d-slow) var(--ease);
}

.path:last-child {
	border-inline-end: var(--hairline) solid var(--ln-s);
}

/* bottom wipe fill on hover and focus */
.path::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 30%, rgb(var(--blue-500-rgb) / 0.34));
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: transform var(--d-slow) var(--ease);
}

a.path:hover::before,
a.path:focus-visible::before {
	transform: none;
}

/* sibling panels dim while one link is hovered */
.paths:hover a.path:not(:hover) {
	opacity: 0.5;
}

.ptag {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-12);
	color: var(--hi);
	font-style: normal;
}

.ptag::after {
	content: "";
	inline-size: 30px;
	block-size: var(--hairline);
	background: var(--hi);
	transition: inline-size var(--d-slow) var(--ease);
}

a.path:hover .ptag::after {
	inline-size: 70px;
}

.pico {
	position: absolute;
	inset-inline-end: clamp(18px, 2vw, 32px);
	inset-block-start: clamp(18px, 2vw, 32px);
	inline-size: clamp(110px, 10vw, 150px);
	block-size: auto;
	fill: none;
	stroke: var(--fg);
	stroke-width: 1.5;
	transition: transform var(--d-slow) var(--ease);
}

.pico .gold {
	stroke: var(--hi);
}

a.path:hover .pico {
	transform: translateY(-6px) scale(1.06);
}

/* line drawing: core.js adds .in to [data-draw] when the block scrolls into view; reduced motion shows it drawn */
.pico .d {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--d-draw) var(--ease);
}

.js:not(.rm) [data-draw]:not(.in) .pico .d {
	stroke-dashoffset: 1;
}

.path h3 {
	margin-block-start: auto;
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
}

.path h3 strong {
	font-weight: 800;
}

.path p {
	max-inline-size: 30ch;
	color: var(--fg2);
	font-size: var(--fs-b);
}

.path .go {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	align-self: flex-start;
	color: var(--hi);
	font-weight: 700;
}

.path .go .arr {
	inline-size: 18px;
	block-size: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	transition: transform var(--d-base) var(--ease);
}

html[dir="rtl"] .path .go .arr {
	transform: scaleX(-1);
}

a.path:hover .go .arr {
	transform: translateX(4px);
}

html[dir="rtl"] a.path:hover .go .arr {
	transform: scaleX(-1) translateX(4px);
}

/* no content yet: plain text, quiet colours, no hover behaviour */
.path-soon .go-soon {
	padding-block: var(--sp-4);
	padding-inline: var(--sp-12);
	border: var(--hairline) solid var(--ln-ctl);
	color: var(--fg2);
	font: 500 var(--fs-label) var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.path-soon .pico {
	opacity: 0.55;
}

@media (max-width: 900px) {
	.paths {
		grid-template-columns: minmax(0, 1fr);
	}

	.path {
		min-block-size: 0;
		padding-block-start: clamp(120px, 34vw, 160px);
		border-inline-end: var(--hairline) solid var(--ln-s);
	}

	.path + .path {
		border-block-start: var(--hairline) solid var(--ln-s);
	}

	.path h3 {
		margin-block-start: var(--sp-8);
	}
}