#mygutenberg {display: none}

.has-system-background-color {background-color: transparent !important}

/* Ramka jest wylacznie dekoracja: widac z niej 10px obrysu, ale jej pudelko
   ma nawet 520x520px i w calosci lapie zdarzenia wskaznika. Poniewaz Regula
   Przesunietej Ramki kaze jej lezec OBOK kadru, a nie na nim, przykrywala
   zdjecia i tresc obok - wskaznik trafial w niewidoczna ramke zamiast w to,
   na co uzytkownik celowal. */
.pattern,
.pattern-wrap {
	pointer-events: none;
}

/* Ramki. Obsluguja dwie role: ozdobniki miedzy sekcjami oraz rame przesunieta
   wzgledem zdjecia w sekcji "O wydarzeniu" (Regula Przesunietej Ramy).
   Role sa rozne, ale wyglad ten sam, wiec nie ma powodu dzielic ich na klasy.

   Grubosc jest ta sama, co aktywny luk licznika: --kreska-rama. Oba sa
   gruba kreska gradientowa pelniaca role elementu graficznego, a nie obrysu
   kontrolki, wiec musza wazyc tyle samo. Token zastapil piec responsywnych
   stopni 10/8/6/4/3px. Patrz The One Stroke Scale Rule. */
.pattern {
	position: absolute;
	box-sizing: border-box;
	border-image: var(--marka-gradient) 1;
	border-width: var(--kreska-rama);
	border-style: solid;
}

.gradient {
	background: var(--marka-gradient);
	color: black;
}

#home-header {
	box-sizing: border-box;
	padding: 50px;
}

/* Drzewo wypelnia kadr hero dokladnie tak, jak robil to raster: SVG ma
   preserveAspectRatio="slice", czyli odpowiednik background-size: cover.
   Dekoracja - nie lapie zdarzen wskaznika i jest niewidoczna dla czytnikow. */
/* Piec powierzchni, kolejnosc jest trescia: dalekie kwadraty, poswiata linii,
   ostre linie, impuls, bliskie kwadraty. Impuls chowa sie za lisciem tak samo,
   jak chowa sie za nim galaz. Rozdzielenie na osobne rysunki jest tez naprawa
   wydajnosci w Firefoksie - patrz naglowek hero-drzewo.php.

   Wszystkie maja te sama geometrie pudelka, bo dziela uklad wspolrzednych.
   Zadnej z nich nie wolno przesuwac jako ELEMENTU - przesuwa sie zawartosc
   wewnatrz, inaczej krawedz kadrowania odsloni pas tla. */
.warstwa-hero {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

#home-header > div > article {
	position: relative;
	z-index: 1;
}

#home-header > div > img {
	position: absolute;
	display: block;
	top: -50px;
	left: 50px;
	width: 50%;
}

#home-header > div {
	width: 100%;
	min-height: calc(var(--vh, 1vh)* 100 - 100px);
	position: relative;
	/* Samo tlo gradientowe. Drzewo lezy nad nim jako SVG - patrz
	   hero-drzewo.php. Dawny home-header.webp zawieral jedno i drugie
	   w jednym rastrze i wazyl 94 KB; sam gradient wazy 3,8 KB, bo jest
	   gladki i skaluje sie bez straty. */
	background-image: url(../img/home-header-tlo.webp);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center
}

/* MOMENT AUTORSKI

   Grafika w hero jest obwodem: kwadratowe moduly marki jako lisce, swiatlowody
   jako korzenie. Raz na wizyte przez kadr przechodzi od dolu do gory pasmo
   swiatla w kolorach markowych - prad wchodzi w obwod. Jedyna sekwencja
   na tej stronie, ktora nie moglaby nalezec do innej konferencji.

   mix-blend-mode: screen rozjasnia to, co pod spodem, zamiast klasc na tym
   plaska plachte. Ruch to wylacznie transform i opacity, na jednym elemencie,
   jeden raz. Grafika jest w pelni widoczna od pierwszej klatki - animacja
   przebiega po niej, a nie zamiast niej. */
#home-header > div:after {
	content: "";
	position: absolute;
	inset: -10% 0;
	pointer-events: none;
	opacity: 0;
	/* Waskie pasmo, nie zabarwienie calego kadru. Szersza wersja zamieniala
	   hero w zielona plaszczyzne i gubila granat jako podloze - dokladnie to,
	   przed czym ostrzega Regula Zywego Przewodu. Swiatlo ma przejechac,
	   a nie zabarwic. */
	background: linear-gradient(0deg,
		rgba(0,235,150,0) 32%,
		rgba(0,235,150,0.42) 42%,
		rgba(0,247,180,0.88) 50%,
		rgba(0,190,245,0.50) 58%,
		rgba(0,190,245,0) 68%);
	mix-blend-mode: screen;
}

/* Start dopiero po wyrenderowaniu tla hero (klasa dokladana z JS po
   zdekodowaniu obrazu), zeby prad nie przebiegal pod jeszcze pusta grafika. */
body.hero-ladowanie #home-header > div:after {
	/* Ruch prawie liniowy, nie wyhamowujacy. Krzywa "pewnego przybycia"
	   przesuwala pasmo na koniec kadru w pierwszej cwiartce czasu, wiec
	   swiatlo wylatywalo z gory, zanim zdazylo cokolwiek rozjasnic.
	   Prad plynie ze stala predkoscia. */
	animation: hero-ladowanie 1600ms cubic-bezier(0.35, 0.15, 0.55, 0.9) both;
}

@keyframes hero-ladowanie {
	0%   {opacity: 0;    transform: translateY(85%)}
	12%  {opacity: 1}
	62%  {opacity: 0.85}
	100% {opacity: 0;    transform: translateY(-90%)}
}

#home-header > div > article {
	box-sizing: border-box;
	width: 45%;
	padding-left: 200px;
}

#home-header > div > article .rwd-s {display: none}

#home-header > div > article .hero-lockup img {
	display: block;
	width: 100%;
	margin-bottom: 75px;
}

#home-header > div > article h1 {color: white}

#home-header > div > article h4 {
	background-image: none;
	color: white;
	-webkit-text-fill-color: white;
}

#page-header {
	box-sizing: border-box;
	padding: 50px;
	margin-bottom: -50vh;
}

#page-header > div {
	width: 100%;
	height: calc(var(--vh, 1vh)* 50);
	position: relative;
	background-size: cover;
	background-position: center center;
}

#home-link {
	display: block;
	width: 150px;
	position: absolute;
	z-index: 10;
	top: 75px;
	right: 75px;
}

#home-link img {
	display: block;
	width: 100%;
}

#licznik {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	margin-top: 25px;
}

#licznik h4 {
	color: white;
	width: 100%;
	margin-bottom: 50px;
    color: var(--kolor-tekst);
    -webkit-text-fill-color: white;
    background-image: none;	
}

#licznik > div {
	width: 125px;
	height: 125px;
	position: relative;
	margin: 0 15px;
}

/* Rejestracja --a jako kata pozwala go animowac. Bez tego przegladarka
   traktuje zmienna jak tekst i luk przeskakuje zamiast plynac. */
@property --a {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

#licznik .arc-top {  
	position: absolute;
	width: 100%;
	aspect-ratio: 1;
	padding: var(--kreska-rama);
	box-sizing: border-box;
	background: var(--marka-gradient);	
	mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--a),#0000 0);
	transition: --a var(--ruch-odpowiedz) linear;
}

/* Przy przejsciu przez pelny obrot luk musi wrocic natychmiast, inaczej
   przejechalby cala tarcze w druga strone. */
#licznik .arc-top.bez-przejscia {transition: none}

#licznik .arc-bottom {  
	position: absolute;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	top: 3px;
	left: 3px;
	border: var(--kreska) solid var(--kolor-wlos);
	opacity: 0.5;
}

#licznik > div p {
	font-family: "Nunito Sans", sans-serif;
	width: 100%;
	color: var(--kolor-tekst);
	position: relative;
	top: 28px;
	font-size: 16px;
	line-height: 16px;
}

#licznik > div p span:first-of-type {
	font-weight: 800;
	font-size: 36px;
	line-height: 46px;
}

/* Uklad dwuczesciowy tez podlega skali szerokosci (The Three Measures Rule).
   Sufit siedzi na OBU kolumnach po polowie, a nie na sekcji, bo sekcja niesie
   rame - kazdy z tych dwoch mechanizmow ma wtedy jedno zadanie i nie wchodza
   sobie w droge. justify-content dosuwa pare do srodka, gdy sufit zacznie
   dzialac; ponizej niego procent wygrywa i nie zmienia sie nic.

   Bez tego przy oknie 2560px zdjecie mialo 955x955, a akapit rozciagal sie
   na 955px - w sasiedztwie siatek zatrzymanych na 1700px sekcja wypadala
   z rytmu strony. */
#home-wydarzenie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#home-wydarzenie > figure,
#home-wydarzenie > article {
	max-width: calc(var(--tresc-siatka) / 2);
}

#home-wydarzenie > figure {
	width: 50%;
	box-sizing: border-box;
	padding-right: 75px;
	margin-bottom: 75px;
}

#home-wydarzenie > figure > figure {
	position: relative;
	width: 100%;
}

#home-wydarzenie > figure > figure img {
	display: block;
	width: 100%;
}

#home-wydarzenie > figure > figure .pattern {
	top: 75px;
	left: 75px;
	width: 100%;
	height: 100%;
}

#home-wydarzenie > article {
	width: 50%;
	box-sizing: border-box;
	padding-left: 75px;
}

#home-wspoldzieczosc {z-index: 2}

#home-wspoldzieczosc .logo {
	display: block;
	width: 150px;
	position: absolute;
	top: -200px;
	right: 0;
}

.film, .interlude {position: relative}
#home-wspoldzieczosc .interlude {margin-top: 75px}

.film > img, .interlude > img {
	display: block;
	width: 100%;
}

