/* ================================================
   SJ Animations – Karuzela wpisów v1.2.0
   Autor: Światło Jogi
   ================================================ */

/* ── Sekcja główna ──────────────────────────────── */
.sj-carousel-section {
	width:         100%;
	overflow:      hidden;
	background:    #0f0f1a;
	border-radius: 10px;
	padding:       36px 0 36px;
	position:      relative;
	margin:        0;
	scroll-margin-top: 80px;
}

/* ── Nagłówek ───────────────────────────────────── */
.sj-carousel-header {
	display:       flex;
	align-items:   center;
	gap:           20px;
	padding:       0 40px 22px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	margin-bottom: 28px;
}

.sj-carousel-label {
	font-family:    "Roboto Condensed", sans-serif;
	font-size:      22px;
	font-weight:    700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color:          #ffffff;
	white-space:    nowrap;
}

/* ── Pasek postępu ──────────────────────────────── */
.sj-carousel-progress {
	flex:          1;
	height:        2px;
	background:    rgba(255,255,255,0.12);
	border-radius: 2px;
	overflow:      hidden;
}

.sj-carousel-progress-bar {
	height:        100%;
	width:         0%;
	background:    rgb(216, 0, 0);
	border-radius: 2px;
	transition:    width 0.08s linear;
}

/* ── Viewport ───────────────────────────────────── */
.sj-carousel-viewport {
	overflow: hidden;
	padding:  0 40px 4px;
}

/* ── Track ──────────────────────────────────────── */
.sj-carousel-track {
	display:     flex;
	gap:         20px;
	align-items: stretch;
	will-change: transform;
}

/* ── Hint (ukryty – zastąpiony przyciskami) ─────── */
.sj-carousel-hint {
	display: none !important;
}

/* ── Przyciski nawigacji ← → ────────────────────── */
.sj-carousel-btn {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         10;

	display:         flex;
	align-items:     center;
	justify-content: center;

	width:           52px;
	height:          52px;
	border-radius:   50%;
	border:          2px solid rgba(216, 0, 0, 0.5);
	background:      rgba(15, 15, 26, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor:          pointer;
	color:           #fff;

	transition:      background 0.22s ease,
	                 border-color 0.22s ease,
	                 opacity 0.22s ease,
	                 transform 0.22s ease;
}

.sj-carousel-btn svg {
	width:  26px;
	height: 26px;
	stroke: #ffffff;
	transition: stroke 0.22s ease;
}

.sj-carousel-btn:hover {
	background:    rgba(216, 0, 0, 0.85);
	border-color:  rgb(216, 0, 0);
}

.sj-carousel-btn:hover svg {
	stroke: #ffffff;
}

/* Przycisk aktywny – lekkie wciśnięcie w dół */
.sj-carousel-btn:active {
	transform: translateY(calc(-50% + 2px));
}

.sj-carousel-btn--prev {
	left: 8px;
}

.sj-carousel-btn--next {
	right: 8px;
}

/* ── Kafelek ────────────────────────────────────── */
.sj-card {
	flex-shrink:     0;
	display:         block;
	text-decoration: none;
	border-radius:   12px;
	overflow:        hidden;
	position:        relative;
	background:      #1a1a2e;
	width:           360px;
	height:          420px;
	cursor:          pointer;
	transition:      transform 0.25s ease, box-shadow 0.25s ease;
}

.sj-card--s,
.sj-card--m,
.sj-card--l {
	width:  360px;
	height: 420px;
}

.sj-card:hover {
	transform:  translateY(-5px);
	box-shadow: 0 8px 40px rgba(255,255,255,0.18),
	            0 2px 12px rgba(255,255,255,0.10);
}

/* ── Obraz ──────────────────────────────────────── */
.sj-card__img {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	transform-origin:    center;
	transition:          transform 0.5s ease;
	will-change:         transform;
}

.sj-card:hover .sj-card__img {
	transform: scale(1.05);
}

/* ── Nakładka gradient ──────────────────────────── */
.sj-card__overlay {
	position:        absolute;
	inset:           0;
	background:      linear-gradient(
		to top,
		rgba(0,0,0,0.92) 0%,
		rgba(0,0,0,0.40) 45%,
		rgba(0,0,0,0.0)  100%
	);
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         22px;
	gap:             6px;
}

/* ── Kategoria ──────────────────────────────────── */
.sj-card__cat {
	display:        inline-block;
	font-family:    "Roboto Condensed", sans-serif;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color:          rgb(216, 0, 0);
	background:     rgba(255,255,255,0.15);
	backdrop-filter: blur(4px);
	padding:        3px 8px;
	border-radius:  4px;
	width:          fit-content;
}

/* ── Tytuł ──────────────────────────────────────── */
.sj-card__title {
	font-family:        "Roboto Condensed", sans-serif;
	font-size:          22px;
	font-weight:        700;
	color:              #fff;
	line-height:        1.25;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	background:         rgba(0,0,0,0.35);
	backdrop-filter:    blur(2px);
	padding:            6px 10px;
	border-radius:      6px;
	margin:             0 -4px;
}

/* ── Strzałka ───────────────────────────────────── */
.sj-card__arrow {
	font-size:   20px;
	color:       rgba(255,255,255,0.5);
	transition:  transform 0.25s ease, color 0.25s ease;
	display:     inline-block;
	width:       fit-content;
	margin-top:  4px;
}

.sj-card:hover .sj-card__arrow {
	transform: translateX(6px);
	color:     rgb(216, 0, 0);
}

/* ── Mobile ─────────────────────────────────────── */
@media ( max-width: 768px ) {
	.sj-carousel-viewport { padding: 0 20px 4px; }
	.sj-carousel-header   { padding: 0 20px 18px; }
	.sj-carousel-label    { font-size: 18px; }

	.sj-carousel-btn {
		display: none; /* Na mobile – swipe zamiast przycisków */
	}

	.sj-card,
	.sj-card--s,
	.sj-card--m,
	.sj-card--l {
		width:  260px;
		height: 340px;
	}

	.sj-card__title { font-size: 18px; }
}

/* ── Mobile: karty pionowo ──────────────────────── */
@media ( max-width: 768px ) {
	.sj-carousel-mobile .sj-carousel-viewport {
		overflow: visible;
	}

	.sj-carousel-mobile .sj-carousel-track {
		flex-direction: column;
		align-items:    center;
		gap:            16px;
		transform:      none !important;
	}

	.sj-carousel-mobile .sj-card,
	.sj-carousel-mobile .sj-card--s,
	.sj-carousel-mobile .sj-card--m,
	.sj-carousel-mobile .sj-card--l {
		width:     90vw;
		max-width: 400px;
		height:    260px;
	}
}