/* =========================================================
   MODUŁ: Blog Slider
   ========================================================= */

.sp-bs {
	--spbs-font:        'Inter', sans-serif;
	--spbs-size-tytul:  38px;
	--spbs-weight-tytul:700;
	--spbs-lh-tytul:    1.25;
	--spbs-size-opis:   17px;
	--spbs-size-karta-tytul: 18px;
	--spbs-size-karta-meta:  12px;
	--spbs-max-width:   1280px;
	--spbs-pad-y:       80px;
	--spbs-pad-x:       32px;
	--spbs-gap:         24px;
	--spbs-radius-sec:  0px;
	--spbs-margin-y:    0px;
	--spbs-radius-karta:18px;
	--spbs-focus-skala: .8;
	--spbs-focus-opacity: .45;
	--spbs-arrow-size:  56px;
	--spbs-arrow-icon-size: 22px;
	--spbs-arrow-offset: 20px;

	--spbs-bg:           #F8F3E0;
	--spbs-tytul:        #1A2540;
	--spbs-mark:         #D4A017;
	--spbs-opis:         #5A5A5A;
	--spbs-karta-bg:     #FFFFFF;
	--spbs-karta-tytul:  #1A2540;
	--spbs-karta-meta:   #888888;
	--spbs-karta-kat:    #FFFFFF;
	--spbs-karta-kat-bg: #1A2540;
	--spbs-cta:          #D4A017;
	--spbs-arrow:        #1A2540;
	--spbs-arrow-ikona:  #FFFFFF;
	--spbs-dot:          #D4A017;
	--spbs-dot-inactive: #CCCCCC;

	font-family: var(--spbs-font);
	background: var(--spbs-bg);
	padding: var(--spbs-pad-y) var(--spbs-pad-x);
	border-radius: var(--spbs-radius-sec);
	margin-top: var(--spbs-margin-y);
	margin-bottom: var(--spbs-margin-y);
	color: var(--spbs-tytul);
	overflow: hidden;
}
.sp-bs * { box-sizing: border-box; }