.film a {
    display: table;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--marka-gradient);
    position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.film a img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#home-wspoldzieczosc .pattern-wrap {
	position: absolute;
	bottom: -150px;
	right: 0;
	display: block;
	width: 450px;
	height: 450px;
}

#home-wspoldzieczosc .pattern-wrap .pattern:first-of-type {
	width: 150px;
	height: 150px;
	top: 0;
	left: 0;
}
#home-wspoldzieczosc .pattern-wrap .pattern:last-of-type {
	width: 300px;
	height: 300px;
	bottom: 0;
	right: 0;
}

#home-program {
	background-image: url(../img/home-program-bg.webp);
	background-size: cover;
	background-position: center;
}

/* Sekcja podlega skali szerokosci tak samo, jak O wydarzeniu: sufit siedzi
   na obu kolumnach po polowie, a nie na sekcji, bo tlo fotograficzne ma
   pozostac na pelnej szerokosci okna. Bez tego tresc rozciagala sie na cala
   rame (2060px przy oknie 2560), gdy trzy sasiadujace sekcje zatrzymuja sie
   na 1700. Patrz The Three Measures Rule w DESIGN.md. */
#home-program {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#home-program hgroup,
#home-program article {
	max-width: calc(var(--tresc-siatka) / 2);
}

#home-program hgroup {
	width: 50%;
	box-sizing: border-box;
	padding-right: 150px;
}

#home-program article {width: 50%}

/* TEMATY - PIEC POZYCJI ZAMIAST JEDNEGO ZDANIA
   ------------------------------------------------------------------------
   Nadtytul sekcji obiecuje "WYBRANE TEMATY FANB2026", a tematy byly
   pogrubionym zdaniem w srodku akapitu. Teraz kazdy stoi osobno.

   Znacznikiem jest MARKOWY KWADRAT - ten sam ksztalt, co w polu pikseli
   i w ramkach ozdobnych, tylko w najmniejszej skali. Nic tu nie jest
   zamkniete w polu: pierwsza wersja miala kazdy temat w pelnej ramce
   gradientowej i czytala sie jako piec przyciskow, ktorych nie da sie
   kliknac. Obrys w tej samej rodzinie co przycisk zawsze bedzie brany
   za kontrolke, niezaleznie od grubosci kreski.

   Kwadrat stoi PRZED kazda pozycja, a nie miedzy pozycjami. Wersja
   rozdzielajaca (::after na wszystkich procz ostatniej) zostawiala przy
   lamaniu wiersza wiszacy kwadrat na koncu linii - CSS nie wie, ktora
   pozycja konczy wiersz. Znacznik przed pozycja nie ma tego problemu
   w ogole, bo nie zalezy od sasiedztwa.

   Naturalne szerokosci, bez rownania do siatki: rownanie wymusiloby
   lamanie "Dane i odpowiedzialnosc" albo puste miejsce przy krotszych
   nazwach, a to sa pozycje listy, nie karty. */
#home-program .tematy {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 32px 0 45px;
	padding: 0;
	list-style: none;
}

#home-program .tematy li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	line-height: 1.4;
}

#home-program .tematy li::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--marka-gradient);
}

#aktualnosci-home-wrap .scrolling-elements:first-of-type {
	position: absolute;
	opacity: 0.05;
	display: block;
	width: 40%;
	left: 0;
	bottom: -300px;
}

#aktualnosci-home-wrap .scrolling-elements:last-of-type {
	position: absolute;
	display: block;
	width: 40%;
	right: 0;
	top: -100px;
}

#aktualnosci-home-wrap > hgroup {margin-bottom: 75px}

#aktualnosci-home-wrap > nav a {
	margin-left: auto;
	margin-right: auto;
}

/* SUFIT SIATKI BEZ PROGU
   ------------------------------------------------------------------------
   min() wybiera mniejsza z dwoch wartosci: przelew albo sufit. Dzieki temu
   nie ma progu responsywnego i nie ma skoku - siatka rosnie razem z kolumna
   dopoki miesci sie pod sufitem, a potem po prostu przestaje.

   left liczy sie z tej samej wartosci, wiec nadmiar zawsze rozklada sie
   rowno na obie strony: przy waskim oknie wychodzi ujemne (to jest wlasnie
   przelew z The Overflow Rule), przy szerokim dodatnie i staje sie rama.

   Wersja progowa robila tu skok: rzad prelegentow przechodzil przy 1921px
   z 1944 na 1700, a karta z 624 na 543 px. */
#aktualnosci-home {
	--wyjscie: 24px;
	position: relative;
	width: min(calc(100% + var(--wyjscie)), var(--tresc-siatka));
	left: calc((100% - min(calc(100% + var(--wyjscie)), var(--tresc-siatka))) / 2);
	display: flex;
	flex-wrap: wrap;
}

#aktualnosci-home > div {
	width: 33.33%;
	box-sizing: border-box;
	padding: 12px;
    position: relative;
}

#aktualnosci-home > div > div {
	width: 100%;
	padding-top: 100%;
    position: relative;
}

/* container-type czyni z kafla jednostke odniesienia dla cqw. Potrzebne
   podpisowi: patrz nizej, przy figcaption. */
#aktualnosci-home > div > div > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	container-type: inline-size;
}

#aktualnosci-home > div a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;	
	background-size: cover;
	background-position: center;
}

#aktualnosci-home > div a img {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 25px;
	right: 25px;
	opacity: 0;
	transition: opacity var(--ruch-stan);
}

#aktualnosci-home > div a figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 25px 35px 45px;
	color: white;
	background: var(--nakladka-podpis);
}

/* Podpis unosi sie przez transform na jego dzieciach, a nie przez padding
   samego pola. Efekt ten sam - tekst idzie w gore, przyciemnienie stoi -
   ale bez wymuszania przeliczenia ukladu przy kazdej klatce. */
#aktualnosci-home > div a figcaption > * {
	position: relative;
	transition: transform var(--ruch-stan) var(--ruch-krzywa);
}

/* Data jest w <strong>, czyli w pudelku LINIOWYM - a transform na pudelku
   liniowym nie dziala. Regula powyzej obejmowala ja od poczatku i przegladarka
   raportowala nawet translateY(-25px), tyle ze bez zadnego skutku: podpis
   unosil sie bez daty. Blok to naprawia i nie zmienia wygladu w spoczynku,
   bo data i tak zajmowala cala linie. */
#aktualnosci-home > div a figcaption > strong {
	display: block;
}

/* Tytul i zajawka dostaja sufit w liniach. Zajawki wpisow ida z automatu
   (the_excerpt) i mialy od 21 do 82 znakow: srodkowy kafel dostawal tytul
   lamiacy sie na cztery linie i zajawke na trzy, a sasiedni jedna i jedna.
   Bloki tekstu byly przez to poszarpane, a wysokosc podpisu nieprzewidywalna.
   Tniemy widokiem, nie trescia - pelny tekst zostaje w dokumencie. */
#aktualnosci-home > div a figcaption h4,
#aktualnosci-home > div a figcaption p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* PODPIS SKALUJE SIE Z KAFLEM
   ------------------------------------------------------------------------
   Kolejnosc kafli niesie hierarchie: najnowszy wpis dostaje szeroki baner,
   drobniejsze tresci - kwadraty. Dopoki jednak kazdy kafel mial tytul 22px,
   ta hierarchia byla NIEWYCZUWALNA: ten sam napis siedzial na banerze
   o szerokosci 1111px i na kwadracie 543px, przez co podpis banera wygladal
   na doklejony, a nie na naglowek glownej wiadomosci.

   cqw odnosi sie do szerokosci kafla, wiec typografia idzie za jego waga
   bez zadnych progow responsywnych. Dolne granice clamp odtwarzaja dotychczasowe
   wartosci (22 / 16 px), gorne siegaja kolejnego stopnia rampy z DESIGN.md
   (Headline 26px) - baner jest wiekszym obiektem, wiec bierze wyzszy stopien.
   Na kwadratach i na telefonie nie zmienia sie nic: 2,4cqw z 543px to 13px,
   czyli ponizej dolnej granicy. */
#aktualnosci-home > div a figcaption h4 {
	font-size: clamp(22px, 2.4cqw, 28px);
	line-height: 1.2;
}

#aktualnosci-home > div a figcaption > strong,
#aktualnosci-home > div a figcaption p {
	font-size: clamp(16px, 1.5cqw, 19px);
}

#aktualnosci-home > div a figcaption h4 {
	margin-bottom: 10px;
	-webkit-text-fill-color: white;
    background-image: none;
}

#aktualnosci-home > div a figcaption p:last-of-type {line-height: 18px}

#aktualnosci-home > div a:hover img {opacity: 1}
#aktualnosci-home > div a:hover figcaption > *,
#aktualnosci-home > div a:focus-visible figcaption > * {transform: translateY(-25px)}

/* Dotkniecie: karta przygasza sie na moment. Jedyne potwierdzenie dzialania,
   jakie ta karta moze dac na urzadzeniu bez hovera. */
#aktualnosci-home > div a:active {
	opacity: 0.85;
	transition: opacity var(--ruch-odpowiedz);
}


#aktualnosci-home > div:nth-of-type(1) {width: 100%}

#aktualnosci-home > div:nth-of-type(1) > div {
	padding-top: calc(33.33% - 24px);
	width: calc(66.66% - 6px);
}

#aktualnosci-home > div:nth-of-type(4) > div {
	height: Calc(100% + 17px);
	top: calc(-100% - 17px);
}

#aktualnosci-wrap .pattern {
    width: 300px;
    height: 300px;
    bottom: 350px;
    right: 0;
}

/* Sufit jak przy mozaice na stronie glownej. Pierwsza karta jest tu pelnej
   szerokosci, wiec bez ograniczenia rosla do 2084px - zdjecie stawalo sie
   panorama, a podpis przypisem w jej rogu. */
