/*
 * Guidance Journey — premium timeline component
 * Reusable, self-contained: all sizing/color driven by CSS variables on .kh-journey.
 */

.kh-journey {
	--kh-cream: #fff8f0;
	--kh-gold: #ce8b2e;
	--kh-gold-light: #e0a84a;
	--kh-ink: #2b1d12;
	--kh-muted: #6b5842;
	--kh-radius-outer: 22px;
	--kh-radius-card: 16px;
	--kh-max-width: 1200px;
	--kh-gap: 28px;
	--kh-icon-size: 84px;
	--kh-icon-inner: 62px;
	--kh-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);

	/* Note: the outer cream background + gold border + rounded corners called for in the spec are
	   already provided by this component's parent (the page section wraps it) — this layer only
	   adds the subtle radial glow on top, so the two don't double up into a boxed-in-a-box look. */
	position: relative;
	background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(206, 139, 46, 0.14), transparent 65%);
	box-sizing: border-box;
}

.kh-journey__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 clamp(28px, 4vw, 44px) 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 32px);
	color: var(--kh-ink);
	text-align: center;
}

.kh-journey__om {
	color: var(--kh-gold);
	font-size: 0.85em;
	line-height: 1;
}

/* ---------- Steps row ---------- */

.kh-journey__steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--kh-max-width);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--kh-gap);
}

.kh-journey__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 700ms ease, transform 700ms ease;
}

.kh-journey__step.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.kh-journey__step:nth-child(1) { transition-delay: 0ms; }
.kh-journey__step:nth-child(3) { transition-delay: 90ms; }
.kh-journey__step:nth-child(5) { transition-delay: 180ms; }
.kh-journey__step:nth-child(7) { transition-delay: 270ms; }

.kh-journey__connector {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kh-gold);
	margin-top: calc(var(--kh-icon-size) / 2 - 10px);
}

.kh-journey__connector svg {
	width: 34px;
	height: 14px;
	display: block;
}

/* ---------- Icon ---------- */

.kh-journey__icon-wrap {
	position: relative;
	width: var(--kh-icon-size);
	height: var(--kh-icon-size);
	margin-bottom: 18px;
	animation: kh-journey-float 5s ease-in-out infinite;
}

.kh-journey__step:nth-child(3) .kh-journey__icon-wrap { animation-delay: 0.4s; }
.kh-journey__step:nth-child(5) .kh-journey__icon-wrap { animation-delay: 0.8s; }
.kh-journey__step:nth-child(7) .kh-journey__icon-wrap { animation-delay: 1.2s; }

.kh-journey__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px dashed rgba(206, 139, 46, 0.5);
	transition: border-color var(--kh-transition);
}

.kh-journey__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--kh-icon-inner);
	height: var(--kh-icon-inner);
	border-radius: 50%;
	border: 2px solid var(--kh-gold);
	background: var(--kh-icon-bg, var(--kh-ink));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	transition: transform var(--kh-transition), box-shadow var(--kh-transition);
}

.kh-journey__icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--kh-gold-light);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kh-journey__icon svg.kh-journey__icon--filled {
	fill: var(--kh-gold-light);
	stroke: none;
}

.kh-journey__badge {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--kh-gold);
	color: #1a0f08;
	font-family: 'Poppins', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--kh-cream);
}

.kh-journey__title {
	margin: 0 0 6px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--kh-ink);
}

.kh-journey__desc {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--kh-muted);
	max-width: 220px;
}

/* ---------- Hover state ---------- */

@media (hover: hover) {
	.kh-journey__step:hover .kh-journey__icon {
		transform: translate(-50%, -50%) scale(1.08);
		box-shadow: 0 0 0 6px rgba(206, 139, 46, 0.18), 0 10px 26px rgba(206, 139, 46, 0.45);
	}
	.kh-journey__step:hover .kh-journey__ring {
		border-color: var(--kh-gold-light);
	}
	.kh-journey__step:hover .kh-journey__title {
		color: var(--kh-gold);
	}
}

/* ---------- Float animation ---------- */

@keyframes kh-journey-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.kh-journey__icon-wrap {
		animation: none;
	}
	.kh-journey__step {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Tablet: 2x2 grid ---------- */

@media (max-width: 1024px) {
	.kh-journey__steps {
		flex-wrap: wrap;
		row-gap: 40px;
	}
	.kh-journey__step {
		flex: 1 1 calc(50% - var(--kh-gap) / 2);
		max-width: calc(50% - var(--kh-gap) / 2);
	}
	.kh-journey__connector {
		display: none;
	}
}

/* ---------- Mobile: vertical timeline ---------- */

@media (max-width: 640px) {
	.kh-journey {
		--kh-icon-size: 58px;
		--kh-icon-inner: 42px;
	}
	.kh-journey__heading {
		margin-bottom: 20px;
	}
	.kh-journey__steps {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.kh-journey__step {
		flex: 1 1 auto;
		max-width: 260px;
		width: 100%;
		position: relative;
		padding-bottom: 18px;
	}
	.kh-journey__step:last-child {
		padding-bottom: 0;
	}
	.kh-journey__icon-wrap {
		margin-bottom: 10px;
	}
	.kh-journey__icon svg {
		width: 19px;
		height: 19px;
	}
	.kh-journey__badge {
		width: 19px;
		height: 19px;
		font-size: 9px;
	}
	.kh-journey__title {
		font-size: 13.5px;
		margin-bottom: 3px;
	}
	.kh-journey__desc {
		font-size: 11px;
		max-width: 200px;
	}
	/* connecting vertical line between stacked steps */
	.kh-journey__step:not(:last-child)::after {
		content: '';
		position: absolute;
		top: var(--kh-icon-size);
		bottom: 0;
		left: 50%;
		width: 2px;
		background: linear-gradient(180deg, rgba(206, 139, 46, 0.6), rgba(206, 139, 46, 0.1));
		transform: translateX(-50%);
	}
}