/*
 * Banery STS na gotowinasport. Wszystkie selektory zaczynają się od .gns- , bo arkusz
 * ładuje się razem z motywem serwisu - reguła bez prefiksu zmieniłaby wygląd całej strony.
 *
 * Komponent startuje z display:none (ustawia je PHP) i odsłania go JS po wybraniu grupy.
 * Powód: bez tego przy każdym wejściu widać by było przez chwilę oba zestawy naraz -
 * dla niezalogowanych i dla zalogowanych - a potem jeden z nich by zniknął.
 */

.gns-spot {
	margin: 18px 0;
}

.gns-set {
	display: none;
}
.gns-set.gns-active {
	display: block;
}

.gns-item {
	margin: 0;
}

.gns-link {
	display: block;
	text-decoration: none;
	border: 0;
}

.gns-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* --- karuzela --- */

.gns-carousel {
	position: relative;
}

.gns-stage {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

/* Ślizg po jednym kadrze. scroll-snap zamiast przeliczania szerokości w JS: przewijanie
   palcem na telefonie działa wtedy natywnie i zatrzymuje się na slajdzie samo. */
.gns-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gns-track::-webkit-scrollbar {
	display: none;
}

/*
 * KAFLE. Ile kreacji widać naraz, dokładnie jak „Carousel tiles" na blogu (sc-spots).
 * Liczbę podaje PHP jako `--gns-slides` w atrybucie style; jej brak znaczy „automatycznie",
 * a wtedy wartość domyślną wyznacza breakpoint: 3 na monitorze, 2 na tablecie, 1 na
 * telefonie. Te trzy liczby są jedyną definicją słowa „automatycznie" w całej wtyczce.
 *
 * Szerokość liczymy z odjęciem przerw (gap), bo inaczej N kafli po 100/N% plus przerwy
 * przekracza 100% i ostatni kafel wystaje za krawędź.
 */
/*
 * `--gns-kafel` to szerokość JEDNEGO kafla, `--gns-span` to liczba kafli, które zajmuje
 * dana kreacja (domyślnie 1). Kreacja rozpięta na dwa kafle pochłania też przerwę między
 * nimi - stąd `+ (span - 1) * 10px`; bez tego składnika rząd rozjeżdżałby się o tyle
 * pikseli, ile przerw zniknęło pod rozpiętą kreacją.
 */
.gns-slide {
	--gns-kafel: calc((100% - (var(--gns-slides, 3) - 1) * 10px) / var(--gns-slides, 3));
	flex: 0 0 calc(var(--gns-kafel) * var(--gns-span, 1) + (var(--gns-span, 1) - 1) * 10px);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.gns-slide {
		--gns-kafel: calc((100% - (var(--gns-slides, 2) - 1) * 10px) / var(--gns-slides, 2));
	}
}

/*
 * RÓWNA WYSOKOŚĆ KAFLI - TYLKO PRZY WYSOKOŚCI USTAWIONEJ W PANELU.
 *
 * ⚠ TU BYŁ BŁĄD (naprawione w 2.0.1) i wart jest opisania, bo wygląda niewinnie.
 * Pierwsza wersja rozciągała kafle łańcuchem flex BEZ WARUNKU: kafel i element dostawały
 * `flex: 1`, a obrazek `flex: 1; height: 0`, żeby dorósł do najwyższego sąsiada.
 *
 * `flex: 1` to skrót od `1 1 0%`, więc każde ogniwo łańcucha wnosiło do wysokości ZERO,
 * a rosnąć miało do wysokości rodzica. Rodzicem był `.gns-track` o wysokości `auto`,
 * czyli liczonej Z ZAWARTOŚCI - a zawartość właśnie zadeklarowała zero. Całe rozumowanie
 * jest okrężne i przeglądarka rozstrzyga je na zero: karuzela miała 0 px wysokości.
 *
 * Objaw NIE wyglądał jak „banery zniknęły", tylko jak „nie działa przewijanie":
 * `scrollWidth` równy `clientWidth` znaczy „nie ma czego przewijać", więc JS gasił obie
 * strzałki, a palec nie miał czego przesunąć.
 *
 * Na blogu ten sam łańcuch działa, bo tam karuzele MAJĄ ustawioną wysokość - a wtedy
 * `.gns-item` dostaje `height` w atrybucie style i łańcuch ma się o co zaczepić.
 * Dlatego rozciąganie jest teraz zapięte na `.gns-fixed-h`: bez wysokości nie ma
 * czego dzielić i obrazki po prostu zachowują proporcje.
 */
.gns-fixed-h .gns-slide {
	display: flex;
	flex-direction: column;
	height: var(--gns-height);
}

.gns-fixed-h .gns-item {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.gns-fixed-h .gns-link,
.gns-fixed-h .gns-item picture {
	display: block;
	height: 100%;
}

/* Wysokość wymuszona: kadrujemy, nie skalujemy. */
.gns-fixed-h .gns-img {
	height: 100%;
	object-fit: cover;
}

/*
 * Pojedyncza kreacja z ustawioną wysokością - poza karuzelą nie ma `.gns-fixed-h`, więc
 * kadrowanie musi wisieć na samym elemencie. Wysokość wchodzi tu atrybutem style z PHP.
 */
.gns-item-fixed {
	overflow: hidden;
}
.gns-item-fixed .gns-link,
.gns-item-fixed picture {
	display: block;
	height: 100%;
}
.gns-item-fixed .gns-img {
	height: 100%;
	object-fit: cover;
}

/*
 * „Tej jednej nie przycinaj". Kreacja o proporcjach zupełnie innych niż wysokość slotu
 * traci przy `cover` treść - napis wychodzi poza kadr - więc dla niej redakcja wybiera
 * zmieszczenie całości. Reguła musi stać PO obu blokach kadrujących, bo je nadpisuje.
 */
.gns-contain .gns-img,
.gns-fixed-h .gns-contain .gns-img {
	object-fit: contain;
}

.gns-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(15, 31, 61, .14);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
	color: #1f2430;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.gns-prev { left: 8px; }
.gns-next { right: 8px; }

.gns-nav:hover {
	background: #fff;
}
.gns-nav:focus-visible {
	outline: 2px solid #0918f7;
	outline-offset: 2px;
}

/* Strzałki gasną na krańcach - inaczej użytkownik klika w przycisk, który nic nie robi. */
.gns-carousel.gns-at-start .gns-prev,
.gns-carousel.gns-at-end .gns-next {
	opacity: 0;
	pointer-events: none;
}

/* Jeden slajd to nie karuzela. */
.gns-carousel.gns-single .gns-nav {
	display: none;
}

/*
 * TELEFON: JEDEN BANER I SKRAWEK NASTĘPNEGO. Tak samo jak na sts.pl/blog, i tak samo
 * NIEZALEŻNIE od liczby kafli - trzy kafle na 360 px szerokości to trzy nieczytelne paski.
 * Skrawek sąsiada jest tu informacją: mówi, że jest co przesuwać, bez żadnej kropki ani
 * strzałki. Blok stoi PO regułach kafli, bo ma je nadpisać.
 */
@media (max-width: 600px) {
	.gns-track {
		gap: 10px;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	.gns-slide {
		flex: 0 0 85%;
		/* Wyśrodkowanie daje równy skrawek z obu stron, a pierwszy i ostatni baner i tak
		   dochodzą do krawędzi, bo scroll nie ma gdzie pójść dalej. */
		scroll-snap-align: center;
	}

	/* Na dotyku strzałki są zbędne - palec robi to samo, a zajmują miejsce nad grafiką. */
	.gns-nav {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gns-track {
		scroll-behavior: auto;
	}
}