/*
 * Cyber Framework — sekcje Flexible Content.
 *
 * Kolejkowany WYLACZNIE tam, gdzie wpis ma choc jedna sekcje
 * (inc/sections.php), zgodnie z CLAUDE.md sekcja 10.
 *
 * WSZYSTKIE wartosci per instancja przychodza jako zmienne CSS w atrybucie
 * style opakowania. Ten arkusz ich nie zna — tylko je konsumuje. Dzieki temu
 * PHP nie generuje ani jednej reguly CSS, a media query zyje tam, gdzie jego
 * miejsce: w arkuszu.
 *
 * Kazda zmienna ma wartosc zapasowa w var(), wiec sekcja bez wypelnionego pola
 * nie zostawia po sobie "background-image: ;" ani pustego paddingu.
 */

/* --- Opakowanie ------------------------------------------------------------ */

.cyber-section {
	position: relative;
	padding-top: var(--cyber-section-pt, 0px);
	padding-right: var(--cyber-section-pr, 0px);
	padding-bottom: var(--cyber-section-pb, 0px);
	padding-left: var(--cyber-section-pl, 0px);
	background-color: var(--cyber-section-bg, transparent);
	background-image: var(--cyber-section-bg-image, none);
	background-repeat: var(--cyber-section-bg-repeat, no-repeat);
	background-position: var(--cyber-section-bg-position, center center);
	background-size: var(--cyber-section-bg-size, cover);
}

/*
 * Tlo idzie na PELNA szerokosc okna, a szerokosc steruje wylacznie wnetrzem.
 * Odwrotnie — gdyby szerokosc obejmowala cala sekcje — kolor i zdjecie nie
 * dobijalyby do krawedzi ekranu i kazda realizacja wymagalaby obejscia.
 *
 * Wnetrze dziedziczy marginesy boczne po .cyber-container, wiec trzyma jedna
 * linie z headerem, stopka i reszta tresci na kazdym breakpoincie.
 */
.cyber-section__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--cyber-section-width, var(--cyber-container-width));
	margin-inline: auto;
	padding-inline: var(--cyber-container-margin);
}

/*
 * Nakladka. Osobna warstwa, bo background-color jest malowany POD
 * background-image — kolor z kanalem alfa nie przyciemni zdjecia, tylko
 * schowa sie za nim. Pudelko wchodzi wylacznie wtedy, gdy kolor nakladki
 * jest ustawiony (klasa --has-overlay z PHP).
 */
.cyber-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--cyber-section-overlay, transparent);
	pointer-events: none;
}

/* --- Czesci skladowe ------------------------------------------------------- */

.cyber-section__top > *:first-child,
.cyber-section__bottom > *:first-child {
	margin-top: 0;
}

.cyber-section__top > *:last-child,
.cyber-section__bottom > *:last-child {
	margin-bottom: 0;
}

/*
 * Odstepy MIEDZY czesciami sekcji sa stale i nie maja pola w panelu — to
 * proporcja szkieletu, nie konfiguracja. Odstepy sekcji od sasiadow reguluje
 * padding, ktory pole ma.
 */
.cyber-section__top:not(:last-child),
.cyber-section__body:not(:last-child) {
	margin-bottom: var(--cyber-space-4);
}

/* Pusty kontener na elementy nie ma zostawiac po sobie odstepu. */
.cyber-section__body:empty {
	display: none;
}

/* --- Breakpointy (CLAUDE.md sekcja 18) ------------------------------------- */

/*
 * Prog 767px obsluguje OBA warianty mobilne naraz: wlasny kadr zdjecia i wlasne
 * odstepy. Zdjecie mobilne ma wartosc zapasowa w postaci zdjecia desktopowego,
 * wiec niewypelnione pole nie gasi tla, tylko zostawia oryginal.
 *
 * Odstepy per instancja sa swiadomym ODSTEPSTWEM od CLAUDE.md sekcja 19, ktora
 * dla wielu powiazanych wartosci nakazuje jedno pole procentowe na breakpoint.
 * Uzasadnienie: sekcje roznia sie miedzy soba za bardzo, zeby wspolny mnoznik
 * mial sens — hero i waski pasek z logotypami nie skaluja sie tak samo.
 */
@media (max-width: 767px) {
	.cyber-section {
		padding-top: var(--cyber-section-pt-m, var(--cyber-section-pt, 0px));
		padding-right: var(--cyber-section-pr-m, var(--cyber-section-pr, 0px));
		padding-bottom: var(--cyber-section-pb-m, var(--cyber-section-pb, 0px));
		padding-left: var(--cyber-section-pl-m, var(--cyber-section-pl, 0px));
		background-image: var(--cyber-section-bg-image-mobile, var(--cyber-section-bg-image, none));
	}

	.cyber-section__top:not(:last-child),
	.cyber-section__body:not(:last-child) {
		margin-bottom: var(--cyber-space-3);
	}
}

/* --- Karty (icon boxes) ---------------------------------------------------- */

/*
 * Siatka. Liczba kolumn przychodzi zmienna, wiec jeden zestaw regul obsluguje
 * kazda konfiguracje — nie ma klas w rodzaju --cols-4 ani pisania po jednej
 * regule na kazda liczbe kolumn.
 *
 * minmax(0, 1fr) zamiast samego 1fr: domyslny minimalny rozmiar elementu
 * siatki to auto, wiec dlugie slowo albo szerokie zdjecie rozpychaja kolumne
 * ponad przydzial i cala siatka wyjezdza poza kontener.
 */
.cyber-cards {
	display: grid;
	grid-template-columns: repeat(var(--cyber-cards-cols, 3), minmax(0, 1fr));
	column-gap: var(--cyber-cards-gap-x, 24px);
	row-gap: var(--cyber-cards-gap-y, 24px);
}

.cyber-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--cyber-cards-pad-y, 24px) var(--cyber-cards-pad-x, 24px);
	border-radius: var(--cyber-cards-radius, 0);
	background-color: var(--cyber-cards-bg, transparent);
}

/*
 * Przejscie tylko wtedy, gdy jest co animowac. Bez tego warunku kazda karta
 * niesie transition, ktorego nigdy nie uzyje.
 */
