/* EVK Horizontal Scroll
 * Domyślnie (mobile / edytor / brak JS): panele ułożone pionowo = naturalny scroll strony.
 * Po inicjalizacji JS (.evk-hscroll--active): panele w poziomie + przypięcie.
 */

.evk-hscroll {
	position: relative;
	width: 100%;
}

.evk-hscroll__track {
	display: flex;
	flex-direction: column;
}

/* ── Tryb aktywny: poziomy ─────────────────────────────────────────────── */
/*
 * Obcięcie TYLKO w poziomie.
 *
 * W poziomie musi być: bez niego karty wystające poza element rozpychają stronę
 * i przeglądarka dokłada pasek na dole.
 *
 * W pionie nie wolno. Gdy element dostanie w builderze wysokość (np. `100%`
 * przy przypiętej sekcji), a karty ułożone w rząd są wyższe, `hidden` je UCINA.
 * Zgłoszone z użycia: „ucina się dolna krawędź, gdy zaczyna się przewijanie
 * poziome" — bo dopiero wtedy karty przestają stać w pionie i rozpychać blok.
 *
 * `clip`, nie `hidden`, i to jest sedno: przy `hidden` na jednej osi DRUGA
 * rozwiązuje się do `auto`, więc „utnij w poziomie, pokaż w pionie" jest przy
 * `hidden` niewyrażalne. `clip` nie ma tego ograniczenia.
 *
 * `overflow: hidden` zostaje przed nimi jako zapas: starsze przeglądarki
 * zignorują nieznaną wartość `clip` i wrócą do dawnego zachowania.
 */
