/* ==========================================================================
   Gniazdo w Felicjanowie - main.css
   1. Tokeny  2. Baza  3. Elementy wspolne  4. Naglowek  5. Sekcje  6. Stopka
   Kolory, fonty i odstepy WYLACZNIE przez tokeny z :root.
   ========================================================================== */

/* 1. TOKENY --------------------------------------------------------------- */
:root {
	/* kolory marki */
	--c-krem: #fff8ea;
	--c-piasek: #f6ead2;
	--c-papier: #fffdf6;
	--c-zielen: #12422b;
	--c-zielen-jasna: #1d5a3c;
	--c-zielen-ciemna: #0c2f1f;
	--c-bordo: #990918;
	--c-bordo-ciemne: #7a0612;
	--c-drewno: #5f391e;
	--c-miod: #b9812f;
	--c-miod-jasny: #e8c27e;
	--c-turkus: #1f8f9c;
	--c-lapka: #4a6b68;

	/* role */
	--c-tlo: var(--c-krem);
	--c-tekst: #1c2b22;
	--c-tekst-2: #4b594f;
	--c-linia: rgb(18 66 43 / 0.16);
	--c-linia-jasna: rgb(255 248 234 / 0.22);
	--c-fokus: var(--c-zielen);
	--c-cien: rgb(12 47 31 / 0.14);
	--c-zaslona: rgb(12 47 31 / 0.5);

	/* miod jako TEKST na jasnym tle (etykiety, daty, role): 5,49:1 na kremie, 4,86:1 na piasku.
	   Sam --c-miod (3,18:1) zostaje dla ornamentow i kresek, a na zieleni uzywamy --c-miod-jasny. */
	--c-miod-tekst: #8a5c14;

	/* warianty z przezroczystoscia: zaslony na zdjeciach (ciemna zielen), krem na zieleni, obwodki pol */
	--c-zaslona-0: rgb(12 47 31 / 0);
	--c-zaslona-34: rgb(12 47 31 / 0.34);
	--c-zaslona-38: rgb(12 47 31 / 0.38);
	--c-zaslona-45: rgb(12 47 31 / 0.45);
	--c-zaslona-60: rgb(12 47 31 / 0.6);
	--c-zaslona-62: rgb(12 47 31 / 0.62);
	--c-zaslona-66: rgb(12 47 31 / 0.66);
	--c-zaslona-80: rgb(12 47 31 / 0.8);
	--c-zaslona-88: rgb(12 47 31 / 0.88);
	--c-krem-14: rgb(255 248 234 / 0.14);
	--c-krem-45: rgb(255 248 234 / 0.45);
	--c-krem-70: rgb(255 248 234 / 0.7);
	--c-krem-82: rgb(255 248 234 / 0.82);
	--c-krem-86: rgb(255 248 234 / 0.86);
	--c-krem-90: rgb(255 248 234 / 0.9);
	--c-linia-pola: rgb(18 66 43 / 0.3);
	--c-podpowiedz: rgb(75 89 79 / 0.75);
	--c-bordo-tlo: rgb(153 9 24 / 0.08);

	/* typografia */
	--f-naglowki: "Silta The Farming", "Bradley Hand", "Segoe Print", cursive;
	--f-tekst: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-h1: clamp(2.7rem, 1.6rem + 4vw, 4.75rem);
	--fs-h2: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
	--fs-h3: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem);
	--fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	--fs-tekst: 1.0625rem;
	--fs-maly: 0.875rem;
	--fs-drobny: 0.8125rem;

	/* odstepy */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-sekcja: clamp(4rem, 2.5rem + 7vw, 8rem);
	--kontener: 78rem;
	--margines: clamp(1.125rem, 4vw, 3rem);
	--fala-h: clamp(2.25rem, 7vw, 6.5rem);

	--r-s: 0.75rem;
	--r-m: 1.25rem;
	--r-l: 2rem;
	--r-pelny: 999px;
	--r-xl: clamp(2rem, 5vw, 4rem);

	/* ksztalty zdjec: krawedzie z wycinanki (luki i zabki z logo). --zab = rozmiar jednego zeba,
	   staly niezaleznie od proporcji zdjecia. Same maski: biblioteka .ksztalt--<slug>. */
	--zab: clamp(0.875rem, 0.6rem + 0.8vw, 1.375rem);

	/* ruch */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--cien-s: 0 0.25rem 1rem var(--c-cien);
	--cien-m: 0 1rem 2.5rem var(--c-cien);
}

/* 2. BAZA ----------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	/* druga linia obrony przed przesuwaniem strony w bok na telefonie (clip nie psuje position: sticky) */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--c-tlo);
	color: var(--c-tekst);
	font: 400 var(--fs-tekst) / 1.65 var(--f-tekst);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

body.menu-otwarte {
	overflow: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--f-naglowki);
	font-weight: 400;
	line-height: 1.08;
	color: var(--c-zielen);
	text-wrap: balance;
}

p {
	margin: 0;
}

