/* ==========================================================
   NAPONTA JOBBAN
   Homepage – How it works
   ========================================================== */

.nj-how {
	position: relative;

	width: min(1280px, calc(100% - 40px));
	margin: 0 auto;

	padding: 104px 0 112px;

	background: #FAF8F3;
}


/* ==========================================================
   Heading area
   ========================================================== */

.nj-how > .kt-row-column-wrap {
	padding: 0;
}


.nj-how .nj-section-eyebrow {
	margin: 0 0 14px;

	color: #2E5E4E;

	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: 0.09em;
	text-transform: uppercase;

	text-align: center;
}


.nj-how h2 {
	max-width: 700px;

	margin: 0 auto 18px;

	color: #144637;

	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: clamp(42px, 3.6vw, 54px);
	font-weight: 400;
	line-height: 1.10;

	letter-spacing: -0.025em;
	text-align: center;
	text-wrap: balance;
}


.nj-how h2 + p {
	max-width: 680px;

	margin: 0 auto 72px;

	color: rgba(43, 43, 43, 0.70);

	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 1.7;

	text-align: center;
}


/* ==========================================================
   Timeline
   ========================================================== */

.nj-how-steps {
	position: relative;
}


.nj-how-steps > .kt-row-column-wrap {
	position: relative;

	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 36px;

	padding: 0;
}


/* Vízszintes összekötő vonal */
.nj-how-steps > .kt-row-column-wrap::before {
	content: "";

	position: absolute;

	top: 25px;
	left: 12.5%;
	right: 12.5%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(200, 155, 60, 0.28),
			rgba(46, 94, 78, 0.28),
			rgba(46, 94, 78, 0.28),
			rgba(200, 155, 60, 0.28)
		);

	z-index: 0;
}


/* ==========================================================
   Step
   ========================================================== */

.nj-how-step {
	position: relative;
	z-index: 1;

	min-width: 0;
}


.nj-how-step > .kt-inside-inner-col {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	height: 100%;

	padding: 0 10px;

	text-align: center;
}


/* ==========================================================
   Number / node
   ========================================================== */

.nj-how-number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	margin: 0 0 28px !important;

	border: 1px solid rgba(200, 155, 60, 0.42);
	border-radius: 50%;

	background: #FAF8F3;
	color: #2E5E4E;

	box-shadow:
		0 0 0 7px #FAF8F3,
		0 8px 22px rgba(43, 43, 43, 0.05);

	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.04em;
}


/* Az utolsó lépés hangsúlyosabb */
.nj-how-step:last-child .nj-how-number {
	background: #C89B3C;
	color: #144637;

	border-color: #C89B3C;
}


/* ==========================================================
   Typography
   ========================================================== */

.nj-how-step h3 {
	max-width: 245px;

	margin: 0 0 14px;

	color: #144637;

	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.22;

	letter-spacing: -0.015em;
}


.nj-how-step p:not(.nj-how-number) {
	max-width: 255px;

	margin: 0;

	color: rgba(43, 43, 43, 0.68);

	font-family: "Manrope", sans-serif;
	font-size: 14px;
	line-height: 1.65;
}


/* ==========================================================
   Hover – desktop only
   ========================================================== */

@media (hover: hover) {

	.nj-how-step .nj-how-number {
		transition:
			transform 180ms ease,
			border-color 180ms ease,
			box-shadow 180ms ease;
	}


	.nj-how-step:hover .nj-how-number {
		transform: translateY(-3px);

		border-color: #C89B3C;

		box-shadow:
			0 0 0 7px #FAF8F3,
			0 11px 26px rgba(43, 43, 43, 0.08);
	}

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1024px) {

	.nj-how {
		padding: 88px 0 94px;
	}


	.nj-how h2 + p {
		margin-bottom: 58px;
	}


	.nj-how-steps > .kt-row-column-wrap {
		gap: 22px;
	}


	.nj-how-step h3 {
		font-size: 22px;
	}


	.nj-how-step p:not(.nj-how-number) {
		font-size: 13px;
	}

}


/* ==========================================================
   Mobile – vertical timeline
   ========================================================== */

