/**
 * jw-slider.css
 *
 * Style dla slidera [jw-slider] opartego na Swiper.js.
 *
 * Kluczowe zachowania:
 *   - slidesPerView obliczany w JS: floor(containerWidth / slideWidth), min. 1
 *   - Swiper ustawia width na slajdach przez inline style — CSS nie nadpisuje
 *   - Wysokość slajdu = var(--jw-slide-height, 200px) z inline style
 *   - object-fit: contain — obraz nie jest przycinany
 *   - Minimalne style dla nawigacji i przycisku autoplay
 *
 * @package KujawskoPomorskie
 * @subpackage Slider
 * @since 1.0.0
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.jw-slider-wrap {
	position: relative;
	width: 100%;
}

/* ── Swiper container ───────────────────────────────────────────────────── */

.jw-slider-swiper {
	width: calc(100% - 2 * 65px); /* Odstęp dla strzałek */
	overflow: hidden;
}

/* ── Slajdy ─────────────────────────────────────────────────────────────── */

.jw-slider-slide {
	/* Szerokość ustawiana przez Swiper via inline style (integer slidesPerView) */
	height: var(--jw-slide-height, 200px);
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
}

/* ── Link owijający obraz ────────────────────────────────────────────────── */

.jw-slider-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* ── Obraz ──────────────────────────────────────────────────────────────── */

.jw-slider-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
    border-radius: 18px;
}

/* Gdy obraz jest bezpośrednim dzieckiem slajdu (brak linka) */
.jw-slider-slide > img.jw-slider-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Strzałki nawigacyjne ────────────────────────────────────────────────── */

.jw-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.67);
	cursor: pointer;
	transition: background 0.2s;
}

.jw-slider-btn-icon {
	display: block;
	width: 32px;
	height: 32px;
}

.jw-slider-btn:hover,
.jw-slider-btn:focus-visible {
	background: rgba(15,20,210,1);
	outline: 2px solid #fff;
}

.jw-slider-btn-prev {
	left: 0;
}

.jw-slider-btn-next {
	right: 0;
}

/* Ukryj gdy Swiper wyłącza strzałki (pętla z za mało slajdami) */
.jw-slider-btn.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ── Kontrolki (autoplay) ───────────────────────────────────────────────── */

.jw-slider-controls {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    position: absolute;
    top: 48px;
    right: 85px;
    z-index: 10;
}

.jw-slider-btn-autoplay {
	display: inline-flex;
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.67);
	transition: background 0.2s;
	align-items: center;
	justify-content: center;
    
	gap: 0.25rem;
	border: 0;
	border-radius: 4px;
	font-size: 0.85rem;
	cursor: pointer;
}

.jw-slider-btn-autoplay:hover,
.jw-slider-btn-autoplay:focus-visible {
	outline: 2px solid #fff;
	background: rgba(15,20,210,1);
}

/* Ikona pauzy / play */
.jw-slider-autoplay-icon {
	display: block;
	width: 1rem;
	height: 1rem;
}