ul,
ol,
dl,
dd,
figure {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

:focus-visible {
	outline: 3px solid var(--c-fokus);
	outline-offset: 3px;
	border-radius: var(--r-s);
}

::selection {
	background: var(--c-zielen);
	color: var(--c-krem);
}

[hidden] {
	display: none !important;
}

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sprite {
	position: absolute;
}

.skip-link {
	position: absolute;
	left: var(--s-4);
	top: var(--s-4);
	z-index: 100;
	padding: var(--s-3) var(--s-5);
	background: var(--c-zielen);
	color: var(--c-krem);
	border-radius: var(--r-pelny);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* 3. ELEMENTY WSPOLNE ------------------------------------------------------ */
.kontener {
	width: min(100% - 2 * var(--margines), var(--kontener));
	margin-inline: auto;
}

.kontener--waski {
	--kontener: 46rem;
}

.sekcja {
	position: relative;
	padding-block: var(--s-sekcja);
}

.sekcja--zielona {
	--c-fokus: var(--c-krem);
	background: var(--c-zielen);
	color: var(--c-krem);
	padding-block: calc(var(--s-sekcja) + var(--fala-h));
}

.sekcja--zielona h2,
.sekcja--zielona h3 {
	color: var(--c-krem);
}

.sekcja--zielona .etykieta {
	color: var(--c-miod-jasny);
}

.sekcja--zielona .lead {
	color: var(--c-krem-86);
}

.sekcja--piasek {
	background: var(--c-piasek);
	padding-block: calc(var(--s-sekcja) + var(--fala-h));
}

.ikona {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.etykieta {
	margin-bottom: var(--s-3);
	color: var(--c-miod-tekst);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* kwiat z wycinanki przed kazda etykieta sekcji */
.etykieta::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	aspect-ratio: 274 / 238;
	margin-right: 0.6em;
	vertical-align: -0.3em;
	background: currentColor;
	-webkit-mask: url("../svg/kwiat.svg") center / contain no-repeat;
	mask: url("../svg/kwiat.svg") center / contain no-repeat;
}

.tytul {
	font-size: var(--fs-h2);
}

.lead {
	max-width: 58ch;
	color: var(--c-tekst-2);
	font-size: var(--fs-lead);
}

.naglowek-sekcji {
	margin-bottom: clamp(2.25rem, 5vw, 4rem);
	max-width: 44rem;
}

.naglowek-sekcji .tytul + .lead {
	margin-top: var(--s-4);
}

.naglowek-sekcji--srodek {
	margin-inline: auto;
	text-align: center;
}

.naglowek-sekcji--srodek .lead {
	margin-inline: auto;
}

/* galazka z wycinanki pod naglowkiem (dawniej prosta kreska) */
.kreska {
	display: block;
	width: 5.5rem;
	aspect-ratio: 745 / 225;
	margin-block: var(--s-4);
	background: var(--c-miod);
	-webkit-mask: url("../svg/galazka.svg") center / contain no-repeat;
	mask: url("../svg/galazka.svg") center / contain no-repeat;
}

/* ksztalty zdjec: krawedz z wycinanki zamiast prostokata. Maska (a nie clip-path), bo clip-path jest
   zajety przez animacje odslaniania. Maski ponizej (gradient i kafelek SVG ukladany "round")
   to wersja bez JS. Safari zaokragla rozmiar kafelka do pelnych pikseli i zostawia jego kawalek na krawedzi,
   dlatego main.js (initKsztalty) podmienia --ksztalt dla lukow, zabkow i koronki na jeden rysunek SVG
   o wymiarach zdjecia, rozciagniety na 100% bez powtarzania. */
.ksztalt {
	--srodek: linear-gradient(black 0 0) center / calc(100% - var(--zab)) calc(100% - var(--zab)) no-repeat;
	--ksztalt: var(--luki);
	--luki: radial-gradient(farthest-side, black 96%, transparent) 0 0 / var(--zab) var(--zab) round, var(--srodek);
	background: var(--c-piasek);
	-webkit-mask: var(--ksztalt);
	mask: var(--ksztalt);
}

@supports not ((mask-repeat: round) or (-webkit-mask-repeat: round)) {
	.ksztalt {
		overflow: hidden;
		border-radius: var(--r-m);
	}
}

.ksztalt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Biblioteka ksztaltow. Nazwy = slugi z felicjanow_ksztalty() w inc/helpers.php. */

/* luki: falbanka spod trojkata w logo */
.ksztalt--luki { --ksztalt: var(--luki); }

/* zabki: pilka z bokow trojkata w logo */
.ksztalt--zabki {
	--ksztalt:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' preserveAspectRatio='none'%3E%3Cpath d='M1 0l1 1-1 1-1-1z'/%3E%3C/svg%3E") 0 0 / var(--zab) var(--zab) round,
		var(--srodek);
}

/* koronka: prosty gorny brzeg, falbanka u dolu (obrus, serweta) */
.ksztalt--koronka {
	--ksztalt:
		radial-gradient(farthest-side, black 96%, transparent) 0 100% / var(--zab) var(--zab) round no-repeat,
		linear-gradient(black 0 0) top / 100% calc(100% - var(--zab) / 2) no-repeat;
}

/* wklesle narozniki: szyld, pieczatka */
.ksztalt--wklesle {
	--w: calc(var(--zab) * 1.5);
	--ksztalt:
		radial-gradient(circle at 0 0, transparent var(--w), black calc(var(--w) + 1px)) 0 0 / 51% 51% no-repeat,
		radial-gradient(circle at 100% 0, transparent var(--w), black calc(var(--w) + 1px)) 100% 0 / 51% 51% no-repeat,
		radial-gradient(circle at 0 100%, transparent var(--w), black calc(var(--w) + 1px)) 0 100% / 51% 51% no-repeat,
		radial-gradient(circle at 100% 100%, transparent var(--w), black calc(var(--w) + 1px)) 100% 100% / 51% 51% no-repeat;
}

/* sciete narozniki: rama obrazu, deska */
.ksztalt--sciete {
	--w: var(--zab);
	--ksztalt:
		linear-gradient(135deg, transparent var(--w), black calc(var(--w) + 1px)) 0 0 / 51% 51% no-repeat,
		linear-gradient(225deg, transparent var(--w), black calc(var(--w) + 1px)) 100% 0 / 51% 51% no-repeat,
		linear-gradient(45deg, transparent var(--w), black calc(var(--w) + 1px)) 0 100% / 51% 51% no-repeat,
		linear-gradient(315deg, transparent var(--w), black calc(var(--w) + 1px)) 100% 100% / 51% 51% no-repeat;
}

/* ksztalty z pliku SVG, rozciagane na cale zdjecie */
.ksztalt--brama  { --ksztalt: url("../svg/ramka-brama.svg") center / 100% 100% no-repeat; }  /* luk bramy, wschodzace slonce */
.ksztalt--lisc   { --ksztalt: url("../svg/ramka-lisc.svg") center / 100% 100% no-repeat; }   /* listek z ornamentu */
.ksztalt--rozeta { --ksztalt: url("../svg/ramka-rozeta.svg") center / 100% 100% no-repeat; } /* medalion, kwiat */

/* zdjecie z kremowa obwodka w tym samym ksztalcie (nakladane na inne zdjecie) */
.ksztalt--ramka {
	padding: 0.5rem;
	background: var(--c-krem);
}

.ksztalt--ramka img {
	-webkit-mask: var(--ksztalt);
	mask: var(--ksztalt);
}

/* logo i ornamenty: SVG jako maska, kolor z currentColor, plik w cache przegladarki */
.znak {
	display: block;
	background: currentColor;
	-webkit-mask: var(--znak) center / contain no-repeat;
	mask: var(--znak) center / contain no-repeat;
}

.znak--pionowe { --znak: url("../svg/logo-pionowe.svg"); aspect-ratio: 2076 / 2473; }
.znak--poziome { --znak: url("../svg/logo-poziome.svg"); aspect-ratio: 3130 / 857; }
.znak--krotkie { --znak: url("../svg/logo-poziome-krotkie.svg"); aspect-ratio: 3130 / 857; }
.znak--symbol { --znak: url("../svg/logo-symbol.svg"); aspect-ratio: 1153 / 857; }
.znak--ornament { --znak: url("../svg/ornament.svg"); aspect-ratio: 1833 / 338; }

/* fala */
.fala {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--fala-h);
	fill: var(--c-krem);
	pointer-events: none;
}

.fala--hero,
.fala--dol {
	bottom: -1px;
}

.fala--gora {
	top: -1px;
	transform: rotate(180deg);
}

/* przyciski */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--r-pelny);
	background: var(--c-bordo);
	color: var(--c-krem);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.16s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:active {
	transform: scale(0.97);
}

.btn__lapka {
	transform: rotate(90deg);
	transition: transform 0.3s var(--ease-out);
}

.btn--zielony {
	background: var(--c-zielen);
}

.btn--jasny {
	background: var(--c-krem);
	color: var(--c-zielen);
}

.btn--kontur {
	background: transparent;
	border-color: currentColor;
	color: var(--c-zielen);
}

.btn--szklo {
	background: var(--c-krem-14);
	border-color: var(--c-krem-70);
	color: var(--c-krem);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.btn--tekst {
	background: transparent;
	color: var(--c-zielen);
	padding-inline: var(--s-3);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.btn--maly {
	min-height: 2.75rem;
	padding: 0.6rem 1.15rem;
	font-size: 0.9375rem;
}

.btn[disabled] {
	opacity: 0.7;
	cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
	.btn:hover { background: var(--c-bordo-ciemne); }
	.btn--zielony:hover { background: var(--c-zielen-jasna); }
	.btn--jasny:hover { background: var(--c-papier); }
	.btn--kontur:hover { background: var(--c-zielen); border-color: var(--c-zielen); color: var(--c-krem); }
	.btn--szklo:hover { background: var(--c-krem); border-color: var(--c-krem); color: var(--c-zielen); }
	.btn--tekst:hover { background: transparent; color: var(--c-bordo); }
	.btn:hover .btn__lapka { transform: rotate(90deg) translateY(-4px); }
}

.link-strzalka {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--c-bordo);
	font-weight: 700;
	text-decoration: none;
}

.link-strzalka .ikona {
	transition: transform 0.3s var(--ease-out);
}

a.link-strzalka {
	min-height: 2.75rem;
	text-underline-offset: 0.3em;
	transition: color 0.2s ease;
}

a.link-strzalka:active {
	color: var(--c-bordo-ciemne);
}

.sekcja--zielona .link-strzalka,
.sekcja--zielona a.link-strzalka:active {
	color: var(--c-miod-jasny);
}

.ikona--wstecz {
	transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
	a.link-strzalka:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}

	a.link-strzalka:hover .ikona,
	a:hover .link-strzalka .ikona {
		transform: translateX(5px);
	}
}

/* link "wiecej" pod sekcja: prowadzi do podstrony o tym samym temacie */
.sekcja__wiecej {
	margin-top: var(--s-6);
}

.sekcja__wiecej--srodek {
	text-align: center;
}

.dom__link {
	margin-top: var(--s-2);
}

.plakietka {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var(--r-pelny);
	background: var(--c-miod-jasny);
	color: var(--c-zielen-ciemna);
	font-size: var(--fs-drobny);
	font-weight: 700;
	vertical-align: middle;
}

.lista-lapki {
	display: grid;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

.lista-lapki li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	font-weight: 600;
}

.lista-lapki .ikona {
	margin-top: 0.2em;
	color: var(--c-bordo);
	transform: rotate(90deg);
}

.pusto {
	padding: var(--s-6);
	border: 1.5px dashed var(--c-linia);
	border-radius: var(--r-l);
	color: var(--c-tekst-2);
	text-align: center;
}

/* rozdzielacz: kurze slady */
.trop {
	display: flex;
	justify-content: center;
	gap: 0.7rem;
	overflow: hidden;
	padding-block: var(--s-4);
}

.lapka {
	width: 1.375rem;
	height: 1.375rem;
	flex: none;
	color: var(--c-lapka);
	transform: rotate(90deg);
}

.trop .lapka:nth-child(odd) { translate: 0 -5px; }
.trop .lapka:nth-child(even) { translate: 0 5px; }

.js-anim .trop .lapka {
	opacity: 0;
}

.js-anim .trop.is-in .lapka {
	animation: krok 0.45s var(--ease-out) forwards;
	animation-delay: calc(var(--i) * 60ms);
}

/* akcent: kilka kurzych sladow idacych z dolu do gory pod katem - przy etykiecie, naglowku
   albo na narozniku zdjecia. --x / --y = punkt startu (pierwszy slad). Ruch: animations.js */
.intro__tekst,
.kuchnia__tekst,
.naglowek-sekcji {
	position: relative;
	isolation: isolate;
}

.slady {
	--krok: 2.1rem;
	--slad: 1.5rem;
	--kat: -62deg;
	--x: calc(100% - 4.5rem);
	--y: 2rem;
	position: absolute;
	z-index: -1;
	left: var(--x);
	top: calc(var(--y) - var(--slad) * 1.85);
	width: calc(var(--n) * var(--krok));
	height: calc(var(--slad) * 1.85);
	color: var(--c-lapka);
	opacity: 0.6;
	pointer-events: none;
	transform-origin: 0 100%;
	rotate: var(--kat);
}

.slad {
	position: absolute;
	left: calc(var(--i) * var(--krok));
	width: var(--slad);
	height: var(--slad);
}

.slad:nth-child(odd) { top: 0; rotate: 76deg; }
.slad:nth-child(even) { bottom: 0; rotate: 104deg; }

/* w gore i w lewo */
.slady--lewo {
	--kat: -118deg;
	--x: calc(100% - 1rem);
}

/* na narozniku zdjecia: ciemne lapki z jasna obwodka, czytelne na zdjeciu i na tle */
.slady--foto {
	z-index: 2;
	color: var(--c-zielen);
	opacity: 0.9;
	filter: drop-shadow(1px 0 0 var(--c-krem)) drop-shadow(-1px 0 0 var(--c-krem)) drop-shadow(0 1px 0 var(--c-krem)) drop-shadow(0 -1px 0 var(--c-krem));
}

.okolica__zdjecia > .slady {
	--x: calc(90% - 3rem);
	--y: 4.5rem;
}

/* na telefonie start nad etykieta, zeby lapki nie wchodzily w napis "Gniazdo w Felicjanowie" */
.intro__tekst > .slady {
	--y: -0.4rem;
}

.sekcja--zielona .slady {
	color: var(--c-krem);
	opacity: 0.45;
}

.js-anim .slad {
	opacity: 0;
}

@media (min-width: 62em) {
	.slady {
		--krok: 2.9rem;
		--slad: 2rem;
		--x: calc(100% - 8rem);
		--y: 3rem;
	}

	.slady--lewo {
		--x: calc(100% - 1.5rem);
	}

	.okolica__zdjecia > .slady {
		--x: calc(90% - 4.5rem);
		--y: 6.5rem;
	}

	.intro__tekst > .slady {
		--y: 3rem;
	}
}

@keyframes krok {
	0% { opacity: 0; transform: rotate(90deg) scale(0.9); }
	60% { opacity: 1; transform: rotate(90deg) scale(1.08); }
	100% { opacity: 1; transform: rotate(90deg) scale(1); }
}

/* animowane slowa naglowkow (GSAP splitWords) */
.j-word-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.14em 0.05em;
	margin: -0.14em -0.05em;
}

