/**
 * Process Steps styles (How it works section).
 *
 * @package NexioEducation
 */

.process-steps {
	padding: 120px 142px 199px;
	position: relative;
	background: #fffefa;
}

/* Bottom vertical dashed line for process-steps */
.process-steps::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 65%;
	transform: translateX(-50%);
	width: 1px;
	height: 123px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='155' viewBox='0 0 1 155' fill='none'%3E%3Cpath d='M0.499905 0L0.500007 155' stroke='%23064D8E' stroke-dasharray='6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 1px 155px;
}

.process-steps::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1440px;
	height: 1px;
	background-image: repeating-linear-gradient(
		to right,
		transparent,
		transparent 6px,
		rgba(6, 77, 142, 0.25) 6px,
		rgba(6, 77, 142, 0.25) 12px
	);
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(6, 77, 142, 0.05) 0%,
		rgba(6, 77, 142, 0.25) 15%,
		rgba(6, 77, 142, 0.25) 85%,
		rgba(6, 77, 142, 0.05) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 1) 15%,
		rgba(0, 0, 0, 1) 85%,
		rgba(0, 0, 0, 0.2) 100%
	);
}

.process-steps-title {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	color: #064d8e;
	font-size: 48px;
	font-weight: 700;
	line-height: 58px;
	margin: 0 0 80px;
	text-align: left;
}

.process-steps-grid {
	position: relative;
	min-height: 750px;
	/* Horizontal dashed line at top-right */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='119' height='1' viewBox='0 0 119 1' fill='none'%3E%3Cpath d='M0 0.5L119 0.50001' stroke='%23064D8E' stroke-opacity='0.25' stroke-dasharray='6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 top 325px;
	background-size: 119px 1px;
}

/* Main vertical line on left */
.process-steps-grid::before {
	content: "";
	position: absolute;
	left: 0;
	top: 31px;
	width: 1px;
	height: 949px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1199' viewBox='0 0 1 1199' fill='none'%3E%3Cpath d='M0.500149 0L0.49998 1199' stroke='%23064D8E' stroke-opacity='0.25' stroke-miterlimit='16' stroke-dasharray='6 6'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: 1px auto;
	z-index: 23;
}

/* Main vertical line on right */
.process-steps-grid::after {
	content: "";
	position: absolute;
	right: 0;
	top: 263px;
	width: 1px;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='884' viewBox='0 0 1 884' fill='none'%3E%3Cpath d='M0.499976 0L0.50012 884' stroke='%23064D8E' stroke-opacity='0.25' stroke-miterlimit='16' stroke-dasharray='6 6'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: 1px auto;
}

.process-step {
	position: absolute;
	padding: 24px;
	z-index: 1;
	border: none;
	border-top: 1px solid rgba(6, 77, 142, 0.25);
	border-bottom: 1px solid rgba(6, 77, 142, 0.25);
	background:
		/* Left dashed border */
		repeating-linear-gradient(to bottom, rgba(6, 77, 142, 0.25), rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* Right dashed border */
		repeating-linear-gradient(to bottom, rgba(6, 77, 142, 0.25), rgba(6, 77, 142, 0.25) 6px, transparent 6px, transparent 12px),
		/* Solid background */
		#fffefa;
	background-size: 1px 100%, 1px 100%, 100% 100%;
	background-position: left top, right top, center;
	background-repeat: no-repeat;
}

.process-step-title {
	font-family: var(--wp--preset--font-family--heading, 'Apris Trial', serif);
	color: #064d8e;
	font-size: 24px;
	font-weight: 400;
	line-height: 28px;
	margin: 0 0 8px;
	position: relative;
}

/* Remove default title line - we use border-left on step instead */
.process-step-title::before {
	display: none;
}

.process-step-text {
	font-family: var(--wp--preset--font-family--body, 'Manrope', sans-serif);
	color: rgba(6, 77, 142, 0.75);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	margin: 0;
}

/* Step 1: Discover - top right */
.process-step-1 {
	top: 34px;
	left: 47%;
	max-width: 380px;
}

.process-step-1::after {
	content: "";
	position: absolute;
	left: -189px;
	top: 149px;
	width: 189px;
	height: 1px;
	background: repeating-linear-gradient(
		to right,
		rgba(6, 77, 142, 0.25),
		rgba(6, 77, 142, 0.25) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* Step 2: Match & Mentor - left side middle */
.process-step-2 {
	top: 164px;
	left: 94px;
	max-width: 263px;
}

/* Step 3: Track & Evolve - bottom center-right */
.process-step-3 {
	top: 625px;
	left: calc(50% - 132px);
	max-width: 465px;
	padding-top: 49px;
	z-index: 0;
}

/* Vertical connector for Track & Evolve */
.process-step-3::before {
	content: "";
	position: absolute;
	left: -140px;
	top: -269px;
	height: 424px;
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		rgba(6, 77, 142, 0.25),
		rgba(6, 77, 142, 0.25) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* Horizontal line for Track & Evolve */
.process-step-3::after {
	content: "";
	position: absolute;
	left: -140px;
	top: 155px;
	width: 139px;
	height: 1px;
	background: repeating-linear-gradient(
		to right,
		rgba(6, 77, 142, 0.25),
		rgba(6, 77, 142, 0.25) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* Image positioning */
.process-steps-image {
	position: absolute;
	top: 261px;
	left: calc(50% - 111px);
	z-index: 1;
	margin: 0;
}

.process-steps-image img {
	width: 575px;
	height: 408px;
	object-fit: cover;
	display: block;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
	.process-steps {
		padding: 80px 60px;
	}

	.process-steps::after {
		display: none;
	}

	.process-steps-grid {
		min-height: auto;
		display: flex;
		flex-direction: column;
		gap: 40px;
		background-image: none;
	}

	.process-steps-grid::before,
	.process-steps-grid::after {
		display: none;
	}

	.process-step {
		position: relative;
		top: auto;
		left: auto;
		max-width: 100%;
	}

	.process-step-1,
	.process-step-2,
	.process-step-3 {
		top: auto;
		left: auto;
		max-width: 100%;
	}

	.process-step-title::before,
	.process-step-1::before,
	.process-step-1::after,
	.process-step-3::before,
	.process-step-3::after {
		display: none;
	}

	.process-steps-image {
		position: relative;
		top: auto;
		left: auto;
		order: 1;
		max-width: 100%;
	}

	.process-step-1 {
		order: 2;
	}

	.process-step-2 {
		order: 3;
	}

	.process-step-3 {
		order: 4;
	}

	.process-steps-image img {
		width: 100%;
		height: auto;
		box-shadow: none;
		border: none;
	}
}

/* Responsive - Mobile */
@media (max-width: 900px) {
	.process-steps {
		padding: 60px 24px;
	}

	.process-steps-title {
		font-size: 32px;
		line-height: 40px;
		margin-bottom: 40px;
	}

	.process-steps-grid {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.process-step {
		padding: 24px;
		border: 1px solid rgba(6, 77, 142, 0.15);
		border-radius: 4px;
		background: #fffefa;
	}

	.process-step-title {
		font-size: 20px;
		line-height: 24px;
	}

	.process-step-text {
		font-size: 14px;
		line-height: 20px;
	}

	.process-steps-image {
		order: -1;
	}

	.process-steps-image img {
		width: 100%;
		height: auto;
		max-height: 300px;
	}
}