/* ALLMEBLO 2026-08-06: slider glowny (ApFullSlider) na stronie glownej.
   Wlascicielem tego pliku jest zadanie "fullslider".

   Uwagi do specyficznosci: theme.css ma regule
     .full-slider.ApFullSlider, .full-slider.ApFullSlider img
        { width:100% !important; height:auto !important; }
   Dlatego selektor obrazka musi miec wyzsza specyficznosc niz 0,2,1
   (.alm-fs .alm-fs__pic .alm-fs__img = 0,3,0) i wlasne !important.
   Celowo nie opieramy sie na klasie .ApFullSlider, bo ta przychodzi z
   konfiguracji bloku w panelu i wlasciciel moze ja stamtad zmienic.
   Bez tego obrazek dostaje height:auto i kadrowanie przez object-fit
   przestaje dzialac. */

.alm-fs {
	--alm-fs-ar: 3;
	--alm-fs-ar-m: 2.2;
	--alm-fs-zielen: #2a7c00;
	--alm-fs-odstep-kropek: 14px;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
}

/* Kadr. Zamiast sztywnych pikseli w atrybucie style idzie tu proporcja
   podana przez szablon z pol "Width slider"/"Height slider" z panelu.
   Miejsce jest zarezerwowane zanim obrazek sie pobierze, wiec CLS = 0. */
.alm-fs__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--alm-fs-ar);
	overflow: hidden;
	background: #ececeb;
	/* pan-y oddaje przegladarce pionowe przewijanie strony, a nam zostawia
	   gest poziomy. Dzieki temu nie wolno nam nigdzie wolac preventDefault
	   na przewijaniu i strona przewija sie normalnie palcem. */
	touch-action: pan-y;
}

.alm-fs__track {
	display: flex;
	width: 100%;
	height: 100%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.alm-fs__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.alm-fs__link,
.alm-fs__pic {
	display: block;
	width: 100%;
	height: 100%;
}

.alm-fs .alm-fs__pic .alm-fs__img {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover;
	object-position: center;
	/* delikatne wejscie po zamianie slajdu */
	transform: scale(1.001);
}

/* Starsze Safari bez aspect-ratio: klasyczny padding-top. */
@supports not (aspect-ratio: 1 / 1) {
	.alm-fs__viewport {
		height: 0;
		padding-top: calc(100% / var(--alm-fs-ar));
	}
	.alm-fs__track {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
	}
}

/* ---------- strzalki: desktop ----------
   Okragly przycisk ze szkla: pol-przezroczyste bialo z rozmyciem tla, cien
   i cienka obwodka. Pojawia sie miekko przy najechaniu na slider,
   wysuwajac sie jednoczesnie od krawedzi do srodka. */
.alm-fs__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	/* #1a1a1a na bialym kole to kontrast 16,1:1, po najechaniu bialy znak
	   na zieleni marki #2a7c00 to 5,4:1. Oba przechodza prog 4,5:1. */
	color: #1a1a1a;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .75);
	opacity: 0;
	transform: translateY(-50%) translateX(var(--alm-fs-wysuw, 0)) scale(.92);
	transition: opacity .3s ease, transform .34s cubic-bezier(.22, .61, .36, 1),
		background-color .22s ease, color .22s ease, box-shadow .22s ease;
	-webkit-appearance: none;
	appearance: none;
}

.alm-fs__nav--prev { left: 26px; --alm-fs-wysuw: -14px; }
.alm-fs__nav--next { right: 26px; --alm-fs-wysuw: 14px; }

/* Miekkie pojawienie sie przy najechaniu na caly slider oraz zawsze wtedy,
   gdy fokus klawiatury jest w srodku. Celowo NIE uzywamy visibility ani
   display, bo one wyjelyby przyciski z kolejnosci tabulacji. */
.alm-fs:hover .alm-fs__nav,
.alm-fs:focus-within .alm-fs__nav {
	opacity: 1;
	transform: translateY(-50%) translateX(0) scale(1);
}

.alm-fs__nav:hover {
	opacity: 1;
	background: var(--alm-fs-zielen);
	color: #fff;
	box-shadow: 0 10px 26px rgba(42, 124, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .28);
	transform: translateY(-50%) translateX(0) scale(1.07);
}

.alm-fs__nav:active {
	transform: translateY(-50%) translateX(0) scale(.97);
}

.alm-fs__nav:focus { outline: none; }

.alm-fs__nav:focus-visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0) scale(1);
	outline: 3px solid var(--alm-fs-zielen);
	outline-offset: 3px;
	/* biala obwodka pod spodem, zeby ramka fokusu byla widoczna takze na
	   ciemnym zdjeciu */
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .95), 0 6px 22px rgba(0, 0, 0, .25);
}

.alm-fs__ico {
	width: 26px;
	height: 26px;
	pointer-events: none;
}