.j-word-inner {
	display: inline-block;
}

/* 4. PASEK I NAGLOWEK ------------------------------------------------------ */
.pasek {
	--c-fokus: var(--c-krem);
	position: relative;
	z-index: 51;
	background: var(--c-zielen-ciemna);
	color: var(--c-krem);
	font-size: var(--fs-drobny);
	line-height: 1.4;
}

.pasek__wiersz {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding-block: 0.6rem;
	text-align: center;
}

.pasek__lapka {
	color: var(--c-miod-jasny);
	transform: rotate(90deg);
}

.pasek a {
	margin-left: var(--s-1);
	color: var(--c-miod-jasny);
	font-weight: 700;
	text-underline-offset: 0.2em;
}

.naglowek {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 0;
	padding-inline: var(--margines);
}

.naglowek__pigulka {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	width: min(100%, 70rem);
	position: relative;
	top: 0.75rem;
	margin-inline: auto;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	border-radius: var(--r-pelny);
	background: var(--c-papier);
	box-shadow: var(--cien-s);
}

.naglowek__logo {
	display: block;
	flex: none;
	color: var(--c-zielen);
	border-radius: var(--r-s);
}

.naglowek__logo .znak {
	height: 2.5rem;
}

.naglowek__nav {
	display: none;
	margin-inline: auto;
}

.menu {
	display: flex;
	align-items: center;
}

.menu > li + li {
	border-left: 1px solid var(--c-linia);
}

.menu a {
	display: block;
	padding: 0.35rem clamp(0.6rem, 1.2vw, 1.1rem);
	color: var(--c-zielen);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 0.35em;
	transition: color 0.2s ease;
}

