/*
 * Sekcja s16 - osadzenia YouTube / Facebook / Instagram.
 *
 * Osobny plik z numerem wersji, a NIE dopisek do dist/css/main.css: tamten jest wgrywany
 * przez wp_enqueue_style(..., null), czyli bez ?ver=, wiec po przebudowie webpackiem
 * LiteSpeed i przegladarki potrafia dlugo podawac stary arkusz.
 *
 * Karuzela stoi na scroll-snap, bez biblioteki. Powod: kazda biblioteka karuzeli
 * opakowuje slajdy we wlasny kontener, a przeniesienie <iframe> w DOM powoduje jego
 * ponowne zaladowanie - czyli podwojne zapytania do Facebooka i YouTube'a.
 */

.zk-s16 {
	position: relative;
}

/*
 * Kotwica strzalek. Obejmuje WYLACZNIE tor - kropki sa poza nia.
 * Gdyby strzalki byly pozycjonowane wzgledem calego `.zk-s16`, ich `top: 50%`
 * liczyloby sie od wysokosci toru RAZEM z kropkami i ich marginesem, przez co
 * siedzialyby o polowe tego bloku (~16 px) za nisko.
 */
.zk-s16-scena {
	position: relative;
}

.zk-s16-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zk-s16-track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.zk-s16-item {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
	justify-content: center;
	scroll-snap-align: center;
}

.zk-s16-ramka {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zk-s16-ramka > iframe {
	width: 100%;
	border: 0;
	display: block;
	overflow: hidden;
}

/* --- jedno osadzenie: zwykly blok, zero przewijania ------------------------ */
.zk-s16--solo .zk-s16-track {
	overflow: visible;
	scroll-snap-type: none;
}

/* --- desktop -------------------------------------------------------------- */
@media (min-width: 992px) {
	.zk-s16-item {
		flex-basis: calc(50% - 0.75rem);
	}

	.zk-s16--solo .zk-s16-item {
		flex-basis: 100%;
	}

	/* 2-3 osadzenia: zwykly rzad z zawijaniem po dwa, bez karuzeli */
	.zk-s16--siatka .zk-s16-track {
		flex-wrap: wrap;
		row-gap: 1.5rem;
		overflow: visible;
		scroll-snap-type: none;
		justify-content: center;
	}
}

/* --- strzalki i kropki ---------------------------------------------------- */
/* Domyslnie schowane atrybutem `hidden` w HTML. JS zdejmuje go dopiero, gdy tor
   faktycznie ma co przewijac - inaczej przy dwoch kafelkach na szerokim ekranie
   wisialyby martwe strzalki. */

.zk-s16-strzalka {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	/* Flex + zerowy padding: bez tego przycisk dokłada własny padding przeglądarki
	   i ikona ucieka z osi. Znak tekstowy < > byłby dodatkowo przesunięty w górę,
	   bo glif siedzi wysoko we własnym polu litery - dlatego strzałki są SVG. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #2AA350;
	color: #fff;
	cursor: pointer;
	/* Cien bez przesuniecia w pionie - offset w dol sprawia, ze kolko optycznie
	   "siedzi" nizej, niz jest naprawde. */
	box-shadow: 0 0 10px rgba(0, 0, 0, .25);
	transition: opacity .2s ease, background-color .2s ease;
	/* Motyw ustawia line-height globalnie; przy flexie nie ma znaczenia, ale
	   zerujemy dla pewnosci, gdyby ktos kiedys wrocil do znaku tekstowego. */
	line-height: 0;
}

.zk-s16-strzalka > svg {
	display: block;
}

.zk-s16-strzalka:hover:not(:disabled) {
	background: #238642;
}

.zk-s16-strzalka:disabled {
	opacity: .35;
	cursor: default;
}

.zk-s16-strzalka--wstecz {
	left: -8px;
}

.zk-s16-strzalka--dalej {
	right: -8px;
}

@media (min-width: 1200px) {
	.zk-s16-strzalka--wstecz {
		left: -22px;
	}

	.zk-s16-strzalka--dalej {
		right: -22px;
	}
}

.zk-s16-kropki {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 1.25rem;
}

.zk-s16-kropka {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9c9c9;
	cursor: pointer;
	transition: background-color .2s ease;
}

.zk-s16-kropka.is-aktywna {
	background: #2AA350;
}

/* Ukrywamy nawigacje, gdy JS ustali, ze nie ma czego przewijac. */
.zk-s16-strzalka[hidden],
.zk-s16-kropki[hidden] {
	display: none;
}