/* v1.5 condensed for notebook */
.dis-gallery{
	background:#080808;
	color:#fff;
	font-size:14px;
	position:relative;
	min-height:28em;
	overflow:hidden
}
.dis-viewport-scale-yes .dis-gallery{
	font-size:1vw
}
.dis-gallery .overlay{
	z-index:2;
	background-image:linear-gradient(90deg,#080808 85%,#080808);
	display:flex;
	align-items:center;
	width:37.5em;
	height:100%;
	padding-left:2em;
	position:absolute;
	inset:0 auto 0 0
}
.dis-gallery .overlay-inner{
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start !important;
    height: 28.125em;
    padding: 50px 0;
}
.dis-gallery .overlay-count-row{
	display:flex;
	gap:.2em;
	align-items:center;
	font-family:PP Neue Corp,Impact,sans-serif;
	font-size:5.625em;
	font-weight:700
}
.dis-gallery .count-column{
	height:1em;
	overflow:hidden
}
.dis-gallery .count-heading{
	width:2ch;
	font-size:1em;
	line-height:1;
	margin:0;
	color:#fff;
}
.dis-gallery .count-row-divider{
	background:#fff;
	width:2px;
	height:.75em;
	transform:rotate(15deg)
}
.dis-gallery .overlay-nav-row{
	display:flex;
	gap:2em;
  margin-top:40px;
}
/* --- DIS GALLERY — dark / Osmo vibe --- */
.dis-gallery .button{
	background-color: transparent;
	color:#fff;
	border:1px solid #fff3;
	/* subtelna biała ramka */
	border-radius:.4em;
	width:4em;
	height:4em;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	position:relative;
	font-size:inherit;
	cursor:pointer;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
	transition: transform .475s var(--cubic-default, cubic-bezier(.2,.6,0,1)), opacity .475s var(--cubic-default, cubic-bezier(.2,.6,0,1)), border-color .35s ease, color .35s ease, background-color .35s ease;
}
.dis-gallery .button:focus{
	outline:none;
}
.dis-gallery .button:focus-visible{
	outline:2px solid currentColor;
	outline-offset:2px;
}
/* strzałka jak w oryginale */
.dis-gallery .button-arrow{
	flex:none;
	width:1em;
	height:.75em;
	position:relative;
	z-index:3;
}

.dis-gallery .button * {
  text-decoration: none !important;
  box-shadow: none !important;
}


.dis-gallery .button-arrow.next{
	transform:rotate(180deg);
}
/* overlay + rogi — korzystają z currentColor (białe na darku) */
.dis-gallery .button-overlay{
	z-index:1;
	position:absolute;
	inset:0;
	/* 👈 idealne dopasowanie, zero przesunięcia */
	pointer-events:none;
	transition: transform .475s var(--cubic-default, cubic-bezier(.2,.6,0,1)), opacity .475s var(--cubic-default, cubic-bezier(.2,.6,0,1));
	border-radius: inherit;
	/* żeby narożniki overlayu = narożniki buttona */
}
.dis-gallery .overlay-corner{
	border-top:1px solid currentColor;
	border-left:1px solid currentColor;
	border-top-left-radius:.4em;
	width:1em;
	height:1em;
}
.dis-gallery .overlay-corner.top-right {
	position:absolute;
	inset:0 0 auto auto;
	transform:rotate(90deg);
}
.dis-gallery .overlay-corner.bottom-left {
	position:absolute;
	inset:auto auto 0 0;
	transform:rotate(-90deg);
}
.dis-gallery .overlay-corner.bottom-right{
	position:absolute;
	inset:auto 0 0 auto;
	transform:rotate(180deg);
}
/* efekt Osmo: duży zoom overlayu + mocniejsze scale przycisku */
.dis-gallery .button:hover .button-overlay{
	transform:scale(1.4);
	opacity:1;
}
.dis-gallery .button:hover{
	transform:scale(0.85);
	opacity:1 !important;
	/* lekkie rozjaśnienie ramki/tekstu przy hoverze */
	border-color:#fff6;
	color:#fff;
}
/* wygaszanie sąsiadów w wierszu na hoverze */
.dis-gallery .overlay-nav-row:hover:has(.button:hover) .button{
	opacity:.4;
}
/* (opcjonalnie) stan aktywny, gdy chcesz „podbić” aktualny przycisk/stronę */
.dis-gallery .button.is-active{
	border-color:#fff8;
	box-shadow:0 0 0 1px #ffffff1a inset;
}


/* dostępność: mniej ruchu dla preferujących redukcję animacji */
@media (prefers-reduced-motion: reduce){
	.dis-gallery .button, .dis-gallery .button-overlay{
		transition:none;
	}
}
.dis-gallery .main{
	z-index:0;
	width:100%;
	height:100%;
	position:relative;
	inset:0;
	overflow:hidden
}
.dis-gallery .slider-wrap{
	display:flex;
	align-items:center;
	width:100%;
	height:100%;
	position:relative
}
.dis-gallery .slider-list{
	display:flex;
	align-items:stretch;
	position:relative;
	margin-left:37.5em
}
.dis-gallery .slider-slide{
	flex:none;
	width:42.5em;
	height:28em;
	padding-left:1.25em;
	padding-right:1.25em;
	transition:opacity .4s;
	position:relative
}
.dis-gallery [data-slider="slide"]{
	opacity:.2
}
.dis-gallery [data-slider="slide"].active{
	opacity:1
}
.dis-gallery .slide-inner{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden
}
.dis-gallery img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block
}
.dis-gallery .slide-caption{
	z-index:2;
	display:flex;
	gap:.4em;
	background:#000;
	color:#fff;
	white-space:nowrap;
	align-items:center;
	padding:.4em .75em .4em .5em;
	position:absolute;
	top:1.25em;
	left:1.25em;
	overflow:hidden;
	transition:transform .525s cubic-bezier(.2,.6,0,1),opacity .525s cubic-bezier(.2,.6,0,1)
}
html:not(.wf-design-mode) .dis-gallery .slide-caption{
	opacity:0;
	transform:translate(-25%,0)
}
html:not(.wf-design-mode) .dis-gallery [data-slider="slide"].active .slide-caption{
	opacity:1;
	transform:translate(0,0)
}
/* ===== MODAL (kompatybilny z obiema wersjami HTML) ===== */