.menu a[aria-current],
.menu .current-menu-ancestor > a,
.menu .current-page-ancestor > a {
	color: var(--c-bordo);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.menu a:active {
	color: var(--c-bordo-ciemne);
}

@media (hover: hover) and (pointer: fine) {
	.menu a:hover {
		color: var(--c-bordo);
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}

.naglowek__cta {
	display: none;
	margin-left: auto;
}

.hamburger {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: var(--c-zielen);
	color: var(--c-krem);
	transition: transform 0.16s var(--ease-out);
}

.hamburger:active {
	transform: scale(0.95);
}

.hamburger__linie {
	display: grid;
	gap: 5px;
	width: 1.25rem;
}

.hamburger__linie span {
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}

.hamburger[aria-expanded="true"] .hamburger__linie span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linie span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__linie span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobilne {
	position: fixed;
	inset: 0;
	z-index: 49;
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	padding: 9.5rem var(--margines) var(--s-6);
	background: var(--c-krem);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-1rem);
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.menu-mobilne[hidden] {
	display: none;
}

.menu-mobilne.is-open {
	opacity: 1;
	transform: none;
}

.menu-mobilne__lista a {
	display: block;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--c-linia);
	color: var(--c-zielen);
	font: 400 2.1rem / 1.1 var(--f-naglowki);
	text-decoration: none;
}

.menu-mobilne__lista a[aria-current],
.menu-mobilne__lista .current-menu-ancestor > a,
.menu-mobilne__lista .current-page-ancestor > a,
.menu-mobilne__lista a:active {
	color: var(--c-bordo);
}

.menu-mobilne__lista a[aria-current]::after {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: 0.4em;
	background: currentColor;
	-webkit-mask: url("../svg/lapka.svg") center / contain no-repeat;
	mask: url("../svg/lapka.svg") center / contain no-repeat;
	rotate: 90deg;
}

.menu-mobilne__akcje {
	display: grid;
	gap: var(--s-3);
	margin-top: auto;
}

@media (min-width: 40em) {
	.naglowek__cta { display: inline-flex; }
	.hamburger { margin-left: 0; }
}

@media (min-width: 62em) {
	.naglowek__nav { display: block; }
	.naglowek__cta { margin-left: 0; }
	.hamburger,
	.menu-mobilne { display: none; }
}

.menu a,
.naglowek__cta {
	white-space: nowrap;
}

/* waski desktop: menu z podstronami musi zmiescic sie w pigulce w jednym wierszu */
@media (min-width: 62em) and (max-width: 71.99em) {
	.naglowek__pigulka { gap: var(--s-3); padding-left: var(--s-4); }
	.naglowek__logo .znak { height: 2rem; }
	.menu a { padding-inline: var(--s-2); font-size: var(--fs-maly); }
	.naglowek__cta { padding-inline: var(--s-4); font-size: var(--fs-maly); }
}

/* 5. SEKCJE ---------------------------------------------------------------- */

/* hero */
.hero {
	--c-fokus: var(--c-krem);
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(34rem, calc(100svh - 2.5rem), 54rem);
	overflow: hidden;
	color: var(--c-krem);
}

.hero__tlo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-zielen);
}

.hero__tlo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--c-zaslona-62), var(--c-zaslona-38) 42%, var(--c-zaslona-66));
}

.hero__slajd {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.hero__slajd.is-active {
	opacity: 1;
}

.hero__slajd img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__slajd.is-active img {
	animation: oddech 9s ease-out both;
}

@keyframes oddech {
	from { transform: scale(1.07); }
	to { transform: scale(1); }
}

/* film w tle: tylko szerokie ekrany, na telefonie zostaje slider */
.hero__wideo {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

/* filtr na filmie: ciemne ziarno lekko przygasza obraz i maskuje kompresje na duzych ekranach */
.hero__filtr {
	display: none;
	position: absolute;
	inset: 0;
	background: url("../svg/ziarno.svg") 0 0 / 11.25rem;
	opacity: 0;
	transition: opacity 1.2s ease;
}

@media (min-width: 62em) {
	.hero__wideo,
	.hero__filtr {
		display: block;
	}

	.hero.ma-wideo .hero__wideo,
	.hero.ma-wideo .hero__filtr {
		opacity: 1;
	}

	.hero.ma-wideo .hero__kropka {
		display: none;
	}
}

.hero__tresc {
	display: grid;
	/* minmax(0, ...): szeroki element (np. rzad przyciskow) nie moze rozepchnac kolumny poza ekran */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--s-4);
	padding-block: 6rem calc(var(--fala-h) + 2.75rem);
	text-align: center;
}

.hero__logo {
	color: var(--c-krem);
}

.hero__logo {
	filter: drop-shadow(0 2px 14px var(--c-zaslona-45));
}

.hero__logo .znak {
	height: clamp(8rem, 25svh, 14.5rem);
}

.hero__tytul {
	max-width: 20ch;
	margin-top: var(--s-2);
	line-height: 1;
	color: var(--c-krem);
	font-size: var(--fs-h1);
	text-shadow: 0 2px 18px var(--c-zaslona);
}

.hero__lead {
	max-width: 46ch;
	font-size: var(--fs-lead);
	font-weight: 500;
	text-shadow: 0 1px 10px var(--c-zaslona-60);
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

/* Telefon: tresc hero stoi wyzej, a przyciski obok siebie, zeby wezwanie do kontaktu konczylo sie
   ponad banerem zgod przy pierwszej wizycie (ekran 390 x 844: przyciski koncza sie przed ok. 630 px). */
@media (max-width: 47.99em) {
	.hero {
		align-items: start;
	}

	.hero__tresc {
		padding-top: 5rem;
	}

	/* logo na tyle duze, zeby dalo sie przeczytac "zabawa - natura - przezycia" pod nazwa */
	.hero__logo .znak {
		height: min(13.75rem, 31svh);
	}

	.hero__cta {
		flex-wrap: nowrap;
		gap: var(--s-2);
		width: 100%;
	}

	.hero__cta .btn {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0.4rem;
		padding-inline: 0.75rem;
		font-size: 0.9375rem;
		white-space: nowrap;
	}
}

/* Niski ekran telefonu (np. iPhone SE): pelne logo z napisami sie nie miesci, zostaje sam trojkat */
@media (max-width: 47.99em) and (max-height: 38.75em) {
	.hero__logo .znak {
		--znak: url("../svg/logo-symbol.svg");
		aspect-ratio: 1153 / 857;
		height: 5.75rem;
	}
}

/* Waskie telefony (360-384 px): dwa przyciski obok siebie mieszcza sie dzieki mniejszemu tekstowi i bez lapki */
@media (max-width: 24em) {
	.hero__cta .btn {
		gap: 0.3rem;
		padding-inline: 0.6rem;
		font-size: 0.875rem;
	}

	.hero__cta .btn__lapka {
		display: none;
	}
}

@media (max-width: 21.24em) {
	.hero__cta {
		flex-wrap: wrap;
	}
}

.hero__ster {
	position: absolute;
	right: var(--margines);
	bottom: calc(var(--fala-h) + 0.25rem);
	display: flex;
	align-items: center;
}

.hero__pauza,
.hero__kropka {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-krem);
}

.hero__pauza {
	width: 2.75rem;
}

.hero__pauza .ikona--play,
.hero__pauza[aria-pressed="true"] .ikona--pauza {
	display: none;
}

.hero__pauza[aria-pressed="true"] .ikona--play {
	display: block;
}

.hero__kropka::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s var(--ease-out);
}

.hero__kropka.is-active::before {
	background: currentColor;
	transform: scale(1.25);
}

.js-anim [data-hero] {
	opacity: 0;
}

/* liczby */
.liczby {
	padding-block: var(--s-5) var(--s-4);
}

.liczby__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-5) var(--s-4);
}

.liczby__element {
	display: grid;
	align-content: start;
	gap: var(--s-1);
	text-align: center;
}

.liczby__element:last-child {
	grid-column: 1 / -1;
}

.liczby__wartosc {
	color: var(--c-zielen);
	font: 400 clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem) / 1 var(--f-naglowki);
	white-space: nowrap;
}

.liczby__opis {
	max-width: 15ch;
	margin-inline: auto;
	color: var(--c-tekst-2);
	font-size: var(--fs-maly);
	font-weight: 500;
	line-height: 1.35;
}

@media (min-width: 48em) {
	.liczby__lista {
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}

	.liczby__element {
		padding-inline: var(--s-3);
	}

	.liczby__element:last-child {
		grid-column: auto;
	}

	.liczby__element + .liczby__element {
		border-left: 2px dotted var(--c-linia);
	}
}

