/**
 * Split Slider – style front-endu i edytora.
 * Ładowany przez wp_enqueue_block_style( 'core/group' ), więc działa także w iframe edytora.
 *
 * Zmienne do nadpisania w motywie (np. w theme.json → styles.css lub w style.css):
 *   --ss-accent        kolor aktywnej kropki / focusu
 *   --ss-content-bg    tło prawej (treściowej) kolumny, gdy nie ustawiono tła w edytorze
 *   --ss-speed         czas animacji przejścia
 */

.split-slider {
	--ss-accent: #fff;
	--ss-content-bg: var(--wp--preset--color--base, #fff);
	--ss-control-bg: #fff;
	--ss-control-fg: #111;
	--ss-nav-bg: rgb(17 18 22 / 0.86);
	--ss-speed: 650ms;
	--ss-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--ss-media-mobile-height: clamp(280px, 72vw, 460px);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 0;
}

/* ---------- Slajd (blok Kolumny) ---------- */

.split-slider .split-slider__slide {
	gap: 0;
	margin: 0;
	align-items: stretch;
}

.split-slider .split-slider__slide > .wp-block-column {
	margin: 0;
	min-width: 0;
}

/* Lewa kolumna – zdjęcie w tle (blok Okładka) */
.split-slider .split-slider__media {
	display: flex;
	flex-direction: column;
}

.split-slider .split-slider__media > .wp-block-cover {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.split-slider .split-slider__media-title:not([class*="font-size"]) {
	font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
	line-height: 1.15;
}

.split-slider .split-slider__media-text {
	max-width: 34ch;
	opacity: 0.9;
}

/* Prawa kolumna – treść */
.split-slider .split-slider__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6.5rem);
}

.split-slider .split-slider__content:not(.has-background) {
	background: var(--ss-content-bg);
}

.split-slider .split-slider__content > * {
	max-width: 36rem;
}

.split-slider .split-slider__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

.split-slider .split-slider__title:not([class*="font-size"]) {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.split-slider .split-slider__title {
	margin-top: 0.35em;
}

.split-slider .split-slider__text {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	line-height: 1.6;
	opacity: 0.85;
}

.split-slider .split-slider__buttons {
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 2vw, 2rem);
}

/* ---------- Desktop: obok siebie + zamiana stron ---------- */

@media (min-width: 782px) {
	.split-slider .split-slider__slide {
		flex-wrap: nowrap !important;
	}

	.split-slider .split-slider__slide > .wp-block-column:not([style*="flex-basis"]) {
		flex: 1 1 50%;
	}

	.split-slider .split-slider__slide.is-reversed {
		flex-direction: row-reverse;
	}

	/* miejsce na pasek z kropkami, żeby nie zachodził na przyciski */
	.split-slider.ss-dots .split-slider__content {
		padding-bottom: calc(clamp(2.5rem, 6vw, 6rem) + 2.5rem);
	}
}

/* ---------- Mobile: zdjęcie zawsze nad treścią ---------- */

@media (max-width: 781px) {
	.split-slider .split-slider__slide > .wp-block-column {
		flex-basis: 100% !important;
	}

	.split-slider .split-slider__media > .wp-block-cover {
		min-height: var(--ss-media-mobile-height) !important;
	}

	.split-slider.ss-dots .split-slider__content {
		padding-bottom: 5rem;
	}

	.split-slider .split-slider__buttons > .wp-block-button {
		flex: 1 1 auto;
	}

	.split-slider .split-slider__buttons .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Zanim JS wystartuje: pokaż tylko pierwszy slajd (tylko front) ---------- */

.split-slider:not(.ss-ready):not(.block-editor-block-list__block) > .split-slider__slide ~ .split-slider__slide {
	display: none;
}

/* ---------- Mechanika slidera (dodawana przez JS) ---------- */

.split-slider .ss-viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.split-slider .ss-track {
	display: flex;
	transition: transform var(--ss-speed) var(--ss-ease);
	will-change: transform;
}

.split-slider .ss-track > .split-slider__slide {
	flex: 0 0 100%;
	width: 100%;
}

/* Efekt przenikania */
.split-slider.ss-effect-fade .ss-track {
	display: grid;
	transform: none !important;
	transition: none;
}

.split-slider.ss-effect-fade .ss-track > .split-slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ss-speed) ease, visibility 0s linear var(--ss-speed);
}

.split-slider.ss-effect-fade .ss-track > .split-slider__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ss-speed) ease, visibility 0s;
}

