/* ================================================
   SJ Carousel – karuzela artykułów
   v1.3.0 | Autor: Światło Jogi

   Kafelek: obrazek full-cover, frosted glass
   tylko bezpośrednio za tekstem (kategoria + tytuł)
   ================================================ */

/* ── Wrapper ────────────────────────────────────── */
.sj-car-block {
	width:      100%;
	padding:    32px 0 36px;
	box-sizing: border-box;
}
.sj-car--dark { background: #111111; color: #ffffff; }

/* ── Nagłówek ───────────────────────────────────── */
.sj-car-block__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	max-width:       1200px;
	margin:          0 auto 20px;
	padding-left:    20px;
	padding-right:   20px;
	box-sizing:      border-box;
}

.sj-car-block__label {
	font-size:      17px;
	font-weight:    700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color:          inherit;
	margin:         0;
	padding:        0;
	opacity:        0.7;
}
.sj-car--dark .sj-car-block__label { color: #ffffff; }

/* ── Strzałki ───────────────────────────────────── */
.sj-car-block__arrows { display: flex; gap: 8px; }

.sj-car-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	border:          2px solid rgba(255,255,255,0.3);
	background:      transparent;
	color:           #ffffff;
	padding:         0;
	cursor:          pointer;
	transition:      background 0.2s, border-color 0.2s, transform 0.15s;
}
/* SVG w środku – zawsze wyśrodkowany przez flex */
.sj-car-btn svg {
	display: block;
	flex-shrink: 0;
}
.sj-car-btn:hover:not(:disabled) {
	background:   rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.7);
	transform:    scale(1.08);
}
.sj-car-btn:disabled { cursor: default; }
.sj-car-block:not(.sj-car--dark) .sj-car-btn { border-color: rgba(0,0,0,0.2); color: #333; }
.sj-car-block:not(.sj-car--dark) .sj-car-btn:hover:not(:disabled) {
	background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.4);
}

/* ── Track ──────────────────────────────────────── */
.sj-car-block__track-wrap {
	max-width:     1200px;
	margin:        0 auto;
	padding-left:  20px;
	padding-right: 20px;
	box-sizing:    border-box;
	overflow:      hidden;
}

.sj-car-block__track {
	display:           grid;
	grid-auto-flow:    column;
	grid-auto-columns: calc(33.333% - 8px);
	gap:               12px;
	overflow-x:        auto;
	scroll-snap-type:  x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:   none;
	-ms-overflow-style: none;
	padding-bottom:    4px;
}
.sj-car-block__track::-webkit-scrollbar { display: none; }

/* ── Karta ──────────────────────────────────────── */
.sj-car-block__card {
	scroll-snap-align: start;
	position:          relative;
	display:           block;
	text-decoration:   none;
	color:             #ffffff;
	border-radius:     10px;
	overflow:          hidden;
	aspect-ratio:      3 / 2;
	flex-shrink:       0;
	background:        #1a1a1a;
	transition:        transform 0.2s ease, box-shadow 0.2s ease;
}
.sj-car-block__card:hover {
	transform:       translateY(-3px);
	box-shadow:      0 10px 32px rgba(0,0,0,0.5);
	color:           #ffffff;
	text-decoration: none;
}

/* Obrazek wypełnia cały kafelek */
.sj-car-block__img {
	position:            absolute;
	inset:               0;
	width:               100%;
	height:              100%;
	background-size:     cover;
	background-position: center;
	background-color:    #222;
	transition:          transform 0.3s ease;
}
.sj-car-block__card:hover .sj-car-block__img { transform: scale(1.04); }
.sj-car-block__img--empty {
	background: linear-gradient(135deg, #3a0a0a 0%, #1a0505 100%);
}

/* Body – jedna wspólna ramka frosted glass za kategorią i tytułem */
.sj-car-block__body {
	position:                absolute;
	bottom:                  14px;
	left:                    14px;
	right:                   auto;        /* nie rozciąga na całą szerokość */
	max-width:               calc(100% - 28px);
	padding:                 5px 14px 12px;
	background:              rgba(0, 0, 0, 0.62);
	backdrop-filter:         blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius:           8px;
	display:                 flex;
	flex-direction:          column;
	align-items:             flex-start;
	gap:                     5px;
}

/* ── Kategoria ───────────────────────────────────── */
.sj-car-block__cat {
	display:        block;
	font-size:      13px;
	font-weight:    800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color:          #ff5555;
	line-height:    1;
}

/* ── Tytuł ───────────────────────────────────────── */
.sj-car-block__title {
	display:            block;
	font-size:          19px;
	font-weight:        700;
	line-height:        1.3;
	color:              #ffffff;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	display:            -webkit-box;
}

/* Strzałka – ukryta */
.sj-car-block__arrow { display: none !important; }

/* ── Mobile ≤640px ──────────────────────────────── */
@media (max-width: 640px) {
	.sj-car-block__header     { padding-left: 16px; padding-right: 16px; }
	.sj-car-block__track-wrap { padding-left: 16px; padding-right: 16px; overflow-x: auto; }
	.sj-car-block__track      { grid-auto-columns: 82%; }
	.sj-car-block__arrows     { display: none; }
	.sj-car-block__title      { font-size: 15px; }
	.sj-car-block__cat        { font-size: 10px; }
}

/* ── Edytor ─────────────────────────────────────── */
.sj-car-editor-preview { padding: 8px 0; }