#aktualnosci, #aktualnosci-polecane {
	--wyjscie: 24px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: min(calc(100% + var(--wyjscie)), var(--tresc-siatka));
	left: calc((100% - min(calc(100% + var(--wyjscie)), var(--tresc-siatka))) / 2);
	z-index: 2;
}

#aktualnosci > section:first-of-type {width: 100%}

#aktualnosci > section:first-of-type > div {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

#aktualnosci > section:first-of-type figure {
	width: 50%;
	height: auto;
	min-height: 400px;
	margin-bottom: 0;
}

#aktualnosci > section:first-of-type figcaption {
	width: 50%;
	box-sizing: border-box;
	padding: 0 50px;
	display: flex;
	align-items: center;
}

#aktualnosci > section, #aktualnosci-polecane > section {
	box-sizing: border-box;
	padding: 12px;
	width: 50%;
	display: flex;
}

#aktualnosci > section > div, #aktualnosci-polecane > section > div {
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
}

#aktualnosci figure, #aktualnosci-polecane figure {
	width: 100%;
	height: 350px;
	margin-bottom: 24px;
}

#aktualnosci figure a, #aktualnosci-polecane figure a {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
}

#aktualnosci figure a img, #aktualnosci-polecane figure a img {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 25px;
    right: 25px;
    opacity: 0;
    transition: opacity var(--ruch-stan);
}
#aktualnosci figure a:hover img, #aktualnosci-polecane figure a:hover img {opacity: 1}

#aktualnosci > nav {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#aktualnosci > nav a {
	margin-left: 25px;
	margin-right: 25px;
}

/*
#aktualnosci-single {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	box-sizing: border-box;
	padding: 75px;
	position: relative;
	z-index: 2;
}

#aktualnosci-single > figure {
	width: 50%;
	background-size: cover;
	background-position: center;
	position: relative;
}

#aktualnosci-single > figure span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
	height: 250px;
    box-sizing: border-box;
    padding: 25px 35px 45px;
    color: white;
    background: var(--nakladka-podpis);
}

#aktualnosci-single > figure nav {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#aktualnosci-single > figure nav a {
	display: inline-block;
	width: 40px;
	margin-right: 15px;
	cursor: pointer;
}

#aktualnosci-single > figure nav a img {
	display: block;
	width: 100%;
}

#aktualnosci-single > article {
	width: 50%;
	box-sizing: border-box;
	padding-right: 75px;
}
*/

#single-aktualnosc {padding: 25px}

#single-aktualnosc > figure {
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
}

#single-aktualnosc > figure {
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
}

#single-aktualnosc .wp-block-embed__wrapper {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    margin: 0 auto;
}

#single-aktualnosc .wp-block-embed__wrapper iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#single-aktualnosc .share {
	text-align: right;
	margin-top: 10px;
	margin-bottom: 25px;
}

#single-aktualnosc .share a {
	display: inline-block;
	width: 30px;
	margin-left: 15px;
	cursor: pointer;
}

#single-aktualnosc .share a img {
	display: block;
	width: 100%;
}

#prelegenci-home {overflow: hidden}

#prelegenci-home > hgroup {margin-bottom: 75px}

#prelegenci-home > nav a {
	margin-left: auto;
	margin-right: auto;
}

/* Ten sam sufit i ta sama arytmetyka, co przy mozaice aktualnosci -
   patrz komentarz tam. Dzieki temu modul obu siatek wypada przy 2560px
   w tym samym rozmiarze: kwadrat 543px, karta prelegenta 543px. */
#prelegenci-home > section {
	--wyjscie: 524px;
	position: relative;
	width: min(calc(100% + var(--wyjscie)), var(--tresc-siatka));
	left: calc((100% - min(calc(100% + var(--wyjscie)), var(--tresc-siatka))) / 2);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: -24px;
}

/* SUFIT DLA KARTY. Bez niego twarz rosla bez konca razem z oknem: przy 2560px
   karta miala 861x861 i sekcja czytala sie jako sciana twarzy, a nie jako
   lista nazwisk. Sufit zaczyna dzialac dopiero tam, gdzie karta faktycznie
   robi sie za duza (okno ~1540px w gore) - ponizej nie zmienia niczego,
   wiec przelew o 524px zostaje tam, gdzie byl projektowany.

   justify-content przy rzedzie odpowiada za to, ze nadmiar szerokosci staje
   sie RAMA po obu stronach, zamiast wisiec po jednej. */
#prelegenci-home .prelegent-excerpt {width: 33.33%}

#prelegenci {
	padding-top: 0;
	overflow: hidden;
}

#prelegenci .pattern {
    width: 300px;
    height: 300px;
    bottom: 350px;
    right: 0;
}

/* Ten sam sufit i ta sama arytmetyka, co na stronie glownej - patrz komentarz
   przy #aktualnosci-home. Bez niego karta prelegenta miala tu przy 2560px
   695px, czyli o 150 wiecej niz ta sama karta na stronie glownej (543px).
   Ta sama osoba w dwoch miejscach serwisu nie moze miec dwoch rozmiarow. */
#prelegenci > section {
	--wyjscie: 24px;
	position: relative;
	width: min(calc(100% + var(--wyjscie)), var(--tresc-siatka));
	left: calc((100% - min(calc(100% + var(--wyjscie)), var(--tresc-siatka))) / 2);
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -24px;
}

#prelegenci .prelegent-excerpt {width: 33.33%}

.prelegent-excerpt {
	box-sizing: border-box;
	padding: 0 12px 24px;
}

/* container-type czyni z karty jednostke odniesienia dla cqw - dzieki temu
   ikony serwisow i wszystko, co ma isc za jej wielkoscia, moze sie do niej
   odnosic wprost, bez progow responsywnych. */
.prelegent-excerpt > div {
	width: 100%;
	position: relative;
	container-type: inline-size;
	background-image: url(../img/portret-bg.webp);
	background-size: cover;
	background-position: top center;
}
.prelegent-excerpt.gosc-specjalny > div {background-image: url(../img/portret-specjalny-bg.webp)}

/* Portrety sa kwadratowe (rozmiar "portret" to 750x750), ale znacznik nie
   niesie atrybutow width/height, wiec do momentu pobrania pliku obrazek ma
   zerowa wysokosc i cala siatka pod nim zjezdza w dol. Zmierzone przesuniecie
   ukladu na /prelegenci/ wynosilo 0,41 przy progu 0,1 uznawanym za dobry.

   aspect-ratio rezerwuje miejsce od pierwszego renderu i nie zalezy od tego,
   co WordPress akurat wypisze w znaczniku. */
.prelegent-excerpt > div > img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.prelegent-excerpt > div hgroup {
	position: absolute;
	width: 100%;
	bottom: 0;
	box-sizing: border-box;
	padding: 0 25px 50px;
}
/* Plytka gradientowa rosnie RAZEM Z KARTA, zamiast stac na 175px. Przy karcie
   470px daje to 174px, czyli dokladnie tyle, co dotad - ale przestaje sie
   kurczyc wzglednie, gdy karta rosnie. Wczesniej na szerokim ekranie karta
   miala 861px, a plytka nadal 175, czyli 20% zamiast 37%: nazwisko wychodzilo
   daleko poza nia na twarz i trzymalo sie wylacznie na text-shadow.
   Kwadrat zostaje kwadratem - to motyw systemu, nie ozdobnik. */
.prelegent-excerpt > div hgroup::before {
	content: "";
	width: 37%;
	max-width: 220px;
	aspect-ratio: 1;
	background: var(--marka-gradient);
	position: absolute;
	left: 0;
	bottom: 0;
}

.prelegent-excerpt h3, .prelegent-excerpt p, .prelegent-excerpt em {position: relative}

.prelegent-excerpt h3 {
	text-shadow: 0px 0px 10px var(--nakladka-welon);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.prelegent-excerpt em {line-height: 18px}

.prelegent-excerpt > div > nav {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 2;
}

.prelegent-excerpt > div > nav div {
	position: absolute;
	left: 25px;
	top: 20px;
}

/* Ikony serwisow skaluja sie z karta, a nie stoja na 25px niezaleznie od niej.
   Jednostka cqw odnosi sie do szerokosci karty (patrz container-type przy
   .prelegent-excerpt > div), wiec 5,3% odtwarza dotychczasowe 25px przy karcie
   470px. clamp trzyma je w rozsadnych granicach: nigdy mniej niz dotad
   i nigdy wiecej niz 34px, zeby nie zaczely konkurowac z nazwiskiem. */
.prelegent-excerpt > div > nav div a {
	display: block;
	width: clamp(25px, 5.3cqw, 34px);
	height: clamp(25px, 5.3cqw, 34px);
	margin-bottom: 15px;
}

.prelegent-excerpt > div > nav div a img {
	display: block;
	width: 100%;
}


.prelegent-excerpt > div > figcaption {
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url(../img/portret-bg.webp);
	background-size: cover;
	background-position: top center;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: opacity var(--ruch-wypelnienie);
	opacity: 0;
}
.prelegent-excerpt.gosc-specjalny > div > figcaption {background-image: url(../img/portret-specjalny-bg.webp)}


.prelegent-excerpt > div > figcaption > div {
	width: 100%;
	height: 100%;
	background-color: var(--nakladka-welon);
	color: white;
	box-sizing: border-box;
	padding: 15px 15px 50px;
	text-align: center;
	display: flex;
	align-items: flex-end;
}

.prelegent-excerpt > div > figcaption > div a {
	width: 150px;
	max-width: 100%;
	margin-top: 25px;
}

.prelegent-excerpt > div:hover figcaption {opacity: 1}

#prelegenci-single {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	box-sizing: border-box;
	align-items: flex-start;
	padding: 50px;
	position: relative;
	z-index: 2;
}

#prelegenci-single .link-box p {color: black}