.cyber-cards--hover .cyber-card {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cyber-cards--hover .cyber-card:hover {
	background-color: var(--cyber-cards-bg-hover, var(--cyber-cards-bg, transparent));
}

/*
 * Cien i obramowanie: wlacznik w panelu, barwa z zakladki Kolory, a same
 * wartosci na sztywno tutaj. Dzieki temu karty w calym projekcie wygladaja
 * tak samo, a zmiana palety dziala wszedzie naraz — bez pola koloru przy
 * kazdej sekcji z osobna.
 */
.cyber-cards--shadow .cyber-card {
	box-shadow: 0 2px 12px var(--cyber-color-shadow);
}

.cyber-cards--shadow.cyber-cards--hover .cyber-card:hover {
	box-shadow: 0 6px 24px var(--cyber-color-shadow-hover);
}

.cyber-cards--border .cyber-card {
	border: 1px solid var(--cyber-color-border-1);
}

.cyber-cards--border.cyber-cards--hover .cyber-card:hover {
	border-color: var(--cyber-color-border-2);
}

/* --- Zdjecie jako tlo karty ------------------------------------------------ */

/*
 * W tym trybie zdjecie nie jest osobnym elementem, tylko tlem calej karty —
 * dlatego karta musi miec wlasna wysokosc, inaczej tlo nie mialoby sie na czym
 * pokazac. Minimalna wysokosc ma wlasne pole, widoczne tylko przy wlaczonym
 * trybie.
 */
.cyber-cards--image-bg .cyber-card {
	min-height: var(--cyber-cards-min-height, 320px);
	background-image: var(--cyber-card-image, none);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* --- Czesci karty ---------------------------------------------------------- */

.cyber-card__media {
	margin-bottom: var(--cyber-cards-gap-media, 12px);
}

/*
 * Nadtytul: kroj, wielkosc i kolor z globalnej klasy .cyber-overtitle
 * (Global Options). Tutaj wylacznie odstep od tytulu.
 */
.cyber-card__overtitle {
	margin: 0 0 var(--cyber-space-1);
}

.cyber-card__media:last-child,
.cyber-card__overtitle:last-child,
.cyber-card__title:last-child,
.cyber-card__text:last-child {
	margin-bottom: 0;
}

.cyber-card__image {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Linia meta (data, kategoria) i linki karty wpisu. Tytul prowadzi do wpisu;
 * zdjecie tez, ale poza tabulacja (tabindex=-1 w komponencie).
 */
.cyber-card__meta {
	margin: 0 0 var(--cyber-space-2);
	color: var(--cyber-cards-text-color, var(--cyber-color-text));
	font-size: calc(var(--cyber-font-size-text) * 0.875);
	opacity: 0.75;
}

.cyber-card__media-link {
	display: block;
}

.cyber-card__title-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cyber-card__title-link:hover,
.cyber-card__title-link:focus-visible {
	color: var(--cyber-color-hover);
}

/*
 * Proporcje zdjecia (pole "Proporcje zdjecia"): wszystkie zdjecia w siatce
 * maja ten sam ksztalt, kadrowane przez object-fit.
 */
.cyber-cards[class*="cyber-cards--ratio-"] .cyber-card__image {
	width: 100%;
	object-fit: cover;
}

.cyber-cards--ratio-16-9 .cyber-card__image { aspect-ratio: 16 / 9; }
.cyber-cards--ratio-3-2 .cyber-card__image { aspect-ratio: 3 / 2; }
.cyber-cards--ratio-4-3 .cyber-card__image { aspect-ratio: 4 / 3; }
.cyber-cards--ratio-1-1 .cyber-card__image { aspect-ratio: 1 / 1; }

.cyber-card__title {
	margin: 0 0 var(--cyber-cards-gap-title, 12px);
	color: var(--cyber-cards-title-color, var(--cyber-color-headings));
	font-size: var(--cyber-cards-title-size, var(--cyber-font-size-h5));
	font-weight: var(--cyber-cards-title-weight, var(--cyber-font-weight-headings));
	line-height: 1.3;
}

.cyber-card__text {
	margin-bottom: var(--cyber-cards-gap-text, 24px);
	color: var(--cyber-cards-text-color, var(--cyber-color-text));
	font-weight: var(--cyber-cards-text-weight, var(--cyber-font-weight-text));
	line-height: 1.6;
}

/*
 * Kolor i grubosc z ustawien karty musza dojsc do akapitow i list — arkusz
 * bazowy (main.css) daje <p>, <li> i <span> wlasny kolor i grubosc tekstu,
 * wiec bez tej reguly pola "Kolor tekstu" i "Grubosc tekstu" nic nie zmienialy.
 */
.cyber-card__text :is(p, ul, ol, li, span) {
	color: inherit;
	font-weight: inherit;
}

.cyber-card__text > *:first-child {
	margin-top: 0;
}

.cyber-card__text > *:last-child {
	margin-bottom: 0;
}

/*
 * Stopka dosuwa sie do dolu, wiec przyciski wszystkich kart w wierszu stoja
 * w jednej linii niezaleznie od dlugosci tekstu. To dlatego karta jest
 * kolumna flex, a nie zwyklym blokiem.
 */
.cyber-card__footer {
	margin-top: auto;
}

.cyber-card__link {
	color: var(--cyber-color-links);
	font-size: var(--cyber-font-size-links);
	text-decoration: underline;
}

.cyber-card__link:hover,
.cyber-card__link:focus-visible {
	color: var(--cyber-color-hover);
}

/* --- Wyrownanie: klasa, nie zmienna (CLAUDE.md sekcja 20) ------------------- */

/*
 * Wyrownanie zmienia wiecej niz jedna wlasciwosc — przy zdjeciu takze
 * margin-inline — wiec jest modyfikatorem klasy. Stopka idzie za tekstem,
 * bo przycisk pod wysrodkowanym akapitem wysrodkowany na ogol byc powinien.
 */
.cyber-cards--media-left .cyber-card__media { text-align: left; }
.cyber-cards--media-center .cyber-card__media { text-align: center; }
.cyber-cards--media-right .cyber-card__media { text-align: right; }

.cyber-cards--media-center .cyber-card__image { margin-inline: auto; }
.cyber-cards--media-right .cyber-card__image { margin-inline-start: auto; }

.cyber-cards--title-left :is(.cyber-card__overtitle, .cyber-card__title) { text-align: left; }
.cyber-cards--title-center :is(.cyber-card__overtitle, .cyber-card__title) { text-align: center; }
.cyber-cards--title-right :is(.cyber-card__overtitle, .cyber-card__title) { text-align: right; }

.cyber-cards--text-left .cyber-card__text,
.cyber-cards--text-left .cyber-card__footer { text-align: left; }
.cyber-cards--text-center .cyber-card__text,
.cyber-cards--text-center .cyber-card__footer { text-align: center; }
.cyber-cards--text-right .cyber-card__text,
.cyber-cards--text-right .cyber-card__footer { text-align: right; }

/* --- Breakpointy (CLAUDE.md sekcja 18) ------------------------------------- */

@media (max-width: 980px) {
	.cyber-cards {
		grid-template-columns: repeat(var(--cyber-cards-cols-t, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cyber-cards {
		grid-template-columns: repeat(var(--cyber-cards-cols-m, 1), minmax(0, 1fr));
	}
}

/* --- Kolumny tekstowe (WYSIWYG) -------------------------------------------- */

/*
 * Sciezki siatki przychodza gotowe ze zmiennej, w jednostkach fr, nie w
 * procentach. 40% + 60% plus odstep przekracza 100% i wiersz wyjezdza poza
 * kontener; fr dzieli to, co zostaje PO odjeciu odstepu, wiec proporcja
 * zostaje dokladna przy kazdej wartosci gap.
 */
.cyber-columns {
	display: grid;
	grid-template-columns: var(--cyber-columns-template, minmax(0, 1fr));
	column-gap: var(--cyber-columns-gap-x, 24px);
	row-gap: var(--cyber-columns-gap-y, 24px);
}

.cyber-column {
	min-width: 0;
	padding: var(--cyber-columns-pad-y, 0px) var(--cyber-columns-pad-x, 0px);
	border-radius: var(--cyber-columns-radius, 0);
	background-color: var(--cyber-columns-bg, transparent);
	background-image: var(--cyber-columns-bg-image, none);
	background-repeat: var(--cyber-columns-bg-repeat, no-repeat);
	background-position: var(--cyber-columns-bg-position, center center);
	background-size: var(--cyber-columns-bg-size, cover);
}

.cyber-column > *:first-child {
	margin-top: 0;
}

.cyber-column > *:last-child {
	margin-bottom: 0;
}

/* WYSIWYG potrafi wstawic obrazek szerszy niz kolumna. */
.cyber-column img {
	max-width: 100%;
	height: auto;
}

.cyber-columns--hover .cyber-column {
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cyber-columns--hover .cyber-column:hover {
	background-color: var(--cyber-columns-bg-hover, var(--cyber-columns-bg, transparent));
}

/* Barwa z zakladki Kolory, grubosc na sztywno — ten sam wzorzec co w kartach. */
.cyber-columns--border .cyber-column {
	border: 1px solid var(--cyber-color-border-1);
}

.cyber-columns--border.cyber-columns--hover .cyber-column:hover {
	border-color: var(--cyber-color-border-2);
}

/*
 * Tablet: dwie kolumny zostaja przy proporcji z desktopu (brak zmiennej -t,
 * wiec dziala wartosc zapasowa), trzy ida w rowne, cztery w dwie na dwie.
 * Mobile: zawsze jedna pod druga.
 */
@media (max-width: 980px) {
	.cyber-columns {
		grid-template-columns: var(--cyber-columns-template-t, var(--cyber-columns-template, minmax(0, 1fr)));
	}
}

@media (max-width: 767px) {
	.cyber-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Slider ---------------------------------------------------------------- */

/*
 * Wysokosc karuzeli jest stala i ustawiana w px (osobno desktop i telefon).
 * Slajd nie rosnie z trescia — tekst dluzszy niz miejsce zostanie przyciety,
 * dlatego wysokosc wybiera redaktor pod konkretne slajdy.
 */
.cyber-slider {
	--swiper-theme-color: var(--cyber-color-links);
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #ffffff;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
	--swiper-pagination-bottom: var(--cyber-space-3);
	--swiper-navigation-sides-offset: var(--cyber-space-3);

	position: relative;
	width: 100%;
	height: var(--cyber-slider-h, 600px);
}

.cyber-slide {
	position: relative;
	height: 100%;
	overflow: hidden;
}

/*
 * Zdjecie wypelnia slajd jako img z object-fit, nie jako tlo. Pole "rozmiar"
 * nazywa sie jak background-size, a PHP tlumaczy "auto" na "none", ktore jest
 * odpowiednikiem dla object-fit.
 */
.cyber-slide__media,
.cyber-slide__image,
.cyber-slide__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.cyber-slide__image,
.cyber-slide__video {
	object-fit: var(--cyber-slider-fit, cover);
	object-position: var(--cyber-slider-position, center center);
}

/* Nakladka tylko przy ustawionym kolorze — bez niej pudelko nie istnieje w CSS. */
.cyber-slide__overlay {
	display: none;
}

.cyber-slider--has-overlay .cyber-slide__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background-color: var(--cyber-slider-overlay, transparent);
	pointer-events: none;
}

/* --- Tresc slajdu ---------------------------------------------------------- */

/*
 * Warstwa tresci lezy nad zdjeciem i nakladka. Polozenie w pionie steruje
 * justify-content, w poziomie align-items plus text-align — dlatego wyrownanie
 * jest klasa, nie zmienna (CLAUDE.md sekcja 20).
 */
.cyber-slide__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin-inline: auto;
	padding-block: var(--cyber-space-5);
	padding-inline: var(--cyber-slider-pad-x, 0px);
}

/*
 * Tryb "100% przegladarki": zdjecie siega krawedzi okna, a tresc zweza sie do
 * szerokosci sekcji — tym samym wzorem co .cyber-container, wiec lewy brzeg
 * tekstu stoi w jednej linii z headerem i reszta strony.
 */
.cyber-slider--full .cyber-slide__body {
	max-width: var(--cyber-section-width, var(--cyber-container-width));
	padding-inline: calc(var(--cyber-container-margin) + var(--cyber-slider-pad-x, 0px));
}

.cyber-slide__content {
	max-width: 100%;
}

.cyber-slide__text > *:first-child {
	margin-top: 0;
}

.cyber-slide__text > *:last-child {
	margin-bottom: 0;
}

.cyber-slide__footer {
	margin-top: var(--cyber-space-3);
}

/*
 * Strzalki sa znacznikami <button> (dostepne z klawiatury), a Swiper stylizuje
 * je jak zwykle pudelka. Bez tego resetu przegladarka dokleja im wlasne tlo
 * i ramke przycisku formularza — szare prostokaty pod ikona strzalki.
 */
.cyber-slider .swiper-button-prev,
.cyber-slider .swiper-button-next {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * Kropki leza na dole slajdu. Przy tresci przyklejonej do dolu przycisk
 * wchodzilby na nie, wiec tresc dostaje wiekszy odstep od dolnej krawedzi
 * wylacznie wtedy, gdy paginacja jest wlaczona.
 */
.cyber-slider--has-pagination .cyber-slide__body {
	padding-bottom: var(--cyber-space-6);
}

.cyber-slider--y-top .cyber-slide__body { justify-content: flex-start; }
.cyber-slider--y-center .cyber-slide__body { justify-content: center; }
.cyber-slider--y-bottom .cyber-slide__body { justify-content: flex-end; }

.cyber-slider--x-left .cyber-slide__body { align-items: flex-start; text-align: left; }
.cyber-slider--x-center .cyber-slide__body { align-items: center; text-align: center; }
.cyber-slider--x-right .cyber-slide__body { align-items: flex-end; text-align: right; }

/* --- Breakpointy (CLAUDE.md sekcja 18) ------------------------------------- */

@media (max-width: 767px) {
	.cyber-slider {
		--swiper-navigation-size: 32px;

		height: var(--cyber-slider-h-m, var(--cyber-slider-h, 400px));
	}

	.cyber-slide__body {
		padding-block: var(--cyber-space-4);
	}
}

/*
 * Uzytkownik z wylaczonymi animacjami w systemie: bez plynnego przejscia.
 * Autoplay wylacza sam skrypt, tutaj gasimy reszte ruchu.
 */
@media (prefers-reduced-motion: reduce) {
	.cyber-slider .swiper-wrapper {
		transition-duration: 0s !important;
	}

	/* Wideo tla znika — zostaje zdjecie spod spodu. */
	.cyber-slide__video {
		display: none;
	}
}

/* --- Karuzela kart --------------------------------------------------------- */

/*
 * Ciagle przewijanie — tasma z animacja CSS, bez Swipera.
 *
 * Karty sa wypisane dwa razy pod rzad, a tasma jedzie o polowe swojej dlugosci
 * w nieskonczonej petli. Koniec animacji to dokladnie jej poczatek, wiec nie ma
 * przeskoku. Tempo liniowe — bez zwalniania i przyspieszania.
 *
 * Szerokosc karty liczona jest od szerokosci KARUZELI (jednostka cqw), nie od
 * tasmy. Tasma ma szerokosc tresci (max-content), wiec procenty liczylyby sie
 * od niej samej i powstalaby zaleznosc w kolko. Kontener zapytan na karuzeli
 * daje stala podstawe.
 */
.cyber-carousel--continuous {
	container-type: inline-size;
}

.cyber-carousel--continuous .cyber-carousel__band {
	width: max-content;
	animation: cyber-carousel-band var(--cyber-carousel-duration, 20000ms) linear infinite;
	will-change: transform;
}

.cyber-carousel.cyber-carousel--continuous:not(.swiper-initialized) .cyber-carousel__slide {
	width: calc((100cqw - (var(--cyber-carousel-pv, 4) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv, 4));
	margin-right: var(--cyber-carousel-gap, 0px);
}

/*
 * Tasma NIE zatrzymuje sie po najechaniu mysza ani po wejsciu klawiatura —
 * decyzja projektowa: ruch ma byc ciagly. Osoby z ograniczeniem animacji
 * w systemie dostaja rzad nieruchomy (blok prefers-reduced-motion nizej).
 */

@keyframes cyber-carousel-band {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 980px) {
	.cyber-carousel.cyber-carousel--continuous:not(.swiper-initialized) .cyber-carousel__slide {
		width: calc((100cqw - (var(--cyber-carousel-pv-t, 2) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv-t, 2));
	}
}

@media (max-width: 767px) {
	.cyber-carousel.cyber-carousel--continuous:not(.swiper-initialized) .cyber-carousel__slide {
		width: calc((100cqw - (var(--cyber-carousel-pv-m, 1) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv-m, 1));
	}
}

/*
 * Ograniczenie animacji w systemie: tasma stoi, kopie znikaja, a rzad
 * oryginalnych kart da sie przewinac recznie.
 */
@media (prefers-reduced-motion: reduce) {
	/*
	 * Podwojne klasy celowo: arkusz Swipera (.swiper { overflow: hidden }) laduje
	 * sie PO tym arkuszu, a .cyber-carousel .cyber-carousel__slide ustawia
	 * display: flex nizej w pliku. Przy rownej specyficznosci obie reguly
	 * wygrywaly — zmierzone w Chrome z emulacja ograniczenia animacji.
	 */
	.cyber-carousel.cyber-carousel--continuous {
		overflow-x: auto;
	}

	.cyber-carousel--continuous .cyber-carousel__band {
		animation: none;
	}

	.cyber-carousel.cyber-carousel--continuous .cyber-carousel__slide--copy {
		display: none;
	}
}

/*
 * Kontener karuzeli nosi JEDNOCZESNIE klasy siatki kart (.cyber-cards--*),
 * bo to one daja kartom tlo, cien, obramowanie i wyrownanie. Samo ukladanie
 * w siatke trzeba mu jednak odebrac — Swiper potrzebuje zwyklego bloku.
 * Dwie klasy w selektorze wygrywaja z pojedynczym .cyber-cards niezaleznie
 * od kolejnosci regul w arkuszu.
 */
.cyber-carousel.cyber-cards {
	display: block;
}

/*
 * Opakowanie trzyma strzalki i kropki, ktore leza obok kontenera .swiper.
 * z-index stawia je nad nakladka sekcji: w trybie "full" karuzela nie siedzi
 * w .cyber-section__inner, ktory normalnie to zapewnia.
 */
.cyber-carousel-wrap {
	--swiper-navigation-color: var(--cyber-color-links);
	--swiper-pagination-color: var(--cyber-color-links);
	--swiper-pagination-bullet-inactive-color: var(--cyber-color-text);
	--swiper-pagination-bullet-inactive-opacity: 0.3;
	--swiper-navigation-sides-offset: var(--cyber-space-2);

	position: relative;
	z-index: 1;
}

/*
 * Karty w jednym rzedzie maja rowna wysokosc. Swiper daje slajdom height:100%,
 * co w rzedzie flex nie rozciaga ich do najwyzszego sasiada — height:auto
 * oddaje to rozciaganiu (align-items: stretch), a karta wypelnia slajd.
 * Dzieki temu stopki z przyciskami stoja w jednej linii, tak jak w siatce.
 *
 * Selektor ma DWIE klasy celowo: arkusz Swipera laduje sie po tym arkuszu,
 * wiec przy tej samej specyficznosci jego .swiper-slide { height: 100% }
 * wygrywa kolejnoscia. Sprawdzone na zrzucie — z jedna klasa karty mialy
 * rozna wysokosc.
 */
.cyber-carousel .cyber-carousel__slide {
	display: flex;
	height: auto;
}

.cyber-carousel__slide > .cyber-card {
	width: 100%;
}

/*
 * Uklad PRZED uruchomieniem Swipera. Skrypt jest modulem ES i startuje po
 * wyrenderowaniu strony; bez tych regul kazda karta zajmowalaby do tego czasu
 * cala szerokosc, a po starcie rzad nagle by sie przebudowal.
 *
 * Po starcie Swiper sam wylicza szerokosci i marginesy (styl inline), a klasa
 * .swiper-initialized wylacza te reguly — nie ma dwoch zrodel szerokosci naraz.
 */
.cyber-carousel:not(.swiper-initialized) .cyber-carousel__slide {
	width: calc((100% - (var(--cyber-carousel-pv, 4) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv, 4));
	margin-right: var(--cyber-carousel-gap, 0px);
}

@media (max-width: 980px) {
	.cyber-carousel:not(.swiper-initialized) .cyber-carousel__slide {
		width: calc((100% - (var(--cyber-carousel-pv-t, 2) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv-t, 2));
	}
}

@media (max-width: 767px) {
	.cyber-carousel:not(.swiper-initialized) .cyber-carousel__slide {
		width: calc((100% - (var(--cyber-carousel-pv-m, 1) - 1) * var(--cyber-carousel-gap, 0px)) / var(--cyber-carousel-pv-m, 1));
	}
}

/*
 * Pasek sterowania pod karuzela: strzalka, kropki, strzalka. Swiper ustawia
 * strzalki i kropki absolutnie na karuzeli — tutaj wracaja do zwyklego
 * przeplywu, zeby nie przykrywaly kart.
 */
.cyber-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cyber-space-3);
	margin-top: var(--cyber-space-3);
}

/* Strzalki sa znacznikami <button> — bez resetu dostaja wyglad pola formularza. */
.cyber-carousel__controls .swiper-button-prev,
.cyber-carousel__controls .swiper-button-next {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * Trzy klasy w selektorze celowo: arkusz Swipera laduje sie pozniej i ma
 * .swiper-pagination-bullets.swiper-pagination-horizontal { width: 100% }
 * (dwie klasy) — przy rownej specyficznosci kropki zajelyby caly pasek,
 * a strzalki odjechalyby do krawedzi zamiast stac obok nich.
 */
.cyber-carousel__controls .swiper-pagination.cyber-carousel__pagination {
	position: static;
	width: auto;
	transform: none;
}

/*
 * Odstepy miedzy czesciami sekcji. Karuzela i Wpisy otwieraja opakowanie bez
 * wspolnego kontenera, wiec tresc nad, karuzela i tresc pod to osobne dzieci sekcji —
 * reguly szkieletu (.cyber-section__top:not(:last-child)) ich nie obejmuja.
 */
.cyber-section--carousel > .cyber-section__inner + .cyber-carousel-wrap,
.cyber-section--carousel > .cyber-section__inner + .cyber-section__inner,
.cyber-section--carousel > .cyber-carousel-wrap + .cyber-section__inner,
.cyber-section--posts > .cyber-section__inner + .cyber-carousel-wrap,
.cyber-section--posts > .cyber-section__inner + .cyber-section__inner,
.cyber-section--posts > .cyber-carousel-wrap + .cyber-section__inner {
	margin-top: var(--cyber-space-4);
}

@media (max-width: 767px) {
	.cyber-section--carousel > .cyber-section__inner + .cyber-carousel-wrap,
	.cyber-section--carousel > .cyber-section__inner + .cyber-section__inner,
	.cyber-section--carousel > .cyber-carousel-wrap + .cyber-section__inner,
	.cyber-section--posts > .cyber-section__inner + .cyber-carousel-wrap,
	.cyber-section--posts > .cyber-section__inner + .cyber-section__inner,
	.cyber-section--posts > .cyber-carousel-wrap + .cyber-section__inner {
		margin-top: var(--cyber-space-3);
	}
}

/* --- FAQ ------------------------------------------------------------------- */

/*
 * Natywne <details>/<summary> — bez JavaScriptu. Dwie kolumny to dwie
 * niezalezne listy: otwarcie pytania w jednej nie przesuwa pytan w drugiej.
 * interpolate-size pozwala animowac wysokosc do "auto" (patrz ::details-content).
 */
.cyber-faq {
	interpolate-size: allow-keywords;
}

.cyber-faq--cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--cyber-faq-gap-x, 48px);
	align-items: start;
}

.cyber-faq--divider .cyber-faq__item {
	border-bottom: 1px solid var(--cyber-color-border-1);
}

.cyber-faq__item {
	transition: background-color 0.2s ease;
}

.cyber-faq--open-bg .cyber-faq__item[open] {
	background-color: var(--cyber-faq-open-bg);
}

/*
 * Tlo otwartego pytania nie moze dotykac tekstu — dostaje wtedy odstep
 * poziomy. Bez tla pytanie zostaje wyrownane do krawedzi, jak na makiecie.
 */
.cyber-faq--open-bg .cyber-faq__summary,
.cyber-faq--open-bg .cyber-faq__answer {
	padding-inline: var(--cyber-space-3);
}

.cyber-faq__summary {
	display: flex;
	align-items: center;
	gap: var(--cyber-space-2);
	padding-block: var(--cyber-faq-pad-y, 24px);
	list-style: none;
	cursor: pointer;
}

/* Znacznik trojkata przegladarki — zastepuje go ikona plus / minus. */
.cyber-faq__summary::-webkit-details-marker {
	display: none;
}

.cyber-faq__summary::marker {
	content: "";
}

.cyber-faq__summary:focus-visible {
	outline: 2px solid var(--cyber-color-links);
	outline-offset: 2px;
}

.cyber-faq__question {
	flex: 1 1 auto;
	color: var(--cyber-faq-q-color, var(--cyber-color-headings));
	font-family: var(--cyber-font-family-headings);
	font-size: var(--cyber-faq-q-size, var(--cyber-font-size-h5));
	font-weight: var(--cyber-faq-q-weight, var(--cyber-font-weight-headings));
	line-height: 1.35;
	transition: color 0.2s ease;
}

.cyber-faq--hover .cyber-faq__summary:hover .cyber-faq__question,
.cyber-faq--hover .cyber-faq__summary:focus-visible .cyber-faq__question {
	color: var(--cyber-faq-q-hover);
}

/* Ikona z lewej: SVG motywu (kolor ikon) albo obrazek z panelu. */
.cyber-faq__icon {
	display: inline-flex;
	flex: none;
	width: 28px;
	height: 28px;
}

.cyber-faq__icon .cyber-icon,
.cyber-faq__icon-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Plus / minus rysowany dwiema kreskami. Pionowa kreska znika przy otwarciu,
 * wiec plus zamienia sie w minus obrotem, bez drugiej ikony. Kolor z pola
 * Kolory -> Ikony; klasa .cyber-faq__toggle pozwala go nadpisac w arkuszu.
 */
.cyber-faq__toggle {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--cyber-color-icons);
}

.cyber-faq__toggle::before,
.cyber-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.cyber-faq__toggle::after {
	transform: translateY(-50%) rotate(90deg);
}

.cyber-faq__item[open] .cyber-faq__toggle::after {
	transform: translateY(-50%) rotate(0deg);
}

/*
 * Odpowiedz. Kolor ustawiony na kontenerze nie doszedlby do akapitow — arkusz
 * bazowy daje <p>, <li> i <span> wlasny kolor tekstu — stad jawne dziedziczenie.
 */
.cyber-faq__answer {
	padding-bottom: var(--cyber-faq-pad-y, 24px);
	line-height: 1.6;
}

.cyber-faq__answer,
.cyber-faq__answer :is(p, ul, ol, li, span) {
	color: var(--cyber-faq-a-color, var(--cyber-color-text));
}

.cyber-faq__answer > *:first-child {
	margin-top: 0;
}

.cyber-faq__answer > *:last-child {
	margin-bottom: 0;
}

/*
 * Ikona z lewej: odpowiedz zaczyna sie pod tekstem pytania, nie pod ikona.
 * 28px ikony + odstep z flexa.
 */
.cyber-faq--has-icon .cyber-faq__answer {
	padding-left: calc(28px + var(--cyber-space-2));
}

.cyber-faq--open-bg.cyber-faq--has-icon .cyber-faq__answer {
	padding-left: calc(28px + var(--cyber-space-2) + var(--cyber-space-3));
}

/*
 * Plynne rozwijanie tam, gdzie przegladarka zna ::details-content (Chrome 131+).
 * Pozostale ignoruja ta regule i pokazuja odpowiedz od razu.
 */
.cyber-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}

.cyber-faq__item[open]::details-content {
	block-size: auto;
}

@media (max-width: 767px) {
	.cyber-faq--cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cyber-faq__item,
	.cyber-faq__item::details-content,
	.cyber-faq__question,
	.cyber-faq__toggle::before,
	.cyber-faq__toggle::after {
		transition: none;
	}
}

/* --- Licznik (counter) ----------------------------------------------------- */

/*
 * Siatka jak w kartach: liczba kolumn per breakpoint w zmiennych.
 * overflow: hidden przycina linie pionowa pierwszej kolumny kazdego wiersza —
 * linia stoi po lewej stronie elementu, w polowie odstepu, wiec u pierwszego
 * elementu w wierszu wystaje poza kontener. Dziala przy kazdej liczbie kolumn.
 */
.cyber-counter {
	display: grid;
	grid-template-columns: repeat(var(--cyber-counter-cols, 4), minmax(0, 1fr));
	column-gap: var(--cyber-counter-gap-x, 24px);
	row-gap: var(--cyber-counter-gap-y, 48px);
	overflow: hidden;
}

.cyber-counter__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.cyber-counter--divider .cyber-counter__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--cyber-counter-gap-x, 24px) / -2 - 1px);
	width: 1px;
	background-color: var(--cyber-counter-divider, var(--cyber-color-border-1));
}

.cyber-counter--left .cyber-counter__item {
	align-items: flex-start;
	text-align: left;
}

.cyber-counter--center .cyber-counter__item {
	align-items: center;
	text-align: center;
}

.cyber-counter--right .cyber-counter__item {
	align-items: flex-end;
	text-align: right;
}

.cyber-counter__icon {
	margin-bottom: var(--cyber-space-2);
}

.cyber-counter__icon-image {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/*
 * Cyfry o stalej szerokosci (tabular-nums) — liczba w trakcie odliczania nie
 * drga. Prefiks i sufiks dziedzicza kroj i rozmiar liczby.
 */
.cyber-counter__value {
	margin: 0;
	color: var(--cyber-counter-color, var(--cyber-color-headings));
	font-family: var(--cyber-font-family-headings);
	font-size: var(--cyber-counter-size, var(--cyber-font-size-h1));
	font-weight: var(--cyber-counter-weight, 800);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cyber-counter__value span {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.cyber-counter__number {
	display: inline-block;
}

/*
 * Tytul pod liczba. Rozmiar z pola "Rozmiar tytulu" (globalna wielkosc
 * naglowka), kolor jak liczba. Odstepy te same co przy opisie.
 */
.cyber-counter__title {
	margin: var(--cyber-counter-gap-label, 12px) 0 0;
	color: var(--cyber-counter-color, var(--cyber-color-headings));
	font-size: var(--cyber-counter-title-size, var(--cyber-font-size-h5));
	line-height: 1.3;
}

.cyber-counter__label {
	margin: var(--cyber-counter-gap-label, 12px) 0 0;
	color: var(--cyber-counter-label-color, var(--cyber-color-text));
}

@media (max-width: 980px) {
	.cyber-counter {
		grid-template-columns: repeat(var(--cyber-counter-cols-t, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cyber-counter {
		grid-template-columns: repeat(var(--cyber-counter-cols-m, 1), minmax(0, 1fr));
	}
}

/* --- Kontakt (dane + formularz) -------------------------------------------- */

.cyber-contact {
	display: grid;
	grid-template-columns: var(--cyber-contact-cols, 1fr 1fr);
	column-gap: var(--cyber-contact-gap-x, 64px);
	row-gap: var(--cyber-space-5);
	align-items: start;
}

.cyber-contact__col {
	min-width: 0;
}

.cyber-contact__content:not(:last-child) {
	margin-bottom: var(--cyber-space-3);
}

.cyber-contact__content > *:first-child {
	margin-top: 0;
}

.cyber-contact__content > *:last-child {
	margin-bottom: 0;
}

/* Dane kontaktowe: etykieta nad wartoscia, pozycje obok siebie z zawijaniem. */
.cyber-contact__data {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cyber-space-3) var(--cyber-space-5);
	margin: 0;
}

.cyber-contact__data:not(:last-child) {
	margin-bottom: var(--cyber-space-4);
}

.cyber-contact__label {
	display: flex;
	align-items: center;
	gap: var(--cyber-space-1);
	margin-bottom: var(--cyber-space-2);
	color: var(--cyber-contact-label-color, var(--cyber-color-headings));
	font-family: var(--cyber-font-family-headings);
	font-size: var(--cyber-font-size-h6);
	font-weight: 600;
}

.cyber-contact__label .cyber-icon {
	width: 18px;
	height: 18px;
}

.cyber-contact__value {
	margin: 0;
	color: var(--cyber-contact-value-color, var(--cyber-color-text));
}

.cyber-contact__value a {
	color: inherit;
	text-decoration: none;
}

.cyber-contact__value a:hover,
.cyber-contact__value a:focus-visible {
	color: var(--cyber-color-hover);
}

.cyber-contact__social-title {
	margin: 0 0 var(--cyber-space-3);
	color: var(--cyber-contact-label-color, var(--cyber-color-headings));
	font-family: var(--cyber-font-family-headings);
	font-size: var(--cyber-font-size-h5);
	font-weight: 500;
}

/* Wariant komponentu ikon z nazwami platform (Facebook, Instagram...). */
.cyber-social-icons.cyber-social-icons--labels {
	flex-wrap: wrap;
	gap: var(--cyber-space-2) var(--cyber-space-4);
}

.cyber-social-icons--labels .cyber-social-icons__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cyber-space-1);
	color: var(--cyber-contact-value-color, var(--cyber-color-text));
	text-decoration: none;
}

.cyber-social-icons--labels .cyber-social-icons__link:hover,
.cyber-social-icons--labels .cyber-social-icons__link:focus-visible {
	color: var(--cyber-color-hover);
}

.cyber-social-icons--labels .cyber-social-icons__label {
	color: inherit;
	font-size: var(--cyber-font-size-text);
}

.cyber-social-icons--labels svg {
	width: 20px;
	height: 20px;
}

/*
 * Formularz Contact Form 7 — klasyczny markup wtyczki stylowany arkuszem,
 * bez nadpisywania jej szablonow. Dwa pola w rzedzie: w szablonie formularza
 * owin je w <div class="cyber-form-row">.
 */
.cyber-contact__form .wpcf7-form > p,
.cyber-contact__form .cyber-form-row > p {
	margin: 0 0 var(--cyber-space-3);
}

.cyber-contact__form .cyber-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--cyber-space-5);
}

.cyber-contact__form label {
	display: block;
	color: var(--cyber-contact-label-color, var(--cyber-color-headings));
	font-size: var(--cyber-font-size-text);
}

.cyber-contact__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--cyber-space-2);
}

.cyber-contact__form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--cyber-space-3) var(--cyber-space-2);
	border: 1px solid var(--cyber-color-border-1);
	border-radius: 0;
	background-color: var(--cyber-contact-field-bg, #f5f5f5);
	color: var(--cyber-color-text);
	font: inherit;
}

/*
 * Contact Form 7 daje polu wiadomosci rows="10" (ok. 300px). Wysokosc z makiety
 * ustawiamy wprost; redaktor wiadomosci moze ja powiekszyc uchwytem.
 */
.cyber-contact__form textarea {
	height: 144px;
	resize: vertical;
}

.cyber-contact__form ::placeholder {
	color: var(--cyber-color-text);
	opacity: 0.6;
}

.cyber-contact__form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--cyber-color-links);
	outline-offset: 1px;
}