/* intro: kolaz */
.intro__siatka {
	display: grid;
	gap: var(--s-5);
}

.intro__tekst {
	align-self: center;
}

.intro__tekst .link-strzalka {
	margin-top: var(--s-5);
}

.intro__foto--1 { aspect-ratio: 4 / 3; }
.intro__foto--2 { aspect-ratio: 5 / 4; width: 68%; }
.intro__foto--3 { aspect-ratio: 16 / 10; }

.intro__puenta {
	color: var(--c-zielen);
	font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem) / 1.15 var(--f-naglowki);
}

.intro__ornament {
	width: min(100%, 22rem);
	color: var(--c-lapka);
	opacity: 0.6;
}

.intro__ornament .znak {
	width: 100%;
}

@media (min-width: 62em) {
	.intro__siatka {
		grid-template-columns: repeat(12, 1fr);
		gap: var(--s-6) var(--s-6);
		align-items: start;
	}

	.intro__tekst { grid-column: 1 / 6; grid-row: 1; }
	.intro__foto--1 { grid-column: 6 / 13; grid-row: 1; }
	.intro__foto--2 { grid-column: 1 / 5; grid-row: 2; width: auto; }
	.intro__foto--3 { grid-column: 5 / 13; grid-row: 2; margin-top: calc(-1 * var(--s-4)); }
	.intro__foto--2 { align-self: start; }
	.intro__puenta { grid-column: 1 / 5; grid-row: 2; align-self: end; padding-bottom: var(--s-4); }
	.intro__ornament { grid-column: 4 / 10; grid-row: 3; justify-self: center; margin-top: var(--s-5); }
}

/* grupy */
.grupy__lista {
	display: grid;
	gap: var(--s-7) var(--s-6);
}

.karta-grupy {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--r-l);
}

.karta-grupy__foto {
	display: block;
	aspect-ratio: 4 / 5;
}

.karta-grupy__foto img {
	transition: transform 0.6s var(--ease-out);
}

.karta-grupy__tresc {
	display: grid;
	gap: var(--s-2);
	padding: var(--s-5) var(--s-2) 0;
}

.karta-grupy__tytul {
	color: var(--c-zielen);
	font: 400 var(--fs-h3) / 1.1 var(--f-naglowki);
}

.karta-grupy__opis {
	color: var(--c-tekst-2);
}

.karta-grupy .link-strzalka {
	margin-top: var(--s-2);
}

.karta-grupy:active {
	transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.karta-grupy:hover .karta-grupy__foto img {
		transform: scale(1.05);
	}
}

@media (min-width: 40em) {
	.grupy__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
	.grupy__lista { grid-template-columns: repeat(3, 1fr); }
	.grupy__element:nth-child(2) { margin-top: var(--s-8); }
}

/* opinie */
.opinie__lista {
	display: grid;
	gap: var(--s-6);
}

.opinia {
	display: grid;
	align-content: start;
	gap: var(--s-4);
	margin: 0;
	padding: var(--s-6) var(--s-5) var(--s-5);
	background: var(--c-papier);
	border: 1px solid var(--c-linia);
	border-radius: var(--r-m);
}

.opinia::before {
	content: "\201E";
	height: 0.45em;
	color: var(--c-miod);
	font: 400 var(--fs-h2) / 0.6 var(--f-naglowki);
}

.opinia__tekst {
	color: var(--c-tekst);
}

.opinia__autor {
	display: grid;
	gap: var(--s-1);
	padding-top: var(--s-4);
	border-top: 1px dashed var(--c-linia);
}

.opinia__imie {
	color: var(--c-zielen);
	font-weight: 700;
}

.opinia__zrodlo {
	color: var(--c-miod-tekst);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (min-width: 40em) {
	.opinie__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
	.opinie__lista { grid-template-columns: repeat(3, 1fr); }
	.opinie__lista > li:nth-child(3n + 2) { margin-top: var(--s-6); }
}

/* domy */
.domy__siatka {
	display: grid;
	gap: var(--s-7) var(--s-6);
}

.dom__foto {
	aspect-ratio: 3 / 2;
	background: var(--c-zielen-jasna);
}

.dom__opis {
	padding-top: var(--s-5);
}

.dom__nazwa {
	display: inline-block;
	margin-right: var(--s-3);
	font-size: var(--fs-h3);
	vertical-align: middle;
}

.dom__opis p {
	max-width: 48ch;
	margin-top: var(--s-2);
	color: var(--c-krem-86);
}

.dom--tabliczka {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-4);
	align-content: start;
	padding: var(--s-5);
	border: 1.5px dashed var(--c-linia-jasna);
	border-radius: var(--r-l);
}

.dom--tabliczka .dom__opis {
	padding-top: 0;
}

.dom__znak {
	width: 3.25rem;
	color: var(--c-miod-jasny);
}

@media (min-width: 40em) {
	.domy__siatka { grid-template-columns: repeat(2, 1fr); }
	.dom--1 { grid-column: 1 / -1; }
}

@media (min-width: 62em) {
	.domy__siatka { grid-template-columns: repeat(12, 1fr); }
	.dom--1 { grid-column: 1 / 8; }
	.dom--2 { grid-column: 8 / 13; margin-top: var(--s-9); }
	.dom--2 .dom__foto { aspect-ratio: 5 / 4; }
	.dom--3 { grid-column: 1 / 7; }
	.dom--3 .dom__foto { aspect-ratio: 4 / 3; }
	.dom--tabliczka { grid-column: span 3; grid-template-columns: 1fr; align-self: center; }
}

/* atrakcje */
.atrakcje__siatka {
	display: grid;
	gap: var(--s-7) var(--s-6);
}

.atrakcja__foto { aspect-ratio: 4 / 3; }
.atrakcja--1 .atrakcja__foto { aspect-ratio: 16 / 10; }
.atrakcja--3 .atrakcja__foto,
.atrakcja--4 .atrakcja__foto { aspect-ratio: 4 / 5; }

.atrakcja__opis {
	padding: var(--s-5) var(--s-2) 0;
}

.atrakcja__nazwa {
	font-size: var(--fs-h3);
}

.atrakcja__opis p {
	max-width: 44ch;
	margin-top: var(--s-2);
	color: var(--c-tekst-2);
}

