/*
 * KFD - baner strony glownej (29.09.2026, wariant B z makiety).
 * Znaczniki: themes/classic/modules/ps_imageslider/views/templates/hook/slider.tpl (#carousel.kfd-hero).
 * Zachowanie: themes/classic/assets/js/kfd-baner.js.
 * Ladowany linia w templates/_partials/header.tpl tylko na stronie glownej (?v=RRRRMMDD-bN - kazda zmiana = nowy numer).
 * Poza paczka CCC, poza theme.css/custom.css/custom.js i poza stylesheets.tpl (kfd-page-width.css - innej sesji; jego
 * sekcje 4, 14 i 15 dotycza klasy .carousel, ktorej nowy baner nie ma - ten plik robi to samo po swojemu).
 *
 * Telefon (do 767 px): baner od krawedzi do krawedzi, obrazek 2:1 (obrazek na telefon; bez niego caly obrazek
 *   komputerowy w tym samym pudelku, bez ucinania), pod nim: znaczek + haslo na cala szerokosc, nizej "Sprawdz ... >"
 *   i w tej samej linii kropki (b2, KK-03: haslo nie zawija sie przy 360 px, podpis ma stale 56 px).
 *   Bez strzalek i bez pustego pasa 25 px nad banerem.
 * Tablet i komputer (od 768 px): caly obrazek w pudelku z rogami 8 px (bez ucinania), pod nim wiersz 44 px:
 *   "Zatrzymaj"/"Wznow" (tylko gdy przewija sie samo), zakladki z haslami, strzalki. Kolumny boczne rowne, przycisk
 *   pauzy stalej szerokosci (b2, KK-04: zakladki stoja na srodku banera i nie przeskakuja przy zmianie napisu).
 * Styl paczki UX: przyciski 4 px, pudelka 8 px, granat marki, bez cieni, bez bocznych paskow i bez "pigulek";
 *   aktywna zakladka = prosta linia podkreslenia; tekst >= 4,5:1; cele dotyku 44 px (kropki 24 px).
 */

:root {
	--kfdh-navy: #011638;        /* granat marki - tekst 17,9:1 na bialym */
	--kfdh-blue: #3d52d5;        /* kolor akcji - 6,24:1 na bialym */
	--kfdh-blue-tint: #eef1fd;   /* tlo przycisku po najechaniu */
	--kfdh-muted: #4a5263;       /* tekst pomocniczy 7,84:1 */
	--kfdh-control: #858d9b;     /* ramka przyciskow i kropek 3,34:1 */
	--kfdh-r: 4px;
	--kfdh-r-card: 8px;
	--kfdh-nav-h: 44px;
}

/* ------------------------------------------------------------------ 1. Pudelko banera */
html body#index #carousel.kfd-hero {
	position: relative;
	left: auto;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

html body#index .kfd-hero__viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;         /* pionowe przewijanie strony zostaje, poziomy ruch palca przesuwa slajd */
	-webkit-user-select: none;
	user-select: none;
}

html body#index .kfd-hero__track {
	display: flex;
	align-items: stretch;
	transition: transform 0.45s ease;
	will-change: transform;
}

html body#index .kfd-hero__track.is-drag {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	html body#index .kfd-hero__track {
		transition: none;
	}
}

html body#index .kfd-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
}

html body#index .kfd-hero__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: transparent;
}

html body#index .kfd-hero__link:hover,
html body#index .kfd-hero__link:focus {
	color: inherit;
	text-decoration: none;
}

html body#index .kfd-hero__pic {
	display: block;
	margin: 0;
	background: #fff;
}

html body#index .kfd-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: var(--kfdh-ar-m, auto);   /* telefon: 2 / 1 (albo proporcja obrazka, gdy zaden slajd nie ma obrazka na telefon) */
	object-fit: contain;                     /* bez ucinania */
	-webkit-user-drag: none;
}

/* ------------------------------------------------------------------ 2. Fokus z klawiatury */
html body#index .kfd-hero :focus:not(:focus-visible) {
	outline: none;
}

html body#index .kfd-hero__link:focus-visible {
	outline: 3px solid var(--kfdh-blue);
	outline-offset: -3px;         /* obwodka w srodku - pudelko ma overflow: hidden */
}

html body#index .kfd-hero__tab:focus-visible,
html body#index .kfd-hero__arrow:focus-visible,
html body#index .kfd-hero__pause:focus-visible,
html body#index .kfd-hero__dot:focus-visible {
	outline: 2px solid var(--kfdh-blue);
	outline-offset: 2px;
}

/* sterowanie widoczne dopiero, gdy dziala skrypt (miejsce zajete od razu - bez przesuniec ukladu) */
html body#index .kfd-hero:not([data-kfd-ready]) .kfd-hero__tabs,
html body#index .kfd-hero:not([data-kfd-ready]) .kfd-hero__arrows,
html body#index .kfd-hero:not([data-kfd-ready]) .kfd-hero__dots {
	visibility: hidden;
}

/* ------------------------------------------------------------------ 3. Przyciski (wspolne) */
html body#index .kfd-hero__pause,
html body#index .kfd-hero__tabs,
html body#index .kfd-hero__arrows,
html body#index .kfd-hero__cap,
html body#index .kfd-hero__dots {
	display: none;
}