.sp-bs--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sp-bs--w-container {
	width: 100%;
	max-width: var(--spbs-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-bs__inner {
	max-width: var(--spbs-max-width);
	margin: 0 auto;
}

/* ===== HEAD ===== */
.sp-bs__head {
	text-align: center;
	margin-bottom: 3rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.sp-bs__tytul {
	font-size: clamp(28px, 4.5vw, var(--spbs-size-tytul));
	font-weight: var(--spbs-weight-tytul);
	color: var(--spbs-tytul);
	line-height: var(--spbs-lh-tytul);
	letter-spacing: -.01em;
	margin: 0 0 1rem;
}
.sp-bs__tytul mark {
	background: transparent;
	color: var(--spbs-mark);
	font-weight: inherit;
}
.sp-bs__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}
.sp-bs__opis {
	font-size: var(--spbs-size-opis);
	line-height: 1.6;
	color: var(--spbs-opis);
	margin: 0;
}

/* ===== SLIDER WRAPPER ===== */
.sp-bs__slider {
	position: relative;
}

/* ===== VIEWPORT ===== */
.sp-bs__viewport {
	overflow: hidden;
	position: relative;
	padding: 1.5rem 0;
}

/* ===== TRACK (przesuwany pasek z kartami) ===== */
.sp-bs__track {
	display: flex;
	gap: var(--spbs-gap);
	transition: transform .55s cubic-bezier(.4,0,.2,1);
	will-change: transform;
	align-items: stretch;
}

/* ===== KARTA ===== */
.sp-bs__karta {
	flex: 0 0 auto;
	background: var(--spbs-karta-bg);
	border-radius: var(--spbs-radius-karta);
	overflow: hidden;
	box-shadow:
		0 12px 32px rgba(26,37,64,.10),
		0 2px 6px rgba(26,37,64,.04);
	transition:
		transform .45s cubic-bezier(.4,0,.2,1),
		opacity .45s cubic-bezier(.4,0,.2,1),
		filter .45s cubic-bezier(.4,0,.2,1),
		box-shadow .35s cubic-bezier(.4,0,.2,1);
	position: relative;
	display: flex;
	flex-direction: column;
}

.sp-bs__karta-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
	border-bottom: none;
}

/* ===== Widoczne karty (kolumny) ===== */
.sp-bs--cols-1 .sp-bs__karta { width: calc(100% - 0px); }
.sp-bs--cols-2 .sp-bs__karta { width: calc((100% - 1 * var(--spbs-gap)) / 2); }
.sp-bs--cols-3 .sp-bs__karta { width: calc((100% - 2 * var(--spbs-gap)) / 3); }
.sp-bs--cols-4 .sp-bs__karta { width: calc((100% - 3 * var(--spbs-gap)) / 4); }
.sp-bs--cols-5 .sp-bs__karta { width: calc((100% - 4 * var(--spbs-gap)) / 5); }

/* ===== Focus środkowej karty (boczne przyciemnione/zmniejszone) ===== */
.sp-bs--focus .sp-bs__karta {
	transform: scale(var(--spbs-focus-skala));
	opacity: var(--spbs-focus-opacity);
	filter: saturate(.7);
}
.sp-bs--focus .sp-bs__karta.is-center {
	transform: scale(1);
	opacity: 1;
	filter: saturate(1);
	box-shadow:
		0 20px 50px rgba(26,37,64,.20),
		0 4px 12px rgba(26,37,64,.08);
	z-index: 2;
}

/* ===== THUMB ===== */
.sp-bs__karta-thumb {
	position: relative;
	width: 100%;
	background: linear-gradient(135deg, #F0E8D0, #E8DFCB);
	overflow: hidden;
}
.sp-bs--prop-16-9 .sp-bs__karta-thumb { aspect-ratio: 16/9; }
.sp-bs--prop-4-3  .sp-bs__karta-thumb { aspect-ratio: 4/3; }
.sp-bs--prop-3-2  .sp-bs__karta-thumb { aspect-ratio: 3/2; }
.sp-bs--prop-1-1  .sp-bs__karta-thumb { aspect-ratio: 1/1; }
.sp-bs--prop-4-5  .sp-bs__karta-thumb { aspect-ratio: 4/5; }

.sp-bs__karta-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.sp-bs__karta-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(26,37,64,.20);
}
.sp-bs__karta-thumb-placeholder svg {
	width: 64px;
	height: 64px;
}

/* Kategoria (tag) na miniaturze */
.sp-bs__karta-kategoria {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: .35em .75em;
	background: var(--spbs-karta-kat-bg);
	color: var(--spbs-karta-kat);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
	z-index: 2;
}

/* ===== BODY ===== */
.sp-bs__karta-body {
	padding: 1.25rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
}
.sp-bs__karta-meta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: var(--spbs-size-karta-meta);
	color: var(--spbs-karta-meta);
	letter-spacing: .02em;
}
.sp-bs__karta-meta svg {
	width: 13px;
	height: 13px;
	color: var(--spbs-cta);
}
.sp-bs__karta-tytul {
	margin: 0;
	font-size: var(--spbs-size-karta-tytul);
	font-weight: 700;
	color: var(--spbs-karta-tytul);
	line-height: 1.35;
	letter-spacing: -.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sp-bs__karta-excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--spbs-karta-meta);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sp-bs__karta-cta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--spbs-cta);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	margin-top: auto;
	padding-top: .25rem;
	transition: gap .25s cubic-bezier(.4,0,.2,1);
}
.sp-bs__karta-link:hover .sp-bs__karta-cta { gap: .7em; }

/* ===== Efekty hover ===== */
.sp-bs--efekt-lift .sp-bs__karta:hover {
	transform: scale(1) translateY(-6px);
	box-shadow: 0 24px 50px rgba(26,37,64,.18);
	z-index: 3;
}
.sp-bs--efekt-zoom .sp-bs__karta:hover .sp-bs__karta-thumb img {
	transform: scale(1.08);
}
.sp-bs--efekt-glow .sp-bs__karta:hover {
	box-shadow:
		0 0 0 2px var(--spbs-mark),
		0 18px 40px rgba(212,160,23,.30);
	transform: scale(1) translateY(-4px);
	z-index: 3;
}

/* ===== STRZAŁKI ===== */
.sp-bs__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--spbs-arrow-size);
	height: var(--spbs-arrow-size);
	background: var(--spbs-arrow);
	color: var(--spbs-arrow-ikona);
	border: none;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform .25s cubic-bezier(.4,0,.2,1),
		box-shadow .25s cubic-bezier(.4,0,.2,1),
		opacity .25s ease,
		background .2s ease;
	opacity: .92;
	padding: 0;
	font: inherit;
}
.sp-bs__arrow:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.08);
}
.sp-bs__arrow:active {
	transform: translateY(-50%) scale(.95);
}
.sp-bs__arrow-icon {
	display: inline-flex;
	width: var(--spbs-arrow-icon-size);
	height: var(--spbs-arrow-icon-size);
}
.sp-bs__arrow-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.sp-bs__arrow-icon svg[viewBox="0 0 32 24"] {
	width: calc(var(--spbs-arrow-icon-size) * 1.33);
}

