/* ==========================================================
   NAPONTA JOBBAN
   Routines – 2 Column V2
   Különálló desktop variant
   Scope: .nj-routines--2col
   ========================================================== */

@media (min-width: 1025px) {

	/* ======================================================
	   1. Alap finomhangolás
	   ====================================================== */

	.nj-routines.nj-routines--2col h2 + p {
		margin-bottom: 22px !important;
	}

	.nj-routines.nj-routines--2col .nj-routines-list {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}


	/* ======================================================
	   2. Két dinamikus oszlop
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-list > .kt-row-column-wrap {
		display: grid !important;

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

		column-gap: 30px !important;
		row-gap: 0 !important;

		align-items: start !important;

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

		transition:
			grid-template-columns 620ms cubic-bezier(.22, 1, .36, 1),
			column-gap 620ms cubic-bezier(.22, 1, .36, 1);
	}


	/*
	 * Bal oldali rutin aktív.
	 * Szándékosan 56/44 körül, nem 60/40:
	 * a hosszabb magyar címek így még jól törnek.
	 */
	.nj-routines.nj-routines--2col.is-left-active
	.nj-routines-list > .kt-row-column-wrap {
		grid-template-columns:
			minmax(0, 1.12fr)
			minmax(0, .88fr) !important;
	}


	/* Jobb oldali rutin aktív */

	.nj-routines.nj-routines--2col.is-right-active
	.nj-routines-list > .kt-row-column-wrap {
		grid-template-columns:
			minmax(0, .88fr)
			minmax(0, 1.12fr) !important;
	}


	/* ======================================================
	   3. A két oszlop külön stack
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-column {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;

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


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

		gap: 0 !important;

		width: 100%;
		min-width: 0;

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


	/* ======================================================
	   4. Az item alapállapota
	   ====================================================== */

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

		overflow: hidden;

		margin: 0 !important;

		border-top:
			1px solid rgba(46, 94, 78, .13);

		border-radius: 0;

		background: transparent;

		box-shadow:
			inset 0 0 0 rgba(200, 155, 60, 0);

		cursor: pointer;

		transition:
			background 420ms cubic-bezier(.22, 1, .36, 1),
			border-color 300ms ease,
			border-radius 420ms cubic-bezier(.22, 1, .36, 1),
			box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
			opacity 300ms ease;
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item:last-child {
		border-bottom:
			1px solid rgba(46, 94, 78, .13);
	}


	/* ======================================================
	   5. Item belső layout
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item > .kt-row-column-wrap {
		display: grid !important;

		grid-template-columns:
			30px minmax(0, 1fr) !important;

		column-gap: 12px !important;

		align-items: start !important;

		width: 100%;

		margin: 0 !important;
		padding: 12px 8px 12px 0 !important;

		transition:
			padding 460ms cubic-bezier(.22, 1, .36, 1);
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item > .kt-row-column-wrap > * {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;

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


	/* ======================================================
	   6. Sorszám
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-number {
		display: flex !important;
		align-items: center;
		justify-content: center;

		width: 28px !important;
		height: 28px !important;

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

		border-radius: 8px;

		background: rgba(127, 167, 139, .10);
		color: rgba(43, 43, 43, .52);

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

		transition:
			background 320ms ease,
			color 320ms ease,
			transform 460ms cubic-bezier(.22, 1, .36, 1);
	}


	/* ======================================================
	   7. Copy
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-copy {
		width: 100% !important;
		min-width: 0;

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


	.nj-routines.nj-routines--2col
	.nj-routine-copy > .kt-inside-inner-col,
	.nj-routines.nj-routines--2col
	.nj-routine-copy > .kt-row-column-wrap {
		display: flex !important;
		flex-direction: column !important;

		gap: 0 !important;

		width: 100%;

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


	/* ======================================================
	   8. Cím
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-copy h3 {
		margin: 2px 0 0 !important;

		color: rgba(20, 70, 55, .88);

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

		letter-spacing: -.012em;

		transition:
			color 300ms ease,
			transform 460ms cubic-bezier(.22, 1, .36, 1);
	}


	/* ======================================================
	   9. Description – editorial reveal
	   ====================================================== */

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

		max-width: 100%;

		max-height: 0;

		margin: 0 !important;

		opacity: 0;

		color: rgba(43, 43, 43, .61);

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

		transform: translateY(7px);

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

		pointer-events: none;

		transition:
			max-height 520ms cubic-bezier(.22, 1, .36, 1),
			margin-top 520ms cubic-bezier(.22, 1, .36, 1),
			opacity 260ms ease 70ms,
			transform 520ms cubic-bezier(.22, 1, .36, 1),
			clip-path 520ms cubic-bezier(.22, 1, .36, 1);
	}


	/* ======================================================
	   10. ACTIVE STATE
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active {
		border-top-color: transparent;

		border-radius: 11px;

		background:
			linear-gradient(
				90deg,
				rgba(127, 167, 139, .13) 0%,
				rgba(127, 167, 139, .055) 58%,
				rgba(127, 167, 139, .015) 100%
			) !important;

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


	/* Ne maradjon divider közvetlenül az aktív blokk alatt */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active + .nj-routine-item {
		border-top-color: transparent;
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active:last-child {
		border-bottom-color: transparent;
	}


	/* Aktív elem kap egy kicsit több levegőt */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	> .kt-row-column-wrap {
		padding-top: 15px !important;
		padding-bottom: 16px !important;
	}


	/* Aktív sorszám */

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

		transform: translateX(1px);
	}


	/* Aktív cím */

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

		transform: translateX(3px);
	}


	/* Aktív description */

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

		margin-top: 6px !important;

		opacity: 1;

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

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

		pointer-events: auto;
	}


	/* ======================================================
	   11. Hover – csak nem aktív item
	   ====================================================== */

	@media (hover: hover) {

		.nj-routines.nj-routines--2col
		.nj-routine-item:not(.is-active):hover {
			background:
				rgba(127, 167, 139, .045) !important;
		}


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

			transform: translateX(2px);
		}

	}


	/* ======================================================
	   12. Aktív / inaktív oszlop finom hierarchiája
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-column {
		transition:
			opacity 420ms ease;
	}


	.nj-routines.nj-routines--2col.is-left-active
	.nj-routines-column:nth-child(2) {
		opacity: .90;
	}


	.nj-routines.nj-routines--2col.is-right-active
	.nj-routines-column:nth-child(1) {
		opacity: .90;
	}


	/* ======================================================
	   13. Bal oldali kép minimum magasság
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-visual {
		min-height: 500px !important;
	}

}


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

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

	.nj-routines.nj-routines--2col
	.nj-routines-list > .kt-row-column-wrap,

	.nj-routines.nj-routines--2col
	.nj-routine-item,

	.nj-routines.nj-routines--2col
	.nj-routine-item > .kt-row-column-wrap,

	.nj-routines.nj-routines--2col
	.nj-routine-number,

	.nj-routines.nj-routines--2col
	.nj-routine-copy h3,

	.nj-routines.nj-routines--2col
	.nj-routine-copy p:not(.nj-routine-data) {
		transition: none !important;
	}

}

/* ==========================================================
   NAPONTA JOBBAN
   Routines 2 Column V2 – structural fixes
   ========================================================== */

