/* ==========================================================
   NAPONTA JOBBAN
   Homepage Hero – consolidated
   ========================================================== */

.nj-home-hero {
	--nj-hero-primary: var(--theme-palette-color-1, #2E5E4E);
	--nj-hero-accent: var(--theme-palette-color-2, #C89B3C);
	--nj-hero-dark: var(--theme-palette-color-4, #144637);
	--nj-hero-bg: var(--theme-palette-color-7, #FAF8F3);

	position: relative;
	isolation: isolate;

	width: min(1280px, calc(100% - 72px));
	min-height: 610px;

	margin: 38px auto 0;

	overflow: hidden;
	border-radius: 28px;

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;

	box-shadow:
		0 22px 55px rgba(43, 43, 43, 0.08);
}


/* ==========================================================
   Image treatment
   ========================================================== */

.nj-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(20, 70, 55, 0.56) 0%,
			rgba(20, 70, 55, 0.42) 32%,
			rgba(20, 70, 55, 0.28) 58%,
			rgba(20, 70, 55, 0.18) 100%
		);
}


/* ==========================================================
   Kadence outer wrapper
   ========================================================== */

.nj-home-hero > .kt-row-column-wrap {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	width: 100%;
	min-height: inherit;

	padding: 72px 50px;
}


/* ==========================================================
   Frosted glass panel
   ========================================================== */

.nj-hero-card {
	position: relative;

	display: flex;
	align-items: center;

	width: min(590px, 58%);
	min-height: 370px;

	margin: 0;
	padding: 40px 42px 38px;

	background:
		linear-gradient(
			135deg,
			rgba(112, 128, 118, 0.34),
			rgba(168, 182, 173, 0.18)
		);

	-webkit-backdrop-filter: blur(22px) saturate(0.95);
	backdrop-filter: blur(22px) saturate(0.95);

	border: 1px solid rgba(255, 255, 255, 0.22);
	border-left: 2px solid var(--nj-hero-accent);
	border-radius: 14px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 20px 50px rgba(17, 43, 35, 0.14);
}


/* Ne a Kadence belső wrapper adja a spacinget */

.nj-hero-card > .kt-row-column-wrap {
	width: 100%;
	padding: 0;
}


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

.nj-hero-card .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 100%;
}


/* ==========================================================
   Eyebrow / chip
   ========================================================== */

.nj-hero-chip {
	display: inline-flex;
	align-items: center;

	width: fit-content;

	margin: 0 0 20px !important;
	padding: 6px 12px;

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.66);
	color: var(--nj-hero-primary);

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

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


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

.nj-hero-card h1 {
	max-width: 500px;

	margin: 0 0 20px;

	color: #FFFFFF;

	font-family: "Libre Caslon Text", Georgia, serif;
	font-size: clamp(48px, 4vw, 62px);
	font-weight: 400;
	line-height: 1.06;

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

	text-shadow:
		0 2px 16px rgba(20, 50, 40, 0.14);
}


/* ==========================================================
   Lead
   ========================================================== */

.nj-hero-card p:not(.nj-hero-chip) {
	max-width: 485px;

	margin: 0 0 28px;

	color: rgba(255, 255, 255, 0.90);

	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;

	text-shadow:
		0 1px 8px rgba(20, 50, 40, 0.12);
}


/* ==========================================================
   CTA
   ========================================================== */

.nj-hero-card .wp-block-buttons,
.nj-hero-card .kb-buttons-wrap {
	margin: 0;
}


.nj-hero-card :is(.wp-block-button__link, .kb-button) {
	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}


/* Finom nyíl, nem kell külön ikonblokk */

.nj-hero-card :is(.wp-block-button__link, .kb-button)::after {
	content: "→";

	display: inline-block;

	margin-left: 6px;

	font-size: 17px;
	line-height: 1;

	transition: transform 180ms ease;
}


.nj-hero-card :is(.wp-block-button__link, .kb-button):hover {
	transform: translateY(-2px);

	box-shadow:
		0 11px 25px rgba(200, 155, 60, 0.22);
}


.nj-hero-card :is(.wp-block-button__link, .kb-button):hover::after {
	transform: translateX(3px);
}


.nj-hero-card :is(.wp-block-button__link, .kb-button):focus-visible {
	outline: 3px solid rgba(20, 70, 55, 0.32);
	outline-offset: 3px;
}


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

@media (max-width: 1024px) {

	.nj-home-hero {
		width: calc(100% - 40px);
		min-height: 600px;

		margin-top: 40px;

		border-radius: 22px;
	}


	.nj-home-hero > .kt-row-column-wrap {
		padding: 40px;
	}


	.nj-hero-card {
		width: min(500px, 72%);

		padding: 36px;
	}


	.nj-hero-card h1 {
		font-size: clamp(44px, 5vw, 54px);
	}

}


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

@media (max-width: 767px) {

	.nj-home-hero {
		/*
		 * Mobilon edge-to-edge hero.
		 * Full Width Kadence row esetén nincs szükség
		 * negatív margin hackre.
		 */
		width: 100%;
		max-width: none;

		min-height: 560px;

		margin-top: 0;

		border-radius: 0;
		box-shadow: none;

		background-position: center center !important;
	}


	.nj-home-hero::before {
		/*
		 * Mobilon az oldalirányú gradient helyett
		 * egy enyhe, teljes képi fátyol működik jobban.
		 */
		background:
			linear-gradient(
				180deg,
				rgba(20, 70, 55, 0.04) 0%,
				rgba(20, 70, 55, 0.12) 100%
			);
	}


	.nj-home-hero > .kt-row-column-wrap {
		min-height: inherit;

		padding: 32px 20px;
	}


	.nj-hero-card {
		width: min(100%, 420px);
		min-height: auto;

		margin-inline: auto;
		padding: 28px 24px;

		/*
		 * Marad a sötétebb frosted-glass irány,
		 * mert a Stitch verzió fehér tipográfiát használ.
		 */
		background:
			linear-gradient(
				135deg,
				rgba(74, 94, 83, 0.62),
				rgba(108, 126, 116, 0.42)
			);

		-webkit-backdrop-filter: blur(16px) saturate(0.95);
		backdrop-filter: blur(16px) saturate(0.95);

		text-align: center;
	}


	.nj-hero-card .kt-inside-inner-col {
		align-items: center;
	}


	.nj-hero-chip {
		margin-inline: auto !important;
		margin-bottom: 16px !important;
	}


	.nj-hero-card h1 {
		max-width: 330px;

		margin-bottom: 16px;

		font-size: clamp(38px, 10.5vw, 44px);
		line-height: 1.10;

		letter-spacing: -0.02em;
	}


	.nj-hero-card p:not(.nj-hero-chip) {
		max-width: 340px;

		margin-bottom: 26px;

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


	.nj-hero-card .wp-block-buttons,
	.nj-hero-card .kb-buttons-wrap {
		justify-content: center;
	}


	.nj-hero-card :is(.wp-block-button__link, .kb-button) {
		min-height: 48px;
	}

}


/* ==========================================================
   Small phones
   ========================================================== */

@media (max-width: 380px) {

	.nj-home-hero > .kt-row-column-wrap {
		padding-inline: 16px;
	}


	.nj-hero-card {
		padding: 26px 20px;
	}


	.nj-hero-card h1 {
		font-size: 37px;
	}

}


/* ==========================================================
   Entrance animations
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

	.nj-hero-card {
		animation:
			nj-hero-card-enter 650ms
			cubic-bezier(0.22, 1, 0.36, 1)
			80ms both;
	}


	.nj-hero-chip {
		animation:
			nj-hero-chip-enter 500ms
			cubic-bezier(0.22, 1, 0.36, 1)
			220ms both;
	}

}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.nj-hero-card :is(.wp-block-button__link, .kb-button),
	.nj-hero-card :is(.wp-block-button__link, .kb-button)::after {
		transition: none;
	}

}


/* ==========================================================
   Keyframes
   ========================================================== */

@keyframes nj-hero-card-enter {

	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


@keyframes nj-hero-chip-enter {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}