/*
 * JK Plansze – poziomy pas plansz 100vh.
 * Wszystko pod html.jk-js body.jk-plansze-on: bez JS strona zostaje w zwykłym pionie.
 * Selektory strukturalne (bez klas z JS) – układ działa, nawet gdy skrypt jeszcze się nie wczytał.
 */

html.jk-js body.jk-plansze-on {
	--jk-h: 100vh;
	--jk-menu-w: 0px;
	--jk-track-w: calc(100vw - var(--jk-menu-w));
	--jk-gap: clamp(16px, 2.5vw, 44px);
	--jk-pad-y: clamp(12px, 4vh, 48px);
	--jk-pad-top: var(--jk-pad-y);
	--jk-peek: 6vw;
	--jk-img-h: calc(var(--jk-h) - var(--jk-pad-top) - var(--jk-pad-y) - 20px);
	--jk-max-w: calc(var(--jk-track-w) - var(--jk-peek));
	--jk-accent: #4e4e4e;
}
@supports (height: 100dvh) {
	html.jk-js body.jk-plansze-on { --jk-h: 100dvh; }
}
@media (min-width: 1025px) {
	html.jk-js body.jk-plansze-on:has(.elementor-widget-nav-menu),
	html.jk-js body.jk-plansze-on.jk-menu-on,
	html.jk-js body.jk-plansze-on.jk-has-menu { --jk-menu-w: clamp(180px, 15vw, 260px); }
}
@media (max-width: 767px) {
	html.jk-js body.jk-plansze-on {
		--jk-gap: 12px;
		--jk-peek: 12vw;
	}
}
@media (max-width: 1024px) {
	/* Miejsce na hamburger menu nad treścią planszy. */
	html.jk-js body.jk-plansze-on:has(.elementor-widget-nav-menu),
	html.jk-js body.jk-plansze-on.jk-menu-on,
	html.jk-js body.jk-plansze-on.jk-has-menu { --jk-pad-top: 60px; }
}

html.jk-js:has(body.jk-plansze-on),
html.jk-js body.jk-plansze-on {
	overflow: hidden;
	height: 100%;
	overscroll-behavior: none;
}

/* ---------- Neutralizacja starego hacka z obrotem (Custom CSS #21) ---------- */

html.jk-js body.jk-plansze-on .elementor[data-elementor-type="wp-page"] > .elementor-inner {
	transform: none !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
}

/* ---------- Pas (track) ---------- */

html.jk-js body.jk-plansze-on .elementor[data-elementor-type="wp-page"] > .elementor-inner > .elementor-section-wrap,
html.jk-js body.jk-plansze-on .jk-track {
	position: fixed !important;
	top: 0;
	bottom: 0;
	left: var(--jk-menu-w);
	right: 0;
	width: auto !important;
	height: var(--jk-h);
	transform: none !important;
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	outline: none;
}
html.jk-js body.jk-plansze-on .elementor-section-wrap::-webkit-scrollbar,
html.jk-js body.jk-plansze-on .jk-track::-webkit-scrollbar { display: none; }

/* Na dotyku natywny miękki snap; na myszy/trackpadzie snap robi JS (bez walki z animacją). */
@media (pointer: coarse) {
	html.jk-js body.jk-plansze-on .jk-track { scroll-snap-type: x proximity; }
	html.jk-js body.jk-plansze-on .jk-track.jk-animating { scroll-snap-type: none; }
}
html.jk-js body.jk-plansze-on .jk-track.jk-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}
html.jk-js body.jk-plansze-on .jk-track.jk-dragging * { pointer-events: none; }

/* ---------- Plansza ---------- */