#prelegenci-single > figure {
	width: 50%;
	position: relative;
	background-image: url(../img/portret-bg.webp);
	background-size: cover;
	background-position: top center;
}

#prelegenci-single > figure > img {
	display: block;
	width: 100%;
}

#prelegenci-single > figure span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
	height: 150px;
    box-sizing: border-box;
    padding: 0 35px 45px;
    background: var(--nakladka-podpis);
}

#prelegenci-single > figure nav {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#prelegenci-single > figure nav a {
	display: inline-block;
	width: 30px;
	margin-right: 10px;
}

#prelegenci-single > figure nav a img {
	display: block;
	width: 100%;
}

#prelegenci-single > article {
	width: 50%;
	box-sizing: border-box;
	padding-right: 50px;
}

#prelegenci-single > article > div:nth-of-type(3) {
	margin-top: 50px;
	padding-top: 25px;
	border-top: 1px solid var(--kolor-wlos);
}

#prelegenci-single > article > div:nth-of-type(4) {margin-top: 50px}

#prelegenci-single > article > div:nth-of-type(4) img {
	display: block;
	max-width: 100%;
}

#lokalizacja {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding-top: 200px;
}

#lokalizacja > figure {
	position: relative;
	width: calc(50% - 250px);
}

#lokalizacja > figure > div {
	position: absolute;
	width: calc(100% + 250px);
	height: calc(100% + 150px);
	top: -150px;
	background-size: cover;
	background-position: bottom left;
}

#lokalizacja > article {
	position: relative;
	width: calc(50% + 250px);
	box-sizing: border-box;
	padding-right: 450px;
}

#lokalizacja > article .pattern {
	display: block;
	width: 300px;
	height: 300px;
	right: -150px;
	top: -250px;
}

#lokalizacja > article > figure {
	position: absolute;
	top: 0;
	right: 0;
	width: 450px;
	height: 100%;
	background-size: cover;
	background-position: center;	
}

#lokalizacja > article > div {
	box-sizing: border-box;
	width: 100%;
	padding: 75px 75px;
	position: relative;
	z-index: 3;
}

#lokalizacja > article .link-box {
	opacity: 1;
	margin-top: 25px;
}

#wspoldzielczosc, #o_wydarzeniu, #prelegenci-wstep, #partnerzy {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	box-sizing: border-box;
	padding: 25px;
	position: relative;
	z-index: 2;
}
#wspoldzielczosc {margin-bottom: -100px}

#wspoldzielczosc > figure, #o_wydarzeniu > figure, #prelegenci-wstep > figure, #partnerzy > figure {
	width: 50%;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#wspoldzielczosc > figure img {
	display: block;
	width: 200px;
}

#wspoldzielczosc > article, #o_wydarzeniu > article, #prelegenci-wstep > article, #partnerzy > article {
	width: 50%;
	box-sizing: border-box;
	padding: 25px 50px 25px 25px;
	position: relative;
}

#wspoldzielczosc > article .link-box, #wspoldzielczosc-opis .link-box {display: inline-block}

/* Dwa przyciski obok siebie mialy zerowy odstep poziomy - dzielily je 4px
   pochodzace ze znaku nowej linii w znaczniku, wiec gradientowe obwodki
   stykaly sie i czytaly jak jeden element. Odstep bierze wartosc z rytmu
   systemu (25px, "wewnatrz komponentu" wg DESIGN.md). */
.link-box + .link-box {
	margin-left: 25px;
}

#wspoldzielczosc-intro > figure {
	display: block;
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
}

#partnerzy ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    list-style: none;
}

#partnerzy li {
    width: 33.33%;
    display: block;
}

#partnerzy li a, #partnerzy li img {
    width: 100%;
    display: block;
}

#partnerzy article .has-system-background-color {margin-bottom: -75px}

#partnerzy article .has-grey-background-color {
	position: relative;
	width: calc(100% + 100px);
	top: 125px;
	left: 50px;
	box-sizing: border-box;
	padding: 50px;
	
}

#o_wydarzeniu-liczby {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: calc(100% + 100px);
	left: -50px;
}

#o_wydarzeniu-liczby > div {
	width: 33.33%;
	box-sizing: border-box;
	padding: 0 50px;
}

#o_wydarzeniu-interlude {
	display: flex;
	align-items: center;
    justify-content: center;
	position: relative;
	width: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
}

#o_wydarzeniu-interlude > img {
    display: block;
    width: 200px;
}

/* UKLAD DWUKOLUMNOWY MA WLASNY SUFIT, WEZSZY NIZ SIATKI
   ------------------------------------------------------------------------
   Dwie kolumny byly kalibrowane tak, ze miara czytania WYPELNIA kolumne:
   przy 1440px kolumna ma 520px, a wiersz 505-519, wiec pustki praktycznie
   nie ma. Pod sufitem --tresc-siatka (1700px) kolumna rosnie do 800px,
   a wiersz zostaje na 556 - w kazdej kolumnie zostawalo 244px niewykorzystane
   i tekst wygladal, jakby plywal.

   Sufit dla takiego bloku to DWIE MIARY CZYTANIA PLUS RYNNA, czyli
   --tresc-czytanie + 100px. Przy 1440px nie dziala wcale (blok ma tam 1140),
   przy 2560px daje kolumny po 550px - dokladnie tyle, ile mial przy
   szerokosci, dla ktorej uklad projektowano.

   Wpis pojedynczy dostaje ten sam uklad. Nie mial go wcale: tekst byl
   jednokolumnowy i wysrodkowany w karcie, podczas gdy data, tytul i zdjecie
   stoja przy lewej krawedzi. Stad wrazenie, ze nie pasuje do reszty serwisu -
   bo faktycznie nie pasowal, jako jedyna dluga tresc bez kolumn. */
#o_wydarzeniu-opis article,
#wspoldzielczosc-opis article,
#historia-wrap > article > article,
#single-aktualnosc > article {
	column-count: 2;
	column-gap: 100px;
	max-width: calc(var(--tresc-czytanie) + 100px);
}

/* Przycisk powrotu jest w tym samym <article>, co tresc wpisu, wiec wplynal
   do drugiej kolumny i wyladowal pod osadzonym filmem. column-span sprowadza
   go z powrotem pod caly tekst, gdzie jego miejsce. */
#single-aktualnosc > article > .link-box {
	column-span: all;
	margin-top: 50px;
}

#program-wrap {overflow: hidden}

#program-wrap .pattern {
    width: 300px;
    height: 300px;
    bottom: 350px;
    right: 0;
}

#program {position: relative}

#program-wstep {
	width: 100%;
	box-sizing: border-box;
	padding: 50px;
}

#program-wstep > div {
  column-count: 2;
  column-gap: 50px;
}

#program-nav {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 25px;
}

#program-nav > div {
	position: relative;
	box-sizing: border-box;
	padding: 50px;
	width: 50%;
} 

#program-nav h3 {margin-bottom: 0}

#program-nav > div .gradient {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
}
#program-nav > div.active .gradient {display: block}

#program-all > section {
	box-sizing: border-box;
	padding: 25px;
	width: 100%;
}

#program-all > section:last-of-type {display: none}

#program-all table {
	margin: 12px 0;
	width: 100%;
}

#program-all figure:nth-of-type(2n) table {background: #F6F6F6}

#program-all table td {
	border: none;
	box-sizing: border-box;
	padding: 12px 25px;
}

#program-all table td:nth-of-type(2n+1) {width: 33.33%}
#program-all table td:nth-of-type(2n) {width: 66.66%}

#historia-wrap {z-index: 2}

#historia-wrap > article {
	box-sizing: border-box;
	width: 100%;
	padding: 50px;
}

#historia-wrap > article >article {
	column-count: 2;
	column-gap: 100px;
}

#historia-wrap > section {
	width: 100%;
	box-sizing: border-box;
	padding: 0 25px 25px;
}

#historia {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: top center;
	overflow: hidden;
	padding-bottom: 50px;
	color: white;
}

/* min-height, nie height: blok trzyma naglowek i akapit wstrzykiwany z JS,
   wiec przy powiekszonym tekscie musi urosnac zamiast przycinac tresc. */
#historia > hgroup {
	min-height: 225px;
	margin-bottom: 50px;
	margin-top: 50px;
	padding-left: 50px;
}

#historia h2 {
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--marka-gradient);
}

#historia a {color: white}

#historia > nav span {display: none}
#historia > nav span:nth-of-type(1) {display: block}

#historia-cont {
	position: relative;
	width: 228.5%;
	left: -128.6%;
	color: white;
	display: flex;
}

#historia-cont > div {
	position: relative;
	width: 6.25%;
	color: white;
	text-align: center;
	border-bottom: 1px solid white;
	padding-bottom: 15px;
	transition: color var(--ruch-stan);
	cursor: pointer;
}

#historia-cont > div > span:last-of-type {display: none}

#historia-cont > div:before {
	content: "";
	display: table;
	position: absolute;
	width: 7px;
	height: 7px;
	background: white;
	border-radius: 50%;
	margin: auto;
	bottom: -4px;
	left: 0;
	right: 0;
	z-index: 2
}

#historia-cont > div.active {color: var(--kolor-akcent)}
#historia-cont > div.active:before {background: var(--kolor-akcent)}

#historia-cont > div:hover {color: var(--kolor-akcent)}

#historia-path {
	display: table;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 96.875%;
	height: 1px;
	background: var(--marka-gradient-os);
}

#regulamin > article {
	width: 100%;
	box-sizing: border-box;
	padding: 50px;
	position: relative;
	text-align: left;
}

#regulamin > article h4 {margin-left: 0}

#regulamin ol {
	list-style: none;
	margin-bottom: -5px;
	counter-reset: item;
}

#regulamin ol > li {
  display: block;
  margin-bottom: 5px;
  padding-left: 30px;
  position: relative;
}
#regulamin ol > li::before {
  display: table;
  content: counter(item) ". ";
  counter-increment: item;
  width: 20px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: right;
}

