/* ==========================================================
   NAPONTA JOBBAN
   Routines – 2 Column V3 Polish
   Desktop only
   ========================================================== */

@media (min-width: 1025px) {

	.nj-routines.nj-routines--2col {
		--nj-routine-ease: cubic-bezier(.22, 1, .36, 1);
		--nj-routine-motion: 560ms;
	}


	/* ======================================================
	   1. FINOMABB COLUMN FOCUS
	   Ne nyomjuk össze túl agresszívan a másik oldalt.
	   ====================================================== */

	.nj-routines.nj-routines--2col:
	has(
		.nj-routines-column:first-child
		.nj-routine-item.is-active
	)
	.nj-routines-list > .kt-row-column-wrap {
		grid-template-columns:
			minmax(0, 1.08fr)
			minmax(0, .92fr) !important;
	}


	.nj-routines.nj-routines--2col:
	has(
		.nj-routines-column:nth-child(2)
		.nj-routine-item.is-active
	)
	.nj-routines-list > .kt-row-column-wrap {
		grid-template-columns:
			minmax(0, .92fr)
			minmax(0, 1.08fr) !important;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-list > .kt-row-column-wrap {
		column-gap: 28px !important;

		/*
		 * FONTOS:
		 * mindkét column ugyanakkora magasságot kap.
		 */
		align-items: stretch !important;

		transition:
			grid-template-columns
			var(--nj-routine-motion)
			var(--nj-routine-ease) !important;
	}



	/* ======================================================
	   2. KÉT OSZLOP AZONOS MAGASSÁGGAL
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-column {
		align-self: stretch !important;

		height: auto !important;

		/*
		 * Korábbi opacity hierarchy kikapcsolása.
		 * Ettől is tűnt túl kicsinek a másik oldal.
		 */
		opacity: 1 !important;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-column > .kt-inside-inner-col {
		display: flex !important;
		flex-direction: column !important;

		/*
		 * Az első és utolsó elem mindig egy vonalban marad
		 * a másik oszloppal.
		 */
		justify-content: space-between !important;

		gap: 7px !important;

		height: 100% !important;
		min-height: 100%;

		padding: 0 !important;
	}



	/* ======================================================
	   3. TÁBLÁZATOS VONALAK ELTÜNTETÉSE
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item,
	.nj-routines.nj-routines--2col
	.nj-routine-item:last-child,
	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active + .nj-routine-item {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}



	/* ======================================================
	   4. INACTIVE ITEM
	   Inkább editorial navigation, mint table row.
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item {
		position: relative;

		overflow: hidden;

		min-height: 49px;

		border-radius: 10px;

		background: transparent !important;

		box-shadow: none;

		transform: translateX(0);

		transition:
			background-color 320ms ease,
			transform var(--nj-routine-motion) var(--nj-routine-ease),
			box-shadow 400ms var(--nj-routine-ease);
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item > .kt-row-column-wrap {
		min-height: 49px;

		padding:
			10px 10px 10px 10px !important;

		align-items: center !important;

		transition:
			min-height var(--nj-routine-motion) var(--nj-routine-ease),
			padding var(--nj-routine-motion) var(--nj-routine-ease);
	}



	/* ======================================================
	   5. NUMBER
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-number {
		flex-shrink: 0;

		transition:
			background-color 320ms ease,
			color 320ms ease,
			transform 460ms var(--nj-routine-ease);
	}



	/* ======================================================
	   6. TITLE
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-copy h3 {
		color: rgba(20, 70, 55, .87);

		transition:
			color 300ms ease,
			transform 500ms var(--nj-routine-ease);
	}



	/* ======================================================
	   7. DESCRIPTION – NYUGODT REVEAL
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-copy p:not(.nj-routine-data) {
		overflow: hidden;

		max-height: 0;

		margin-top: 0 !important;

		opacity: 0;

		transform:
			translateX(0)
			translateY(8px);

		clip-path: inset(0 0 100% 0);

		transition:
			max-height 500ms var(--nj-routine-ease),
			margin-top 500ms var(--nj-routine-ease),
			transform 460ms var(--nj-routine-ease),
			clip-path 460ms var(--nj-routine-ease),
			opacity 180ms ease;
	}



	/* ======================================================
	   8. ACTIVE SURFACE
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active {
		min-height: 82px;

		border-radius: 12px;

		background:
			linear-gradient(
				90deg,
				rgba(127, 167, 139, .14) 0%,
				rgba(127, 167, 139, .065) 54%,
				rgba(127, 167, 139, .012) 100%
			) !important;

		box-shadow:
			inset 2px 0 0 rgba(200, 155, 60, .92);

		/*
		 * Layoutot nem változtat,
		 * csak optikai fókuszt ad.
		 */
		transform: translateX(4px);
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	> .kt-row-column-wrap {
		min-height: 82px;

		padding:
			13px 12px 13px 11px !important;

		align-items: start !important;
	}



	/* Number */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	.nj-routine-number {
		background: #C89B3C !important;
		color: #144637 !important;

		transform: scale(1.04);
	}



	/* Title */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	.nj-routine-copy h3 {
		color: #144637;

		transform: translateX(3px);
	}



	/* Description */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	.nj-routine-copy p:not(.nj-routine-data) {
		max-height: 44px;

		margin-top: 5px !important;

		opacity: 1;

		transform:
			translateX(3px)
			translateY(0);

		clip-path: inset(0 0 0 0);

		/*
		 * Belépéskor a layout mozgása után pár ms-mal
		 * jelenjen meg a szöveg.
		 */
		transition:
			max-height 500ms var(--nj-routine-ease),
			margin-top 500ms var(--nj-routine-ease),
			transform 460ms var(--nj-routine-ease),
			clip-path 460ms var(--nj-routine-ease),
			opacity 260ms ease 90ms;
	}



	/* ======================================================
	   9. HOVER
	   Ne mozgassa fizikailag az egész sort.
	   ====================================================== */

	@media (hover: hover) {

		.nj-routines.nj-routines--2col
		.nj-routine-item:not(.is-active):hover {
			padding-left: 0 !important;

			background:
				rgba(127, 167, 139, .055) !important;

			transform: translateX(2px);
		}


		.nj-routines.nj-routines--2col
		.nj-routine-item:not(.is-active):hover
		.nj-routine-copy h3 {
			color: #144637;

			transform: translateX(2px);
		}

	}



	/* ======================================================
	   10. IMAGE + LIST MOTION HANGOLÁS
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-slide {
		transition:
			opacity 540ms ease,
			transform 780ms var(--nj-routine-ease),
			visibility 540ms !important;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-overlay {
		transition:
			opacity 220ms ease,
			transform 320ms var(--nj-routine-ease) !important;
	}

}

/* ==========================================================
   ROUTINES 2COL – equal column height fix
   ========================================================== */

@media (min-width: 1025px) {

	/*
	 * A két rutin-oszlop közös, stabil vertikális tere.
	 *
	 * 310px körül indul kisebb desktopon,
	 * 330px fölé nem nő.
	 */
	.nj-routines.nj-routines--2col
	.nj-routines-list {
		--nj-routines-list-height: clamp(310px, 23vw, 330px);
	}


	/* A kétoszlopos grid kapjon konkrét magasságot */

	.nj-routines.nj-routines--2col
	.nj-routines-list > .kt-row-column-wrap {
		height: var(--nj-routines-list-height) !important;

		align-items: stretch !important;
	}


	/* Mindkét Kadence column pontosan kitölti */

	.nj-routines.nj-routines--2col
	.nj-routines-column {
		height: 100% !important;
		min-height: 0 !important;

		align-self: stretch !important;
	}


	/* Belső column wrapper is teljes magasságú */

	.nj-routines.nj-routines--2col
	.nj-routines-column > .kt-inside-inner-col {
		display: flex !important;
		flex-direction: column !important;

		justify-content: space-between !important;

		width: 100%;
		height: 100% !important;
		min-height: 0 !important;

		gap: 0 !important;

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


	/*
	 * Az itemeknek nem engedjük,
	 * hogy flex-grow-val torzítsák egymást.
	 */
	.nj-routines.nj-routines--2col
	.nj-routine-item {
		flex:
			0 0 auto !important;
	}

}