@media (min-width: 1025px) {

	/* ======================================================
	   1. DYNAMIC COLUMN WIDTH
	   JS bridge helyett közvetlenül az active state-et nézzük.
	   ====================================================== */

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

		transition:
			grid-template-columns 600ms cubic-bezier(.22, 1, .36, 1) !important;
	}


	/* Aktív elem az első / bal oszlopban */

	.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.16fr)
			minmax(0, .84fr) !important;
	}


	/* Aktív elem a második / jobb oszlopban */

	.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, .84fr)
			minmax(0, 1.16fr) !important;
	}



	/* ======================================================
	   2. HOVER SHIFT RESET
	   A master CSS 8px-es padding-leftját teljesen kikapcsoljuk.
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item,

	.nj-routines.nj-routines--2col
	.nj-routine-item:hover {
		padding-left: 0 !important;
	}



	/* ======================================================
	   3. NUMBER / ACCENT SPACING
	   Az aktív bal vonal és a szám között legyen valódi hely.
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routine-item > .kt-row-column-wrap {
		padding-left: 11px !important;
		padding-right: 9px !important;
	}


	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	> .kt-row-column-wrap {
		padding-left: 11px !important;

		padding-top: 15px !important;
		padding-bottom: 16px !important;
	}


	/* A szám maga már ne mozogjon */

	.nj-routines.nj-routines--2col
	.nj-routine-item.is-active
	.nj-routine-number {
		transform: none !important;
	}



	/* ======================================================
	   4. STABLE MAIN LAYOUT
	   A bal kép ne kövesse többé a jobb lista magasságát.
	   ====================================================== */

	.nj-routines.nj-routines--2col
	> .kt-row-column-wrap {
		align-items: start !important;
	}



	/* ======================================================
	   5. STABLE VISUAL FRAME
	   A kép méretét a saját szélessége határozza meg,
	   nem a rutinlista aktuális magassága.
	   ====================================================== */

	.nj-routines.nj-routines--2col
	.nj-routines-visual {
		height: auto !important;

		min-height: 0 !important;
		max-height: none !important;

		aspect-ratio: .86 / 1;

		align-self: start !important;

		overflow: hidden;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-visual > .kt-inside-inner-col {
		position: absolute !important;
		inset: 0;

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



	/* ======================================================
	   6. COLUMNS STAY TOP-ALIGNED
	   A keskenyebb oldal se próbáljon stretch-elni.
	   ====================================================== */

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



	/* ======================================================
	   7. COLUMN DE-EMPHASIS – szintén :has() alapján
	   ====================================================== */

	.nj-routines.nj-routines--2col:
	has(
		.nj-routines-column:first-child
		.nj-routine-item.is-active
	)
	.nj-routines-column:nth-child(2) {
		opacity: .90;
	}


	.nj-routines.nj-routines--2col:
	has(
		.nj-routines-column:nth-child(2)
		.nj-routine-item.is-active
	)
	.nj-routines-column:first-child {
		opacity: .90;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-column {
		transition:
			opacity 400ms ease !important;
	}

}

/* ==========================================================
   ROUTINES 2COL – visual transition stabilization
   ========================================================== */

@media (min-width: 1025px) {

	/* ------------------------------------------------------
	   1. Kemény clipping a lekerekített képkonténeren
	   ------------------------------------------------------ */

	.nj-routines.nj-routines--2col
	.nj-routines-visual {
		overflow: hidden !important;

		border-radius: 24px;

		/*
		 * A sima overflow:hidden + border-radius
		 * transformált childoknál néha 1 frame-re elenged.
		 */
		clip-path: inset(0 round 24px);

		-webkit-transform: translateZ(0);
		transform: translateZ(0);

		contain: paint;

		background: #144637;
	}


	.nj-routines.nj-routines--2col
	.nj-routines-visual > .kt-inside-inner-col {
		overflow: hidden !important;

		border-radius: inherit;
	}


	/* ------------------------------------------------------
	   2. Explicit slide stacking
	   ------------------------------------------------------ */

	.nj-routines.nj-routines--2col
	.nj-routine-slide {
		z-index: 0;

		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		transform-origin: center center;

		will-change: opacity, transform;
	}


	/* A legújabb aktív kép MINDIG az előző fölé kerül */

	.nj-routines.nj-routines--2col
	.nj-routine-slide.is-active {
		z-index: 1;
	}


	/* ------------------------------------------------------
	   3. Gradient overlay mindig a képek felett
	   ------------------------------------------------------ */

	.nj-routines.nj-routines--2col
	.nj-routines-visual::before {
		z-index: 2 !important;
	}


	/* Glass caption továbbra is minden felett */

	.nj-routines.nj-routines--2col
	.nj-routines-overlay {
		z-index: 4 !important;
	}


	/* ------------------------------------------------------
	   4. Maga az img se okozzon compositing artefactot
	   ------------------------------------------------------ */

	.nj-routines.nj-routines--2col
	.nj-routine-slide img {
		display: block;

		width: 100% !important;
		height: 100% !important;

		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		transform: translateZ(0);
	}

}