@media (min-width: 40em) {
	.atrakcje__siatka { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
	.atrakcje__siatka { grid-template-columns: repeat(12, 1fr); }
	.atrakcja--1 { grid-column: 1 / 8; }
	.atrakcja--2 { grid-column: 8 / 13; margin-top: var(--s-9); }
	.atrakcja--3 { grid-column: 2 / 6; margin-top: var(--s-7); }
	.atrakcja--4 { grid-column: 7 / 12; }
}

/* mieszkancy */
.mieszkancy__lista {
	display: grid;
	gap: var(--s-7) var(--s-6);
}

.mieszkaniec {
	text-align: center;
}

.mieszkaniec__foto {
	aspect-ratio: 1;
	width: min(100%, 22rem);
	margin-inline: auto;
}

.mieszkaniec__imie {
	margin-top: var(--s-5);
	font-size: var(--fs-h3);
}

.mieszkaniec__rola {
	color: var(--c-miod-tekst);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mieszkaniec__opis {
	max-width: 30ch;
	margin: var(--s-2) auto 0;
	color: var(--c-tekst-2);
}

@media (min-width: 48em) {
	.mieszkancy__lista { grid-template-columns: repeat(3, 1fr); }
	.mieszkaniec:nth-child(2) { margin-top: var(--s-7); }
}

/* warsztaty */
.warsztaty__gora {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-5);
	margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.warsztaty__gora .naglowek-sekcji {
	margin-bottom: 0;
}

.warsztaty__lista {
	display: grid;
	gap: var(--s-6);
}

.warsztat {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--s-5);
	align-items: center;
}

.warsztat__foto {
	aspect-ratio: 1;
}

.warsztat__nazwa {
	font-size: clamp(1.7rem, 1.45rem + 0.9vw, 2.2rem);
}

.warsztat__opis p {
	margin-top: var(--s-2);
	color: var(--c-tekst-2);
}

.warsztat--1 {
	grid-template-columns: 1fr;
}

.warsztat--1 .warsztat__foto {
	aspect-ratio: 5 / 4;
}

.warsztat--1 .warsztat__nazwa {
	font-size: var(--fs-h3);
}

.warsztaty__nota {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: 2px dotted var(--c-linia);
	color: var(--c-tekst-2);
	font-weight: 500;
}

.warsztaty__nota .ikona {
	color: var(--c-bordo);
	transform: rotate(90deg);
}

@media (min-width: 62em) {
	.warsztaty__lista {
		grid-template-columns: 1.05fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: var(--s-6) var(--s-8);
	}

	.warsztat--1 { grid-row: 1 / 3; align-content: start; }
	.warsztat--1 .warsztat__foto { aspect-ratio: 4 / 3; }
	.warsztat--2,
	.warsztat--3 { grid-template-columns: 13rem 1fr; }
}

/* kuchnia */
.kuchnia__karta {
	display: grid;
	gap: var(--s-7);
	padding: clamp(1.5rem, 5vw, 4.5rem);
	border-radius: var(--r-xl);
	background: var(--c-piasek);
}

.kuchnia__zdjecia {
	position: relative;
	aspect-ratio: 5 / 4;
	width: min(100%, 34rem);
	margin-inline: auto;
}

.kuchnia__foto {
	position: absolute;
	width: 44%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 0.4rem solid var(--c-papier);
	border-radius: var(--r-m);
	box-shadow: var(--cien-m);
}

.kuchnia__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kuchnia__foto--1 { left: 0; top: 14%; rotate: -7deg; }
.kuchnia__foto--2 { left: 28%; top: 0; rotate: 2deg; z-index: 1; }
.kuchnia__foto--3 { left: 56%; top: 18%; rotate: 8deg; }

@media (min-width: 62em) {
	.kuchnia__karta {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

/* galeria */
.galeria__kolaz {
	columns: 2;
	column-gap: var(--s-3);
}

.galeria__foto {
	margin-bottom: var(--s-3);
	break-inside: avoid;
}

.galeria__foto img {
	height: auto;
}

@media (min-width: 48em) {
	.galeria__kolaz { columns: 3; column-gap: var(--s-5); }
	.galeria__foto { margin-bottom: var(--s-5); }
}

/* Kolaz z rownym dolem (strona glowna). Kolumne, poczatek i wysokosc kazdego zdjecia liczy felicjanow_galeria_uklad()
   i podaje w zmiennych: --k2/--s2/--w2 dla 2 kolumn, --k3/--s3/--w3 dla 3. Wiersz siatki to 1/24 szerokosci kolumny,
   liczone z szerokosci kontenera (cqw). Przegladarka bez jednostek kontenera zostaje przy kolumnach CSS powyzej. */
@supports (width: 1cqw) {
	.galeria__ramka {
		container-type: inline-size;
	}

	.galeria__kolaz--rowno {
		--galeria-odstep: var(--s-3);
		--galeria-kolumny: 2;
		display: grid;
		grid-template-columns: repeat(var(--galeria-kolumny), 1fr);
		grid-auto-rows: calc((100cqw - (var(--galeria-kolumny) - 1) * var(--galeria-odstep)) / var(--galeria-kolumny) / 24);
		column-gap: var(--galeria-odstep);
	}

	.galeria__kolaz--rowno .galeria__foto {
		grid-column: var(--k2);
		grid-row: var(--s2) / span var(--w2);
		margin: 0;
	}

	.galeria__kolaz--rowno .galeria__foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (min-width: 48em) {
		.galeria__kolaz--rowno {
			--galeria-odstep: var(--s-5);
			--galeria-kolumny: 3;
		}

		.galeria__kolaz--rowno .galeria__foto {
			grid-column: var(--k3);
			grid-row: var(--s3) / span var(--w3);
		}
	}
}

/* instagram: naglowek i link z motywu, feed z wtyczki */
.instagram__gora {
	display: grid;
	gap: var(--s-5);
	margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.instagram__gora .naglowek-sekcji {
	margin-bottom: 0;
}

.instagram__profil {
	justify-self: start;
	min-height: 2.75rem;
}

.instagram__pusto {
	max-width: 58ch;
	padding: var(--s-5);
	border: 2px dashed var(--c-linia);
	border-radius: var(--r-m);
	color: var(--c-tekst-2);
	font-size: var(--fs-maly);
}

@media (min-width: 62em) {
	.instagram__gora {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

	.instagram__profil { justify-self: end; }
}

/* okolica */
.okolica__siatka {
	display: grid;
	gap: var(--s-8);
}

.okolica__zdjecia {
	position: relative;
	padding-bottom: var(--s-7);
}

.okolica__foto--1 {
	aspect-ratio: 4 / 3;
	width: 90%;
}

.okolica__foto--2 {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
	aspect-ratio: 1;
}

.odleglosci {
	margin-block: var(--s-6);
}

.odleglosci__wiersz {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-bottom: 2px dotted var(--c-linia);
}

.odleglosci dt {
	font-weight: 600;
}

.odleglosci dd {
	color: var(--c-zielen);
	font: 400 2rem / 1 var(--f-naglowki);
	white-space: nowrap;
}

@media (min-width: 62em) {
	.okolica__siatka {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

/* faq */
.faq__siatka {
	display: grid;
	gap: var(--s-6);
}

.faq__naglowek {
	margin-bottom: 0;
}

.faq__tresc {
	min-width: 0;
}

.pytanie {
	border-bottom: 1.5px solid var(--c-linia);
}

.pytanie summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-5);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.pytanie summary::-webkit-details-marker {
	display: none;
}

.pytanie__plus {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--c-bordo);
	transition: transform 0.3s var(--ease-out);
}

.pytanie[open] .pytanie__plus {
	transform: rotate(45deg);
}

.pytanie__odpowiedz {
	max-width: 60ch;
	padding-bottom: var(--s-5);
	color: var(--c-tekst-2);
}

@media (hover: hover) and (pointer: fine) {
	.pytanie summary:hover { color: var(--c-bordo); }
}

@media (min-width: 62em) {
	.faq__siatka {
		grid-template-columns: 0.8fr 1.2fr;
		gap: var(--s-8);
		align-items: start;
	}

	.faq__naglowek {
		position: sticky;
		top: 7rem;
	}
}

/* kontakt */
.kontakt {
	padding-bottom: var(--s-sekcja);
}

.kontakt__siatka {
	display: grid;
	gap: var(--s-7);
}

/* Telefon: po "Zapytaj o termin" od razu widac formularz. Kolejnosc w DOM zostaje (naglowek, dane, mapa,
   formularz), zmienia sie tylko uklad: naglowek sekcji -> formularz -> telefon, e-mail, adres i mapa. */
@media (max-width: 61.99em) {
	.kontakt__siatka {
		gap: 0;
	}

	.kontakt__info {
		display: contents;
	}

	.kontakt__info > .naglowek-sekcji {
		order: 1;
		margin-bottom: var(--s-6);
	}

	.kontakt__siatka > .formularz {
		order: 2;
		margin-bottom: var(--s-7);
	}

	.kontakt__info > * {
		order: 3;
	}
}

.kontakt__dane {
	display: grid;
	gap: var(--s-3);
}

.kontakt__dane a,
.kontakt__adres {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 2.75rem;
	font-size: 1.1875rem;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.kontakt__dane .ikona {
	color: var(--c-miod-jasny);
}

@media (hover: hover) and (pointer: fine) {
	.kontakt__dane a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}

.social {
	display: flex;
	gap: var(--s-3);
	margin-block: var(--s-5) var(--s-6);
}

.social a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--c-linia-jasna);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
}

.social a:active {
	transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
	.social a:hover { background: var(--c-krem); color: var(--c-zielen); }
}

.mapa {
	position: relative;
	overflow: hidden;
	/* Wysokosc zamiast aspect-ratio: proporcja razem z min-height wymuszala szerokosc 448 px
	   i na telefonie dalo sie przesunac cala strone w bok. */
	width: 100%;
	min-width: 0;
	min-height: clamp(17.5rem, 62vw, 26rem);
	border-radius: var(--r-l);
	background: var(--c-zielen-jasna);
}

.mapa__zaslepka {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--s-3);
	height: 100%;
	padding: var(--s-5);
	text-align: center;
}

.mapa__pin {
	width: 2rem;
	height: 2rem;
	color: var(--c-miod-jasny);
}

.mapa__akcje {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}

.mapa__nota {
	color: var(--c-krem-70);
	font-size: var(--fs-drobny);
}

.mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* formularz */
.formularz {
	--c-fokus: var(--c-zielen);
	align-self: start;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	border-radius: var(--r-l);
	background: var(--c-krem);
	color: var(--c-tekst);
	box-shadow: var(--cien-m);
}

.formularz__miod {
	position: absolute;
	left: -9999px;
}

.formularz__postep {
	display: none;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
}

.js .formularz__postep {
	display: grid;
}

.formularz__postep-tekst {
	color: var(--c-tekst-2);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.formularz__postep-pasek {
	height: 0.4rem;
	overflow: hidden;
	border-radius: var(--r-pelny);
	background: var(--c-linia);
}

.formularz__postep-pasek span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--c-zielen);
	transform: scaleX(0.5);
	transform-origin: left center;
	transition: transform 0.5s var(--ease-out);
}

.formularz__krok {
	display: grid;
	gap: var(--s-5);
}

.formularz__krok + .formularz__krok {
	margin-top: var(--s-6);
}

.js .formularz__krok + .formularz__krok {
	margin-top: 0;
}

.js .formularz__krok:not(.is-active) {
	display: none;
}

.formularz__tytul {
	padding: 0;
	color: var(--c-zielen);
	margin-bottom: var(--s-4);
	font: 400 clamp(1.9rem, 1.6rem + 1vw, 2.4rem) / 1.1 var(--f-naglowki);
}

.kafelki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--s-2);
}