html.jk-js body.jk-plansze-on .elementor-section-wrap > .elementor-top-section,
html.jk-js body.jk-plansze-on .jk-panel {
	flex: 0 0 auto;
	display: flex !important;
	flex-direction: column;
	width: max-content !important;
	max-width: var(--jk-track-w);
	height: var(--jk-h) !important;
	min-height: 0 !important;
	left: auto !important;
	margin: 0 !important;
	padding: var(--jk-pad-top) calc(var(--jk-gap) / 2) var(--jk-pad-y) !important;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
	scroll-snap-align: start;
	box-sizing: border-box;
}
html.jk-js body.jk-plansze-on .jk-panel.jk-snap-no { scroll-snap-align: none; }
html.jk-js body.jk-plansze-on .jk-panel.jk-first { padding-left: var(--jk-gap) !important; }
html.jk-js body.jk-plansze-on .jk-panel.jk-last { padding-right: var(--jk-gap) !important; }

/* Kontener: wyśrodkowany w pionie, bez wysokości z Elementora (height:full, custom_height). */
html.jk-js body.jk-plansze-on .elementor-section-wrap > .elementor-top-section > .elementor-container {
	flex: none;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: auto 0 !important;
}
html.jk-js body.jk-plansze-on .elementor-section-wrap > .elementor-top-section > .elementor-container::after { display: none; }

/* Tekst i domyślne: szerokość boxed z Elementora, ale nie szerzej niż ekran minus „zajawka” następnej. */
html.jk-js body.jk-plansze-on .jk-track > .jk-panel.jk-panel--text {
	width: min(var(--jk-boxed, 900px) + var(--jk-gap), var(--jk-max-w)) !important;
}
html.jk-js body.jk-plansze-on .jk-panel--text > .elementor-container { max-width: none !important; }

/* Zdjęcia: wysokość planszy, szerokość z proporcji. */
html.jk-js body.jk-plansze-on .jk-panel--image > .elementor-container { max-width: none !important; }
html.jk-js body.jk-plansze-on .jk-panel--image .elementor-widget-image img {
	height: var(--jk-img-h) !important;
	width: auto !important;
	max-width: calc(var(--jk-max-w) - var(--jk-gap) - 20px) !important;
	object-fit: contain;
	-webkit-user-drag: none;
}
html.jk-js body.jk-plansze-on .jk-panel--image .elementor-column { width: auto !important; }

/* Wideo / iframe */
html.jk-js body.jk-plansze-on .jk-track > .jk-panel.jk-panel--media {
	width: min(var(--jk-media-w, 1280px), var(--jk-max-w)) !important;
}
html.jk-js body.jk-plansze-on .jk-panel--media > .elementor-container { max-width: none !important; }
html.jk-js body.jk-plansze-on .jk-panel--media iframe,
html.jk-js body.jk-plansze-on .jk-panel--media video {
	width: 100% !important;
	height: auto !important;
	max-height: var(--jk-img-h);
	aspect-ratio: var(--jk-ratio, 16 / 9);
	display: block;
}

/* Warianty szerokości z panelu Elementora */
html.jk-js body.jk-plansze-on .jk-track > .jk-panel.jk-w-screen { width: var(--jk-track-w) !important; }
html.jk-js body.jk-plansze-on .jk-track > .jk-panel.jk-w-narrow { width: min(600px, var(--jk-max-w)) !important; }

html.jk-js body.jk-plansze-on .jk-track > .jk-panel.jk-empty { display: none !important; }
@media (max-width: 767px) {
	html.jk-js body.jk-plansze-on .elementor-top-section.jk-role-hidden-mobile { display: none !important; }
}

/* ---------- Sekcje „stałe, poza pasem” (rola fixed) ---------- */

html.jk-js body.jk-plansze-on .jk-track > .jk-fixed {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 50;
	width: var(--jk-menu-w) !important;
	height: var(--jk-h) !important;
	max-width: none;
	padding: var(--jk-pad-y) 0 !important;
	overflow-y: auto;
	background: #fff;
	scroll-snap-align: none;
}
html.jk-js body.jk-plansze-on .jk-track > .jk-fixed > .elementor-container {
	margin: 0 !important;
	max-width: none !important;
}

