/* Popup Manager – style front-endu */

.spm-popup,
.spm-popup * {
	box-sizing: border-box;
}

.spm-popup[hidden] {
	display: none !important;
}

.spm-popup {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	padding: 20px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .25s ease;
}

.spm-popup.is-visible {
	opacity: 1;
}

.spm-overlay {
	position: absolute;
	inset: 0;
	background: var(--spm-overlay, rgba(0, 0, 0, .7));
}

/* ---- pozycja ---- */
.spm-pos-center       { align-items: center;     justify-content: center; }
.spm-pos-top          { align-items: flex-start; justify-content: center; padding-top: 6vh; }
.spm-pos-bottom       { align-items: flex-end;   justify-content: center; padding-bottom: 6vh; }
.spm-pos-bottom-right { align-items: flex-end;   justify-content: flex-end; }
.spm-pos-bottom-left  { align-items: flex-end;   justify-content: flex-start; }

/* ---- okno ---- */
.spm-dialog {
	position: relative;
	width: min(var(--spm-width, 720px), 100%);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--spm-bg, #fff);
	color: var(--spm-fg, #1d2327);
	border-radius: var(--spm-radius, 12px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	transform: scale(var(--spm-scale, 1));
	transform-origin: center center;
	transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
}

/* --------------------------------------------------------------------
 * Tryb „zmieść całość na ekranie”
 * Okienko zachowuje naturalną wysokość, a JS wylicza --spm-scale tak,
 * aby zmieściło się w oknie. Dzięki `overflow: hidden` nie ma paska
 * przewijania i wszystkie cztery rogi pozostają zaokrąglone.
 * ----------------------------------------------------------------- */
.spm-fit .spm-dialog {
	max-height: none;
	overflow: hidden;
}

/* Awaryjnie – bardzo długa treść. Przewijanie działa, pasek jest ukryty. */
.spm-fit .spm-dialog.spm-scrollable {
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.spm-fit .spm-dialog.spm-scrollable::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.spm-pos-top .spm-dialog { transform-origin: center top; }

.spm-pos-bottom .spm-dialog,
.spm-pos-bottom-right .spm-dialog,
.spm-pos-bottom-left .spm-dialog { transform-origin: center bottom; }

.spm-pos-bottom-right .spm-dialog,
.spm-pos-bottom-left .spm-dialog {
	width: min(var(--spm-width, 720px), 100%);
	max-width: 420px;
}

/* ---- animacje wejścia ---- */
.spm-anim-zoom  .spm-dialog { transform: scale(calc(var(--spm-scale, 1) * .94)); opacity: 0; }
.spm-anim-slide .spm-dialog { transform: translateY(40px) scale(var(--spm-scale, 1)); opacity: 0; }
.spm-anim-fade  .spm-dialog { opacity: 0; }
.spm-popup.is-visible .spm-dialog { transform: scale(var(--spm-scale, 1)); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.spm-popup,
	.spm-dialog {
		transition: none !important;
	}
	.spm-anim-zoom .spm-dialog,
	.spm-anim-slide .spm-dialog {
		transform: scale(var(--spm-scale, 1));
	}
}

/* ---- przycisk zamykania ---- */
.spm-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #1d2327;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	transition: background .2s ease, transform .2s ease;
}

.spm-close:hover  { background: #fff; transform: rotate(90deg); }
.spm-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.spm-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---- układ treści ---- */
.spm-inner {
	display: flex;
	flex-direction: column;
}

.spm-layout-bottom .spm-inner { flex-direction: column-reverse; }
.spm-layout-left   .spm-inner { flex-direction: row; }
.spm-layout-right  .spm-inner { flex-direction: row-reverse; }

.spm-layout-left .spm-media,
.spm-layout-right .spm-media {
	flex: 0 0 50%;
	max-width: 50%;
}

.spm-layout-left .spm-content,
.spm-layout-right .spm-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.spm-content {
	padding: var(--spm-pad, 26px);
}

/* Bez zdjęcia u góry treść nie może wpaść pod przycisk zamykania. */
.spm-no-media .spm-content,
.spm-layout-bottom .spm-content {
	padding-top: max( var(--spm-pad, 26px), 34px );
}

.spm-title {
	margin: 0 0 12px;
	font-size: calc(var(--spm-font, 16px) * 1.7);
	line-height: 1.25;
	color: inherit;
}

.spm-text {
	font-size: var(--spm-font, 16px);
	line-height: 1.6;
}

.spm-text > *:first-child { margin-top: 0; }
.spm-text > *:last-child  { margin-bottom: 0; }
.spm-text img { max-width: 100%; height: auto; }

.spm-actions { margin: 20px 0 0; }

.spm-button {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--spm-fg, #1d2327);
	color: var(--spm-bg, #fff);
	font-size: var(--spm-font, 16px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity .2s ease;
}

.spm-button:hover,
.spm-button:focus {
	opacity: .85;
	color: var(--spm-bg, #fff);
	text-decoration: none;
}

/* ---- media ---- */
/* --spm-media-pad = 0 → zdjęcia bez ramki, dosunięte do krawędzi okienka. */
.spm-media {
	position: relative;
	min-width: 0;
	padding: var(--spm-media-pad, 0px);
}

.spm-figure {
	margin: 0;
	position: relative;
}

.spm-img {
	display: block;
	width: 100%;
	height: auto;
}

.spm-layout-left .spm-img,
.spm-layout-right .spm-img {
	height: 100%;
	object-fit: cover;
}

.spm-figure figcaption {
	padding: 8px 12px;
	font-size: 13px;
	opacity: .75;
}

.spm-zoomable { cursor: zoom-in; }

.spm-zoomable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background .2s ease;
	pointer-events: none;
}

.spm-zoomable:hover::after { background: rgba(0, 0, 0, .08); }

/* siatka */
/*
 * `auto-fit` (a nie `auto-fill`) sprawia, że przy 3 zdjęciach w miejscu na 5 kolumn
 * puste kolumny znikają, a kafelki rozkładają się na całą szerokość zamiast lgnąć
 * do lewej krawędzi. `justify-content: center` domyka temat, gdy kolumny mają
 * stałą szerokość (wymuszona liczba kolumn).
 */
.spm-media--grid .spm-figures {
	display: grid;
	grid-template-columns: var(--spm-grid-cols, repeat(auto-fit, minmax(140px, 1fr)));
	gap: var(--spm-media-gap, 4px);
	justify-content: center;
	align-items: center;
}

.spm-media--grid .spm-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--spm-img-radius, 0px);
}

.spm-media--grid figcaption { display: none; }

/* slajder */
.spm-slider { position: relative; overflow: hidden; }

.spm-track {
	display: flex;
	transition: transform .35s cubic-bezier(.2, .8, .3, 1);
	will-change: transform;
}

.spm-track .spm-figure {
	flex: 0 0 100%;
	min-width: 0;
}

.spm-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: #1d2327;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transition: background .2s ease;
}

.spm-nav:hover { background: #fff; }
.spm-nav[disabled] { opacity: .35; cursor: default; }
.spm-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spm-prev { left: 10px; }
.spm-next { right: 10px; }

.spm-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.spm-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.spm-dot.is-active { background: #fff; transform: scale(1.15); }

/* ---- podpowiedź „Przesuń niżej” ---- */
.spm-scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .68);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s ease;
	animation: spm-hint-bounce 1.8s ease-in-out infinite;
}

.spm-scroll-hint[hidden] { display: none; }
.spm-scroll-hint.is-hidden { opacity: 0; }
.spm-scroll-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes spm-hint-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 5px); }
}