/* sanity reset dla subtree modalu */
.modal, .modal * { box-sizing: border-box; }

/* tło + overlay */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.8);
  opacity:0; visibility:hidden;
  transition:all .4s cubic-bezier(.2,.6,0,1);
  z-index:1000;
}
.modal-overlay.open{ opacity:1; visibility:visible; }

/* panel */
.modal{
  position:fixed; inset:0;
  background:#fff; color:#000;
  transform:translateY(100%);
  transition:transform .6s cubic-bezier(.2,.6,0,1);
  z-index:1001; overflow:hidden;
  display:flex; flex-direction:column;
}
.modal.open{ transform:translateY(0); }

/* header + close */
.modal-header{ padding:2em 2em 1em; position:relative; width:100%; flex-shrink:0; }

/* X – zawsze kółko, bez żadnych podkreśleń z motywu */
a.modal-close,
button.modal-close {
  /* reset link/button */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  text-decoration: none !important;
  border-bottom: 0 !important;

  /* wygląd */
  color: currentColor;
  border: 1px solid currentColor !important;
  box-sizing: border-box;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50% !important; /* wymuś kółko */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.6em;
  font-weight: 300;
  cursor: pointer;

  /* pozycja */
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 1002;

  /* animacje */
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

/* zabij podkreślenia robione pseudo-elementami w motywie */
.modal-close::before,
.modal-close::after {
  content: none !important;
}

.modal-close:hover {
  background: #000 !important;
  color: #fff !important;
  transform: scale(1.05);
}

.modal-close:focus { outline: none; }
.modal-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* content wrapper */
.modal-content{
  flex:1; overflow-y:auto; width:100%;
  display:flex; flex-direction:column; min-height:0;
}

/* BODY – aliasujemy .modal-body i Twoje .modal-text, żeby oba działały identycznie */
.modal-body,
.modal-text{
  padding:20px 2em 2em 20px;
  font-family:system-ui,-apple-system,sans-serif;
  line-height:1.7; max-width:800px; margin:0 auto; width:100%;
  color:#000;
}

/* typografia – również aliasy (h1/h2/h3 + Twoje .modal-title) */
.modal-body h1,
.modal-text h1,
.modal-title{
  font-family:'PP Neue Corp', Impact, sans-serif;
  font-size:4em; font-weight:700; margin:0 0 .5em; color:#000; line-height:1.1;
}
.modal-body h2, .modal-text h2{ font-family:'PP Neue Corp', Impact, sans-serif; font-size:2.2em; font-weight:700; margin:0 0 1em; color:#000; }
.modal-body h3, .modal-text h3{ font-family:'PP Neue Corp', Impact, sans-serif; font-size:1.4em; font-weight:700; margin:0 0 1em; color:#000; }
.modal-body p,  .modal-text p { font-size:1.2em; color:#000; margin-bottom: 25px;}
.modal-body ul, .modal-text ul{ margin:0 0 2em; padding-left:1.25em; }
.modal-body li, .modal-text li{ margin:.8em 0; font-size:1.1em; }

/* obraz w treści – alias dla <img> oraz Twojego .modal-image wrappera */
.modal-body img,
.modal-text img{ max-width:100%; height:auto; display:block; margin:1em 0; }

.modal-image{
  width:100%; max-width:100%;
  height:auto; margin:2em 0;
  overflow:hidden; background:#f0f0f0;
  display:flex; align-items:center; justify-content:center;
  position:relative; left:auto; transform:none;
}
.modal-image img{ width:100%; height:auto; object-fit:cover; display:block; }

/* wyłącz underline narzucone globalnie na linki/przyciski */
.dis-gallery .button,
.dis-gallery .button:hover,
.dis-gallery .button:focus {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  box-shadow: none !important; /* gdy motyw rysuje "underline" przez shadow */
}

/* ===== Responsive ===== */
@media (max-width: 767px){
  .modal, .modal-content{ overflow-x:hidden; width:100% !important; max-width:100% !important; min-width:0 !important; }

  .modal-body, .modal-text{
    padding:0 1rem 1.25rem;
    max-width:100% !important; min-width:0 !important; box-sizing:border-box;
  }

  .modal-body h1, .modal-text h1, .modal-title{
    font-size:clamp(28px,10.5vw,42px); line-height:1.15;
  }
  .modal-body h2, .modal-text h2{ font-size:clamp(20px,7.2vw,32px); line-height:1.2; }
  .modal-body p, .modal-text p,
  .modal-body li, .modal-text li{ font-size:clamp(16px,4.6vw,20px); }

  /* zawijanie linii – zero poziomego scrolla */
  .modal h1, .modal h2, .modal h3,
  .modal p,  .modal li{
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
    -webkit-hyphens:auto; hyphens:auto;
  }
}
@supports (padding: env(safe-area-inset-left)){
  @media (max-width: 767px){
    .modal-body, .modal-text{
      padding-left:max(1rem, env(safe-area-inset-left));
      padding-right:max(1rem, env(safe-area-inset-right));
    }
  }
}

/* ============ MOBILE/TABLET (≤1024px) ============ */
@media (max-width: 1024px) {
	/* układ pionowy: najpierw zdjęcia, potem pasek z licznikiem i strzałkami */
	.dis-gallery {
		display: flex;
		flex-direction: column;
	}
	.dis-gallery .main {
		order: 1;
	}
	.dis-gallery .overlay {
		position: static;
		order: 2;
		width: 100% !important;
		height: auto;
		padding: 1rem 0;
		background-image: none;
		border-top: 0;
		/* linia wyłączona */
	}
	.dis-gallery .overlay-inner {
		height: auto;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 1rem;
	}
	/* KLUCZ: usuń odsadzenie trasy o szerokość overlay */
	.dis-gallery .slider-list {
		margin-left: 0 !important;
		/* Elementor dodaje tu margin-left → kasujemy */
	}
	/* Slajd ma iść na całą szerokość kontenera */
	.dis-gallery .slider-slide {
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
		height: auto;
	}
	.dis-gallery .slide-inner, .dis-gallery img {
		height: auto;
	}
	/* Czytelniejsze liczby i mniejsze strzałki na mniejszych ekranach */
	.dis-gallery .overlay-count-row {
		font-size: clamp(20px, 8vw, 42px);
	}
	.dis-gallery .overlay-nav-row {
		gap: .75rem;
	}
	/* elementy pod zdjęciem wyśrodkowane */
	.dis-gallery .overlay-inner{
		height: auto;
		flex-direction: row;
		/* licznik + strzałki w jednym rzędzie */
		justify-content: center;
		/* WYŚRODKOWANIE */
		align-items: center;
		gap: 1rem;
		margin-inline: auto;
		/* względem zdjęcia/sekcji */
		text-align: center;
	}
	/* dla pewności – trasa bez odsunięcia na overlay */
	.dis-gallery .slider-list{
		margin-left: 0 !important;
	}
	/* slajd na całą szerokość */
	.dis-gallery .slider-slide{
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
		height: auto;
	}
}
/* Telefon (≤767px) – drobne doszlify */
@media (max-width: 767px) {
	.dis-gallery .overlay-count-row {
		font-size: clamp(18px, 9vw, 36px);
	}
	.dis-gallery .button {
		width: 3.25em;
		height: 3.25em;
		border-radius: .35em;
	}
}
/* Naturalny swipe w poziomie, scroll strony w pionie */
.dis-gallery .slider-wrap {
	touch-action: pan-y;
}
.dis-gallery img {
	-webkit-user-drag: none;
}
/* === Fix: bardzo małe ekrany – kasujemy sztuczną wysokość i luz pod zdjęciem === */
@media (max-width: 767px) {
	/* kontener nie wymusza już 28em */
	.dis-gallery {
		min-height: 0 !important;
	}
	/* trasa bez offsetu od overlay */
	.dis-gallery .slider-list {
		margin-left: 0 !important;
	}
	/* slajd i obraz mają naturalną wysokość (przebijamy style Elementora) */
	.dis-gallery .slider-slide {
		height: auto !important;
		padding-bottom: 0;
	}
	.dis-gallery .slide-inner, .dis-gallery img {
		height: auto !important;
	}
	/* overlay tuż pod zdjęciem, bez dodatkowej „kreski” i zapasu */
	.dis-gallery .overlay {
		margin-top: .75rem;
		/* możesz zmniejszyć do .5rem jeśli chcesz ciaśniej */
		padding: 0;
		border-top: 0;
	}
	/* wyśrodkuj licznik + strzałki pod zdjęciem */
	.dis-gallery .overlay-inner {
		justify-content: center;
		align-items: center;
		gap: .75rem;
	}
}
/* na tabletach też wyłączamy offset overlay i pełną szerokość slajdu */
@media (max-width: 1024px) {
	.dis-gallery .slider-list {
		margin-left: 0 !important;
	}
	.dis-gallery .slider-slide {
		width: 100% !important;
	}
}
/* Modal – mobile fix */
@media (max-width: 767px) {
	.modal, .modal-content {
		overflow-x: hidden;
	}
	/* pewne wyłączenie scrolla w poziomie */
	.modal-image{
		width: 100% !important;
		/* zamiast 1000px */
		max-width: 100% !important;
		height: auto !important;
		/* naturalna wysokość */
		margin: 1rem 0 !important;
		left: auto !important;
		/* zdejmujemy "centrowanie" na lewo/prawo */
		transform: none !important;
	}
	.modal-image img{
		width: 100% !important;
		height: auto !important;
		/* bez rozpychania */
		object-fit: cover;
	}
	/* (opcjonalnie) trochę mniejsze marginesy tekstu, żeby wszystko mieściło się ładnie */
	.modal-text{
		padding: 0 1rem 1.25rem;
	}
}
/* === Modal: mobilne typografie + bez ucinania linii === */
@media (max-width: 767px) {
	/* bez poziomego scrolla, pełna szerokość treści */
	.modal, .modal-content {
		overflow-x: hidden;
	}
	.modal-text{
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 1rem 1.25rem;
	}
	/* elastyczne rozmiary fontów */
	.modal-title{
		font-size: clamp(28px, 10.5vw, 42px);
		line-height: 1.15;
	}
	.modal-text h2{
		font-size: clamp(20px, 7.2vw, 32px);
		line-height: 1.2;
	}
	.modal-text p, .modal-text li{
		font-size: clamp(16px, 4.6vw, 20px);
	}
	/* Wymuszamy zawijanie – nigdy nie wychodź poza viewport */
	.modal h1, .modal h2, .modal h3, .modal p, .modal li {
		white-space: normal !important;
		overflow-wrap: break-word;
		/* preferowane */
		word-break: normal;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	/* obraz w modalu – już nie powoduje poziomego scrolla */
	.modal-image{
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 1rem 0 !important;
		left: auto !important;
		transform: none !important;
	}
	.modal-image img{
		width:100% !important;
		height:auto !important;
		object-fit: cover;
	}
}
/* dla urządzeń z notchem – bez „zjadania” krawędzi tekstu */
@supports (padding: env(safe-area-inset-left)) {
	@media (max-width: 767px) {
		.modal-text{
			padding-left: max(1rem, env(safe-area-inset-left));
			padding-right: max(1rem, env(safe-area-inset-right));
		}
	}
}
/* ===== Modal: wąskie telefony — zero min-width i 100% szerokości ===== */
@media (max-width: 767px) {
	.modal, .modal-content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		/* <- kluczowe */
		overflow-x: hidden;
		/* bez poziomego scrolla */
	}
	/* Teksty nie mogą rozszerzać kontenera */
	.modal-text{
		max-width: 100% !important;
		/* zamiast 800px */
		min-width: 0 !important;
		box-sizing: border-box;
		padding: 0 1rem 1.25rem;
		margin: 0 auto;
	}
	/* Obraz w modalu */
	.modal-image{
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin: 1rem 0 !important;
		left: auto !important;
		transform: none !important;
	}
	.modal-image img{
		width: 100% !important;
		height: auto !important;
		object-fit: cover;
		display: block;
	}
	/* Długie tytuły/wyrazy mają się zawijać, nie rozszerzać layoutu */
	.modal h1, .modal h2, .modal h3, .modal p, .modal li {
		white-space: normal !important;
		overflow-wrap: anywhere;
		/* pewne zawijanie */
		word-break: normal;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}
/* iOS/Android – bezpieczne strefy po bokach */
@supports (padding: env(safe-area-inset-left)) {
	@media (max-width: 767px) {
		.modal-text{
			padding-left: max(1rem, env(safe-area-inset-left));
			padding-right: max(1rem, env(safe-area-inset-right));
		}
	}
}


/* --- kill underline narzucone przez motyw na .button --- */
.dis-gallery .overlay-nav-row .button,
.dis-gallery .overlay-nav-row .button:hover,
.dis-gallery .overlay-nav-row .button:focus {
  text-decoration: none !important;
  background: transparent !important;   /* usuwa ewentualne background-underline */
  box-shadow: none !important;           /* motywy często rysują kreskę przez shadow */
  border-bottom: none !important;        /* na wszelki wypadek */
}

/* wyłącz pseudo-elementy, którymi motywy rysują underline */
.dis-gallery .overlay-nav-row .button::before,
.dis-gallery .overlay-nav-row .button::after,
.dis-gallery .overlay-nav-row .button *::before,
.dis-gallery .overlay-nav-row .button *::after {
  content: none !important;
  display: none !important;
}