/* Sekcja z widgetem menu Elementora jest zastępowana menu wtyczki. */
html.jk-js body.jk-plansze-on.jk-menu-on .elementor-section-wrap > .elementor-top-section:has(.elementor-widget-nav-menu),
html.jk-js body.jk-plansze-on.jk-menu-on .jk-track > .jk-nav-source {
	display: none !important;
}

/* ---------- Menu: kolumna po lewej (desktop) / pełny ekran (≤1024px) ---------- */

.jk-menu,
.jk-menu-btn { display: none; }

html.jk-js body.jk-plansze-on .jk-menu {
	--jk-menu-fg: #7a7a7a;
	--jk-menu-strong: #1f1f1f;
	--jk-menu-line: #e6e6e6;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: var(--jk-menu-w);
	height: var(--jk-h);
	background: #fff;
	font-family: Roboto, system-ui, sans-serif;
}
.jk-menu__scroll {
	height: 100%;
	box-sizing: border-box;
	padding: clamp(20px, 4vh, 44px) 18px clamp(20px, 4vh, 44px) clamp(20px, 2.1vw, 30px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #d6d6d6 transparent;
}
.jk-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jk-menu__row {
	display: flex;
	align-items: center;
}
.jk-menu__link {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	padding: 10px 0;
	color: var(--jk-menu-fg);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: color .15s;
	overflow-wrap: anywhere;
}
.jk-menu__link:hover,
.jk-menu__item.is-current > .jk-menu__link,
.jk-menu__item.is-current > .jk-menu__row > .jk-menu__link,
.jk-menu__item.is-ancestor > .jk-menu__row > .jk-menu__link,
.jk-menu__item.is-open > .jk-menu__row > .jk-menu__link { color: var(--jk-menu-strong); }
.jk-menu__link:focus-visible,
.jk-menu__toggle:focus-visible,
.jk-menu-btn:focus-visible {
	outline: 2px solid var(--jk-menu-strong, #1f1f1f);
	outline-offset: 2px;
	border-radius: 2px;
}
.jk-menu__toggle--icon {
	all: unset;
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
	color: var(--jk-menu-fg);
}
.jk-menu__count {
	font-size: 11px;
	font-weight: 500;
	color: #a3a3a3;
	letter-spacing: .02em;
}
.jk-menu__chev {
	width: 7px;
	height: 7px;
	margin-left: auto;
	margin-right: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s ease;
}
.jk-menu__item.is-open > .jk-menu__row .jk-menu__chev { transform: translateY(2px) rotate(-135deg); }

/* Rozwijana karta: płynnie przez grid 0fr → 1fr; zwinięta nie łapie fokusu. */
.jk-menu__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.jk-menu__item.is-open > .jk-menu__panel {
	grid-template-rows: 1fr;
	visibility: inherit; /* nie „visible” – inaczej przebija ukryte menu mobilne i łapie dotyk */
	transition: grid-template-rows .3s ease, visibility 0s;
}
.jk-menu__panel-inner {
	min-height: 0;
	overflow: hidden;
}
.jk-menu__list--sub {
	margin: 2px 0 10px 1px;
	border-left: 1px solid var(--jk-menu-line);
}
.jk-menu__list--sub .jk-menu__link {
	padding: 6px 0 6px 12px;
	margin-left: -1px;
	border-left: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
}
.jk-menu__list--sub .jk-menu__item.is-current > .jk-menu__link {
	border-left-color: var(--jk-menu-strong);
}

@media (max-width: 1024px) {
	html.jk-js body.jk-plansze-on .jk-menu {
		width: 100vw;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	}
	html.jk-js body.jk-plansze-on.jk-menu-open .jk-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .25s ease, transform .25s ease, visibility 0s;
	}
	.jk-menu__scroll {
		max-width: 560px;
		margin: 0 auto;
		padding: 76px 24px 40px;
	}
	.jk-menu__list--top > .jk-menu__item { border-bottom: 1px solid var(--jk-menu-line); }
	.jk-menu__list--top > .jk-menu__item > .jk-menu__link,
	.jk-menu__list--top > .jk-menu__item > .jk-menu__row > .jk-menu__link {
		padding: 16px 0;
		font-size: 22px;
	}
	.jk-menu__toggle--icon { width: 44px; height: 44px; }
	.jk-menu__list--sub { margin: 0 0 16px 2px; }
	.jk-menu__list--sub .jk-menu__link {
		padding: 10px 0 10px 16px;
		font-size: 16px;
	}

	html.jk-js body.jk-plansze-on .jk-menu-btn {
		all: unset;
		box-sizing: border-box;
		position: fixed;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 70;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 40px;
		padding: 0 16px 0 14px;
		border-radius: 20px;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
		color: #1f1f1f;
		font: 600 14px/1 Roboto, system-ui, sans-serif;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.jk-menu-btn__bars {
		position: relative;
		width: 18px;
		height: 12px;
	}
	.jk-menu-btn__bars span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: transform .25s ease, opacity .2s ease, top .25s ease;
	}
	.jk-menu-btn__bars span:nth-child(1) { top: 0; }
	.jk-menu-btn__bars span:nth-child(2) { top: 5px; }
	.jk-menu-btn__bars span:nth-child(3) { top: 10px; }
	body.jk-menu-open .jk-menu-btn { box-shadow: none; }
	body.jk-menu-open .jk-menu-btn__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
	body.jk-menu-open .jk-menu-btn__bars span:nth-child(2) { opacity: 0; }
	body.jk-menu-open .jk-menu-btn__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
	body.jk-menu-open .jk-nav,
	body.jk-menu-open .jk-progress { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.jk-menu, .jk-menu__panel, .jk-menu__chev, .jk-menu-btn__bars span { transition: none !important; }
}

/* ---------- UI: pasek postępu i strzałki ---------- */

.jk-progress {
	position: fixed;
	left: var(--jk-menu-w);
	right: 0;
	bottom: 0;
	height: 2px;
	z-index: 40;
	pointer-events: none;
	background: rgba(0, 0, 0, .06);
}
.jk-progress::before {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background: var(--jk-accent);
	transform-origin: left center;
	transform: scaleX(var(--jk-p, 0));
}

.jk-nav {
	position: fixed;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2.5vh, 28px);
	z-index: 45;
	display: flex;
	gap: 6px;
}
.jk-nav button {
	all: unset;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--jk-accent);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}