.kafelek {
	position: relative;
	display: block;
	cursor: pointer;
}

.kafelek input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.kafelek span {
	display: grid;
	place-items: center;
	min-height: 3.25rem;
	padding: 0.6rem 0.85rem;
	border: 1.5px solid var(--c-linia-pola);
	border-radius: var(--r-m);
	background: var(--c-papier);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}

.kafelek input:checked + span {
	border-color: var(--c-zielen);
	background: var(--c-zielen);
	color: var(--c-krem);
}

.kafelek input:focus-visible + span {
	outline: 3px solid var(--c-fokus);
	outline-offset: 3px;
}

.kafelek:active span {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.kafelek:hover input:not(:checked) + span { border-color: var(--c-zielen); }
}

.pola {
	display: grid;
	gap: var(--s-4);
}

/* daty obok siebie i trzy liczby w jednym wierszu takze na telefonie: krotszy pierwszy krok */
.pola--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
}

.pola--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-3);
	align-items: end;
}

.pole {
	min-width: 0;
}

/* iOS: pole daty ma wlasna minimalna szerokosc i wychodzi poza formularz, a puste jest calkiem biale */
.pole input[type="date"] {
	display: block;
	min-width: 0;
	max-width: 100%;
	padding-inline: 0.65rem;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
}

.pole input[type="date"]::-webkit-date-and-time-value {
	min-height: 1.5em;
	text-align: left;
}

@supports (-webkit-touch-callout: none) {
	.pole input[type="date"].jest-puste::before {
		content: attr(data-podpowiedz);
		color: var(--c-podpowiedz);
	}
}

.pole label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--fs-maly);
	font-weight: 600;
}

.pole input,
.pole textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.95rem;
	border: 1.5px solid var(--c-linia-pola);
	border-radius: var(--r-s);
	background: var(--c-papier);
	transition: border-color 0.2s ease;
}

.pole textarea {
	resize: vertical;
}

.pole input::placeholder,
.pole textarea::placeholder {
	color: var(--c-podpowiedz);
}

.pole input:focus-visible,
.pole textarea:focus-visible {
	border-color: var(--c-zielen);
	outline-offset: 1px;
}

.pole.ma-blad input,
.pole.ma-blad textarea {
	border-color: var(--c-bordo);
}

.pole__blad {
	margin-top: 0.35rem;
	color: var(--c-bordo);
	font-size: var(--fs-drobny);
	font-weight: 600;
}

.pole .zgoda {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	margin-bottom: 0;
	font-weight: 500;
	cursor: pointer;
}

.pole .zgoda input {
	flex: none;
	width: 1.375rem;
	min-height: 0;
	height: 1.375rem;
	margin: 0.15rem 0 0;
	padding: 0;
	accent-color: var(--c-zielen);
}

.zgoda a {
	color: var(--c-zielen);
	font-weight: 700;
}

.formularz__nawigacja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-3);
}

html:not(.js) [data-dalej],
html:not(.js) [data-wstecz] {
	display: none;
}

.formularz__komunikat {
	margin-top: var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-s);
	background: var(--c-bordo-tlo);
	color: var(--c-bordo-ciemne);
	font-size: var(--fs-maly);
	font-weight: 600;
}

.formularz__sukces {
	display: grid;
	justify-items: center;
	gap: var(--s-4);
	padding-block: var(--s-6);
	text-align: center;
}

.formularz__sukces[hidden] {
	display: none;
}

.formularz__sukces-znak {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--c-zielen);
	color: var(--c-krem);
	font-size: 1.5rem;
}

.formularz__sukces a {
	color: var(--c-bordo);
	font-weight: 700;
}

@media (min-width: 30em) {
	.pola--2,
	.pola--3 { gap: var(--s-4); }
}

@media (min-width: 62em) {
	.kontakt__siatka {
		grid-template-columns: 1fr 1.1fr;
		gap: var(--s-8);
		align-items: start;
	}
}

/* 6. STOPKA ---------------------------------------------------------------- */
.stopka {
	--c-fokus: var(--c-krem);
	padding-block: var(--s-7) 6.5rem;
	background: var(--c-zielen-ciemna);
	color: var(--c-krem);
	font-size: var(--fs-maly);
}

.stopka__siatka {
	display: grid;
	gap: var(--s-6);
	justify-items: start;
}

.stopka a.stopka__logo {
	display: block;
	width: 16rem;
	max-width: 100%;
}

.stopka__logo .znak {
	width: 100%;
}

/* Telefon: logo rozciaga sie na cala szerokosc tresci i stoi na srodku, zeby haslo pod nazwa bylo czytelne. */
@media (max-width: 47.99em) {
	.stopka a.stopka__logo {
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}
}

.stopka__menu,
.stopka__zewnetrzne,
.stopka__linki {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
}

.stopka a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
	opacity: 0.82;
	transition: opacity 0.2s ease;
}

.stopka a.stopka__logo,
.stopka a.stopka__logo:hover {
	opacity: 1;
}

.stopka__menu a {
	font-weight: 600;
}