@media (max-width: 767px) {

	.nj-how {
		width: 100%;

		padding: 72px 20px 78px;
	}


	.nj-how .nj-section-eyebrow,
	.nj-how h2,
	.nj-how h2 + p {
		text-align: left;
	}


	.nj-how h2 {
		margin-left: 0;
		margin-right: 0;

		font-size: clamp(34px, 9vw, 40px);
	}


	.nj-how h2 + p {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 48px;

		font-size: 15px;
	}


	.nj-how-steps > .kt-row-column-wrap {
		display: flex !important;
		flex-direction: column;

		gap: 0;
	}


	/* Desktop line kikapcsolása */
	.nj-how-steps > .kt-row-column-wrap::before {
		display: none;
	}


	/* Saját függőleges timeline */
	.nj-how-steps::before {
		content: "";

		position: absolute;

		top: 25px;
		bottom: 25px;
		left: 24px;

		width: 1px;

		background:
			linear-gradient(
				180deg,
				rgba(200, 155, 60, 0.40),
				rgba(46, 94, 78, 0.20),
				rgba(200, 155, 60, 0.30)
			);
	}


	.nj-how-step {
		min-height: 0;

		padding: 0 0 38px 76px;
	}


	.nj-how-step:last-child {
		padding-bottom: 0;
	}


	.nj-how-step > .kt-inside-inner-col {
		display: block;

		padding: 0;

		text-align: left;
	}


	.nj-how-number {
		position: absolute;

		top: 0;
		left: 0;

		width: 50px;
		height: 50px;

		margin: 0 !important;

		box-shadow:
			0 0 0 6px #FAF8F3,
			0 7px 18px rgba(43, 43, 43, 0.05);
	}


	.nj-how-step h3 {
		max-width: 100%;

		margin: 0 0 10px;

		font-size: 25px;
	}


	.nj-how-step p:not(.nj-how-number) {
		max-width: 100%;

		font-size: 14px;
		line-height: 1.65;
	}

}
@media (max-width: 767px) {

	.nj-how {
		width: 100%;
		padding: 72px 20px 78px;
	}

	.nj-how .nj-section-eyebrow,
	.nj-how h2,
	.nj-how h2 + p {
		text-align: left;
	}

	.nj-how h2 {
		margin-left: 0;
		margin-right: 0;

		font-size: clamp(34px, 9vw, 40px);
	}

	.nj-how h2 + p {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 48px;

		font-size: 15px;
	}


	/* ======================================================
	   Vertical timeline
	   ====================================================== */

	.nj-how-steps {
		position: relative;
	}

	.nj-how-steps > .kt-row-column-wrap {
		display: flex !important;
		flex-direction: column;
		gap: 0;
	}

	/* desktop horizontal line off */
	.nj-how-steps > .kt-row-column-wrap::before {
		display: none;
	}

	/* Függőleges összekötő vonal lépésenként */
	.nj-how-step:not(:last-child)::after {
		content: "";

		position: absolute;
		z-index: 0;

		top: 50px;
		bottom: 0;
		left: 25px;

		width: 1px;

		background:
			linear-gradient(
				180deg,
				rgba(200, 155, 60, 0.42) 0%,
				rgba(46, 94, 78, 0.24) 100%
			);

		pointer-events: none;
	}


	/* A számozott kör mindig a vonal fölött legyen */
	.nj-how-number {
		position: relative;
		z-index: 2;
	}


	/* ======================================================
	   Each step
	   ====================================================== */

	.nj-how-step {
		position: relative;

		padding: 0 0 42px;
	}

	.nj-how-step:last-child {
		padding-bottom: 0;
	}


	.nj-how-step > .kt-inside-inner-col {
		display: grid;

		grid-template-columns: 50px minmax(0, 1fr);
		grid-template-rows: auto auto;

		column-gap: 22px;
		row-gap: 8px;

		align-items: start;

		padding: 0;

		text-align: left;
	}


	/* ======================================================
	   Number
	   ====================================================== */

	.nj-how-number {
		position: relative;
		top: auto;
		left: auto;

		grid-column: 1;
		grid-row: 1 / span 2;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 50px;
		height: 50px;

		margin: 0 !important;

		z-index: 2;

		background: #FAF8F3;

		box-shadow:
			0 0 0 6px #FAF8F3,
			0 7px 18px rgba(43, 43, 43, 0.05);
	}


	/* ======================================================
	   Content
	   ====================================================== */

	.nj-how-step h3 {
		grid-column: 2;
		grid-row: 1;

		max-width: 100%;

		margin: 0;

		font-size: 25px;
		line-height: 1.2;
	}


	.nj-how-step p:not(.nj-how-number) {
		grid-column: 2;
		grid-row: 2;

		max-width: 100%;

		margin: 0;

		font-size: 14px;
		line-height: 1.65;
	}

}