html body#index .kfd-hero__arrow,
html body#index .kfd-hero__pause {
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	height: var(--kfdh-nav-h);
	margin: 0;
	border: 1px solid var(--kfdh-control);
	border-radius: var(--kfdh-r);
	background: #fff;
	color: var(--kfdh-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

html body#index .kfd-hero__arrow {
	display: inline-flex;
	width: var(--kfdh-nav-h);
	padding: 0;
}

html body#index .kfd-hero__pause {
	padding: 0 14px 0 10px;
	white-space: nowrap;
}

/* napis zawsze tak szeroki jak dluzszy z dwoch ("Zatrzymaj") - przycisk nie zmienia szerokosci przy "Wznow" (KK-04) */
html body#index .kfd-hero__pause-t {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}

html body#index .kfd-hero__pause-t::after {
	content: "Zatrzymaj";
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

html body#index .kfd-hero__arrow:hover,
html body#index .kfd-hero__pause:hover {
	background: var(--kfdh-blue-tint);
}

html body#index .kfd-hero__arrow .material-icons,
html body#index .kfd-hero__pause .material-icons {
	font-size: 24px;
	line-height: 1;
}

html body#index .kfd-hero__tab {
	flex: 0 1 auto;
	min-width: 0;
	min-height: var(--kfdh-nav-h);
	margin: 0;
	padding: 4px 14px;
	border: 0;
	border-radius: var(--kfdh-r);
	background: none;
	color: var(--kfdh-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

html body#index .kfd-hero__tab:hover {
	color: var(--kfdh-navy);
}

html body#index .kfd-hero__tab[aria-current="true"] {
	color: var(--kfdh-navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--kfdh-blue);
	text-underline-offset: 6px;
}

html body#index .kfd-hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

html body#index .kfd-hero__dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--kfdh-control);
	border-radius: 50%;
	box-sizing: border-box;
}

html body#index .kfd-hero__dot[aria-current="true"]::before {
	border-color: var(--kfdh-navy);
	background: var(--kfdh-navy);
}

html body#index .kfd-hero__badge {
	display: inline-block;
	margin-right: 2px;
	padding: 0 6px;
	border-radius: var(--kfdh-r);
	background: var(--kfdh-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	vertical-align: 2px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ 4. Telefon (do 767 px) */
@media (max-width: 767px) {
	/* bez pustego pasa 25 px nad banerem (padding-top #wrapper z theme.css) - tylko strona glowna */
	html body#index #wrapper {
		padding-top: 0 !important;
	}

	/* od krawedzi do krawedzi okna (margines boczny strony), jak dotad */
	html body#index #carousel.kfd-hero {
		margin-left: calc(-1 * var(--kfd-page-gutter, 16px));
		margin-right: calc(-1 * var(--kfd-page-gutter, 16px));
		background: #fff;
	}

	/* haslo na cala szerokosc (bez zawijania przy 360 px - KK-03), "Sprawdz ... >" ostatnia linia, obok niej kropki */
	html body#index .kfd-hero--tekst .kfd-hero__cap {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex: 1 0 auto;
		min-height: 56px;
		padding: 8px 16px;
		background: #fff;
		text-align: left;
	}

	html body#index .kfd-hero__cap-t {
		color: var(--kfdh-navy);
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
	}

	html body#index .kfd-hero__cap-go {
		margin-top: auto;            /* zawsze na dole podpisu - na wysokosci kropek */
		padding-top: 2px;
		padding-right: calc(var(--kfdh-n, 3) * 28px - 4px);   /* miejsce na kropki (z odstepem 16 px podpisu = n x 28 + 12) */
		color: var(--kfdh-blue);
		font-size: 13px;
		font-weight: 600;
		line-height: 18px;
	}

	/* kropki w linii "Sprawdz ... >": srodek linii 17 px nad dolem podpisu (8 px odstepu + 18 px / 2), kropka 24 px */
	html body#index .kfd-hero__dots {
		display: flex;
		gap: 4px;
		position: absolute;
		right: 8px;
		bottom: 5px;
	}

	/* zaden slajd bez hasla: same kropki pod obrazkiem, na srodku */
	html body#index .kfd-hero:not(.kfd-hero--tekst) .kfd-hero__dots {
		position: static;
		justify-content: center;
		padding: 6px 0;
	}
}

/* ------------------------------------------------------------------ 5. Tablet i komputer (od 768 px) */
@media (min-width: 768px) {
	/* rowne kolumny boczne: zakladki na srodku banera, niezaleznie od szerokosci przycisku pauzy i strzalek (KK-04) */
	html body#index #carousel.kfd-hero {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "v v v" "p t r";
		column-gap: 8px;
		row-gap: 8px;
	}

	html body#index .kfd-hero__viewport {
		grid-area: v;
		border-radius: var(--kfdh-r-card);
	}

	html body#index .kfd-hero__img {
		aspect-ratio: var(--kfdh-ar-d, auto);   /* proporcja 1. slajdu - caly obrazek, bez ucinania */
	}

	/* haslo i odnosnik slajdu tylko dla czytnika (na obrazku komputerowym haslo jest w grafice) */
	html body#index .kfd-hero--tekst .kfd-hero__cap {
		display: block;
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	html body#index .kfd-hero[data-kfd-auto="1"] .kfd-hero__pause {
		display: inline-flex;
		grid-area: p;
		justify-self: start;
	}

	html body#index .kfd-hero__tabs {
		display: flex;
		grid-area: t;
		justify-content: center;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	html body#index .kfd-hero__arrows {
		display: flex;
		grid-area: r;
		justify-self: end;
		gap: 8px;
	}
}