/* kolumny linkow do podstron (gdy w panelu nie ma menu stopki) */
.stopka__kolumny {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5) var(--s-6);
	width: 100%;
}

.stopka__kolumna:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.stopka__tytul {
	color: var(--c-miod-jasny);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.stopka__tytul:not(:has(a)) {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

.stopka__tytul a,
.stopka a[aria-current] {
	opacity: 1;
}

.stopka a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.stopka__lista a {
	padding-block: var(--s-2);
	line-height: 1.35;
}

.stopka a:active {
	opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
	.stopka a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
}

.stopka__dol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-5);
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-linia-jasna);
	color: var(--c-krem-82);
}

.stopka__linki li {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.stopka__linki a {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

@media (min-width: 62em) {
	.stopka {
		padding-bottom: var(--s-6);
	}

	.stopka__siatka {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--s-7);
	}

	.stopka__siatka:has(.stopka__kolumny) {
		align-items: start;
		gap: var(--s-8);
	}

	.stopka__nav {
		justify-self: center;
	}

	.stopka__kolumny {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-6);
		justify-self: stretch;
	}

	.stopka__kolumna:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.stopka__kolumny a,
	.stopka__tytul:not(:has(a)) {
		min-height: 2.25rem;
	}
}

/* staly przycisk "Zadzwon" na telefonie */
.zadzwon {
	position: fixed;
	right: var(--s-4);
	bottom: var(--s-4);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 3.25rem;
	padding: 0.75rem 1.35rem;
	border-radius: var(--r-pelny);
	background: var(--c-bordo);
	color: var(--c-krem);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--cien-m);
	transform: translateY(180%);
	transition: transform 0.4s var(--ease-out);
}

.zadzwon.is-visible {
	transform: none;
}

.zadzwon:active {
	transform: scale(0.97);
}

@media (min-width: 62em) {
	.zadzwon { display: none; }
}

/* podstrony (wersja podstawowa) */
.strona {
	padding-block: 8rem var(--s-sekcja);
}

.tresc-wpisu > * + * {
	margin-top: var(--s-4);
}

.tresc-wpisu h2 {
	margin-top: var(--s-7);
	font-size: var(--fs-h3);
	scroll-margin-top: 6.5rem;
}

.tresc-wpisu h3 {
	margin-top: var(--s-6);
	font-family: var(--f-tekst);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.3;
}

.tresc-wpisu h2 + *,
.tresc-wpisu h3 + * {
	margin-top: var(--s-3);
}

.tresc-wpisu ul,
.tresc-wpisu ol {
	padding-left: 1.3em;
}

.tresc-wpisu ul {
	list-style: disc;
}

.tresc-wpisu ol {
	list-style: decimal;
}

.tresc-wpisu li + li {
	margin-top: var(--s-2);
}

.tresc-wpisu li::marker {
	color: var(--c-bordo);
}

.tresc-wpisu a,
.spis a {
	color: var(--c-zielen);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.tresc-wpisu a:active,
.spis a:active {
	color: var(--c-bordo-ciemne);
}

@media (hover: hover) and (pointer: fine) {
	.tresc-wpisu a:hover,
	.spis a:hover {
		color: var(--c-bordo);
		text-decoration-thickness: 2px;
	}
}

/* dokument: regulamin, polityka */
.dokument__glowka {
	margin-bottom: var(--s-6);
}

.dokument__data {
	margin-top: var(--s-3);
	color: var(--c-tekst-2);
	font-size: var(--fs-maly);
}

.spis {
	margin-bottom: var(--s-7);
	padding: var(--s-5);
	border: 1px solid var(--c-linia);
	border-radius: var(--r-m);
	background: var(--c-papier);
}

.spis__tytul {
	color: var(--c-tekst-2);
	font-size: var(--fs-drobny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.spis__lista {
	margin-top: var(--s-3);
	padding-left: 1.6em;
	list-style: decimal;
}

.spis__lista li {
	padding-block: 0.3rem;
	break-inside: avoid;
}

.spis__lista li::marker {
	color: var(--c-bordo);
	font-weight: 700;
}

.spis a {
	text-decoration: none;
}

@media (min-width: 40em) {
	.spis__lista {
		columns: 2;
		column-gap: var(--s-7);
	}
}

.strona--dokument .tresc-wpisu {
	counter-reset: punkt;
}

.strona--dokument .tresc-wpisu h2 {
	counter-increment: punkt;
}

.strona--dokument .tresc-wpisu h2::before {
	content: counter(punkt) ". ";
	color: var(--c-bordo);
}

/* strzalka powrotu na gore */
.do-gory {
	position: fixed;
	right: var(--s-4);
	/* na telefonie nad przyciskiem "Zadzwon" */
	bottom: calc(var(--s-4) + 3.25rem + var(--s-3));
	z-index: 44;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 2px solid var(--c-krem);
	border-radius: 50%;
	background: var(--c-zielen);
	color: var(--c-krem);
	box-shadow: var(--cien-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	transition: opacity 0.25s ease, transform 0.35s var(--ease-out), background-color 0.2s ease, visibility 0s 0.35s;
}

.do-gory[hidden] {
	display: none;
}

.do-gory.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.do-gory .ikona {
	transition: transform 0.25s var(--ease-out);
}

.do-gory:focus-visible {
	outline-offset: 2px;
	border-radius: 50%;
	box-shadow: 0 0 0 7px var(--c-krem);
}

.do-gory.is-visible:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.do-gory:hover {
		background: var(--c-zielen-jasna);
	}

	.do-gory:hover .ikona {
		transform: translateY(-0.2rem);
	}
}

@media (min-width: 62em) {
	.do-gory {
		right: var(--s-5);
		bottom: var(--s-5);
	}
}

/* MNIEJ RUCHU -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.2s !important;
	}

	.hero__slajd.is-active img {
		animation: none;
	}

	.btn:hover .btn__lapka,
	.karta-grupy:hover .karta-grupy__foto img {
		transform: none;
	}

	.btn__lapka {
		transform: rotate(90deg) !important;
	}
}

/* POPRAWKI: logika i dostepnosc */

/* Bezpiecznik hero: gdy GSAP laduje sie zbyt dlugo, skrypt z <head> (inc/setup.php) dodaje te klase
   i tekst hero jest widoczny bez animacji wejscia. */
html.hero-odkryte [data-hero] {
	opacity: 1;
}

/* Pasek nad menu: link ma cel dotykowy min. 44 px wysokosci bez powiekszania samego paska. */
.pasek__link {
	position: relative;
	display: inline-block;
}

.pasek__link::after {
	content: "";
	position: absolute;
	inset: -0.875rem calc(-1 * var(--s-2));
}

/* Formularz dostaje fokus programowo po kliknieciu "Zapytaj o termin" (tabindex="-1"): bez obrysu calego bloku. */
.formularz:focus,
.formularz:focus-visible {
	outline: none;
}

/* Zgoda w stanie bledu: obrys pola wyboru i znacznik z boku, nie tylko kolor komunikatu. */
.pole--zgoda.ma-blad {
	padding: var(--s-3);
	border-left: 3px solid var(--c-bordo);
	border-radius: var(--r-s);
	background: var(--c-papier);
}

.pole--zgoda.ma-blad .zgoda input {
	outline: 2px solid var(--c-bordo);
	outline-offset: 2px;
}

/* Wyszukiwarka na stronie wynikow (search.php). */
.szukaj {
	display: grid;
	gap: var(--s-3);
	max-width: 40rem;
	margin: 0 auto var(--s-7);
}

.szukaj__btn {
	justify-self: start;
}

@media (min-width: 40em) {
	.szukaj {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

	.szukaj__btn {
		min-height: 3rem;
	}
}