.jk-nav button:hover { transform: scale(1.06); }
.jk-nav button:focus-visible { outline: 2px solid var(--jk-accent); outline-offset: 2px; }
.jk-nav button[disabled] { opacity: 0; pointer-events: none; }
.jk-nav svg { width: 18px; height: 18px; }
@media (hover: none), (pointer: coarse) {
	.jk-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jk-nav button { transition: none; }
}

/* Motyw (hello-elementor) koloruje button:hover/:focus na różowo – wyłączamy to dla przycisków wtyczki. */
html.jk-js body.jk-plansze-on .jk-menu button,
html.jk-js body.jk-plansze-on .jk-menu button:hover,
html.jk-js body.jk-plansze-on .jk-menu button:focus {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	outline: none;
	text-transform: none;
}
html.jk-js body.jk-plansze-on .jk-menu button:hover { color: var(--jk-menu-strong); }
html.jk-js body.jk-plansze-on .jk-menu-btn:hover,
html.jk-js body.jk-plansze-on .jk-menu-btn:focus,
html.jk-js body.jk-plansze-on .jk-nav button:hover,
html.jk-js body.jk-plansze-on .jk-nav button:focus {
	background: rgba(255, 255, 255, .94) !important;
	color: #1f1f1f !important;
	border: 0 !important;
	outline: none;
}
html.jk-js body.jk-plansze-on .jk-menu button:focus-visible,
html.jk-js body.jk-plansze-on .jk-menu-btn:focus-visible,
html.jk-js body.jk-plansze-on .jk-nav button:focus-visible {
	outline: 2px solid #1f1f1f;
	outline-offset: 2px;
}