/* Everest Custom Elements: steps.css
   everest_steps. Ordered list; the number is a decorative span. Desktop: 4 columns with a connector
   (line or arrow) between number circles. Tablet: 2x2, no connector. Mobile: vertical timeline. */

.ehf-steps {
	box-sizing: border-box;
	padding-block: var(--ehf-pad-section);
	background: var(--ehf-c-surface);
	color: var(--ehf-c-body);
	font-family: var(--ehf-ff-body);
}

.ehf-steps--bg-tint {
	background: var(--ehf-c-tint-50);
}

.ehf-steps__inner {
	box-sizing: border-box;
	max-width: var(--ehf-container);
	margin-inline: auto;
	padding-inline: var(--ehf-gutter);
}

.ehf-steps__intro {
	display: flex;
	flex-direction: column;
	gap: var(--ehf-s-1);
	max-width: var(--ehf-container-narrow);
	margin-bottom: var(--ehf-s-5);
}

.ehf-steps--align-center .ehf-steps__intro {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.ehf-steps__eyebrow {
	margin: 0;
	font-size: var(--ehf-fs-eyebrow);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ehf-c-primary);
}

.ehf-steps__heading {
	margin: 0;
	font-family: var(--ehf-ff-head);
	font-size: var(--ehf-fs-h2);
	font-weight: 800;
	line-height: 1.15;
	color: var(--ehf-c-ink);
	text-wrap: balance;
}

.ehf-steps__sub {
	margin: 0;
	max-width: var(--ehf-prose);
	font-size: var(--ehf-fs-lead);
	line-height: 1.55;
}

/* List */
.ehf-steps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ehf-s-4) var(--ehf-gap-grid);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ehf-steps--n-2 .ehf-steps__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ehf-steps--n-3 .ehf-steps__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ehf-steps--n-5 .ehf-steps__list {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ehf-steps--n-6 .ehf-steps__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ehf-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ehf-s-2);
	margin: 0;
	min-width: 0;
}

.ehf-steps--align-center .ehf-steps__step {
	align-items: center;
	text-align: center;
}

.ehf-steps__num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	border-radius: var(--ehf-r-pill);
	background: var(--ehf-c-primary);
	color: #ffffff;
	font-family: var(--ehf-ff-head);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 6px var(--ehf-c-surface);
}

.ehf-steps--bg-tint .ehf-steps__num {
	box-shadow: 0 0 0 6px var(--ehf-c-tint-50);
}

.ehf-steps__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ehf-steps--align-center .ehf-steps__body {
	align-items: center;
}

.ehf-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ehf-r-pill);
	background: var(--ehf-c-tint-100);
	color: var(--ehf-c-primary);
	font-size: 24px;
	line-height: 1;
}

.ehf-steps--bg-tint .ehf-steps__icon {
	background: var(--ehf-c-surface);
}

.ehf-steps__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ehf-steps__title {
	margin: 0;
	font-family: var(--ehf-ff-head);
	font-size: var(--ehf-fs-h3);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ehf-c-ink);
}

.ehf-steps__text {
	margin: 0;
	max-width: 32ch;
	font-size: var(--ehf-fs-body);
	line-height: 1.6;
}

/* Desktop connector: runs from this number circle to the next one */
@media (min-width: 1025px) {
	.ehf-steps--connector-line .ehf-steps__step:not(:last-child)::after,
	.ehf-steps--connector-arrow .ehf-steps__step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 28px;
		height: 2px;
		left: calc(50% + 28px + 12px);
		width: calc(100% + var(--ehf-gap-grid) - 56px - 24px);
		background: var(--ehf-c-tint-200);
		z-index: 0;
	}

	.ehf-steps--align-left.ehf-steps--connector-line .ehf-steps__step:not(:last-child)::after,
	.ehf-steps--align-left.ehf-steps--connector-arrow .ehf-steps__step:not(:last-child)::after {
		left: calc(56px + 12px);
		width: calc(100% + var(--ehf-gap-grid) - 56px - 24px);
	}

	/* Arrow: dashed rail with a chevron head */
	.ehf-steps--connector-arrow .ehf-steps__step:not(:last-child)::after {
		height: 0;
		background: none;
		border-top: 2px dashed var(--ehf-c-tint-200);
	}

	.ehf-steps--connector-arrow .ehf-steps__step:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 22px;
		left: calc(50% + 28px + 12px + (100% + var(--ehf-gap-grid) - 56px - 24px) - 12px);
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--ehf-c-primary);
		border-right: 2px solid var(--ehf-c-primary);
		transform: rotate(45deg);
		z-index: 1;
	}

	.ehf-steps--align-left.ehf-steps--connector-arrow .ehf-steps__step:not(:last-child)::before {
		left: calc(56px + 12px + (100% + var(--ehf-gap-grid) - 56px - 24px) - 12px);
	}
}

/* Tablet: 2 x 2, no connector */
@media (max-width: 1024px) {
	.ehf-steps__list,
	.ehf-steps--n-3 .ehf-steps__list,
	.ehf-steps--n-5 .ehf-steps__list,
	.ehf-steps--n-6 .ehf-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: vertical timeline (number circle left, 2px rail) */
@media (max-width: 767px) {
	.ehf-steps__list,
	.ehf-steps--n-2 .ehf-steps__list,
	.ehf-steps--n-3 .ehf-steps__list,
	.ehf-steps--n-5 .ehf-steps__list,
	.ehf-steps--n-6 .ehf-steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ehf-steps__step,
	.ehf-steps--align-center .ehf-steps__step {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--ehf-s-2);
		padding-bottom: var(--ehf-s-4);
		text-align: left;
	}

	.ehf-steps__step:last-child {
		padding-bottom: 0;
	}

	.ehf-steps__step:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 44px;
		bottom: -4px;
		left: 21px;
		width: 2px;
		background: var(--ehf-c-tint-200);
	}

	.ehf-steps__num {
		width: 44px;
		height: 44px;
		font-size: 17px;
	}

	.ehf-steps--align-center .ehf-steps__body {
		align-items: flex-start;
	}

	.ehf-steps__intro {
		margin-bottom: var(--ehf-s-4);
	}

	.ehf-steps__text {
		max-width: none;
	}
}

/* 1.4.1 N3: number badge and icon halo no longer stack as two markers at tablet/phone widths; the number carries the step */
@media (max-width: 1024px) {
	.ehf-steps--icons .ehf-steps__icon {
		display: none;
	}
}