#regulamin ol > li ul {padding-left: 30px}

#regulamin .pattern {
    width: 300px;
    height: 300px;
    bottom: 350px;
    right: 0;
}

#kontakt {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

#kontakt > figure {
	width: 50%;
	background-size: cover;
	background-position: center;
}

#kontakt > article {
	width: 50%;
	position: relative;
}

#kontakt > article > div {
	width: 100%;
	box-sizing: border-box;
	padding: 50px;
}


#kontakt > article > div .link-box {margin-top: 20px}

#error404 {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 50px;
	overflow: hidden;	
}

#error404 > div {
    width: 100%;
    min-height: calc(var(--vh, 1vh)* 100 - 100px);
    position: relative;
    background-image: url(../img/home-header.webp);
    background-size: cover;
    background-position: center;
    display: flex;
	align-items: center;
	justify-content: flex-start;
	color: white;
}

#error404 > div > img {
	display: block;
	width: 150px;
	position: absolute;
	top: 50px;
	left: 50px;
}

#error404 > div article {
	position: relative;
	max-width: 50%;
	box-sizing: border-box;
	padding-left: 200px;
	padding-top: 100px;
}

#error404 > div article img {
	display: block;
	width: 500px;
	max-width: 100%;
	margin-bottom: 50px;
}

#error404 > div a {color: white}

#rejestracja {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 50px;
	box-sizing: border-box;
}

#rejestracja > img {
	position: absolute;
	top: -50px;
	right: -50px;
	display: block;
	width: 350px;
}

#rejestracja > hgroup {
	width: 100%;
	margin-bottom: 75px;
	position: relative;
}

#rejestracja-article {
	width: 50%;
	box-sizing: border-box;
	padding-left: 50px;
	position: relative;
}

#rejestracja-form-wrap {
	width: 50%;
	box-sizing: border-box;
	padding-right: 50px;
	position: relative;
}

#rejestracja-end {
	display: none;
	width: 100%;
}

#rejestracja a.link-box {
	color: black !important;
	margin-top: 20px;
} 
#rejestracja a {transition: color var(--ruch-stan)}
#rejestracja a:hover {color: var(--kolor-akcent)}

#rejestracja-form input[type=text] {
	background-color: rgba(255,255,255,0);
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 5px;
	margin-bottom: 15px;
	border: none;
	font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    color: var(--kolor-granat);
    font-size: 16px;
    line-height: 24px;
	-webkit-appearance: none;
    border-radius: 0;
	border-bottom: 1px var(--kolor-wlos) solid;    
}

#rejestracja-form input:focus {
	outline: none;
}

/* Wskaznik fokusu: granat, nie cyjan. var(--kolor-akcent) ma na bieli kontrast ~1.5:1,
   a jego luminancja jest niemal identyczna z var(--kolor-wlos) - roznica byla widoczna
   wylacznie dla osob rozrozniajacych ten odcien. Granat daje 18:1,
   a potrojona grubosc krawedzi niesie sygnal takze bez rozpoznania koloru. */
#rejestracja-form input[type=text]:focus-visible {
	border-bottom: 3px solid var(--kolor-granat);
	padding-bottom: 3px;
}

.radio-container input:focus-visible ~ .checkmark,
.checkbox-container input:focus-visible ~ .checkmark {
	outline: var(--kreska) solid var(--kolor-granat);
	outline-offset: 3px;
}

/* Stan bledu. Dwie zmiany wobec pierwotnej wersji:
   1. kolor #ff5600 mial na bieli kontrast 3,19:1, ponizej wymaganych 4,5:1
      dla tekstu - stad ciemniejszy var(--kolor-blad) (4,84:1);
   2. sam kolor nie moze byc jedynym nosnikiem informacji, wiec dochodzi
      pogrubiona krawedz dolna. Blad jest teraz widoczny takze wtedy,
      gdy odcien nie jest rozpoznawany. */
#rejestracja-form input[type=text].empty {
	color: var(--kolor-blad);
	border-bottom: 3px solid var(--kolor-blad);
	padding-bottom: 3px;
}

/* Autouzupelnianie. Poprzednia wersja miala przecinek przed nawiasem klamrowym,
   co uniewazniało cala regule - a jej tresc i tak zakladala ciemny formularz
   (bialy tekst na granacie #0C0D2B), podczas gdy #rejestracja-form jest bialy.
   Inset box-shadow to jedyny sposob nadpisania tla autofill w Chrome,
   wiec jest tu wyjatkiem od zakazu cieni: sluzy neutralizacji, nie glebi. */
#rejestracja-form input[type=text]:-webkit-autofill,
#rejestracja-form input[type=text]:-webkit-autofill:hover,
#rejestracja-form input[type=text]:-webkit-autofill:focus {
	border: none;
	border-bottom: 1px solid var(--kolor-wlos);
	-webkit-text-fill-color: var(--kolor-granat);
	-webkit-box-shadow: 0 0 0px 1000px var(--kolor-papier) inset;
}

/* The container */
.radio-container {
  display: inline-block;
  margin-right: 20px;
  margin-top: 10px;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio-container .checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 50%;
  border: var(--kreska) solid var(--kolor-akcent);
}

/* On mouse-over, add a grey background color */
/*
.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}
*/

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  background-color: var(--kolor-akcent);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* The container */
.checkbox-container {
  display: block;
  margin-top: 10px;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: white;
  border: var(--kreska) solid var(--kolor-akcent);
}

/* On mouse-over, add a grey background color */
/*
.checkbox-container:hover input ~ .checkmark {
  background-color: blue;
}
*/

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--kolor-akcent);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
/*
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
*/


#rejestracja-form .osoba {
	margin-bottom: 25px;
	padding-bottom: 30px;
	border-bottom: 1px var(--kolor-wlos) solid;
}

#rejestracja-form .osoba .link-box {margin-top: 20px}

#rejestracja-form .osoba .link-box.more {display: none}
#rejestracja-form .osoba:last-of-type .link-box.more {display: table}

#rejestracja-form .osoba .link-box.less {display: none}

#rejestracja-form .radio-warsztaty p.empty {color: var(--kolor-blad)}

/* Bez prefiksu #rejestracja-form: zgody leza w sasiednim <article>, nie
   w formularzu, wiec poprzedni selektor nigdy nie pasowal i pominieta
   zgoda nie dawala ZADNEGO sygnalu - ani widzacym, ani czytnikom.
   Znacznik po lewej stronie etykiety niesie informacje niezaleznie
   od rozpoznawania koloru. */
.checkbox-container.empty,
#rejestracja-form .checkbox-container.empty {
	color: var(--kolor-blad);
	position: relative;
}

.checkbox-container.empty:before {
	content: "";
	position: absolute;
	left: -12px;
	top: 4px;
	bottom: 2px;
	width: 3px;
	background: var(--kolor-blad);
}

#rejestracja-form .radio-pokoj > div {display: none}

/* Zgody RODO to 4451 znakow, ktore uzytkownik ma swiadomie przeczytac przed
   zaznaczeniem - a nie drobny druk do przewiniecia. 13px z interlinia 16px
   (wspolczynnik 1,23) czytalo sie jak regulamin pisany po to, zeby go nie
   czytac. Podnosimy do 15px z interlinia 1,5; blok rosnie o kilkadziesiat
   pikseli, co przy formularzu nie ma znaczenia.

   Wyjustowanie zostaje wylaczone: przy waskiej kolumnie tworzy rzeki bieli
   miedzy slowami, bo przegladarka nie dzieli tu wyrazow. */
#checkbox-wrap {
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

#form-msg {opacity: 0}

#form-send {margin-top: 10px !important}




/*GRID: 1440px */
@media all and (max-width: 1440px) {


#home-header {padding: 35px}

#home-header > div {min-height: calc(var(--vh, 1vh)* 100 - 70px)}

#home-header > div > article {padding-left: 150px}

#page-header {
	padding: 35px;
	margin-bottom: calc(-50vh + 50px);
}

#home-link {
	width: 125px;
	top: 60px;
	right: 60px;
}

#home-wspoldzieczosc .logo {top: -150px}

#home-wydarzenie > figure {
    padding-right: 50px;
    margin-bottom: 50px;
}

#home-wydarzenie > figure > figure .pattern {
    top: 50px;
    left: 50px;
}

#home-wydarzenie > article {padding-left: 50px}

#home-wspoldzieczosc .pattern-wrap {
    bottom: -50px;
    width: 300px;
    height: 300px;
}

#home-wspoldzieczosc .pattern-wrap .pattern:first-of-type {
    width: 100px;
    height: 100px;
}
#home-wspoldzieczosc .pattern-wrap .pattern:last-of-type {
    width: 200px;
    height: 200px;
}

#home-program hgroup {padding-right: 75px}

#aktualnosci-home-wrap > hgroup {margin-bottom: 50px}

#aktualnosci-wrap .pattern {
    width: 200px;
    height: 200px;
    bottom: 250px;
}

#single-aktualnosc > figure {height: 500px}

#prelegenci-home > section {
    width: calc(100% + 324px);
    left: -162px;
}

#prelegenci .pattern {
    width: 200px;
    height: 200px;
    bottom: 250px;
}

.prelegent-excerpt > div hgroup {padding: 0 25px 25px}

.prelegent-excerpt > div hgroup::before {
    width: 150px;
    height: 150px;
}

#lokalizacja {padding-top: 150px}

#lokalizacja > figure {width: 50%}

#lokalizacja > article {
    width: 50%;
    padding-right: 0;
}

#lokalizacja > article .pattern {
    width: 200px;
    height: 200px;
    right: 100px;
    top: -150px;
}

#lokalizacja > article > div {padding: 75px 150px 75px 75px}

#lokalizacja > article > figure {display: none}

#wspoldzielczosc {margin-bottom: -50px}