/* Delikatne wejście treści aktywnego slajdu */
.split-slider.ss-ready .split-slider__slide .split-slider__content > * {
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-slider.ss-ready .split-slider__slide:not(.is-active) .split-slider__content > * {
	opacity: 0;
	transform: translateY(12px);
}

.split-slider.ss-ready .split-slider__slide.is-active .split-slider__content > :nth-child(2) { transition-delay: 0.08s; }
.split-slider.ss-ready .split-slider__slide.is-active .split-slider__content > :nth-child(3) { transition-delay: 0.16s; }
.split-slider.ss-ready .split-slider__slide.is-active .split-slider__content > :nth-child(n+4) { transition-delay: 0.24s; }

/* ---------- Strzałki ---------- */

.split-slider .ss-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ss-control-bg);
	color: var(--ss-control-fg);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.split-slider .ss-arrow:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

.split-slider .ss-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: translateY(-50%);
}

.split-slider .ss-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.split-slider .ss-prev { left: clamp(0.75rem, 2vw, 1.75rem); }
.split-slider .ss-next { right: clamp(0.75rem, 2vw, 1.75rem); }

@media (max-width: 781px) {
	/* na telefonie strzałki w prawym górnym rogu zdjęcia – nie zasłaniają tekstu */
	.split-slider .ss-arrow {
		top: 1rem;
		width: 2.5rem;
		height: 2.5rem;
		transform: none;
	}

	.split-slider .ss-arrow:hover,
	.split-slider .ss-arrow[disabled] {
		transform: none;
	}

	.split-slider .ss-prev { left: auto; right: 4rem; }
	.split-slider .ss-next { right: 1rem; }
}

/* ---------- Kropki + pauza ---------- */

.split-slider .ss-nav {
	position: absolute;
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	left: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--ss-nav-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transform: translateX(-50%);
	transition: left 0.5s var(--ss-ease);
}

/* desktop: kropki pod treścią – przy zamienionych stronach przechodzą na lewo */
@media (min-width: 782px) {
	.split-slider .ss-nav { left: 75%; }
	.split-slider.ss-active-reversed .ss-nav { left: 25%; }
}

.split-slider .ss-dot,
.split-slider .ss-toggle {
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.split-slider .ss-dot {
	width: 1.6rem;
	height: 1.6rem;
}

.split-slider .ss-dot::before {
	content: "";
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.5);
	transition: width 0.35s var(--ss-ease), background-color 0.35s ease;
}

.split-slider .ss-dot:hover::before {
	background: rgb(255 255 255 / 0.85);
}

.split-slider .ss-dot[aria-current="true"] {
	width: 2.4rem;
}

.split-slider .ss-dot[aria-current="true"]::before {
	width: 1.6rem;
	background: var(--ss-accent);
}

.split-slider .ss-toggle {
	width: 1.8rem;
	height: 1.8rem;
	margin-left: 0.25rem;
	border-left: 1px solid rgb(255 255 255 / 0.25);
	padding-left: 0.3rem;
}

.split-slider .ss-toggle svg {
	width: 0.85rem;
	height: 0.85rem;
}

.split-slider .ss-toggle .ss-icon-play { display: none; }
.split-slider .ss-toggle[aria-pressed="true"] .ss-icon-play { display: block; }
.split-slider .ss-toggle[aria-pressed="true"] .ss-icon-pause { display: none; }

.split-slider .ss-arrow:focus-visible,
.split-slider .ss-dot:focus-visible,
.split-slider .ss-toggle:focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 2px;
}

.split-slider .ss-arrow:focus-visible {
	outline-color: var(--ss-control-bg);
	outline-offset: 3px;
}

.split-slider .ss-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Ograniczony ruch ---------- */

@media (prefers-reduced-motion: reduce) {
	.split-slider .ss-track,
	.split-slider .ss-track > .split-slider__slide,
	.split-slider.ss-ready .split-slider__slide .split-slider__content > * {
		transition: none !important;
	}
}

/* ---------- Edytor: slajdy jeden pod drugim, z etykietą ---------- */

.split-slider.block-editor-block-list__block {
	counter-reset: ss-slide;
}

.split-slider.block-editor-block-list__block > .split-slider__slide {
	position: relative;
	margin-bottom: 2rem;
	outline: 1px dashed rgb(0 0 0 / 0.3);
	outline-offset: -1px;
}

.split-slider.block-editor-block-list__block > .split-slider__slide::before {
	counter-increment: ss-slide;
	content: "Slajd " counter(ss-slide);
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 20;
	padding: 4px 8px;
	border-radius: 2px;
	background: #1e1e1e;
	color: #fff;
	font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.split-slider.block-editor-block-list__block > .split-slider__slide.is-reversed::before {
	content: "Slajd " counter(ss-slide) " · strony zamienione";
}