/**
 * Sticky Scroll Story for Elementor
 *
 * Stan domyślny (bez JS) to czytelna lista slajdów. Efekty włącza skrypt
 * klasami na elemencie .sss:
 *   .sss--fx-desktop  przypięty panel z warstwami
 *   .sss--fx-cards    nakładające się karty (poniżej breakpointu)
 *   .sss--fx-reveal   odsłanianie przy wejściu (poniżej breakpointu)
 *   .sss--static      podgląd statyczny w edytorze
 */

.sss {
	--sss-offset: 0px;
	--sss-gap: 40px;
	--sss-valign: center;
	--sss-ratio: auto;
	--sss-fit: cover;
	--sss-media-order: 0;
	--sss-media-col: 1fr;
	--sss-content-col: 1fr;
	--sss-cols: var(--sss-media-col) var(--sss-content-col);
	--sss-duration: 600ms;
	--sss-seg: 80;
	--sss-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sss-dot: rgba(128, 128, 128, 0.45);
	--sss-dot-active: currentColor;
	--sss-dot-size: 10px;
	--sss-cards-top: 16px;
	--sss-cards-step: 12px;
	--sss-card-bg: #fff;
	--sss-card-radius: 0px;
	position: relative;
}

.sss *,
.sss *::before,
.sss *::after {
	box-sizing: border-box;
}

/* ---------- Lista (stan domyślny) ---------- */

.sss__layers {
	display: grid;
	gap: calc(var(--sss-gap) * 1.5);
}

.sss__layer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sss-gap);
	align-items: var(--sss-valign);
}

.sss__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--sss-ratio);
	margin: 0;
}

.sss__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--sss-fit);
}

.sss__content {
	min-width: 0;
}

.sss__eyebrow {
	margin: 0 0 0.75em;
}

.sss__title {
	margin: 0 0 0.5em;
}

.sss__desc > :last-child {
	margin-bottom: 0;
}

.sss__link {
	display: inline-block;
	margin-top: 1.25em;
	padding: 0.75em 1.5em;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.sss__link:focus-visible,
.sss__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sss__dots {
	display: none;
}

@media (min-width: 768px) {
	.sss--list .sss__layer,
	.sss--fx-reveal .sss__layer {
		grid-template-columns: var(--sss-cols);
	}

	.sss--list .sss__media,
	.sss--fx-reveal .sss__media {
		order: var(--sss-media-order);
	}
}

/* ---------- Desktop: przypięty panel z warstwami ---------- */

.sss--fx-desktop .sss__track {
	position: relative;
	height: calc(var(--sss-count) * var(--sss-seg) * 1vh + var(--sss-panel-h, 100vh));
}

.sss--fx-desktop .sss__panel {
	position: sticky;
	top: var(--sss-offset);
	overflow: hidden;
}

.sss--fx-desktop.sss--panel-screen .sss__panel {
	height: calc(100vh - var(--sss-offset));
	height: calc(100svh - var(--sss-offset));
}

.sss--fx-desktop .sss__layers {
	gap: 0;
	height: 100%;
}

.sss--fx-desktop .sss__layer {
	grid-area: 1 / 1;
	grid-template-columns: var(--sss-cols);
	z-index: var(--sss-i);
}

.sss--fx-desktop .sss__media {
	order: var(--sss-media-order);
}

/* Wiersz siatki = wysokość panelu (a nie najwyższa treść spośród slajdów). */
.sss--fx-desktop.sss--panel-screen .sss__layers {
	grid-template-rows: minmax(0, 1fr);
}

.sss--fx-desktop.sss--panel-screen .sss__layer {
	height: 100%;
	min-height: 0;
}

.sss--fx-desktop.sss--panel-screen .sss__content {
	max-height: 100%;
	overflow-y: auto;
}

.sss--fx-desktop.sss--panel-screen .sss__media {
	align-self: stretch;
	height: 100%;
}

/* Obraz: warstwy powyżej aktywnej są schowane, aktywna i niższe widoczne,
 * wchodząca odsłania się według --sss-reveal (0–1). */
.sss--fx-desktop.sss--img-reveal .sss__media {
	clip-path: inset(100% 0 0 0);
}

.sss--fx-desktop.sss--img-reveal .is-shown .sss__media {
	clip-path: inset(0 0 0 0);
}

.sss--fx-desktop.sss--img-reveal .is-entering .sss__media {
	clip-path: inset(calc((1 - var(--sss-reveal, 0)) * 100%) 0 0 0);
}

.sss--fx-desktop.sss--img-fade .sss__media,
.sss--fx-desktop.sss--img-none .sss__media {
	opacity: 0;
}

.sss--fx-desktop.sss--img-fade .is-shown .sss__media,
.sss--fx-desktop.sss--img-none .is-shown .sss__media {
	opacity: 1;
}

.sss--fx-desktop.sss--img-fade .is-entering .sss__media {
	opacity: var(--sss-reveal, 0);
}

.sss--fx-desktop.sss--mode-step.sss--img-reveal .sss__media {
	transition: clip-path var(--sss-duration) var(--sss-ease);
}

.sss--fx-desktop.sss--mode-step.sss--img-fade .sss__media {
	transition: opacity var(--sss-duration) var(--sss-ease);
}

/* Animowana para warstw – will-change tylko na czas przejścia. */
.sss--fx-desktop .is-entering .sss__media,
.sss--fx-desktop.sss--mode-step .is-changing .sss__media {
	will-change: clip-path, opacity;
}

/* Tekst: widoczny tylko na warstwie z is-text-active. */
.sss--fx-desktop .sss__content {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sss-duration) var(--sss-ease), transform var(--sss-duration) var(--sss-ease);
}