/* ---------- wskazniki ----------
   Kropki siedza we wspolnej szklanej kapsule. Dzieki temu maja gwarantowany
   kontrast niezaleznie od tego, jak jasne albo ciemne jest zdjecie pod nimi,
   czego pojedyncze kropki na goym zdjeciu nie daja. */
.alm-fs__dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--alm-fs-odstep-kropek);
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(8, 8, 10, .52);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(255, 255, 255, .22);
	transform: translateX(-50%);
}

.alm-fs__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .80);
	cursor: pointer;
	transition: width .34s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Powiekszone pole dotyku (34 px wysokosci, szerokosc rowna kropce plus
   odstep) tak, zeby sasiednie pola stykaly sie, a nie nachodzily. */
.alm-fs__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% + var(--alm-fs-odstep-kropek));
	height: 34px;
	border-radius: 999px;
}

.alm-fs__dot:hover { background: #fff; }

.alm-fs__dot.is-active {
	width: 40px;
	background: rgba(255, 255, 255, .34);
}

/* Pasek postepu autoodtwarzania w aktywnej kropce. Zielen marki narasta od
   lewej przez czas rowny interwalowi z panelu. Gdy autoodtwarzanie stoi,
   kropka jest po prostu w calosci zielona. */
.alm-fs__dot.is-active::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	background: var(--alm-fs-zielen);
	transform-origin: left center;
	transform: scaleX(1);
}

.alm-fs--auto .alm-fs__dot.is-active::after {
	animation: alm-fs-postep var(--alm-fs-czas, 5s) linear forwards;
}

.alm-fs--pauza .alm-fs__dot.is-active::after {
	animation-play-state: paused;
}

@keyframes alm-fs-postep {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.alm-fs__dot:focus { outline: none; }

.alm-fs__dot:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(42, 124, 0, .95);
}

/* ---------- telefon ---------- */
@media (max-width: 767.98px) {
	/* DECYZJA: na dotyku strzalki znikaja calkowicie. Przy szerokosci 390 px
	   dwa kola po 52 px zaslanialyby 27 procent szerokosci banera, a gest
	   przesuniecia palcem jest tu naturalnym sposobem sterowania. Kropki
	   zostaja jako pelnoprawne przyciski, wiec sterowanie klawiatura ani
	   czytnikiem ekranu nie ginie. display:none, a nie opacity, zeby nie
	   zostawiac w drzewie dostepnosci martwych przyciskow. */
	.alm-fs__nav { display: none; }

	/* DECYZJA: na telefonie kropki schodza POD zdjecie.
	   Baner mobilny jest kwadratem wypelnionym trescia od gory do dolu
	   (slajd "Darmowe probki tkanin" ma przy dolnej krawedzi bialy panel z
	   napisem "Znajdz tkanine"), wiec kazda nakladka cos zaslania. Poza
	   zdjeciem kropki maja tez pewny kontrast niezaleznie od tego, jakie
	   zdjecie wgra wlasciciel. Na desktopie zostaja na zdjeciu, bo tam
	   kadr jest szeroki i jest na nie miejsce. */
	.alm-fs { padding-bottom: 34px; }

	.alm-fs__dots {
		bottom: 0;
		gap: 12px;
		padding: 10px 0 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	.alm-fs__dot {
		background: #8f8f8f;
		box-shadow: none;
	}

	.alm-fs__dot:hover { background: #6d6d6d; }

	.alm-fs__dot.is-active {
		width: 34px;
		background: #d5d5d5;
	}

	.alm-fs__dot:focus-visible {
		outline: 3px solid var(--alm-fs-zielen);
		outline-offset: 3px;
		box-shadow: none;
	}
}

@media (max-width: 575.98px) {
	/* Kadr przyciety, zeby bardzo szeroki baner nie zamienil sie w pasek
	   (1920x600 przy 390 px to 122 px wysokosci). Wartosc liczy szablon. */
	.alm-fs__viewport { aspect-ratio: var(--alm-fs-ar-m); }

	@supports not (aspect-ratio: 1 / 1) {
		.alm-fs__viewport { padding-top: calc(100% / var(--alm-fs-ar-m)); }
	}
}

/* ---------- ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
	.alm-fs__track,
	.alm-fs__nav,
	.alm-fs__dot {
		transition: none !important;
	}
	.alm-fs__dot.is-active::after {
		animation: none !important;
		transform: scaleX(1) !important;
	}
	/* Skoro nie ma animacji pojawiania sie, strzalki maja byc widoczne od
	   razu, a nie dopiero po najechaniu. */
	.alm-fs__nav {
		opacity: 1;
		transform: translateY(-50%);
	}
	.alm-fs__nav--prev, .alm-fs__nav--next { --alm-fs-wysuw: 0; }
	.alm-fs:hover .alm-fs__nav,
	.alm-fs:focus-within .alm-fs__nav,
	.alm-fs__nav:hover,
	.alm-fs__nav:active,
	.alm-fs__nav:focus-visible {
		transform: translateY(-50%);
	}
}