.cyber-contact__form .wpcf7-list-item {
	margin: 0;
}

.cyber-contact__form .wpcf7-acceptance label,
.cyber-contact__form .wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--cyber-space-2);
	color: var(--cyber-color-text);
}

.cyber-contact__form input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
}

.cyber-contact__form .wpcf7-submit {
	border: none;
	border-radius: 0;
	font-family: var(--cyber-font-family-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Contact Form 7 blokuje przycisk, dopoki zgoda (acceptance) nie jest
 * zaznaczona. Bez tej reguly zablokowany przycisk wygladal jak aktywny
 * i klikniecie "nic nie robilo".
 */
.cyber-contact__form .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Spinner wysylki Contact Form 7 stoi za przyciskiem jako element inline.
 * Przy przycisku na cala szerokosc spadlby do nowej linii i podczas wysylki
 * przesuwal wszystko pod formularzem — dlatego lezy nad przyciskiem, z prawej.
 */
.cyber-contact__form .wpcf7-form > p:has(.wpcf7-submit) {
	position: relative;
}

.cyber-contact__form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: var(--cyber-space-3);
	margin: 0;
	transform: translateY(-50%);
}

.cyber-contact--btn-full .wpcf7-submit {
	width: 100%;
}

.cyber-contact--btn-large .wpcf7-submit {
	padding: var(--cyber-btn-large-padding-y) var(--cyber-btn-large-padding-x);
	color: var(--cyber-btn-large-color);
	background-color: var(--cyber-btn-large-bg-color);
	font-size: var(--cyber-btn-large-font-size);
	font-weight: var(--cyber-btn-large-font-weight);
}

.cyber-contact--btn-large .wpcf7-submit:hover,
.cyber-contact--btn-large .wpcf7-submit:focus-visible {
	color: var(--cyber-btn-large-color-hover);
	background-color: var(--cyber-btn-large-bg-color-hover);
}

.cyber-contact--btn-medium .wpcf7-submit {
	padding: var(--cyber-btn-medium-padding-y) var(--cyber-btn-medium-padding-x);
	color: var(--cyber-btn-medium-color);
	background-color: var(--cyber-btn-medium-bg-color);
	font-size: var(--cyber-btn-medium-font-size);
	font-weight: var(--cyber-btn-medium-font-weight);
}

.cyber-contact--btn-medium .wpcf7-submit:hover,
.cyber-contact--btn-medium .wpcf7-submit:focus-visible {
	color: var(--cyber-btn-medium-color-hover);
	background-color: var(--cyber-btn-medium-bg-color-hover);
}

.cyber-contact--btn-small .wpcf7-submit {
	padding: var(--cyber-btn-small-padding-y) var(--cyber-btn-small-padding-x);
	color: var(--cyber-btn-small-color);
	background-color: var(--cyber-btn-small-bg-color);
	font-size: var(--cyber-btn-small-font-size);
	font-weight: var(--cyber-btn-small-font-weight);
}

.cyber-contact--btn-small .wpcf7-submit:hover,
.cyber-contact--btn-small .wpcf7-submit:focus-visible {
	color: var(--cyber-btn-small-color-hover);
	background-color: var(--cyber-btn-small-bg-color-hover);
}

/*
 * Komunikaty wtyczki: blad pola i wynik wysylki. Selektor wynikowy ma
 * specyficznosc wieksza niz regula wtyczki (.wpcf7 form .wpcf7-response-output),
 * ktora laduje sie pozniej i przesuwala ramke marginesem 0.5em z bokow.
 */
.cyber-contact__form .wpcf7-not-valid-tip {
	margin-top: var(--cyber-space-1);
	font-size: 0.875em;
}

.cyber-contact__form .wpcf7-not-valid {
	border-color: #dc3232;
}

.cyber-contact__form .wpcf7 form .wpcf7-response-output {
	margin: var(--cyber-space-3) 0 0;
	padding: var(--cyber-space-2) var(--cyber-space-3);
}

@media (max-width: 980px) {
	.cyber-contact {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.cyber-contact__form .cyber-form-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Tabela ---------------------------------------------------------------- */

/*
 * Kontener tabeli niesie tlo, zaokraglenie i przewijanie poziome. Tabela
 * ma stala szerokosc kolumn (table-layout: fixed) — kolumny porownania maja
 * byc rowne, niezaleznie od dlugosci tekstu.
 */
.cyber-table {
	overflow-x: auto;
	border-radius: var(--cyber-table-radius, 8px);
	background-color: var(--cyber-table-bg, #ffffff);
}

.cyber-table:focus-visible {
	outline: 2px solid var(--cyber-color-links);
	outline-offset: 2px;
}

.cyber-table__table {
	width: 100%;
	min-width: var(--cyber-table-min-width, 0);
	border-collapse: collapse;
	table-layout: fixed;
}

.cyber-table__table :is(th, td) {
	padding: var(--cyber-table-pad-y, 36px) var(--cyber-table-pad-x, 24px);
	border: 1px solid var(--cyber-table-border, var(--cyber-color-border-1));
	color: var(--cyber-table-color, var(--cyber-color-headings));
	font-family: var(--cyber-font-family-headings);
	font-size: var(--cyber-table-cell-size, var(--cyber-font-size-h5));
	font-weight: var(--cyber-table-cell-weight, 600);
	line-height: 1.4;
	vertical-align: middle;
}

/* Linie tylko wewnatrz — obrys daje zaokraglony kontener. */
.cyber-table__table tr:first-child > * {
	border-top: 0;
}

.cyber-table__table tr:last-child > * {
	border-bottom: 0;
}

.cyber-table__table tr > :first-child {
	border-left: 0;
}

.cyber-table__table tr > :last-child {
	border-right: 0;
}

.cyber-table__table thead th {
	background-color: var(--cyber-table-head-bg, transparent);
	font-size: var(--cyber-table-head-size, var(--cyber-font-size-text));
	font-weight: var(--cyber-table-head-weight, 600);
}

.cyber-table__table thead + tbody tr:first-child > * {
	border-top: 1px solid var(--cyber-table-border, var(--cyber-color-border-1));
}

.cyber-table__table .cyber-table__label {
	font-family: var(--cyber-font-family-text);
	font-size: var(--cyber-table-label-size, var(--cyber-font-size-text));
	font-weight: var(--cyber-table-label-weight, 400);
}

.cyber-table--stripes tbody tr:nth-child(even) {
	background-color: var(--cyber-table-stripe-bg, #f7f7f7);
}

.cyber-table--left :is(th, td) { text-align: left; }
.cyber-table--center :is(th, td) { text-align: center; }
.cyber-table--right :is(th, td) { text-align: right; }

/*
 * Wyrownanie pojedynczej kolumny z repeatera "Kolumny". Klasa siedzi na
 * KAZDEJ komorce, bo <col> w CSS przyjmuje tylko obramowanie, tlo, szerokosc
 * i widocznosc — text-align ustawiony na kolumnie nie dziala. Dwie klasy,
 * zeby wygrac z wyrownaniem calej tabeli.
 */
.cyber-table .cyber-table__cell--left { text-align: left; }
.cyber-table .cyber-table__cell--center { text-align: center; }
.cyber-table .cyber-table__cell--right { text-align: right; }

@media (max-width: 767px) {
	.cyber-table__table :is(th, td) {
		padding: var(--cyber-space-3) var(--cyber-space-2);
	}
}