/* Style tła strzałek */
.sp-bs--arrow-styl-circle .sp-bs__arrow {
	border-radius: 50%;
	box-shadow: 0 12px 32px rgba(26,37,64,.30), 0 2px 6px rgba(26,37,64,.12);
}
.sp-bs--arrow-styl-pill .sp-bs__arrow {
	width: calc(var(--spbs-arrow-size) * 1.4);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(26,37,64,.25);
}
.sp-bs--arrow-styl-square .sp-bs__arrow {
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(26,37,64,.22);
}
.sp-bs--arrow-styl-minimal .sp-bs__arrow {
	background: transparent !important;
	box-shadow: none;
	color: var(--spbs-tytul);
}
.sp-bs--arrow-styl-minimal .sp-bs__arrow:hover { color: var(--spbs-mark); }
.sp-bs--arrow-styl-outline .sp-bs__arrow {
	background: transparent !important;
	border: 2px solid var(--spbs-arrow);
	color: var(--spbs-arrow);
	border-radius: 50%;
}
.sp-bs--arrow-styl-outline .sp-bs__arrow:hover {
	background: var(--spbs-arrow) !important;
	color: var(--spbs-arrow-ikona);
}

/* Pozycja strzałek */
.sp-bs--arrow-pos-overlay .sp-bs__arrow--prev { left: var(--spbs-arrow-offset); }
.sp-bs--arrow-pos-overlay .sp-bs__arrow--next { right: var(--spbs-arrow-offset); }

.sp-bs--arrow-pos-outside .sp-bs__arrow--prev { left: calc(var(--spbs-arrow-offset) * -1); }
.sp-bs--arrow-pos-outside .sp-bs__arrow--next { right: calc(var(--spbs-arrow-offset) * -1); }

.sp-bs--arrow-pos-bottom .sp-bs__arrow {
	top: auto;
	bottom: -8px;
	transform: none;
}
.sp-bs--arrow-pos-bottom .sp-bs__arrow:hover { transform: scale(1.08); }
.sp-bs--arrow-pos-bottom .sp-bs__arrow:active { transform: scale(.95); }
.sp-bs--arrow-pos-bottom .sp-bs__arrow--prev { left: 50%; margin-left: -90px; }
.sp-bs--arrow-pos-bottom .sp-bs__arrow--next { right: 50%; margin-right: -90px; }

/* ===== KROPKI ===== */
.sp-bs__dots {
	display: flex;
	justify-content: center;
	gap: .65rem;
	margin-top: 2rem;
	z-index: 5;
	position: relative;
}
.sp-bs__dot {
	width: 28px;
	height: 4px;
	border-radius: 999px;
	background: var(--spbs-dot-inactive);
	opacity: .55;
	border: none;
	cursor: pointer;
	transition: opacity .25s ease, width .25s ease, background .25s ease;
	padding: 0;
}
.sp-bs__dot:hover { opacity: .8; }
.sp-bs__dot.is-active {
	background: var(--spbs-dot);
	opacity: 1;
	width: 48px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
	.sp-bs--cols-3 .sp-bs__karta,
	.sp-bs--cols-4 .sp-bs__karta,
	.sp-bs--cols-5 .sp-bs__karta {
		width: calc((100% - 1 * var(--spbs-gap)) / 2);
	}
}
@media (max-width: 640px) {
	.sp-bs {
		--spbs-pad-y: 50px;
		--spbs-pad-x: 20px;
		--spbs-arrow-size: 40px;
		--spbs-arrow-icon-size: 16px;
		--spbs-arrow-offset: 10px;
	}
	.sp-bs--cols-2 .sp-bs__karta,
	.sp-bs--cols-3 .sp-bs__karta,
	.sp-bs--cols-4 .sp-bs__karta,
	.sp-bs--cols-5 .sp-bs__karta {
		width: calc(100% - 0 * var(--spbs-gap));
	}
	.sp-bs--focus .sp-bs__karta {
		transform: scale(1);
		opacity: 1;
		filter: none;
	}
	.sp-bs__head { margin-bottom: 2rem; }
	.sp-bs__tytul { font-size: clamp(22px, 6vw, 28px); }
}