#wspoldzielczosc-intro > figure {height: 500px}

#o_wydarzeniu-interlude {height: 500px}

#program-wrap .pattern {
    width: 200px;
    height: 200px;
    bottom: 250px;
}

#historia-wrap > article >article {column-gap: 50px}

#partnerzy {margin-bottom: 25px}

#regulamin .pattern {
    width: 200px;
    height: 200px;
    bottom: 250px;
}

#error404 {padding: 35px}

#error404 > div {min-height: calc(var(--vh, 1vh) * 100 - 70px)}

#error404 > div > img {
	top: 25px;
	left: 25px;
}

#error404 > div article {
	padding-left: 150px;
	padding-top: 100px;
}

#error404 > div article img {width: 400px}

#rejestracja-form-wrap {padding-right: 25px}

#rejestracja-article {padding-left: 25px}

}



/*GRID: 1280px */
@media all and (max-width: 1280px) {

#prelegenci-home > section {
    width: calc(100% + 224px);
    left: -112px;
}

#prelegenci-home > hgroup {margin-bottom: 50px}

#prelegenci-home > section {
	width: calc(100% + 110px);
	left: -55px;
	margin-bottom: 0;
}

#prelegenci > section {
    width: calc(100% + 10px);
    left: -5px;
    margin-bottom: -10px;
}

.prelegent-excerpt {padding: 0 5px 10px}

.prelegent-excerpt > div > figcaption > div {padding: 15px 15px 25px}

#o_wydarzeniu-opis article, #wspoldzielczosc-opis article {column-gap: 50px}

#lokalizacja {padding-top: 100px}

#lokalizacja > figure {width: calc(50% - 100px)}

#lokalizacja > figure > div {
    width: calc(100% + 200px);
    height: calc(100% + 100px);
    top: -100px;
}

#lokalizacja > article {width: calc(50% + 100px)}

#lokalizacja > article > div {padding: 75px 100px 75px 75px}

#o_wydarzeniu-liczby {
    width: calc(100% + 50px);
    left: -25px;
}

#o_wydarzeniu-liczby > div {padding: 0 25px}

#historia > hgroup {
	min-height: 200px;
	margin-bottom: 50px;
	margin-top: 50px;
	padding-left: 50px;
}
	
}	



/*GRID: 1024px */
@media all and (max-width: 1024px) {
	
	
	
#aktualnosci-home > div a:hover img {opacity: 0}

#historia-cont > div:hover {color: white}
	
#home-header {padding: 25px}

#home-header > div {min-height: calc(var(--vh, 1vh)* 100 - 50px)}

/* Kolumna hero w pasmie 769-1024px byla wezsza niz na telefonie: przy 769px
   45% szerokosci minus 100px paddingu zostawialo 224px, podczas gdy przy 320px
   jest 240px. Nielamliwe "Wspoldzielczosc." (307px) wychodzilo poza kolumne,
   a slogan lamal sie na cztery linie zamiast trzech. 55% minus 50px daje
   318px przy 769px i 458px przy 1024px, czyli plynne przejscie do desktopu. */
#home-header > div > article {
	width: 62%;
	padding-left: 100px;
}

#page-header {
	padding: 25px;
	margin-bottom: -150px;
}

#page-header > div {height: 400px}

#home-wspoldzieczosc .logo {display: none}

#home-wspoldzieczosc .interlude {margin-top: 50px}

#home-wspoldzieczosc .pattern-wrap {bottom: 0}

#home-program hgroup {padding-right: 50px}

#aktualnosci-home-wrap > hgroup {margin-bottom: 25px}

#aktualnosci-home-wrap > hgroup {padding-bottom: 0}

#aktualnosci-home {
	width: calc(100% + 10px);
	left: -5px;
}

#aktualnosci-home > div {padding: 5px}

#aktualnosci-home > div:nth-of-type(1) > div {
    padding-top: calc(33.33% - 10px);
    width: calc(66.66% - 3px);
}

#aktualnosci-home > div:nth-of-type(4) > div {
    height: calc(100% + 8px);
    top: calc(-100% - 8px);
}

#aktualnosci-home > div a figcaption {padding: 15px 25px 25px !important}

#prelegenci-home .prelegent-excerpt, #prelegenci .prelegent-excerpt {width: 50%}

/* Dwie kolumny, wiec pokazujemy dwie osoby - trzecia i czwarta znikaja.
   Liczymy pozycje wprost, a nie przez :last-of-type: odkad zapytanie pobiera
   cztery wpisy zamiast trzech, "ostatni" wskazuje inna karte niz wtedy,
   gdy te regule pisano, i zamiast rzedu 2+0 powstawal rzad 2+1. */
#prelegenci-home .prelegent-excerpt:nth-of-type(n+3) {display: none}

.prelegent-excerpt > div > figcaption > div {padding: 15px 15px 50px}

#prelegenci-single {
       width: calc(100% - 100px);
       margin: 0 auto;
       padding: 25px;
}

#prelegenci-single > figure {
    width: 100%;
	max-width: 500px;
	position: relative;
	margin: 0 auto 50px;
}

#prelegenci-single > article {
	width: 100%;
	padding-right: 0;
}

#lokalizacja {padding-top: 125px}

#lokalizacja > article {
	width: calc(50% + 100px);
	padding-right: 0;
}

#lokalizacja > article .pattern {right: 50px}

#lokalizacja > article > div {padding: 50px 50px}

#wspoldzielczosc, #o_wydarzeniu, #prelegenci-wstep, #partnerzy {
	display: block;
	margin-bottom: 0;
}

#wspoldzielczosc > figure, #o_wydarzeniu > figure, #prelegenci-wstep > figure, #partnerzy > figure {
	width: 100%;
	height: 350px;
	margin-bottom: 25px;
}

#wspoldzielczosc > article, #o_wydarzeniu > article, #prelegenci-wstep > article, #partnerzy > article {
	width: 100%;
	padding: 0;
}

#partnerzy li {width: 25%}

#partnerzy article .has-system-background-color {margin-bottom: 25px}

#partnerzy article .has-grey-background-color {
    width: 100%;
    top:0;
    left: 0;
    box-shadow: none;
    padding: 25px;
}

#program {
	width: calc(100% - 100px);
	margin: 0 auto;
}

#program-wstep {padding: 25px}

#program-wstep > div {
    column-count: 1;
    column-gap: 0;
}

#program-nav > div {padding: 25px}

#historia-wrap {
	width: calc(100% - 100px);
	position: relative;
	margin: 0 auto;
}

#historia-wrap > article {padding: 25px}

#historia-wrap > article >article {
    column-count: 1;
    column-gap: 0;
}

#historia > hgroup {
	min-height: 200px;
	margin-bottom: 50px;
	margin-top: 25px;
	padding-left: 25px;
}

#historia-cont {
	width: 320%;
	left: -220%;
}

#historia > nav span:nth-of-type(1) {display: none}
#historia > nav span:nth-of-type(2) {display: block}

#regulamin > article {padding: 25px}

#kontakt {
	width: calc(100% - 100px);
	margin: 0 auto;
}

#kontakt > article > div {padding: 50px 25px}

#error404 {padding: 25px}

#error404 > div {min-height: calc(var(--vh, 1vh) * 100 - 50px)}

#error404 > div > img {
	top: 25px;
	left: 25px;
	width: 125px;
}

#error404 > div article {
	padding-left: 100px;
	padding-top: 100px;
}

#error404 > div article img {width: 400px}

#rejestracja {
	width: calc(100% - 100px);
	margin: 0 auto;
	padding: 50px 25px;
}

#rejestracja > hgroup {margin-bottom: 50px}

#rejestracja > img {
    top: -25px;
    right: -25px;
    width: 275px;
}

#rejestracja-form-wrap {
	width: 100%;
	padding-right: 0;
	margin-bottom: 25px;
}

#rejestracja-article {
	width: 100%;
	padding-left: 0;
}

}



/*GRID: 768px */
@media all and (max-width: 768px) {
	
#home-header > div {background-image: url(../img/home-header-rwd.webp)}

/* Ponizej 768px przejmuje raster mobilny, ktory ma wlasne, inne kadrowanie
   drzewa. Wektor musi tu zniknac, inaczej drzewa byly by dwa. Wersja
   mobilna zostaje na razie bez zmian - do przerobienia osobno. */
.warstwa-hero {display: none}
	
#home-header > div > article {
	padding: 100px 25px 50px;
	width: 100%;
	text-align: center;
}

/* Selektory jawne zamiast :first-of-type / :last-of-type - po przejsciu
   na <picture> pozycja obrazka w drzewie przestala byc jednoznaczna. */
#home-header > div > article .hero-lockup img {
	display: block;
	width: 100%;
	max-width: 150px;
	margin: 0 auto 25px;
}

/* max-width zamiast pelnej szerokosci: przy 768px grafika mierzyla 668px,
   czyli 553px wysokosci, i spychala slogan oraz date pod krawedz ekranu.
   Regula Pelnego Otwarcia z DESIGN.md mowi, ze pierwszy ekran ma sie miescic
   w oknie - a to jedyny prog, na ktorym sie nie miescil. */
#home-header > div > article .rwd-s {
	display: block;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 999 / 828;
	margin: 0 auto 50px;
	background-image: url(../img/home-header-rwd-2.webp);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#home-header > div > article h4 {
	margin-left: auto;
	margin-right: auto;
}	

#home-link {
	width: 100px;
	top: 125px;
	right: 50px;
}
	
#licznik > div {
    width: 100px;
    height: 100px;
    margin: 0 10px;
}	

#licznik > div p {top: 18px}

#home-wydarzenie > figure {
	width: 100%;
	max-width: 500px;
	margin: 0 auto 100px;
}

#home-wydarzenie > article {
	width: 100%;
	padding: 0;
}

#home-wspoldzieczosc .pattern-wrap {
	width: 225px;
	height: 225px;
}