@media (prefers-reduced-motion: reduce) {
	.spm-scroll-hint {
		animation: none;
		transform: translateX(-50%);
	}
}

/* ---- blokada przewijania strony ---- */
html.spm-locked,
html.spm-locked body {
	overflow: hidden !important;
}

/* Wewnątrz okienka przewijanie ma działać normalnie (również dotykiem). */
.spm-dialog,
.spm-lightbox {
	touch-action: pan-y;
}

/* ---- mobile ---- */
@media (max-width: 782px) {
	/* Na telefonie okienko zajmuje pełną szerokość ekranu. */
	.spm-popup { padding: 0; }

	.spm-dialog {
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
	}

	/* Czytelniejszy tekst na małym ekranie. */
	.spm-text { font-size: calc(var(--spm-font, 16px) + 1px); }
	.spm-title { font-size: calc(var(--spm-font, 16px) * 1.55); }
	.spm-button { padding: 14px 28px; }

	.spm-layout-left .spm-inner,
	.spm-layout-right .spm-inner {
		flex-direction: column;
	}

	.spm-layout-left .spm-media,
	.spm-layout-right .spm-media {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.spm-layout-left .spm-img,
	.spm-layout-right .spm-img {
		height: auto;
	}

	.spm-content { padding: min( var(--spm-pad, 26px), 20px ); }
	.spm-no-media .spm-content,
	.spm-layout-bottom .spm-content { padding-top: max( min( var(--spm-pad, 26px), 20px ), 30px ); }
	.spm-pos-bottom-right,
	.spm-pos-bottom-left { align-items: flex-end; justify-content: center; }
	.spm-pos-bottom-right .spm-dialog,
	.spm-pos-bottom-left .spm-dialog { max-width: 100%; }
	.spm-nav { width: 34px; height: 34px; }
	.spm-media--grid .spm-figures { grid-template-columns: var(--spm-grid-cols, repeat(auto-fit, minmax(100px, 1fr))); }
}

/* =====================================================================
 * Lightbox
 * ================================================================== */

.spm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .92);
	opacity: 0;
	transition: opacity .2s ease;
	touch-action: none;
}

.spm-lightbox[hidden] { display: none !important; }
.spm-lightbox.is-visible { opacity: 1; }

.spm-lb-stage {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	padding: 56px 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.spm-lb-img {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	transition: opacity .15s ease;
}

.spm-lb-caption {
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	max-width: 720px;
	opacity: .85;
}

.spm-lb-counter {
	position: absolute;
	top: 18px;
	left: 22px;
	color: #fff;
	font-size: 13px;
	opacity: .7;
}

.spm-lb-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.spm-lb-btn:hover { background: rgba(255, 255, 255, .25); }
.spm-lb-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spm-lb-close { top: 14px; right: 16px; }
.spm-lb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.spm-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.spm-lb-single .spm-lb-prev,
.spm-lb-single .spm-lb-next { display: none; }

@media (max-width: 782px) {
	.spm-lb-stage { padding: 60px 12px 70px; }
	.spm-lb-prev  { left: 8px; }
	.spm-lb-next  { right: 8px; }
	.spm-lb-btn   { width: 40px; height: 40px; }
	.spm-lb-img   { max-height: calc(100dvh - 170px); }
}