/* ==========================================================
   NAPONTA JOBBAN
   Homepage – Value / "Mit kapsz?"
   ========================================================== */

.nj-value {
	position: relative;

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

	padding: 88px 72px;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#144637 0%,
			#235747 55%,
			#2E5E4E 100%
		);

	border-radius: 28px;

	box-shadow:
		0 24px 60px rgba(20, 70, 55, 0.10);

	color: #FAF8F3;
}


/* Finom ambient háttérfolt */
.nj-value::before {
	content: "";

	position: absolute;
	width: 460px;
	height: 460px;

	right: -160px;
	top: -220px;

	border-radius: 50%;

	background: rgba(127, 167, 139, 0.12);

	filter: blur(2px);

	pointer-events: none;
}


/* Amber glow / második réteg */
.nj-value::after {
	content: "";

	position: absolute;
	width: 300px;
	height: 300px;

	left: -150px;
	bottom: -180px;

	border-radius: 50%;

	background: rgba(200, 155, 60, 0.07);

	pointer-events: none;
}


/* Kadence outer layout */
.nj-value > .kt-row-column-wrap {
	position: relative;
	z-index: 1;

	align-items: center;

	gap: clamp(48px, 6vw, 90px);

	padding: 0;
}


/* ==========================================================
   Left editorial column
   ========================================================== */

.nj-value .nj-section-eyebrow {
	margin: 0 0 16px;

	color: #F0BF5C;

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

	letter-spacing: 0.10em;
	text-transform: uppercase;
}


.nj-value h2 {
	max-width: 460px;

	margin: 0 0 22px;

	color: #FAF8F3;

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

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


.nj-value h2 + p {
	max-width: 430px;

	margin: 0;

	color: rgba(250, 248, 243, 0.76);

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


/* ==========================================================
   Right 2 × 2 grid
   ========================================================== */

.nj-value-grid > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 18px;

	padding: 0;
}


/* ==========================================================
   Value card
   ========================================================== */

.nj-value-card {
	position: relative;

	min-height: 250px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(250, 248, 243, 0.115),
			rgba(250, 248, 243, 0.055)
		);

	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	border: 1px solid rgba(250, 248, 243, 0.13);
	border-radius: 18px;

	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 220ms ease,
		border-color 220ms ease;
}


/* Kadence column inner */
.nj-value-card > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	height: 100%;

	padding: 28px 27px 26px;
}


/* ==========================================================
   Numbering 01–04
   ========================================================== */

.nj-value-grid {
	counter-reset: nj-value-item;
}


.nj-value-card {
	counter-increment: nj-value-item;
}


.nj-value-card::after {
	content: "0" counter(nj-value-item);

	position: absolute;
	top: 22px;
	right: 24px;

	color: rgba(250, 248, 243, 0.055);

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

	pointer-events: none;
}


/* ==========================================================
   Icon badge
   ========================================================== */

.nj-value-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 46px !important;
	height: 46px !important;

	margin: 0 0 22px !important;

	border: 1px solid rgba(240, 191, 92, 0.26);
	border-radius: 14px;

	background:
		linear-gradient(
			145deg,
			rgba(200, 155, 60, 0.20),
			rgba(200, 155, 60, 0.09)
		);
}


.nj-value-icon svg {
	width: 23px !important;
	height: 23px !important;

	color: #F0BF5C;
	fill: currentColor;
}


.nj-value-icon > *,
.nj-value-icon span {
	display: flex;
	align-items: center;
	justify-content: center;

	margin: 0 !important;
	padding: 0 !important;
}


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

.nj-value-card h3 {
	max-width: 230px;

	margin: 0 0 12px;

	color: #FAF8F3;

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

	letter-spacing: -0.015em;
}


.nj-value-card p {
	margin: 0;

	color: rgba(250, 248, 243, 0.68);

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


/* ==========================================================
   Desktop hover
   ========================================================== */

@media (hover: hover) {

	.nj-value-card:hover {
		transform: translateY(-4px);

		background:
			linear-gradient(
				145deg,
				rgba(250, 248, 243, 0.15),
				rgba(250, 248, 243, 0.075)
			);

		border-color: rgba(240, 191, 92, 0.22);
	}

}


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

@media (max-width: 1024px) {

	.nj-value {
		width: calc(100% - 40px);

		padding: 68px 48px;
		margin-bottom: 88px;
	}


	.nj-value > .kt-row-column-wrap {
		gap: 48px;
	}


	.nj-value-grid > .kt-row-column-wrap {
		gap: 15px;
	}


	.nj-value-card > .kt-inside-inner-col {
		padding: 25px 23px;
	}

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

	.nj-value {
		width: calc(100% - 40px);

		margin-bottom: 72px;

		padding: 52px 24px;

		border-radius: 22px;
	}


	.nj-value > .kt-row-column-wrap {
		display: block;

		padding: 0;
	}


	/* Bal tartalom */
	.nj-value h2 {
		max-width: 100%;

		margin-bottom: 18px;

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


	.nj-value h2 + p {
		max-width: 100%;

		font-size: 15px;
		line-height: 1.7;
	}


	/* grid lejjebb */
	.nj-value-grid {
		margin-top: 38px;
	}


	.nj-value-grid > .kt-row-column-wrap {
		display: grid !important;
		grid-template-columns: 1fr;

		gap: 14px;
	}


	.nj-value-card {
		min-height: 0;

		border-radius: 16px;
	}


	.nj-value-card > .kt-inside-inner-col {
		padding: 25px 22px 24px;
	}


	.nj-value-card h3 {
		max-width: calc(100% - 54px);

		font-size: 24px;
	}


	.nj-value-card p {
		max-width: 92%;

		font-size: 14px;
	}

}