#home-wspoldzieczosc .pattern-wrap .pattern:first-of-type {
    width: 75px;
    height: 75px;
}
#home-wspoldzieczosc .pattern-wrap .pattern:last-of-type {
    width: 150px;
    height: 150px;
}

#home-program hgroup {
	width: 100%;
	padding-right: 0;
}

#home-program article {width: 100%}

#aktualnosci-home > div {width: 50%}

#aktualnosci-home > div:nth-of-type(1) > div {
	padding-top: 50%;
	width: 100%;
}

#aktualnosci-home > div:nth-of-type(3) > div {
	height: calc(100% + 10px);
	top: 0;
}

#aktualnosci-home > div:nth-of-type(4) > div {
	height: auto;
	top: 0;
}

#aktualnosci-wrap .pattern {
    width: 150px;
    height: 150px;
    bottom: 200px;
}

#aktualnosci, #aktualnosci-polecane {
    width: 100%;
    left: 0;
}

#aktualnosci > section, #aktualnosci-polecane > section {
	width: 100%;
	padding: 0;
	margin-bottom: 25px;
}

#aktualnosci > section figure, #aktualnosci-polecane > section figure {
    width: 100% !important;
    height: 350px !important;
	min-height: auto !important;
    margin-bottom: 25px !important;
}

#aktualnosci > section:first-of-type figcaption, #aktualnosci-polecane > section:first-of-type figcaption {
    width: 100% !important;
    padding: 0 !important;
	display: block;
}

/*
#aktualnosci-single {width: 100%}
*/

.prelegent-excerpt > div > figcaption > div {padding: 15px 15px 15px}

#lokalizacja {padding-top: 0}

#lokalizacja > figure {
	width: calc(100% - 50px);
	height: 400px;
	margin-bottom: -50px;
}

#lokalizacja > figure > div {
	width: 100%;
	height: 100%;
	top: 0;
}

#lokalizacja > article {
	width: 100%;
	padding-left: 50px;
}

#lokalizacja > article .pattern {
	width: 150px;
	height: 150px;
	top: -100px;
	right: 100px;
}

#wspoldzielczosc > figure img {width: 150px}

#o_wydarzeniu-liczby {
	width: 100%;
	left: 0;
	margin-bottom: -25px;
}

#o_wydarzeniu-liczby > div {
	padding: 0;
	width: 100%;
	margin-bottom: 25px;
}

#o_wydarzeniu-interlude {height: 380px}
#o_wydarzeniu-interlude > img {width: 150px}

/* Ponizej tego progu dwie kolumny daja po ~32 znaki w wierszu, wiec uklad
   schodzi do jednej. Wpis pojedynczy dolaczyl tu razem z reszta dlugich
   tresci - wczesniej nie mial kolumn w ogole, wiec i tego progu nie mial. */
#o_wydarzeniu-opis article,
#wspoldzielczosc-opis article,
#single-aktualnosc > article {column-count: 1}

#partnerzy li {width: 33.33%}

#program-wrap .pattern {
    width: 150px;
    height: 150px;
    bottom: 200px;
}

#program {width: 100%}

#program-nav {margin-bottom: 0}

#historia-wrap {width: 100%}

#prelegenci .pattern {
    width: 150px;
    height: 150px;
    bottom: 200px;
}

#prelegenci-single {width: 100%}

#regulamin .pattern {
    width: 150px;
    height: 150px;
    bottom: 200px;
}

#kontakt {
	width: 100%;
	margin: 0 auto;
}

#kontakt > article {width: 100%}

#kontakt > figure {
	width: 100%;
	height: 400px;
}

#error404 {padding: 25px}

#error404 > div {min-height: calc(var(--vh, 1vh) * 100 - 50px)}

#error404 > div > img {
	top: 25px;
	left: 25px;
	width: 125px;
}

#error404 > div article {
	padding-left: 50px;
	padding-top: 100px;
}

#rejestracja {
	width: 100%;
	margin: 0 auto;
	padding: 50px 25px;
}

#rejestracja > img {
	top: -37px;
	right: -37px;
	width: 275px;
}

	
}



/*GRID: 568px */
@media all and (max-width: 568px) {
	


#page-header {
	margin-bottom: -75px;
}	

#licznik h4 {margin-bottom: 25px}

#licznik > div {
    width: 80px;
    height: 80px;
	margin: 0 5px;
}
/* Luk licznika i ramki ozdobne schodza razem - jeden token, jeden prog. */
:root {--kreska-rama: 4px}

#licznik .arc-bottom {  
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	top: 2px;
	left: 2px;
}

#licznik > div p span:first-of-type {
	font-size: 26px;
	line-height: 26px;
}

/* Etykiety DNI/GODZIN/MINUT/SEKUND. 11px nie wynikalo z ciasnoty - w komorce
   zostawalo ponad 50px wolnego miejsca. */
#licznik > div p span:last-of-type {
	font-size: 13px;
	line-height: 13px;
	font-weight: 600;
}

#home-wydarzenie > figure {
	margin: 0 auto 75px;
	padding-right: 25px;
}

#home-wydarzenie > figure > figure .pattern {
	top: 25px;
	left: 25px;
}

.film a {
    width: 75px;
    height: 75px;
}	

#home-wspoldzieczosc .pattern-wrap {
	width: 0;
	height: 0;
}

#home-wspoldzieczosc .pattern-wrap .pattern:first-of-type {display: none}

#prelegenci-home > section {
	width: calc(100% + 60px);
	left: -30px;
	margin-bottom: 0;
}

#prelegenci-single > figure {margin: 0 auto 25px}

#prelegenci-single > article > div:nth-of-type(3) {margin-top: 25px}

#prelegenci-single > article > div:nth-of-type(4) {margin-top: 25px}

#lokalizacja > figure {
	width: calc(100% - 25px);
	height: 350px;
	margin-bottom: -50px;
}

#lokalizacja > article {padding-left: 25px}

#lokalizacja > article .pattern {
	top: -125px;
	right: 50px;
}

#lokalizacja > article > div {padding: 50px 25px}

#historia-cont {
	width: 533%;
	left: -433%;
}

#historia > hgroup {
	min-height: 175px;
	margin-bottom: 25px;
}

#historia > nav span:nth-of-type(2) {display: none}
#historia > nav span:nth-of-type(3) {display: block}

#error404 > div {
	background-image: url(../img/home-header-rwd.webp);
	background-position: center;
	display: block;
	padding: 50px;
	box-sizing: border-box;
}

#error404 > div > img {
	position: relative;
	top: 0px;
	left: 0;
	margin: 0 auto 50px;
	width: 125px;
}

#error404 > div article {
	padding: 0 25px;
	max-width: 100%;
}

#rejestracja-form input[type=text] {
    font-size: 15px;
    line-height: 20px;
}

#checkbox-wrap {
    font-size: 14px;
    line-height: 1.5;
}

}



/*GRID: 440px */
@media all and (max-width: 440px) {
	
		

#home-header {padding: 20px}

#home-header > div {min-height: calc(var(--vh, 1vh) * 100 - 40px)}

#home-header > div > article {padding: 100px 20px 40px}

/* Selektory jawne, tak jak w bloku <=768. Po przejsciu logotypu na <picture>
   `img:first-of-type` zaczelo pasowac takze do grafiki w .rwd-s (jest tam
   jedynym obrazkiem, wiec i pierwszym, i ostatnim swojego typu), przez co
   ilustracja hero kurczyla sie do 125px. */
#home-header > div > article .hero-lockup img {max-width: 125px}

#page-header {
	padding: 20px;
	margin-bottom: -60px;
}

#licznik {
	max-width: 250px;
	position: relative;
	margin: 0 auto;
}

#licznik > div {
    width: 70px;
    height: 70px;
	margin: 0 10px 10px;
}
/* Luk licznika NIE dostaje tu wlasnego stopnia: idzie razem z ramkami
   przez --kreska-rama. Wczesniej mial trzeci prog 2px, przez co pierscien
   i ramka rozjezdzaly sie ponizej 440px. */

#licznik .arc-bottom {  
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 1px;
	left: 1px;
}

#licznik > div p span:first-of-type {
	font-size: 22px;
	line-height: 22px;
}

#licznik > div p span:last-of-type {
	font-size: 12px;
	line-height: 12px;
}

#home-wydarzenie > figure {
	margin: 0 auto 70px;
	padding-right: 20px;
}

#home-wydarzenie > figure > figure .pattern {
	top: 20px;
	left: 20px;
}

#home-wspoldzieczosc .interlude {margin-top: 25px}

#home-wspoldzieczosc .pattern-wrap {display: none}

#aktualnosci-home > div {
	width: 100% !important;
	padding: 0;
	margin-bottom: 10px;
}

#aktualnosci-home > div > div {
	padding-top: 100% !important;
	width: 100% !important;
	top: 0 !important;
	height: auto !important;
}

#aktualnosci-home > div a figcaption {padding: 15px 15px 25px !important}

#aktualnosci > section, #aktualnosci-polecane > section {margin-bottom: 20px}

#aktualnosci > section > div, #aktualnosci-polecane > section > div {padding: 10px 10px 20px}

/*
#aktualnosci-single {padding: 20px}
*/

#single-aktualnosc > figure {height: 400px}

#single-aktualnosc .share a {
    width: 24px;
    margin-left: 10px;
}

/* Cofniecie to POLOWA poszerzenia, inaczej przelew jest niesymetryczny:
   przy 40px poszerzenia i 25px cofniecia karta wychodzila 25px w lewo,
   a tylko 15px w prawo - na telefonie 5px zdjecia bylo scinane, a przy
   prawej krawedzi zostawal pasek tla. */
#prelegenci-home > section {
	width: calc(100% + 40px);
	left: -20px;
	margin-bottom: -10px;
}

#prelegenci > section {
    width: 100%;
    left: 0;
}