.evk-hscroll--active {
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

.evk-hscroll--active .evk-hscroll__track {
	flex-direction: row;
	flex-wrap: nowrap;
	will-change: transform;
}

/*
 * Narzucanie rozmiaru — TYLKO poza trybem „z buildera".
 *
 * Do 1.100.0 element znał jeden układ: panel na pełny ekran, więc korzeń,
 * taśma i każdy panel dostawały wysokość na sztywno. Przy kartach węższych od
 * ekranu, ułożonych pod nagłówkiem w przypiętej sekcji, ta sama reguła rozpycha
 * karty na całą wysokość okna i zjada układ zrobiony w builderze.
 *
 * `.evk-hscroll--auto` zakłada JS przy trybie „z buildera" i to ona zdejmuje
 * całe narzucanie. Zostaje sam kierunek osi i obcięcie wyżej.
 */
.evk-hscroll--active:not(.evk-hscroll--auto) {
	height: 100vh;
}

.evk-hscroll--active:not(.evk-hscroll--auto) .evk-hscroll__track {
	height: 100vh;
}

/* Każdy bezpośredni potomek = panel. Szerokość ustawia JS inline. */
.evk-hscroll--active:not(.evk-hscroll--auto) .evk-hscroll__track > * {
	flex: 0 0 auto;
	min-height: var(--evk-panel-h, 100vh);
	height: var(--evk-panel-h, 100vh);
}

/* W trybie „z buildera" zostaje jedno: panel ma się NIE KURCZYĆ. Bez tego flex
   ściska karty do szerokości kadru i nie ma czego przewijać. */
.evk-hscroll--auto .evk-hscroll__track > * {
	flex: 0 0 auto;
}

/* ── Wskaźnik postępu ─────────────────────────────────────────────────────
 *
 * Od 1.101.0 tę klasę dostaje TAKŻE kontener spoza elementu — wskazany
 * selektorem div, który stoi sobie w cudzym bloku Bricksa. Dlatego pudełko
 * samo z siebie NIE JEST już pozycjonowane: `position: absolute` wyrwałoby
 * taki blok z układu strony i przykleiło do krawędzi najbliższego przodka
 * z pozycjonowaniem. Pozycjonują dopiero `--top` i `--bottom`, a te dostaje
 * wyłącznie wskaźnik rysowany wewnątrz elementu (PHP zawsze emituje jeden
 * z nich).
 *
 * Wartości z kontrolek jadą ZMIENNYMI, nie regułami na potomka. Reguła
 * `#brxe-xxx .evk-hscroll__progress { … }` nie sięga kontenera, który nie jest
 * potomkiem korzenia; zmienną skrypt potrafi przepisać (patrz hscroll.js).
 */
.evk-hscroll__progress {
	height: var(--evk-prog-h, 4px);
	background-color: var(--evk-prog-bg, rgba(0, 0, 0, 0.15));
	z-index: 10;
	overflow: hidden;
}

.evk-hscroll__progress--top,
.evk-hscroll__progress--bottom {
	position: absolute;
	left: 0;
	right: 0;
}

.evk-hscroll__progress--top {
	top: 0;
}

.evk-hscroll__progress--bottom {
	bottom: 0;
}

.evk-hscroll__progress-bar {
	height: 100%;
	background-color: var(--evk-prog-fill, currentColor);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* ── Segmenty i „tylko bieżący" ────────────────────────────────────────────
 *
 * Oba warianty są RZĘDEM, nie paskiem: stąd `display: flex`, zdjęte tło (przy
 * kreskach byłoby kreską pod kreskami) i wysokość z zawartości. Zawartość
 * tworzy JS — zna liczbę paneli, a PHP musiałby ją zgadywać z drzewa dzieci
 * Bricksa. Kontener z WŁASNĄ treścią skrypt zostawia w spokoju i tylko wpina
 * `is-active` w bieżące dziecko.
 */
.evk-hscroll__progress--segments,
.evk-hscroll__progress--current {
	display: flex;
	/* Wyrównanie w pionie ma znaczenie dopiero przy niezerowym paddingu — bez
	   niego pudełko ma wysokość z zawartości i nie ma czego wyrównywać. */
	align-items: center;
	gap: var(--evk-seg-gap, 8px);
	height: auto;
	/* Ta sama zmienna co przy pasku, ale z inną wartością zapasową: pod kreskami
	   tło byłoby kreską pod kreskami, więc domyślnie go nie ma. Kontrolka „Tło
	   wskaźnika" działa mimo to w obu wariantach. */
	background-color: var(--evk-prog-bg, transparent);
	padding: var(--evk-prog-pad, 0);
	border-radius: var(--evk-prog-radius, 0);
	overflow: visible;
}

.evk-hscroll__progress-seg {
	flex: 1 1 0;
	height: var(--evk-seg-h, 3px);
	border-radius: var(--evk-seg-radius, 0);
	background-color: var(--evk-seg-off, rgba(255, 255, 255, 0.3));
	transition: background-color .3s ease, flex-basis .3s ease;
}

.evk-hscroll__progress-seg.is-active {
	background-color: var(--evk-seg-on, currentColor);
}

/*
 * Kolory działają też na CUDZEJ treści.
 *
 * Kontener wskaźnika wolno wypełnić własnymi elementami — wtedy skrypt niczego
 * nie rysuje i tylko wpina `is-active`. Reguły wyżej celują w węzły rysowane
 * przez skrypt, więc na cudzym `<h3>` nie robiły nic. Zgłoszone z użycia:
 * „nie mogę ustawić koloru aktywnego wskaźnika, jest tylko tło".
 *
 * Przełącza KLASA, nie wartość zapasowa w `var()` — ten sam wzorzec co przy
 * stałej długości kresek niżej. `var(--evk-seg-off, inherit)` NIE byłoby
 * neutralne: przy pustej kontrolce `inherit` i tak nadpisałby kolor ustawiony
 * w builderze regułą o tej samej wadze. Klasa zakładana tylko wtedy, gdy
 * zmienna ma wartość, sprawia, że puste pole naprawdę niczego nie rusza.
 *
 * Kresek rysowanych przez skrypt to nie dotyczy — te maluje `background-color`,
 * nie `color`.
 */
.evk-hscroll__progress--barwi-off > * {
	color: var(--evk-seg-off);
}

.evk-hscroll__progress--barwi-on > .is-active {
	color: var(--evk-seg-on);
}

/*
 * Stała długość kresek.
 *
 * Przełącza KLASA, nie sama zmienna: CSS nie umie zapytać „czy zmienna jest
 * ustawiona", a `flex: 0 0 var(--evk-seg-len, auto)` z domyślnym `flex-grow: 1`
 * dalej by rozciągało. Klasę zakłada JS, gdy `--evk-seg-len` ma wartość.
 *
 * Selektor bierze BEZPOŚREDNIE DZIECI, nie same kreski — kontener z własną
 * treścią ma dzieci bez naszych klas, a długość ma działać i tam.
 * Reguły muszą stać PO `.evk-hscroll__progress-seg`: mają tę samą wagę.
 */
.evk-hscroll__progress--stala > * {
	flex: 0 0 var(--evk-seg-len);
}

.evk-hscroll__progress--stala > .is-active {
	flex-basis: var(--evk-seg-len-active, var(--evk-seg-len));
}

/*
 * Chowanie pozostałych pozycji — WŁASNA klasa, nie sam `--current`.
 *
 * `--current` niesie układ i treść, `--chowaj` samo chowanie. Rozdzielone,
 * bo od 1.102.0 pozostałe numery można zamiast chować PRZYGASIĆ: wtedy widać
 * całe „1 2 3 4" z podświetlonym bieżącym. Reguła siedzi w arkuszu, bo dotyczy
 * tak samo numerów rysowanych przez skrypt, jak i cudzej treści wstawionej
 * ręcznie.
 */
.evk-hscroll__progress--chowaj > *:not(.is-active) {
	display: none;
}

/* Numery kart — to, czym skrypt wypełnia PUSTY kontener w trybie „tylko
   bieżący". Goła kreska nie niosłaby tam żadnej informacji.

   Kolor rozdzielony na dwa stany. Do 1.101.0 numer brał kolor aktywnego
   BEZWARUNKOWO i uchodziło to na sucho, bo reszty i tak nie było widać —
   przy przygaszaniu wszystkie byłyby podświetlone. */
.evk-hscroll__progress-num {
	color: var(--evk-seg-off, currentColor);
	font-size: var(--evk-num-size, inherit);
	font-weight: var(--evk-num-weight, inherit);
	line-height: 1;
	transition: color .3s ease;
}

.evk-hscroll__progress-num.is-active {
	color: var(--evk-seg-on, currentColor);
}

/*
 * Odstęp taśmy od wskaźnika.
 *
 * Wskaźnik wewnętrzny jest pozycjonowany absolutnie, więc leży NA górnej
 * krawędzi kart — zgłoszone z użycia jako „nachodzą". Odsunąć trzeba więc
 * TAŚMĘ, nie wskaźnik; przestawienie wskaźnika do przepływu zmieniłoby układ
 * każdemu, kto już go używa.
 *
 * Modyfikator zakłada PHP razem z pozycją wskaźnika, a JS zdejmuje go, gdy
 * wskaźnik przenosi się do zewnętrznego kontenera. Pionowy padding nie rusza
 * matematyki przewijania — zakres liczy się z szerokości taśmy.
 */
.evk-hscroll--prog-top .evk-hscroll__track {
	padding-top: var(--evk-prog-gap, 0);
}

.evk-hscroll--prog-bottom .evk-hscroll__track {
	padding-bottom: var(--evk-prog-gap, 0);
}