.sss--fx-desktop.sss--txt-fade-up .sss__content {
	transform: translate3d(0, 24px, 0);
}

.sss--fx-desktop .is-text-active .sss__content {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sss--fx-desktop.sss--txt-none .sss__content {
	transition: none;
}

/* Kropki. */
.sss--fx-desktop .sss__dots {
	position: absolute;
	top: 50%;
	right: 16px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: calc(var(--sss-dot-size) * 0.9);
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateY(-50%);
}

.sss__dot {
	display: block;
	width: var(--sss-dot-size);
	height: var(--sss-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sss-dot);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}

.sss__dot.is-active {
	background: var(--sss-dot-active);
	transform: scale(1.3);
}

/* ---------- Podgląd statyczny w edytorze ---------- */

.sss--static .sss__track {
	height: auto;
}

.sss--static .sss__panel {
	position: relative;
	top: auto;
}

/* ---------- Poniżej breakpointu: nakładające się karty ---------- */

.sss--fx-cards .sss__layers {
	gap: calc(var(--sss-gap) * 0.75);
	padding-bottom: 8vh;
}

.sss--fx-cards .sss__layer {
	position: sticky;
	top: var(--sss-sticky-top, calc(var(--sss-offset) + var(--sss-cards-top) + var(--sss-i) * var(--sss-cards-step)));
	gap: 0;
	overflow: hidden;
	border-radius: var(--sss-card-radius);
	background: var(--sss-card-bg);
	transform-origin: 50% 0;
	transform: scale(calc(1 - 0.06 * var(--sss-depth, 0)));
}

.sss--fx-cards .sss__layer::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000;
	opacity: calc(var(--sss-depth, 0) * 0.35);
	pointer-events: none;
}

.sss--fx-cards .sss__content {
	padding: 20px 20px 24px;
}

/* Zdjęcie na karcie nie zajmuje więcej niż ok. połowy ekranu. */
.sss--fx-cards .sss__media {
	max-height: 55vh;
	max-height: 55svh;
}

/* ---------- Poniżej breakpointu: odsłanianie przy wejściu ---------- */

.sss--fx-reveal .sss__media {
	clip-path: inset(100% 0 0 0);
	transition: clip-path var(--sss-duration) var(--sss-ease);
}

.sss--fx-reveal .sss__content {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity var(--sss-duration) var(--sss-ease) calc(var(--sss-duration) * 0.25), transform var(--sss-duration) var(--sss-ease) calc(var(--sss-duration) * 0.25);
}

.sss--fx-reveal .is-inview .sss__media {
	clip-path: inset(0 0 0 0);
}

.sss--fx-reveal .is-inview .sss__content {
	opacity: 1;
	transform: none;
}

/* ---------- Edytor: ostrzeżenie o overflow ---------- */

.sss__notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid #d39e00;
	background: #fff8e5;
	color: #3c3c3c;
	font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.sss,
	.sss * {
		transition: none !important;
	}
}