#prelegenci-home .prelegent-excerpt, #prelegenci .prelegent-excerpt {
	width: 100%;
	padding: 0;
	margin-bottom: 10px;
}

/* Jedna kolumna: trzecia osoba wraca, bo nie ma juz z czym konkurowac
   o szerokosc. Czwarta zostaje ukryta - na telefonie trzy karty jedna pod
   druga to i tak caly ekran przewijania. Znowu pozycja wprost zamiast
   :last-of-type, z tego samego powodu co przy progu 1024px. */
#prelegenci-home .prelegent-excerpt:nth-of-type(3) {display: block}

#prelegenci-single {padding: 20px}

.prelegent-excerpt > div hgroup {padding: 0 25px 25px}

.prelegent-excerpt > div hgroup::before {
	width: 125px;
	height: 125px;
}

#partnerzy {padding: 20px}

#partnerzy li {width: 50%}

#partnerzy article .has-grey-background-color {padding: 20px}

#lokalizacja > figure {
	width: calc(100% - 20px);
	margin-bottom: -40px;
}

#lokalizacja > article {padding-left: 20px}

#lokalizacja > article > div {padding: 40px 20px}

#lokalizacja > article .pattern {
	top: -130px;
	right: 40px;
}

#wspoldzielczosc, #o_wydarzeniu, #prelegenci-wstep {padding: 20px}

#wspoldzielczosc > figure img {width: 125px}

#wspoldzielczosc-intro > figure {height: 400px}

#o_wydarzeniu-interlude {height: 260px}
#o_wydarzeniu-interlude > img {width: 125px}

#program-wstep {padding: 20px}

#program-nav > div {padding: 20px}

#program-all > section {padding: 20px}

#program-all table td {
	padding: 20px;
	width: 100% !important;
	display: block;
}

#program-all table td:nth-of-type(2n+1) {padding-bottom: 0}
#program-all table td:nth-of-type(2n) {padding-top: 0}

#historia-wrap > article {padding: 20px}

#historia-wrap > section {padding: 0 20px 20px}

#historia > hgroup {
	min-height: 200px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-left: 20px;
}

#regulamin > article {padding: 20px}

#kontakt > article > div {padding: 40px 20px}

#error404 {padding: 20px}

#error404 > div {
	padding: 40px 20px;
	min-height: calc(var(--vh, 1vh) * 100 - 40px);
}

#rejestracja {padding: 40px 20px}

#rejestracja > img {display: none}


}



/* ADAPTACJA DOTYKOWA
   Kryterium wielkosci celu (WCAG 2.5.8) wymaga 44x44px. Ikony w tym motywie
   maja 20-34px i sa czescia kompozycji, wiec zamiast je powiekszac
   rozszerzamy sam obszar dotyku niewidocznym pseudo-elementem. Warstwa
   wizualna nie zmienia sie ani o piksel.

   Warunek to pointer: coarse, a nie szerokosc ekranu - dotykowy laptop
   potrzebuje tego tak samo jak telefon, a telefon z rysikiem nie. */
@media (pointer: coarse) {

/* Elementy bez wlasnego kontekstu pozycjonowania musza go dostac,
   zeby nakladka mogla sie wzgledem nich ustawic. Nie zmienia to ukladu. */
#menu-sociale a,
.prelegent-excerpt > div > nav div a,
#prelegenci-single > figure nav a,
#single-aktualnosc .share a,
.link-more a, a.link-more {
	position: relative;
}

.hamburger::after,
#menu-sociale a::after,
#menu-contact::after,
#scroll-top::after,
.prelegent-excerpt > div > nav div a::after,
#prelegenci-single > figure nav a::after,
#single-aktualnosc .share a::after,
.slideshow-arrows a::after,
.link-more a::after, a.link-more::after,
a.link-box::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--cel-dotyku);
	height: var(--cel-dotyku);
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}

/* Strzalki karuzeli maja overflow: hidden z wtyczki, ktore przycieloby
   nakladke - nadpisujemy tylko na dotyku. */
.slideshow-arrows a {overflow: visible}

/* Lata na osi Historii: 38px wysokosci. Dokladamy je od gory, zeby nie
   przesunac dolnej krawedzi ani kropki wskaznika. */
#historia-cont > div {padding-top: 6px}

}



/* =========================================================================
   OZDOBNIKI NA PODSTRONACH

   Siedem podstron nie mialo ani jednej ramki ozdobnej, mimo ze DESIGN.md
   mowi wprost: "Nowe sekcje powinny lamac rame przynajmniej jednym
   elementem" (The Overflow Rule). Cztery pozostale mialy ja od dawna -
   zawsze 300x300 przy prawej krawedzi, 350px od dolu sekcji.

   Tutaj kotwice sa ROZNE. Ta sama ramka w tym samym rogu na jedenastu
   stronach czytalaby sie jak stempel, a nie jak kompozycja; roznicujemy
   wiec strone i wysokosc tak, zeby ramka wchodzila w relacje z tym, co
   na danej stronie faktycznie stoi obok.

   Wszystkie niosa klase .glebia, wiec biora udzial w paralaksie od
   wskaznika - tym samym wspolczynnikiem, co ozdobniki na stronie glownej.
   ========================================================================= */
.ozdobnik-o-wydarzeniu,
.ozdobnik-wspoldzielczosc,
.ozdobnik-historia,
.ozdobnik-novum,
.ozdobnik-partnerzy,
.ozdobnik-kontakt,
.ozdobnik-rejestracja {
	width: 300px;
	height: 300px;
}

/* KOTWICE. Dwie strefy sa na kazdej podstronie zajete i ozdobnik nie moze
   w nie wchodzic: LEWA GORA to pasek ikon spolecznosciowych i hamburger,
   PRAWA GORA to logo FANB w naglowku. Pierwsza wersja tych regul stawiala
   ramki wlasnie tam - na /partnerzy/ ramka obejmowala ikony, na /historia/
   nachodzila na logo.

   Wszystkie siedem kotwiczy sie wiec przy DOLNEJ krawedzi sekcji, gdzie
   biala karta juz sie skonczyla: ramka klade sie tam obok kadru, a nie na
   tekscie - dokladnie tak, jak opisuje to DESIGN.md ("ramka lezy obok kadru
   zamiast pod nim"). Roznicujemy strone i wysunięcie, zeby siedem stron nie
   wygladalo na odbite jednym stemplem. */

.ozdobnik-o-wydarzeniu   {bottom: -60px; left: 0}
.ozdobnik-wspoldzielczosc{bottom: -60px; right: 0}
.ozdobnik-historia       {bottom: -90px; right: 0}
.ozdobnik-novum          {bottom: -60px; right: 0}
.ozdobnik-partnerzy      {bottom: -90px; left: 0}
.ozdobnik-kontakt        {bottom: 100px; right: 0}
.ozdobnik-rejestracja    {bottom: -60px; right: 0}

/* Ta sama skala, co maja ozdobniki istniejace od dawna: 300 / 200 / 150px.
   Bez tego ramka zajmowala na telefonie 300 z 390px szerokosci ekranu,
   czyli ponad trzy czwarte kadru - a ma byc akcentem, nie trescia. */
@media all and (max-width: 1024px) {
	.ozdobnik-o-wydarzeniu,
	.ozdobnik-wspoldzielczosc,
	.ozdobnik-historia,
	.ozdobnik-novum,
	.ozdobnik-partnerzy,
	.ozdobnik-kontakt,
	.ozdobnik-rejestracja {
		width: 200px;
		height: 200px;
	}
}

@media all and (max-width: 568px) {
	.ozdobnik-o-wydarzeniu,
	.ozdobnik-wspoldzielczosc,
	.ozdobnik-historia,
	.ozdobnik-novum,
	.ozdobnik-partnerzy,
	.ozdobnik-kontakt,
	.ozdobnik-rejestracja {
		width: 150px;
		height: 150px;
	}
}


/* =========================================================================
   PODSTRONY - TRESC POD SUFITEM, PAS NAGLOWKA POZA NIM

   Podzial przebiega miedzy TLEM a TRESCIA:

   PAS NAGLOWKA ZOSTAJE PELNOWYKRWAWIONY, bo trzyma strukture naglowka.
   Szerokie tlo jest planem, na ktory naklada sie wezsza biala karta.
   Zwezenie pasa odbieralo naglowkowi oparcie.

   Zasada, ktorej wczesniej nie mialem nazwanej: PAS MOZE BYC SZERSZY
   OD TRESCI, NIGDY WEZSZY.

   TRESC SCHODZI DO --tresc-siatka przez MARGINES SEKCJI, a nie przez sufit
   na kazdym dziecku z osobna. Pierwsza wersja robila to drugie i rozjechala
   uklad: max-width z margin: auto dziala na blokach, ale NIE na elementach
   inline-block - a takimi sa przyciski .link-box. Kolumna tekstu przesunela
   sie wiec do srodka, a przyciski zostaly przy krawedzi ramy, 180px od niej.

   max() wybiera wieksza z dwoch wartosci: rame progu responsywnego albo
   polowe nadmiaru ponad sufit. Przy oknie 2560 wygrywa druga (430px),
   ponizej ~1950 pierwsza - wiec nizej nie zmienia sie nic. Wszystkie dzieci
   sekcji przesuwaja sie przy tym rowno, niezaleznie od tego, czy sa blokami,
   czy nie.

   Otwarta zostaje sprawa KADRU: przy oknie 2560x1207 pas ma 4,08:1 przy
   zdjeciach o proporcji okolo 2,2:1, wiec kadrowana jest blisko polowa
   wysokosci fotografii. To decyzja niezalezna od szerokosci.
   ========================================================================= */
body:not(.home) #main > section:not(#page-header) {
	padding-left:  max(var(--rama), calc((100% - var(--tresc-siatka)) / 2));
	padding-right: max(var(--rama), calc((100% - var(--tresc-siatka)) / 2));
}