/*
Theme Name:   Hello Elementor Child — W Dolinie Sanu
Theme URI:    https://wdoliniesanu.nexussync.ovh
Description:  Motyw potomny hello-elementor. Odpala akcje hello_elementor_header / hello_elementor_footer, dzięki czemu moduł Themer z EMCP Tools może wstrzyknąć nagłówek i stopkę zbudowane w Elementorze (brak Elementor Pro = brak Theme Buildera). Zawiera też style komponentów, których kontrolki Elementora nie wyrażają: formularze CF7, kafle domków, akordeon FAQ, galeria masonry.
Author:       W Dolinie Sanu
Template:     hello-elementor
Version:      1.1.0
Text Domain:  hello-elementor-child
*/

/* ================================================================== *
 * PALETA — projekt Claude Design „UI mockups for Nexussync"
 *
 * Zrodlo: `O nas.dc.html` i `Strona glowna.dc.html`, sekcja <helmet> oraz
 * style inline kolejnych sekcji. Wartosci przepisane doslownie, nie dobierane.
 *
 * Kanon Advent (pomarancz #ff9933, Palanquin Dark, promien 0, piec cieni)
 * przestal obowiazywac 2026-08-01 — decyzja wlasciciela, pelny rebranding.
 *
 * Stare nazwy zmiennych ZOSTAJA jako aliasy i wskazuja na nowa palete. Dzieki
 * temu ~1900 linii regul napisanych pod poprzedni kanon (strony domkow, FAQ,
 * galeria) przemalowuje sie same, bez dotykania kazdej z osobna.
 * ================================================================== */

:root {
	/* Podstawa */
	--wds-bg: #f4f1ea;         /* tlo strony */
	--wds-bg-jasne: #f7f4ed;   /* naglowki na ciemnym tle */
	--wds-ink: #171c15;        /* naglowki, tekst glowny */
	--wds-ink-2: #3a4137;      /* akapity */
	--wds-muted: #6e7468;      /* podpisy, meta */
	--wds-dark: #1e2a1d;       /* sekcje ciemne, stopka, przyciski */
	--wds-accent: #b5642a;     /* terakota */
	--wds-gold: #c99a5f;       /* zloto — nadtytuly i gwiazdki na ciemnym */
	--wds-sel: #dcd6c6;        /* ::selection */

	/* Wlosowe linie. Projekt nie uzywa ANI JEDNEGO cienia — cala separacja
	 * stoi na obramowaniach o niskiej alfie. */
	--wds-wlos: rgba(23, 28, 21, 0.14);
	--wds-wlos-slaby: rgba(23, 28, 21, 0.1);
	--wds-wlos-mocny: rgba(23, 28, 21, 0.16);
	--wds-wlos-cd: rgba(244, 241, 234, 0.18);
	--wds-wlos-cd-mocny: rgba(244, 241, 234, 0.3);

	/* Tekst na ciemnym tle — projekt operuje alfa, nie osobnymi hexami. */
	--wds-na-cd: rgba(244, 241, 234, 0.82);
	--wds-na-cd-slaby: rgba(244, 241, 234, 0.6);
	--wds-na-cd-meta: rgba(244, 241, 234, 0.5);

	/* Aliasy zgodnosci — poprzednie nazwy, nowe wartosci. */
	--wds-cream: #f4f1ea;
	--wds-beige: #f7f4ed;
	--wds-text: #3a4137;

	/* Padding przycisku. Projekt uzywa trzech rozmiarow:
	 * naglowek 11/22, hero i CTA 16/30, duzy 18/34. */
	--wds-btn-mini: 11px 22px;
	--wds-btn: 16px 30px;
	--wds-btn-maxi: 18px 34px;
}

::selection {
	background: var(--wds-sel);
}

/* ------------------------------------------------------------------ *
 * Przyciski — pigulki
 *
 * Zrodlo: `O nas.dc.html` (naglowek: padding 11/22, radius 999, tlo #1E2A1D,
 * hover #B5642A; CTA: 18/34) oraz `Strona glowna.dc.html` (hero: 16/30,
 * wariant obrysowy 1px rgba(244,241,234,.45)).
 *
 * Roznice wobec poprzedniego kanonu: promien 0 -> 999px, Montserrat 700
 * uppercase ls 1.2px -> Archivo 400 bez uppercase ls 0.03em.
 *
 * !important, bo kontrolki widzetu emituja te wlasciwosci selektorem
 * .elementor-<post> .elementor-element.elementor-element-<id> .elementor-button
 * = (0,4,0), a post-<id>.css laduje sie PO motywie potomnym — przy remisie
 * rozstrzyga kolejnosc plikow, nie my.
 *
 * KOLOR tez idzie z !important, i to jest zmiana wobec poprzedniej wersji.
 * Powod: rebranding jest etapowy. Dokumenty stron domkow, Galerii i Oferty maja
 * pomaranczowe tla przyciskow wpisane na sztywno w kontrolkach i nie zostana
 * przebudowane w tym podejsciu. Bez wymuszenia serwis miesza terakote
 * z pomarancza na sasiadujacych stronach.
 *
 * Wyjatki rozmiarowe (pasek kontaktowy, hero) siedza przy swoich komponentach
 * NIZEJ w tym pliku: ta sama specyficznosc (0,2,0) plus pozniejsza pozycja
 * = wygrywaja. Wariant jasny na ciemnym tle ma wlasna klase `.wds-btn-jasny`.
 * ------------------------------------------------------------------ */

.elementor-element .elementor-button,
.elementor-widget-button .elementor-button {
	padding: var(--wds-btn) !important;
	/* Obramowanie 1px przezroczyste na KAZDYM przycisku, zeby wariant pelny
	 * i obrysowy stojace obok siebie mialy identyczna wysokosc.
	 * border-color BEZ !important — kolor obrysu ma nadal isc z dokumentu. */
	border-width: 1px !important;
	border-style: solid !important;
	border-color: transparent;
	border-radius: 999px !important;
	background-color: var(--wds-dark) !important;
	color: var(--wds-bg) !important;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear;
}

.elementor-element .elementor-button:hover,
.elementor-element .elementor-button:focus-visible {
	background-color: var(--wds-accent) !important;
	color: var(--wds-bg-jasne) !important;
}

/* Wariant jasny — na ciemnym tle (hero, sekcje w ciemnej zieleni).
 * Trzy klasy, zeby pobic (0,2,0) reguly bazowej niezaleznie od kolejnosci. */
.elementor-element.wds-btn-jasny .elementor-button,
.wds-btn-jasny .elementor-button {
	background-color: var(--wds-bg) !important;
	color: var(--wds-ink) !important;
}

.elementor-element.wds-btn-jasny .elementor-button:hover,
.wds-btn-jasny .elementor-button:hover {
	background-color: var(--wds-accent) !important;
	color: var(--wds-bg-jasne) !important;
}

/* Wariant obrysowy na ciemnym tle — projekt: 1px rgba(244,241,234,.45). */
.elementor-element.wds-btn-obrys .elementor-button,
.wds-btn-obrys .elementor-button {
	background-color: transparent !important;
	color: var(--wds-bg) !important;
	border-color: rgba(244, 241, 234, 0.45) !important;
}

.elementor-element.wds-btn-obrys .elementor-button:hover,
.wds-btn-obrys .elementor-button:hover {
	background-color: rgba(244, 241, 234, 0.12) !important;
	color: var(--wds-bg-jasne) !important;
	border-color: rgba(244, 241, 234, 0.45) !important;
}

/* ------------------------------------------------------------------ *
 * Contact Form 7 — karta „Zapytaj o termin"
 * ------------------------------------------------------------------ */

/* Karta formularza ("Zapytaj o termin" na stronach domkow i na /kontakt/)
 * dostawala cien z kontrolki Elementora: 0 5px 20px rgba(0,0,0,.07) — wartosc
 * spoza kanonu. Ujednolicone do cienia karty Adventa (post-816.css, f895e70).
 *
 * !important, bo kontrolka emituje selektor
 * .elementor-<post> .elementor-element.elementor-element-<id> = (0,3,0),
 * a post-<id>.css laduje sie po motywie potomnym. Klasa jest na kontenerze,
 * wiec .wds-form-card.e-con = (0,2,0) — sama nie wystarczy. */
.wds-form-card.e-con {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) !important;
}

.wds-form-card .wpcf7 p {
	margin: 0 0 14px;
}

.wds-form-card label {
	display: block;
	color: var(--wds-text);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
}

.wds-form-card input[type="text"],
.wds-form-card input[type="email"],
.wds-form-card input[type="tel"],
.wds-form-card input[type="date"],
.wds-form-card input[type="number"],
.wds-form-card textarea {
	width: 100%;
	margin-top: 6px;
	padding: 13px 14px;
	color: #000;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	background: #f6f6f6;
	border: 1px solid transparent;
	border-radius: 0;
	transition: border-color 0.3s ease-out, background 0.3s ease-out;
}

.wds-form-card textarea {
	min-height: 110px;
	resize: vertical;
}

.wds-form-card input:focus,
.wds-form-card textarea:focus {
	outline: 0;
	background: #fff;
	border-color: var(--wds-accent);
}

.wds-form-card input[type="submit"] {
	width: 100%;
	padding: var(--wds-btn);
	color: #fff;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	background: var(--wds-accent);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.3s linear, color 0.3s linear;
}

.wds-form-card input[type="submit"]:hover {
	background: #000;
}

.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 8px;
}

/* ------------------------------------------------------------------ *
 * Galeria masonry — wzor powtarzalny, dowolna liczba zdjec
 *
 * Kafle dostaja TYLKO rozpietosc w pionie; kolumne i wiersz dobiera
 * auto-placement w trybie `dense`, ktory cofa sie po wolne miejsca.
 * Cykl 5 kafli: 3,3,3,5,5. Symulacja algorytmu z sekcji 8.5 specyfikacji
 * Grid dla N = 3,7,11,12,16,17,33,36 daje ZERO dziur wewnetrznych,
 * a dolna krawedz jest poszarpana najwyzej o 2 wiersze (176px) — na samym
 * koncu galerii, tuz nad przyciskiem, wiec wyglada to naturalnie.
 *
 * Poprzednia wersja miala jawne pozycje rozpisane dokladnie na 12 kafli
 * (nth-child(1)..(12)). Kazda inna liczba zdjec zostawiala dziury.
 *
 * Kafel niski  = 3*88 + 2*14 = 292px  (kolumna 391px -> 4:3, poziome)
 * Kafel wysoki = 5*88 + 4*14 = 496px  (kolumna 391px -> 3:4, pionowe)
 * Material jest w polowie pionowy, w polowie poziomy, wiec object-fit
 * przycina minimalnie zamiast wycinac srodek z pionu.
 *
 * KAZDA regula na .gallery-item musi miec !important:
 * widget-image-gallery.min.css ustawia
 * `.elementor-image-gallery .gallery-columns-3 .gallery-item{max-width:33.33%}`
 * z ta sama specyficznoscia (0,3,0), a laduje sie PO motywie potomnym.
 * ------------------------------------------------------------------ */

.wds-masonry .elementor-image-gallery {
	max-width: 1200px;
	margin-inline: auto;
}

.wds-masonry .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 88px;
	grid-auto-flow: row dense;
	gap: 14px;
	column-count: auto;
}

.wds-masonry .elementor-image-gallery .gallery-item {
	display: block !important;
	width: auto !important;
	max-width: none !important;   /* Elementor narzuca max-width: 33.33 procent */
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	grid-row: span 3;
}

.wds-masonry .elementor-image-gallery .gallery-item:nth-child(5n + 4),
.wds-masonry .elementor-image-gallery .gallery-item:nth-child(5n) {
	grid-row: span 5;
}

.wds-masonry .elementor-image-gallery .gallery-icon {
	display: block;
	overflow: hidden;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0;
}

.wds-masonry .elementor-image-gallery .gallery-icon > a {
	display: block;
	height: 100%;
}

.wds-masonry .elementor-image-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0 !important;
	transition: transform 0.5s ease-out;
}

.wds-masonry .elementor-image-gallery .gallery-item:hover img {
	transform: scale(1.04);
}

/* Ponizej 1024px kolaz sie nie sklada — dwie kolumny rownych kadrow 4:3.
 * Uklad deterministyczny, plaski dol, zero dziur przy kazdej liczbie zdjec. */
@media (max-width: 1024px) {
	.wds-masonry .elementor-image-gallery {
		max-width: none;
	}

	.wds-masonry .elementor-image-gallery .gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		grid-auto-flow: row;
	}

	.wds-masonry .elementor-image-gallery .gallery-item {
		grid-row: auto !important;
	}

	.wds-masonry .elementor-image-gallery .gallery-icon {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.wds-masonry .elementor-image-gallery .gallery {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wds-masonry .elementor-image-gallery .gallery-item img {
		transition: none;
	}

	.wds-masonry .elementor-image-gallery .gallery-item:hover img {
		transform: none;
	}
}


/* ------------------------------------------------------------------ *
 * Galeria — przelacznik „Pokaz wszystkie" BEZ JS
 *
 * <script> w widzecie html nigdy sie nie wykona (Elementor 4 hydratuje
 * kontenery przez innerHTML), wiec przelacznik to ukryty checkbox
 * + <label> + :has() na kontenerze sekcji — ten sam wzorzec co burger
 * w naglowku, ktory na tej instalacji dziala.
 *
 * Ukryte kafle ZOSTAJA w DOM, wiec lightbox dalej je zbiera:
 * openSlideshow() w lightbox.bundle.js filtruje
 * jQuery('a, [data-elementor-lightbox]') wylacznie po
 * dataset.elementorLightboxSlideshow i po klonach swiper/slick —
 * nie ma warunku :visible ani badania geometrii.
 *
 * Prog jest inny na desktopie (12) niz na telefonie (6), wiec obie
 * reguly — ukrywanie kafli i ukrywanie samego przycisku, gdy nie ma
 * czego rozwijac — MUSZA siedziec w tym samym zapytaniu medialnym.
 * Inaczej galeria o 8 zdjeciach chowa na telefonie kafle 7+, a przycisk
 * do ich pokazania znika (bo nie ma 13. kafla) i nie da sie ich odsloni.
 * ------------------------------------------------------------------ */

.wds-gal-cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wds-gal-toggle {
	margin-top: 28px;
	text-align: center;
}

/* Przycisk przelacznika w kanonie projektu: pigulka, Archivo 14/400, bez
 * wersalikow, obrys wlosowy. Jedyna definicja tego komponentu w pliku —
 * wczesniej byly dwie (adventowa tutaj i kanoniczna przy galerii strony
 * glownej), a wygrywala pozniejsza. Wariant na ciemnym tle: nizej,
 * `.wds-sek-cd .wds-gal-btn`. */
.wds-gal-btn {
	display: inline-block;
	padding: var(--wds-btn);
	border: 1px solid var(--wds-wlos-mocny);
	border-radius: 999px;
	background: transparent;
	color: var(--wds-ink);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear;
}

.wds-gal-btn:hover,
.wds-gal-cb:focus-visible + .wds-gal-btn {
	background: var(--wds-dark);
	border-color: var(--wds-dark);
	color: var(--wds-bg);
}

.wds-gal-cb:focus-visible + .wds-gal-btn {
	outline: 2px solid var(--wds-accent);
	outline-offset: 3px;
}

.wds-galeria:has(.wds-gal-cb:checked) .wds-gal-btn__w,
.wds-galeria:not(:has(.wds-gal-cb:checked)) .wds-gal-btn__m {
	display: none;
}

/* Desktop i tablet: widac 12 kafli. (0,6,0) + !important przebija
 * bazowe display:block !important (0,3,0) z reguly .wds-masonry. */
@media (min-width: 768px) {
	.wds-galeria:not(:has(.wds-gal-cb:checked))
		.elementor-image-gallery .gallery-item:nth-child(n + 13) {
		display: none !important;
	}

	.wds-galeria:not(:has(.elementor-image-gallery .gallery-item:nth-child(13)))
		.wds-gal-toggle {
		display: none;
	}
}

/* Telefon: jedna kolumna, wiec 12 kafli to bardzo dlugi ekran — widac 6. */
@media (max-width: 767px) {
	.wds-galeria:not(:has(.wds-gal-cb:checked))
		.elementor-image-gallery .gallery-item:nth-child(n + 7) {
		display: none !important;
	}

	.wds-galeria:not(:has(.elementor-image-gallery .gallery-item:nth-child(7)))
		.wds-gal-toggle {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Menu sekcji na stronie domku (wzor Advenx)
 *
 * Selektory sa trzystopniowe, bo widget-icon-list.min.css ustawia
 * .elementor-widget .elementor-icon-list-item { padding: 0 } — ta sama
 * specyficznosc co pojedyncza klasa, a arkusz Elementora laduje sie pozniej.
 * Przez to pozycje przez caly czas mialy zerowy padding i zlewaly sie
 * w jedna pomaranczowa plyte.
 * ------------------------------------------------------------------ */

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item {
	padding: 14px 18px;
	/* Kontrolka "odstep miedzy pozycjami" jest w dokumencie ustawiona na 0 i Elementor
	 * emituje z niej padding-block-end: calc(0px) selektorem o specyficznosci 0,5,0.
	 * Odstepy robia tu separatory, wiec dolna wartosc trzeba odzyskac punktowo. */
	padding-block-end: 14px !important;
	background: var(--wds-accent);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	transition: background 0.3s ease-out;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:last-child {
	border-bottom: 0;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:first-child {
	background: #fff;
}

/* Elementor renderuje ikony jako <svg> z atrybutem fill, nie jako <i> z color —
 * bez reguly na fill biala ikona znikala na bialym aktywnym tabie. */
.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:first-child .elementor-icon-list-text,
.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:first-child i {
	color: #000 !important;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:first-child svg {
	fill: #000 !important;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:hover {
	background: #000;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text,
.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:hover i {
	color: #fff !important;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item:hover svg {
	fill: #fff !important;
}

/* Na telefonie pionowa lista zjadalaby pol ekranu i wygladala jak plyta —
 * ta sama lista ustawiona w poziomy pasek pigulek, przewijany palcem. */
@media (max-width: 767px) {
	.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-items {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 2px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-items::-webkit-scrollbar {
		display: none;
	}

	.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item {
		flex: 0 0 auto;
		padding: 10px 16px;
		padding-block-end: 10px !important;
		border-bottom: 0;
		/* Pigulka: projekt uzywa 999px (naglowek, hero, CTA).
		 * uzywana przez wdt-button-size-sm. 999px nie. */
		border-radius: 999px;
		scroll-snap-align: start;
		white-space: nowrap;
	}

	.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text {
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------ *
 * Tabela parametrów — naprzemienne wiersze
 * ------------------------------------------------------------------ */

.wds-parametry table {
	width: 100%;
	/* Bez tego szerokosc min-content komorek (941px) rozpycha kolumne. */
	table-layout: fixed;
	border-collapse: collapse;
}

.wds-parametry td {
	padding: 14px 16px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wds-parametry tr:nth-child(odd) td {
	background: rgba(0, 0, 0, 0.025);
}

.wds-parametry td:first-child {
	width: 45%;
	color: #000;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.wds-parametry td:last-child {
	color: var(--wds-text);
}

/* ------------------------------------------------------------------ *
 * Nawigacja — aktywna pozycja w akcencie
 * ------------------------------------------------------------------ */

.emcp-nav-menu .current-menu-item > a,
.emcp-nav-menu .current_page_item > a {
	color: var(--wds-accent) !important;
}

/* ------------------------------------------------------------------ *
 * Naglowek — rozwijane podmenu i menu mobilne
 *
 * emcp-nav-menu renderuje golą liste WP: nav.emcp-dyn-nav-menu > ul.emcp-dyn-menu
 * > li.menu-item-has-children > ul.sub-menu. Bez ponizszych regul podmenu stoi
 * rozwiniete na stale i rozpycha pasek do ~200px.
 * ------------------------------------------------------------------ */

.emcp-dyn-nav-menu .menu-item-has-children {
	position: relative;
}

.emcp-dyn-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	display: none;
	min-width: 250px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--wds-dark);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.emcp-dyn-nav-menu .menu-item-has-children:hover > .sub-menu,
.emcp-dyn-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.emcp-dyn-nav-menu .sub-menu a {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}

.emcp-dyn-nav-menu .sub-menu a:hover {
	color: var(--wds-accent);
}

/* Trzecie menu w naglowku to pelna plaska lista — wylacznie dla telefonu.
 * Na desktopie ma 45% szerokosci i w kontenerze nowrap scisnelo sie do 0px. */
.wds-menu-mobile {
	display: none !important;
}

.wds-burger {
	display: none;
}

@media (min-width: 1025px) {
	.wds-burger {
		display: none !important;
	}
}

/* Kit Elementora stylizuje kazdy <button> (pomaranczowe tlo, padding 14/26px),
 * wiec te reguly musza byc mocniejsze — inaczej padding zjada cala szerokosc
 * i kreski hamburgera maja 0px. */
.wds-burger .wds-burger-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}

.wds-burger-cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wds-burger .wds-burger-cb:focus-visible + .wds-burger-btn {
	outline: 2px solid var(--wds-accent);
	outline-offset: 2px;
}

/* Kreski byly biale — zostalo po adventowym naglowku #141414. Naglowek projektu
 * jest kremowy (rgba(244,241,234,.9)), wiec bialy hamburger dawal kontrast
 * 1,05:1 i na telefonie po prostu go nie bylo widac (zmierzone 2026-08-01).
 * Ten sam kolor co linki menu — tlo naglowka jest kremowe w obu stanach,
 * takze przy rozwinietym menu, wiec jeden kolor wystarcza. */
.wds-burger .wds-burger-btn span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--wds-ink);
	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.wds-burger .wds-burger-cb:checked + .wds-burger-btn span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.wds-burger .wds-burger-cb:checked + .wds-burger-btn span:nth-child(2) {
	opacity: 0;
}

.wds-burger .wds-burger-cb:checked + .wds-burger-btn span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.wds-header-row {
		flex-wrap: wrap !important;
		align-items: center;
	}

	.wds-menu-lewe,
	.wds-menu-prawe {
		display: none !important;
	}

	.wds-burger {
		display: flex !important;
		width: auto !important;
		flex: 0 0 auto;
	}

	.wds-logo {
		flex: 1 1 auto !important;
		width: auto !important;
		justify-content: center;
	}

	.wds-header-row:has(.wds-burger-cb:checked) .wds-menu-mobile {
		display: block !important;
		width: 100% !important;
		flex: 1 0 100%;
	}

	.wds-menu-mobile .emcp-dyn-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		text-align: left;
	}

	.wds-menu-mobile .emcp-dyn-menu li {
		width: 100%;
	}

	.wds-menu-mobile .emcp-dyn-menu a {
		display: block;
		padding: 12px 4px;
	}
}

/* ------------------------------------------------------------------ *
 * Wiersz tresci na stronie domku — trzy kolumny
 *
 * Elementor poprawnie emituje --width 22/46/28%, ale elementy flex maja
 * domyslnie min-width:auto, wiec tabela parametrow rozpychala srodkowa kolumne
 * do 961px i karta formularza spadala pod spod na cala szerokosc.
 * ------------------------------------------------------------------ */

.wds-kolumny-domku > .e-con-inner > .e-con {
	min-width: 0;
}

/* !important, bo Elementor stylizuje ten kontener selektorem
 * .elementor-71 .elementor-element.elementor-element-bebody001 > .e-con-inner,
 * czyli mocniejszym niz pojedyncza klasa. */
@media (min-width: 1025px) {
	.wds-kolumny-domku > .e-con-inner {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		column-gap: 2% !important;
	}
}

/* Tablet: taby obok tresci, karta formularza pod spodem. Elementor emituje tu
 * --width:100% dla wszystkich trzech, czyli jedna kolumna na cala szerokosc. */
@media (min-width: 768px) and (max-width: 1024px) {
	.wds-kolumny-domku > .e-con-inner {
		column-gap: 3% !important;
		align-items: flex-start !important;
	}

	.wds-kolumny-domku > .e-con-inner > .e-con:nth-child(1) {
		width: 30% !important;
	}

	.wds-kolumny-domku > .e-con-inner > .e-con:nth-child(2) {
		width: 67% !important;
	}
}

/* ------------------------------------------------------------------ *
 * Ikonografia — dwa poziomy wielkosci
 *
 * Rozmiary ikon byly ustawiane per widzet i rozjechaly sie na szesc wartosci
 * (12/13/14/15/16px). Domyslnie obowiazuje teraz 16px dla list w tresci; klasa
 * wds-ikony-drobne schodzi do 13px w miejscach pomocniczych (pasek kontaktowy,
 * stopka, meta w hero podstron). Sterowanie idzie zmienna Elementora, wiec
 * kazda nowa lista wchodzi w rytm bez dodatkowej roboty.
 * ------------------------------------------------------------------ */

/* !important, bo Elementor emituje --e-icon-list-icon-size dla KAZDEGO widzetu
 * z osobna, selektorem .elementor-<post> .elementor-element-<id> — takze wtedy,
 * gdy ustawienia nie ma w dokumencie (wpisuje wowczas domyslne 14px). */
.elementor-widget-icon-list {
	--e-icon-list-icon-size: 16px !important;
}

.wds-ikony-drobne .elementor-widget-icon-list {
	--e-icon-list-icon-size: 13px !important;
}

/* Ikona ma trzymac sie pierwszego wiersza, nie srodka calej pozycji — inaczej
 * przy tekscie lamanym na dwie linie (adres w stopce, wiekszosc pozycji przy
 * 390px) laduje miedzy liniami.
 *
 * Dwa uklady do obsluzenia: pozycja z linkiem ma <a> jako element flex
 * (li > a > span.icon + span.text), pozycja bez linku trzyma spany wprost w <li>.
 * Selektory sa czterostopniowe, bo Elementor ustawia align-self: center na
 * tekscie regula .elementor-widget .elementor-icon-list-item .elementor-icon-list-text,
 * a jego arkusz laduje sie po motywie potomnym. */

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
	align-items: flex-start;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
	display: flex;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon {
	align-self: flex-start;
	/* Wysrodkowanie ikony na PIERWSZYM wierszu: polowa roznicy miedzy wysokoscia
	 * linii a wysokoscia ikony. Wariant w em zostaje jako zapas dla przegladarek
	 * bez jednostki lh. */
	margin-top: 0.42em;
	margin-top: calc((1lh - var(--e-icon-list-icon-size, 16px)) / 2);
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text {
	align-self: flex-start;
}

/* Taby na stronie domku i pasek kontaktowy sa jednowierszowe — tam ikona ma
 * zostac wysrodkowana. */
.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item,
.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
	align-items: center;
}

.wds-taby.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon {
	align-self: center;
	margin-top: 0;
}

.wds-pasek-kontakt .elementor-widget.elementor-widget-icon-list .elementor-icon-list-item,
.wds-pasek-kontakt .elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
	align-items: center;
}

.wds-pasek-kontakt .elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon {
	align-self: center;
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Stopka na telefonie
 *
 * Cztery kolumny stackuja sie tu jedna pod druga, ale wiersz ma gap 0 i zadna
 * kolumna nie ma marginesu — bloki dotykaly sie ("Doba: 16:00-10:00" wchodzila
 * w naglowek "DOMKI"). Kolumny 2-4 maja przy tym padding-left 34px, a pierwsza
 * zero, wiec lewa krawedz byla poszarpana. Zostawaly tez pionowe separatory,
 * bezuzyteczne przy jednej kolumnie.
 *
 * !important, bo Elementor stylizuje te kontenery selektorem
 * .elementor-85 .elementor-element.elementor-element-<id>, a post-85.css laduje
 * sie po motywie potomnym.
 * ------------------------------------------------------------------ */

/* Prog 1024, nie 767: przy tablecie cztery kolumny zawijaja sie na dwa rzedy
 * i skleja sie tak samo jak na telefonie. Separatory sa dekoracja ukladu
 * wielokolumnowego — po zawinieciu zostawialyby wiszaca kreske na koncu rzedu. */
@media (max-width: 1024px) {
	.wds-stopka .e-con-inner {
		row-gap: 32px !important;
		column-gap: 32px !important;
	}

	.wds-stopka .e-con-inner > .e-con {
		padding-inline: 0 !important;
		border-right: 0 !important;
	}
}

/* Na tablecie cztery kolumny sie nie miesza, a zdanie sie na zawijanie dawalo
 * cztery pelnowymiarowe rzedy. Jawne dwie kolumny trzymaja stopke zwarta. */
@media (min-width: 768px) and (max-width: 1024px) {
	.wds-stopka .e-con-inner > .e-con {
		width: calc(50% - 16px) !important;
		flex: 0 0 calc(50% - 16px) !important;
	}
}

@media (max-width: 767px) {
	/* Tlo jest tu kadrowane do waskiego pionowego wycinka, ktory trafia na jasny
	 * fragment zdjecia — przykrycie dobrane pod desktop (62%) przestaje wystarczac
	 * i bialy tekst ginie na trawie. */
	.wds-stopka::before {
		opacity: 0.78 !important;
	}

	/* Wysrodkowanie stopki na telefonie. Cztery kolumny stoja tu jedna pod druga
	 * na calej szerokosci, a tresc w kazdej jest krotka — do lewej wygladalo
	 * to jak rwana kolumna tekstu. `text-align` nie wystarcza: pozycje list
	 * ikonowych to wiersze flex, logo to blok, a kolumny maja wlasne
	 * `align-items`, wiec kazdy z tych przypadkow trzeba nazwac osobno. */
	.wds-stopka .e-con-inner > .e-con {
		align-items: center !important;
		text-align: center;
	}

	.wds-stopka .elementor-icon-list-items {
		align-items: center;
	}

	.wds-stopka .elementor-icon-list-item,
	.wds-stopka .elementor-icon-list-item a {
		justify-content: center;
	}

	.wds-stopka .elementor-widget-image img {
		margin-inline: auto;
	}

	/* Wiersz z prawami autorskimi jest osobnym kontenerem, poza `.e-con-inner`.
	 * Sam `text-align` tu nie wystarczyl: widzet ma 276px w kontenerze 357px
	 * i stoi przy lewej krawedzi, wiec tekst wypelnia go w calosci i nie ma
	 * czego srodkowac (zmierzone). Trzeba wysrodkowac SAM WIDZET — `align-items`
	 * dla kolumny, `justify-content` dla wiersza, bo kierunek zalezy od ustawien
	 * kontenera w dokumencie. */
	.wds-stopka > .e-con:last-child {
		align-items: center !important;
		justify-content: center !important;
	}

	.wds-stopka > .e-con:last-child,
	.wds-stopka > .e-con:last-child .elementor-widget-text-editor,
	.wds-stopka > .e-con:last-child p {
		text-align: center;
	}
}

/* ------------------------------------------------------------------ *
 * Lista cech — plaski komponent w kanonie Advent
 *
 * Uzywany w dwoch miejscach: "Okolica" na stronie glownej (dok. 11)
 * i "Udogodnienia" na stronach domkow (dok. 71-74).
 *
 * Wzorzec: .dtdr-listings-features-box-container.dtdr-no-column ze scrapa
 * (wedesigntech-directory-addon/assets/css/modules-singlepage.css l.501-560) —
 * bez tla, bez obramowania, bez cienia, bez zaokraglen. Metryka ikony
 * z wariantu type3 (l.597-600), czyli tego, ktory Advent renderuje FONTEM
 * ikon zamiast PNG-iem: font-size 16px, margin-right 10px, kolor #ff9933
 * z inline CSS customizera. Dokladnie nasza sytuacja — dlatego icon_color
 * w dokumentach zostaje nietkniety.
 *
 * Poprzednia wersja robila z tego biale kafle (radius 12px, obramowanie, cien,
 * hover -2px, ikona w pomaranczowym kolku 38px). Zadna z tych wartosci nie
 * wystepuje w Advent — patrz skill advent-kanon, sekcja "Antywzorce".
 *
 * Prefiks jest trzyklasowy, bo widget-icon-list.min.css zeruje padding pozycji
 * selektorem .elementor-widget .elementor-icon-list-item (0,2,0), a jego arkusz
 * laduje sie PO motywie potomnym.
 * ------------------------------------------------------------------ */

/* Domyslnie jedna kolumna — listy domkow siedza w kolumnie 30% i tam plaski
 * flex-wrap Adventa i tak degeneruje sie do pionu. "Okolica" nadpisuje to
 * nizej na display:contents. */
.wds-pigulki.elementor-widget.elementor-widget-icon-list .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* (0,4,0) — bije .elementor-widget .elementor-icon-list-item{padding:0} (0,2,0).
 *
 * padding-block-end i margin-block-start MUSZA miec !important: kontrolka
 * "odstep miedzy pozycjami" (space_between 11px w dok. 71-74, 12px w dok. 11)
 * emituje je selektorem
 * .elementor-<post> .elementor-element.elementor-element-<id>
 *   .elementor-icon-list-items:not(.elementor-inline-items)
 *   .elementor-icon-list-item:not(:last-child)
 * czyli (0,7,0) — poza zasiegiem jakiejkolwiek kombinacji klas motywu.
 * Odstepy robi gap siatki, wiec te wartosci musza wrocic do zera.
 *
 * gap 10px = margin-right z Adventa (l.526 i l.599).
 *
 * Hover swiadomie usuniety: pozycje NIE sa linkami (<li> zawiera dwa <span>,
 * zadnego <a>), wiec reakcja na kursor obiecywala klikalnosc, ktorej nie ma.
 * Advent w plaskiej liscie tez nie ma hoveru. */
.wds-pigulki.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item {
	gap: 10px;
	padding: 0;
	padding-block-end: 0 !important;
	margin-block-start: 0 !important;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Zdjecie kolistego badge'a. (0,5,0) — musi przebic DWIE reguly naraz: bazowa
 * .elementor-widget .elementor-icon-list-item .elementor-icon-list-icon (0,3,0)
 * oraz wlasna regule motywu z sekcji "Ikonografia" (0,4,0).
 *
 * align-self i margin-top sa tu SWIADOMIE pominiete: niech zadziala regula
 * globalna, ktora centruje ikone na PIERWSZYM wierszu tekstu. W kaflu ikona
 * stala na osi calego kafla, ale plaska pozycja typu "Balia ogrodowa
 * (dodatkowo platna)" lamie sie w kolumnie 30% na dwie linie i wysrodkowanie
 * wrzucaloby ikone miedzy wiersze. */
.wds-pigulki.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
}

/* widget-icon-list.min.css daje svg prawy margines zmienna
 * --e-icon-list-icon-margin. Odstep ikona-tekst robi teraz gap pozycji. */
.wds-pigulki.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg {
	margin: 0;
}

/* (0,5,0) — dwie rzeczy naraz:
 *  - padding-inline-start bije .elementor-widget .elementor-icon-list-icon
 *    + .elementor-icon-list-text{padding-inline-start:5px} (0,2,0),
 *  - color bije kontrolke text_color (0,4,0).
 *
 * Kolor i grubosc wracaja do wartosci Adventa: --wdtBodyTxtColor #555555
 * i font-weight 400 (.dtdr-listings-features-box-item>div, l.522-527).
 * #1F1F1F/500 bylo wymyslone pod bialy kafel; bez kafla tlem jest krem #FCFAEE
 * albo bez #F2EFDF, na ktorych #555 daje ok. 6,1:1, czyli nadal AA.
 *
 * line-height 1.5 zamiast adventowego "normal": tam pozycje sa jednowierszowe,
 * u nas czesc lamie sie na dwie linie i 1.2 sklejaloby wiersze.
 *
 * min-width:0 — pulapka flexboxa: bez tego najdluzsza pozycja rozpycha
 * kolumne siatki "Okolicy". */
.wds-pigulki.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text {
	min-width: 0;
	padding-inline-start: 0;
	color: var(--wds-text);
	font-weight: 400;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Udogodnienia na stronach domkow (dok. 71-74, kontenery *udo001)
 *
 * Arytmetyka byla bledna: 30% + 30% + 34% = 94%, ale gap 40px dochodzi
 * w pikselach. Przy szerokosci wewnetrznej ponizej ok. 1334px (okno ok.
 * 1025-1374px) suma przekraczala 100% i kolumna "Dlaczego ten domek?" spadala
 * pod spod. Gap w procentach skaluje sie razem z kolumnami:
 * 30+30+34+2+2 = 98% przy kazdej szerokosci.
 *
 * Te kontenery sa boxed, wiec maja .e-con-inner i to on jest flexboxem.
 * ------------------------------------------------------------------ */

.wds-udogodnienia.e-con > .e-con-inner {
	column-gap: 2%;
	/* Po zawinieciu na tablecie 40px to za malo miedzy blokami. */
	row-gap: 36px;
}

/* Pulapka flexboxa: bez min-width:0 najdluzsza pozycja listy rozpycha kolumne
 * ponad zadeklarowane 30% i znowu wyrzuca trzecia pod spod. */
.wds-udogodnienia > .e-con-inner > .e-con {
	min-width: 0;
}

/* Naglowki trzech kolumn. (0,5,0), bo font-size z kontrolki leci selektorem
 * .elementor-71 .elementor-element.elementor-element-beudo003
 * .elementor-heading-title = (0,4,0). Jedna regula zamiast dwunastu patchy. */
.wds-udogodnienia .e-con .elementor-widget.elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-bottom: 14px;
	font-size: 24px;
	line-height: 1.25;
}

.wds-udogodnienia .e-con .elementor-widget.elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 42px;
	height: 3px;
	background: var(--wds-accent);
}

/* Trzecia kolumna jako karta w kanonie Advent.
 *
 * Wzorzec: boczna karta "Book A Trip" ze scrapa, uploads/elementor/css/
 * post-816.css, element f895e70 — background #FFFFFF, box-shadow
 * 0 0 10px 0 rgba(0,0,0,.2), padding 40px, BEZ zaokraglenia i BEZ obramowania.
 * To jedyna karta w calym Advent.
 *
 * Pomaranczowa krawedz gorna 4px znika: w scrapie nie ma ani jednej karty
 * z akcentem na krawedzi. Akcent w tej kolumnie niosa pasek ::after pod
 * naglowkiem i pomaranczowy przycisk. Radius 16px i cien 0 12px 34px byly
 * wymyslone od zera — Advent nie ma takiego cienia w ogole.
 *
 * Kontener *udo020 jest e-con-full — nie ma .e-con-inner, wiec padding
 * i row-gap ida wprost na .e-con. row-gap 24px zamiast adventowych 40px:
 * tam karta jest pelnowymiarowym sidebarem, u nas kolumna 34% z trzema
 * widzetami. */
.wds-udo-karta.e-con {
	row-gap: 24px;
	padding: 40px;
	background: #fff;
	border-top: 0;
	border-radius: 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	transition: background 0.3s linear, box-shadow 0.3s linear;
}

@media (max-width: 767px) {
	.wds-udo-karta.e-con {
		padding: 30px 24px;
	}
}

.wds-udo-karta .elementor-widget-text-editor {
	line-height: 1.8;
}

/* CTA na pelna szerokosc karty. Typografia i ksztalt ida z globalnej reguly
 * przycisku (sekcja "Przyciski — kanon Advent"). */
.wds-udo-karta .elementor-widget.elementor-widget-button .elementor-button {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Sekcje tekstowe na stronach domkow (dok. 71-74, kontenery *op0000*)
 *
 * Kazda to boxed/column: jeden h2 + jeden text-editor, naprzemienne tla
 * #F2EFDF / #FCFAEE. Przy 1580px wiersz mial ok. 200 znakow — oko gubi poczatek
 * nastepnej linii. Stad zarzut "nudne, bez atrakcyjnej formy".
 *
 * Kontener jest boxed, wiec .e-con-inner ISTNIEJE, a naglowek, text-editor
 * i dolozony widzet obrazu sa jego bezposrednimi dziecmi — wystarczy zrobic
 * z .e-con-inner siatke. Zaden dodatkowy kontener nie jest potrzebny.
 * ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.wds-tekst.e-con > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: 60px;
		align-items: start;
	}

	.wds-tekst.e-con > .e-con-inner > .elementor-widget-heading {
		grid-column: 1;
		grid-row: 1;
	}

	.wds-tekst.e-con > .e-con-inner > .elementor-widget-text-editor {
		grid-column: 1;
		grid-row: 2;
	}

	.wds-tekst.e-con > .e-con-inner > .elementor-widget-image {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: stretch;
	}

	/* Naprzemiennosc: co druga sekcja ma zdjecie po lewej. Kolejnosc w DOM
	 * zostaje nietknieta, wiec czytnik ekranu dalej dostaje naglowek przed
	 * trescia — przestawiamy wylacznie komorki siatki.
	 *
	 * Proporcje trzeba odwrocic razem z kolumnami, inaczej w odwroconej sekcji
	 * szersza (6fr) przypada zdjeciu, a tekst sciska sie do 5fr. Zmierzone:
	 * 731px zdjecia przy 609px w sekcjach nieodwroconych. */
	.wds-tekst--odwrocony.e-con > .e-con-inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.wds-tekst--odwrocony.e-con > .e-con-inner > .elementor-widget-heading,
	.wds-tekst--odwrocony.e-con > .e-con-inner > .elementor-widget-text-editor {
		grid-column: 2;
	}

	.wds-tekst--odwrocony.e-con > .e-con-inner > .elementor-widget-image {
		grid-column: 1;
	}
}

/* Kreska akcentu nad naglowkiem zastepuje nadtytul — nadtytulu nie ma
 * w dokumencie, a wpisywanie polskiej frazy w content:"" wyprowadziloby tresc
 * poza edytor i poza tlumaczenie. */
.wds-tekst .elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-top: 26px;
}

.wds-tekst .elementor-widget-heading .elementor-heading-title::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 56px;
	height: 4px;
	background: var(--wds-accent);
}

/* Miara tekstu. 68ch to okolice optimum czytelnosci; kolumna 6/11 z 1580px daje
 * ok. 830px, czyli ok. 105 znakow — limit jest potrzebny nawet w siatce. */
.wds-tekst .elementor-widget-text-editor {
	max-width: 68ch;
	line-height: 1.9;
}

.wds-tekst .elementor-widget-text-editor > p:first-child {
	color: #3a3a3a;
	font-size: 1.0625em;
}

.wds-tekst .elementor-widget-text-editor > p + p {
	margin-top: 1.1em;
}

.wds-tekst .elementor-widget-image img {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 1024px) {
	.wds-tekst .elementor-widget-heading {
		margin-bottom: 8px;
	}

	.wds-tekst .elementor-widget-image {
		margin-top: 26px;
	}

	.wds-tekst .elementor-widget-image img {
		max-height: 320px;
	}
}

/* ------------------------------------------------------------------ *
 * Naglowek — wspolna os obu pasow
 *
 * hd000001 i hd000010 maja content_width:"full", wiec w HTML NIE MA
 * .e-con-inner — tresc jest bezposrednim dzieckiem .e-con. Zawartosci nie da
 * sie wiec zamknac w wewnetrznym pudelku bez zmiany struktury dokumentu;
 * robimy to marginesem swietlnym w paddingu. Zaleta: ciemne tlo zostaje
 * pelnoekranowe, a przy 1920px menu przestaje przywierac do krawedzi ekranu.
 *
 * 1580px = --container-max-width z kitu Elementora (post-4.css), czyli
 * szerokosc KAZDEJ sekcji boxed na tej stronie. Naglowek dostaje dokladnie
 * te sama os co hero, FAQ i stopka.
 * ------------------------------------------------------------------ */

:root {
	/* Rowne kitowi Elementora (post-4.css --container-max-width). Projekt
	 * Claude Design zwezil kontener z 1580px do 1340px, wiec naglowek idzie
	 * za nim — inaczej menu wisialoby poza osia sekcji. */
	--wds-header-max: 1340px;
	--wds-header-pad: 48px;
	/* Wartosc awaryjna dla scroll-margin-top; JS nadpisuje ja zmierzona. */
	--wds-header-h: 96px;
	/* Jeden rytm dla calego paska: gap wiersza (logo | menu | CTA) ORAZ gap
	 * WEWNATRZ list menu. Dwa menu WP w dwoch kontenerach daly dwa zrodla
	 * odstepu — 16,875px z gap:1.25em wtyczki emcp-tools i 32px z gapu wiersza. */
	--wds-nav-gap: 32px;
}

/* (0,2,0) — .e-con{padding-inline-*:var(--padding-inline-*)} to (0,1,0).
 * Nadpisujemy WLASCIWOSC, nie zmienna, wiec emitowane z (0,3,0)
 * --padding-left:50px nie przeszkadza. */
.wds-pasek-kontakt.e-con,
.wds-header-row.e-con {
	padding-inline: max(var(--wds-header-pad), calc((100% - var(--wds-header-max)) / 2));
}

/* Menu maja docisnac sie do logo, nie do krawedzi. Wlasciwa robote robi
 * flex_justify_content kontenerow (patch w dokumencie); ponizsze jest
 * ubezpieczeniem, gdyby ul.emcp-dyn-menu kiedys zajal pelna szerokosc kolumny.
 * emcp_align nie pomoze — emituje text-align, a lista jest flexem. */
.wds-menu-lewe .emcp-dyn-nav-menu .emcp-dyn-menu {
	justify-content: flex-end;
}

.wds-menu-prawe .emcp-dyn-nav-menu .emcp-dyn-menu {
	justify-content: flex-start;
}

/* Ponizej 1025px pasek kontaktowy jest ukryty klasami Elementora, a menu boczne
 * znikaja — zostaje burger i logo, wiec margines swietlny tylko by szkodzil. */
@media (max-width: 1024px) {
	.wds-header-row.e-con {
		padding-inline: 30px;
	}
}

@media (max-width: 767px) {
	.wds-header-row.e-con {
		padding-inline: 18px;
	}
}

/* ------------------------------------------------------------------ *
 * Naglowek przyklejony i chowany przy przewijaniu
 *
 * position:sticky musi siedziec na WSPOLNYM rodzicu obu pasow, czyli na
 * kontenerze dokumentu .elementor-84. Gdyby usiadl na samym hd000010, jego
 * blokiem zawierajacym bylby ten sam .elementor-84 o wysokosci naglowka —
 * element nie mialby po czym sie przesuwac i przyklejenie nie zadzialaloby.
 *
 * Sprawdzone: .elementor-84 jest bezposrednim dzieckiem <body> na kazdej
 * podstronie, a zaden przodek nie ma overflow innego niz visible.
 *
 * Selektor idzie po :has(), nie po numerze dokumentu, zeby przetrwal
 * ewentualna zmiane id szablonu naglowka.
 * ------------------------------------------------------------------ */

body > .elementor:has(> .wds-header-row) {
	position: sticky;
	top: 0;
	z-index: 900;
	transition: transform 0.32s ease-out;
}

body > .elementor:has(> .wds-header-row).wds-header--hidden {
	transform: translateY(-100%);
}

/* Pasek kontaktowy zwija sie po odjechaniu od gory, zeby przyklejony naglowek
 * byl smukly. Na tablecie i telefonie jest ukryty klasami elementor-hidden-*,
 * wiec regula dotyczy w praktyce tylko desktopu. */
body > .elementor > .wds-pasek-kontakt {
	max-height: 80px;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out;
}

body > .elementor.wds-header--scrolled > .wds-pasek-kontakt {
	max-height: 0;
	padding-block: 0;
	opacity: 0;
}

/* Kotwice musza zatrzymac sie POD przyklejonym paskiem. --wds-header-h ustawia
 * JS na realnej wysokosci hd000010 (bez paska kontaktowego, bo ten przy scrollu
 * jest juz zwiniety). */
#domki,
#informacje,
#udogodnienia,
#galeria,
#galeria-nav,
#bear,
#wolf,
#lynx,
#strix,
#okolica,
#warunki,
#lokalizacja,
#rezerwacja,
#formularz,
#content {
	scroll-margin-top: calc(var(--wds-header-h, 96px) + 16px);
}

/* Otwarte menu mobilne w przyklejonym naglowku nie moze urosnac ponad ekran —
 * bez tego przy 390px lista pozycji wychodzi poza widok i nie da sie do niej
 * doscrollowac, bo naglowek jest sticky. */
@media (max-width: 1024px) {
	body > .elementor:has(.wds-burger-cb:checked) > .wds-header-row {
		max-height: calc(100vh - 8px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	body > .elementor:has(> .wds-header-row),
	body > .elementor > .wds-pasek-kontakt {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Podpis gospodarza na stronie „O nas"
 *
 * Stara strona konczyla sie osobistym zaproszeniem podpisanym imiennie —
 * na nowej tego nie bylo. Wartosci z kanonu Advent: nazwisko jak H6
 * (Palanquin Dark 700, 20px), funkcja jak tekst (Montserrat 400, #555555).
 * ------------------------------------------------------------------ */

.wds-podpis {
	margin-top: 26px;
}

.wds-podpis strong {
	display: block;
	margin-top: 14px;
	color: #000000;
	font-family: Newsreader, Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.34;
}

.wds-podpis span {
	display: block;
	color: var(--wds-text);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
}


/* ------------------------------------------------------------------ *
 * Nawigacja kotwicami na stronie /galeria
 *
 * Ta sama forma co przycisk „Pokaz wszystkie" — wariant obrysowy z base.css
 * l.689-697 (Montserrat 700 / 14px / uppercase / 1.2px / radius 0 /
 * 1px solid currentColor), zeby na stronie byl jeden jezyk ksztaltu.
 * `.wds-taby` sie tu nie nadaje: to pionowe pomaranczowe menu podstron domku.
 *
 * Selektory sa trzystopniowe, bo widget-icon-list.min.css ustawia
 * `.elementor-widget .elementor-icon-list-item { padding: 0 }` z ta sama
 * specyficznoscia, a laduje sie PO motywie potomnym.
 * ------------------------------------------------------------------ */

.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item {
	padding: 0 !important;
}

.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--wds-btn);
	border: 1px solid currentColor;
	color: var(--wds-accent);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	transition: all 0.3s linear 0s;
}

.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a:hover {
	background: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* Ikona renderuje sie jako <svg fill>, nie <i color> — sam `color` nic nie da. */
.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon i {
	color: currentColor;
	font-size: 16px;
}

@media (max-width: 767px) {
	.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item > a {
		padding: var(--wds-btn-mini);
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Cennik na stronie /oferta
 *
 * .wds-parametry sie tu nie nada — tamta tabela jest dwukolumnowa
 * (td:first-child { width: 45% }), a cennik ma szesc kolumn — piec danych
 * plus kolumna akcji z przyciskiem prowadzacym na strone domku (2026-08-05).
 * Wartosci z kanonu Claude Design: Archivo 14px, tekst --wds-text, naglowki #000000,
 * obramowanie rgba(0,0,0,.08), zero zaokraglen i cieni.
 * ------------------------------------------------------------------ */

.wds-cennik-box.elementor-widget {
	/* Elementor ustawia .elementor-element { max-width: 100% } i laduje sie PO
	 * motywie potomnym — przy rownej specyficznosci wygrywa. Stad !important. */
	width: 100%;
	/* 900px starczalo na piec kolumn. Szosta (przycisk) wymaga zapasu —
	 * kontener strony ma 1340px, wiec 1100px nadal miesci sie z marginesem. */
	max-width: 1100px !important;
	margin-inline: auto;
}

.wds-cennik {
	width: 100%;
	/* Bez tego szerokosc min-content komorek rozpycha kontener — ta sama
	 * pulapka co przy tabeli parametrow na stronie domku. */
	table-layout: fixed;
	border-collapse: collapse;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
}

.wds-cennik th {
	padding: 14px 16px;
	border-bottom: 2px solid var(--wds-accent);
	color: #000000;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-align: left;
	text-transform: uppercase;
}

.wds-cennik td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--wds-text);
}

.wds-cennik tbody tr:nth-child(odd) td {
	background: rgba(0, 0, 0, 0.025);
}

/* table-layout: fixed dzieli reszte po rowno, a przy szesciu kolumnach rowny
 * podzial nie starcza ani na przycisk, ani na naglowek CENA ZA DOBE.
 * Stad szerokosci jawne dla wszystkich kolumn, nie tylko pierwszej. */
.wds-cennik th:nth-child(1), .wds-cennik td:nth-child(1) { width: 27%; }
.wds-cennik th:nth-child(2), .wds-cennik td:nth-child(2) { width: 8%; }
.wds-cennik th:nth-child(3), .wds-cennik td:nth-child(3) { width: 12.5%; }
.wds-cennik th:nth-child(4), .wds-cennik td:nth-child(4) { width: 16.5%; }
.wds-cennik th:nth-child(5), .wds-cennik td:nth-child(5) { width: 15.5%; }
.wds-cennik th:nth-child(6), .wds-cennik td:nth-child(6) { width: 20.5%; }

.wds-cennik td:first-child {
	color: #000000;
	font-weight: 700;
}

.wds-cennik td:nth-child(5) {
	color: var(--wds-accent);
	font-weight: 700;
	white-space: nowrap;
}

/* Kolumna akcji — ten sam przycisk co pod opisem domku, w wariancie
 * naglowkowym z kanonu (11px 22px), zeby nie rozpychac wierszy.
 *
 * Tlo, promien, obramowanie, font i hover NIE sa tu powtorzone: link ma klase
 * .elementor-button i siedzi w widzecie html, wiec lapie sie na globalna regule
 * z gory tego pliku (.elementor-element .elementor-button). Jedno zrodlo prawdy.
 * Nadpisania musza miec !important i co najmniej (0,2,0) — tamta regula tyle ma. */
.wds-cennik .wds-cennik-btn.elementor-button {
	padding: var(--wds-btn-mini) !important;
	white-space: nowrap;
}

/* Bez tego strzalka wychodzi czarna. frontend.min.css nadaje ikonie tylko
 * wysokosc, a bialy fill przycisku w bloku opisowym idzie z jego wlasnej reguly
 * w post-219.css — surowy link w widzecie html takiej reguly nie ma. */
.wds-cennik .wds-cennik-btn .e-font-icon-svg {
	fill: currentColor;
}

.wds-cennik td.wds-cennik-akcja {
	padding-block: 10px;
	padding-inline: 12px;
	text-align: right;
}

.wds-cennik-nota {
	margin-top: 18px;
	color: var(--wds-text);
	font-size: 14px;
}

/* Cena i parametry w blokach opisujacych domki */
.wds-oferta-cena {
	margin-bottom: 2px;
}

.wds-oferta-cena strong {
	color: var(--wds-accent);
	font-family: Newsreader, Georgia, serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.34;
}

.wds-oferta-cena span {
	color: var(--wds-text);
	font-size: 14px;
}

.wds-oferta-param {
	margin-bottom: 18px;
	color: #000000;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	/* Szesc kolumn nie miesci sie na telefonie — tabela przewija sie
	 * we wlasnym kontenerze, strona nie dostaje poziomego paska. */
	.wds-cennik-box {
		overflow-x: auto;
	}

	.wds-cennik {
		min-width: 910px;
	}
}

/* ------------------------------------------------------------------ *
 * BLOG — archiwum, wpis i konwersja (przepisane 2026-08-03)
 *
 * Poprzednia wersja tego bloku byla pisana pod kanon Advent — jej wlasny
 * komentarz mowil wprost „Montserrat 14px / #555555, Palanquin Dark dla
 * tytulow". Serwis od 1 sierpnia jest na Claude Design, wiec caly blok
 * zostal wymieniony, a nie zalatany.
 *
 * Trzy martwe reguly z poprzedniej wersji, kazda z innego powodu:
 *
 *   `body.blog .site-main > .entry-title` — h1 nigdy nie byl bezposrednim
 *   dzieckiem `.site-main`, siedzial w `<div class="page-header">`. Naglowek
 *   „Blog" nie dostawal ani odstepu, ani wysrodkowania. Dzis nie ma juz
 *   `.page-header` — wlasny szablon daje `.wds-blog-glowa`.
 *
 *   `body.single-post .site-main` — wpis renderowal sie szablonem
 *   `elementor_header_footer`, w ktorym `.site-main` w ogole nie powstaje.
 *   Ograniczenie szerokosci na wpisie nigdy nie dzialalo.
 *
 *   `.wds-wstep` — klasa uzyta we wpisie 221, bez ani jednej reguly w CSS.
 *   Zastapiona przez `.wds-art-lead` karmiony z `post_excerpt`.
 *
 * Specyficznosc: tresc wpisu nie zawiera ani jednego `.elementor-*`, wiec
 * nie dotyczy jej zerowanie marginesow widzetow. Jedynym przeciwnikiem jest
 * kit — `.elementor-kit-4 h2` to (0,1,1), a `.wds-art-tresc h2` (0,2,1),
 * wiec wygrywamy bez `!important`. Wyjatek: `a` w kicie tez ma (0,1,1),
 * dlatego przyciski maja klase na elemencie i selektor dwuklasowy.
 * ------------------------------------------------------------------ */

/* Proporcje kadru uzywane tylko przez blog — reszta rodziny siedzi
 * w warstwie komponentow. Proporcje niesie takze <img>, bo inaczej
 * w WebKicie kadr z niezaladowanym obrazem zwija sie do zera. */
.wds-kadr-3x2,
.wds-kadr-3x2 img { aspect-ratio: 3 / 2; }

.wds-kadr-16x9,
.wds-kadr-16x9 img { aspect-ratio: 16 / 9; }

/* Kolumna tresci. `clamp` zamiast trzech zapytan medialnych — margines
 * boczny idzie plynnie od 20 px na telefonie do 48 px, czyli tych samych
 * wartosci, ktore maja sekcje Elementora.
 *
 * Selektor musi zawierac `body` i `.site-main`, bo hello-elementor ustawia
 * szerokosc regula `body:not([class*="elementor-page-"]) .site-main` — to
 * (0,2,1), poniewaz `:not()` liczy sie tak jak selektor w srodku. Sama klasa
 * (0,1,0) przegrywala i kontener mial 1140 px zamiast 940. Tutaj mamy remis
 * (0,2,1), a remis rozstrzyga kolejnosc plikow — style.css motywu potomnego
 * laduje sie po theme.css rodzica. */
body .site-main.wds-blog,
body .site-main.wds-art {
	max-width: 940px;
	margin-inline: auto;
	padding: 54px clamp(20px, 5vw, 48px) 72px;
	background: var(--wds-bg);
}

/* ---- Archiwum ---------------------------------------------------- */

.wds-blog-glowa {
	margin-bottom: 40px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--wds-wlos-slaby);
}

.wds-blog-glowa .wds-nad {
	margin: 0 0 18px;
}

.wds-blog-glowa .entry-title {
	margin: 0;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(2.6rem, 6vw, 3.5rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.wds-blog-opis {
	margin-top: 18px;
	max-width: 60ch;
	color: var(--wds-ink-2);
}

.wds-blog-lista {
	display: flex;
	flex-direction: column;
}

.wds-blog-poz {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	padding-block: 28px;
	border-bottom: 1px solid var(--wds-wlos-slaby);
}

.wds-blog-poz:first-child {
	padding-top: 0;
}

.wds-blog-kadr {
	display: block;
	overflow: hidden;
	background: var(--wds-sel);
}

.wds-blog-kadr img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wds-blog-poz:hover .wds-blog-kadr img {
	transform: scale(1.04);
}

.wds-blog-kat {
	margin: 0 0 14px;
}

.wds-blog .wds-blog-kat a {
	color: inherit;
	text-decoration: none;
}

.wds-blog .wds-blog-kat a:hover {
	color: var(--wds-ink);
}

.wds-blog .wds-blog-tyt {
	margin: 0 0 14px;
	font-family: Newsreader, Georgia, serif;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.18;
}

.wds-blog .wds-blog-tyt a {
	color: var(--wds-ink);
	text-decoration: none;
	transition: color 0.3s linear 0s;
}

.wds-blog .wds-blog-tyt a:hover {
	color: var(--wds-accent);
}

.wds-blog-zajawka {
	margin: 0 0 18px;
	max-width: 58ch;
	color: var(--wds-ink-2);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.72;
}

.wds-blog-meta {
	margin: 0;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.wds-blog-pusto {
	padding-block: 26px 0;
}

/* ---- Paginacja --------------------------------------------------- */

.wds-blog-paginacja {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--wds-wlos-slaby);
}

.wds-blog-paginacja ul {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wds-blog-paginacja .page-numbers {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.3s linear 0s;
}

.wds-blog-paginacja a.page-numbers:hover {
	color: var(--wds-accent);
}

.wds-blog-paginacja .page-numbers.current {
	color: var(--wds-ink);
	border-bottom-color: var(--wds-accent);
}

/* ---- Wpis -------------------------------------------------------- */

.wds-art-okruszki {
	margin-bottom: 30px;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wds-art .wds-art-okruszki a {
	color: inherit;
	text-decoration: none;
}

.wds-art .wds-art-okruszki a:hover {
	color: var(--wds-accent);
}

.wds-art .wds-art-tyt {
	margin: 0;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(2.4rem, 5.6vw, 3.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.wds-art-meta {
	margin: 20px 0 0;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.wds-art-kadr {
	display: block;
	overflow: hidden;
	margin: 28px 0 0;
	background: var(--wds-sel);
}

.wds-art-lead {
	margin: 28px 0 0;
	max-width: 64ch;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 25px;
	font-weight: 300;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Miara wiersza. Kit daje 17px/1.72 Archivo — zostaje, zmieniamy tylko
 * szerokosc kolumny i rytm pionowy naglowkow, ktorych kit nie zna
 * w kontekscie dlugiego tekstu (42px h2 rozsadza kolumne 68ch).
 *
 * Ograniczenie idzie na DZIECI, nie na kontener: dzieki temu zdjecia moga
 * byc szersze od tekstu i zajmowac cala kolumne artykulu. Przy `max-width`
 * na kontenerze figure siedziala w tych samych 68ch i wygladala jak znaczek
 * (zmierzone: 662 px zamiast 844). */
.wds-art-tresc {
	margin-top: 32px;
}

.wds-art-tresc > p,
.wds-art-tresc > h2,
.wds-art-tresc > h3,
.wds-art-tresc > h4,
.wds-art-tresc > ul,
.wds-art-tresc > ol,
.wds-art-tresc > blockquote {
	max-width: 68ch;
}

.wds-art-tresc > *:first-child {
	margin-top: 0;
}

.wds-art .wds-art-tresc h2 {
	margin: 46px 0 18px;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.2;
	text-wrap: pretty;
}

.wds-art .wds-art-tresc h3 {
	margin: 32px 0 12px;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
}

.wds-art-tresc p {
	margin: 0 0 22px;
	color: var(--wds-ink-2);
	text-wrap: pretty;
}

.wds-art .wds-art-tresc a {
	color: var(--wds-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wds-art .wds-art-tresc a:hover {
	color: var(--wds-ink);
}

.wds-art-tresc ul,
.wds-art-tresc ol {
	margin: 0 0 22px;
	padding-left: 1.2em;
	color: var(--wds-ink-2);
}

.wds-art-tresc li {
	margin-bottom: 9px;
}

.wds-art .wds-art-tresc blockquote {
	margin: 34px 0;
	padding-left: 28px;
	border-left: 1px solid var(--wds-accent);
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 23px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
}

.wds-art-tresc blockquote p:last-child {
	margin-bottom: 0;
}

/* Obraz w tresci wychodzi poza miare wiersza — inaczej w kolumnie 68ch
 * wyglada jak znaczek, a nie jak zdjecie. */
.wds-art-tresc figure {
	margin: 36px 0;
	max-width: none;
	width: 100%;
}

/* `width: auto` + `max-height`, a nie `width: 100%`: zdjecie pionowe
 * 768x1024 rozciagniete na cala kolumne mialo 1125 px wysokosci i zajmowalo
 * caly ekran, wypychajac tekst. Teraz pion dostaje 760 px wysokosci i jest
 * wysrodkowany, poziom nadal wypelnia kolumne, a nic sie nie skaluje w gore. */
.wds-art-tresc figure img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 760px;
	margin-inline: auto;
}

.wds-art-tresc figcaption {
	margin-top: 12px;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

/* ---- Tagi -------------------------------------------------------- */

.wds-art-tagi {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--wds-wlos-slaby);
}

.wds-art .wds-art-tagi a {
	padding: 8px 17px;
	border: 1px solid var(--wds-wlos);
	border-radius: 999px;
	color: var(--wds-ink-2);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.3s linear 0s, color 0.3s linear 0s;
}

.wds-art .wds-art-tagi a:hover {
	background: var(--wds-dark);
	border-color: var(--wds-dark);
	color: var(--wds-bg-jasne);
}

/* ---- Przyciski bloga --------------------------------------------- */

/* Kit maluje `a` selektorem `.elementor-kit-4 a`, czyli (0,1,1). Sama klasa
 * to (0,1,0) i PRZEGRYWA — liczba klas rozstrzyga przed liczba elementow.
 * Dlatego klasa jest podwojona: `a.x.x` daje (0,2,1) i wygrywa, a przy tym
 * nie uzaleznia przycisku od zadnego przodka, wiec dziala tak samo w liscie,
 * w artykule i w bloku domku. */
.wds-blog-btn-jasny,
.wds-blog-btn-obrys,
a.wds-blog-btn-jasny,
a.wds-blog-btn-obrys.wds-blog-btn-obrys {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--wds-btn);
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.3s linear 0s, color 0.3s linear 0s, border-color 0.3s linear 0s;
}

a.wds-blog-btn-jasny.wds-blog-btn-jasny {
	background: var(--wds-dark);
	color: var(--wds-bg-jasne);
}

a.wds-blog-btn-jasny.wds-blog-btn-jasny:hover {
	background: var(--wds-accent);
	color: var(--wds-bg-jasne);
}

a.wds-blog-btn-obrys.wds-blog-btn-obrys {
	background: transparent;
	border-color: var(--wds-wlos-mocny);
	color: var(--wds-ink);
}

a.wds-blog-btn-obrys.wds-blog-btn-obrys:hover {
	background: var(--wds-ink);
	border-color: var(--wds-ink);
	color: var(--wds-bg-jasne);
}

/* Wariant na ciemnym tle sekcji CTA. */
a.wds-blog-btn-obrys--cd.wds-blog-btn-obrys--cd {
	border-color: var(--wds-wlos-cd-mocny);
	color: var(--wds-bg-jasne);
}

a.wds-blog-btn-obrys--cd.wds-blog-btn-obrys--cd:hover {
	background: var(--wds-bg-jasne);
	border-color: var(--wds-bg-jasne);
	color: var(--wds-ink);
}

/* ---- Blok domku -------------------------------------------------- */

.wds-art-domek {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 34px;
	align-items: center;
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid var(--wds-wlos-slaby);
}

.wds-art-domek-kadr {
	display: block;
	overflow: hidden;
	background: var(--wds-sel);
}

.wds-art .wds-art-domek-tyt {
	margin: 14px 0 10px;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 27px;
	font-weight: 300;
	line-height: 1.2;
}

.wds-art-domek-lead {
	margin: 0 0 22px;
	max-width: 46ch;
	color: var(--wds-ink-2);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

/* ---- Blok „Zatrzymaj sie u nas" ---------------------------------- */

.wds-art-cta {
	margin-top: 42px;
	padding: 56px clamp(24px, 5vw, 52px);
	background: var(--wds-dark);
}

.wds-art .wds-art-cta-tyt {
	margin: 16px 0 0;
	color: var(--wds-bg-jasne);
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	font-weight: 300;
	line-height: 1.14;
}

.wds-art .wds-art-cta-tyt em {
	font-style: italic;
}

.wds-art-cta-lead {
	margin: 18px 0 0;
	max-width: 52ch;
	color: var(--wds-na-cd);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.72;
}

.wds-art-cta-btny {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* ---- Wpisy powiazane --------------------------------------------- */

.wds-art-powiazane {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid var(--wds-wlos-slaby);
}

.wds-art-powiazane .wds-nad {
	margin: 0 0 26px;
}

.wds-art-powiazane-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.wds-art-powiazany {
	display: block;
	text-decoration: none;
}

.wds-art-powiazany .wds-kadr {
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--wds-sel);
}

.wds-art-powiazany .wds-kadr img {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wds-art-powiazany:hover .wds-kadr img {
	transform: scale(1.04);
}

.wds-art-powiazany-tyt {
	display: block;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	transition: color 0.3s linear 0s;
}

.wds-art-powiazany:hover .wds-art-powiazany-tyt {
	color: var(--wds-accent);
}

.wds-art-powiazany-meta {
	display: block;
	margin-top: 8px;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* ---- Kafel na koncu listy ---------------------------------------- */

.wds-blog-kafel {
	margin-top: 36px;
	padding: 52px clamp(24px, 5vw, 48px);
	background: var(--wds-dark);
}

.wds-blog .wds-blog-kafel-tyt {
	margin: 16px 0 0;
	color: var(--wds-bg-jasne);
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(1.8rem, 3.6vw, 2.3rem);
	font-weight: 300;
	line-height: 1.14;
}

.wds-blog .wds-blog-kafel-tyt em {
	font-style: italic;
}

.wds-blog-kafel-lead {
	margin: 16px 0 30px;
	max-width: 52ch;
	color: var(--wds-na-cd);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.72;
}

/* ---- Responsywnosc ----------------------------------------------- */

@media (max-width: 900px) {
	.wds-art-powiazane-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wds-blog,
	.wds-art {
		padding-block: 34px 48px;
	}

	/* Okruszki to jedyne linki na stronie wpisu, ktore nie mialy 44 px
	 * (zmierzone: 13 px — sama wysokosc wiersza tekstu 12 px). Powiekszamy
	 * obszar dotyku paddingiem, a ujemnym marginesem oddajemy odstep, zeby
	 * rytm nad tytulem zostal taki sam. */
	.wds-art-okruszki a {
		display: inline-block;
		padding-block: 15px;
		margin-block: -15px;
	}

	.wds-blog-glowa {
		margin-bottom: 28px;
	}

	.wds-blog-poz,
	.wds-art-domek {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.wds-blog-poz {
		padding-block: 22px;
	}

	.wds-art-powiazane-lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.wds-art .wds-art .wds-art-tresc h2 {
		margin-top: 34px;
		font-size: 27px;
	}

	.wds-art-lead {
		font-size: 21px;
	}

	.wds-art-cta-btny a,
	.wds-blog-kafel a {
		width: 100%;
	}
}

/* ---- Wtret srodtekstowy ------------------------------------------ */

/* Bez tla i bez przycisku — ma czytac sie jak uwaga na marginesie, a nie
 * jak reklama wcieta w artykul. Wstawia go filtr `the_content`, nie tresc. */
.wds-art-wtret {
	margin: 28px 0;
	padding: 22px 0;
	max-width: 68ch;
	border-top: 1px solid var(--wds-wlos-slaby);
	border-bottom: 1px solid var(--wds-wlos-slaby);
}

.wds-art-wtret p {
	margin: 0;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.65;
}

.wds-art .wds-art-wtret a {
	color: var(--wds-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wds-art .wds-art-wtret a:hover {
	color: var(--wds-ink);
}

/* ================================================================== *
 * WARSTWA KOMPONENTOW — projekt Claude Design
 *
 * Wszystko ponizej pochodzi z `O nas.dc.html` i `Strona glowna.dc.html`.
 * Podzial pracy: Elementor trzyma STRUKTURE i model pudelkowy (padding, tlo,
 * szerokosci kolumn), CSS robi to, czego kontrolki nie wyrazaja — siatki,
 * position:sticky, wlosowe obramowania, proporcje kadru, detale typografii.
 *
 * Rozdzial jest celowy: tresc ma zostac edytowalna w edytorze wizualnym.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Prymitywy wspolne
 * ------------------------------------------------------------------ */

/* Nadtytul (eyebrow). Projekt: 11px / ls .26em / uppercase / terakota.
 *
 * `.wds-nad` siedzi na samym widzecie, wiec zlozenie `.wds-nad.elementor-widget-heading`
 * daje (0,3,0) i przebija globalna regule widzetu z `post-*.css`. */
.wds-nad.elementor-widget-heading .elementor-heading-title,
.wds-nad .elementor-widget-heading .elementor-heading-title,
.wds-nad {
	color: var(--wds-accent);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.26em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Wariant na ciemnym tle — zloto zamiast terakoty. */
.wds-nad-zloty.elementor-widget-heading .elementor-heading-title,
.wds-nad-zloty .elementor-widget-heading .elementor-heading-title,
.wds-nad-zloty {
	color: var(--wds-gold);
}

/* Kazdy nadtytul w ciemnej sekcji jest zloty, nawet bez klasy `.wds-nad-zloty` —
 * projekt nie zna tam terakoty. (0,4,0) bije regule `.wds-sek-cd …` wyzej. */
.wds-sek-cd .wds-nad.elementor-widget-heading .elementor-heading-title,
.wds-sek-cd .wds-nad .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-gold);
}

/* Tytul sekcji.
 *
 * Kit daje jeden rozmiar h2 (58px) na cala strone, a projekt go rozniuje:
 * 52px na ciemnych sekcjach, 54px w FAQ / galerii / „Porach roku", 96px w hero.
 * Rozmiar idzie zmienna, zeby sekcja deklarowala go u siebie w jednym miejscu,
 * a clamp() zachowal plynne skalowanie zamiast trzech progow z kontrolki. */
.wds-tyt.elementor-widget-heading .elementor-heading-title,
.wds-tyt .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2rem, 4vw, var(--wds-tyt-max, 3.625rem));
	line-height: 1.06;
	letter-spacing: -0.015em;
}

/* Hero jest wyjatkiem co do skali — 96px i ciasniejszy interlinia. */
.wds-tyt-hero.elementor-widget-heading .elementor-heading-title,
.wds-tyt-hero .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	line-height: 0.96;
	letter-spacing: -0.025em;
}

.wds-sek-cd { --wds-tyt-max: 3.25rem; }          /* 52px */

.wds-hp-faq,
.wds-hp-galeria,
.wds-hp-okolica-foto,
.wds-onas-pory,
.wds-onas-domki { --wds-tyt-max: 3.375rem; }     /* 54px */

.wds-hp-cta,
.wds-onas-cta { --wds-tyt-max: 3.5rem; }         /* 56px */

/* Lead — jedyny akapit skladany szeryfem. Projekt: Newsreader 300 / 27px / 1.48. */
.wds-lead,
.wds-lead p {
	margin: 0;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 27px;
	font-weight: 300;
	line-height: 1.48;
	text-wrap: pretty;
}

/* Tresc akapitowa. Kit daje juz Archivo 17/1.72, tu tylko zerujemy marginesy
 * WordPressowego <p> i wlaczamy lamanie sierotek. */
.wds-tresc p {
	margin: 0 0 22px;
	color: var(--wds-ink-2);
	text-wrap: pretty;
}

.wds-tresc p:last-child {
	margin-bottom: 0;
}

/* Kursywa w naglowkach — projekt wyroznia nia druga czesc kazdego tytulu. */
.elementor-heading-title em,
.elementor-heading-title i {
	font-style: italic;
}

/* Kadr obrazu o stalej proporcji.
 *
 * Widzet image renderuje .elementor-element > .elementor-widget-container >
 * (figure) > (a) > img. Proporcje stawiamy na elemencie widzetu, a cala droga
 * w dol musi miec height:100%, inaczej <img> nie ma sie do czego rozciagnac.
 * height/width z !important, bo kontrolka `width` widzetu emituje wlasny rozmiar
 * selektorem (0,3,0). */
.wds-kadr {
	display: block;
	overflow: hidden;
	background: var(--wds-sel);
}

.wds-kadr .elementor-widget-container,
.wds-kadr figure,
.wds-kadr figure > a,
.wds-kadr > a {
	display: block;
	height: 100%;
	margin: 0;
}

/* Wysokosc kadru NIE moze zalezec od tego, czy obraz zdazyl sie zaladowac.
 *
 * Bylo `height: 100%` — procent liczony od wysokosci kadru, ktora w WebKicie
 * przy jeszcze niezaladowanym `loading="lazy"` wychodzi 0, mimo `aspect-ratio`
 * na widzecie (kadr to element flex w kolumnowym `.e-con` Elementora).
 * Kadr o wysokosci 0 nigdy nie wchodzi w pole widzenia, wiec leniwe ladowanie
 * go nie pobiera — i kolo sie zamyka: obrazu nie ma i nigdy nie bedzie.
 *
 * Zmierzone 2026-08-03 w WebKicie na iPhonie 14 Pro, przy naturalnym
 * przewijaniu (bez podmiany `loading` na `eager`): BEAR i WOLF 333x444,
 * LYNX i STRIX 333x0 i `complete === false`. W Chrome te same karty byly
 * poprawne — stad zgloszenie „na mobile nie pokazuja sie zdjecia".
 *
 * Teraz proporcje niesie sam <img> przy `height: auto`, wiec ma wysokosc
 * zanim cokolwiek sie pobierze, a kadr rosnie od tresci. Proporcja zostaje
 * takze na widzecie — obie wartosci sa te same, wiec ukladu to nie zmienia
 * (sprawdzone: 132 kadry na 9 podstronach, w kazdym obraz co do piksela
 * wypelnial kadr, zaden nie byl rozciagany ponad swoja proporcje). */
.wds-kadr img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

.wds-kadr-21x9,
.wds-kadr-21x9 img { aspect-ratio: 21 / 9; }

.wds-kadr-4x5,
.wds-kadr-4x5 img { aspect-ratio: 4 / 5; }

.wds-kadr-4x3,
.wds-kadr-4x3 img { aspect-ratio: 4 / 3; }

.wds-kadr-3x4,
.wds-kadr-3x4 img { aspect-ratio: 3 / 4; }

.wds-kadr-1x1,
.wds-kadr-1x1 img { aspect-ratio: 1 / 1; }

/* Siatka wlosowa — sygnaturowy wzorzec projektu.
 *
 * Separacja komorek to gap 1px odslaniajacy tlo rodzica, a nie obramowania
 * komorek. Dzieki temu linie nie dubluja sie na stykach i siatka ma dokladnie
 * jeden wlos wszedzie, lacznie z krawedzia zewnetrzna.
 *
 * Elementor stawia na kontenerze `display: var(--display)` i wlasne --gap,
 * wiec obie wlasciwosci nadpisujemy z !important — inaczej kontener zostaje
 * flexem z gapem z kontrolki. */
/* Kontenery ukladu sa zapisane jako `content_width: full`, wiec NIE maja
 * `.e-con-inner` i ich dzieci sa bezposrednie. Bez tego siatka mialaby jedno
 * dziecko (ten wlasnie wrapper) i cale `display:grid` bylo by bez efektu. */
.wds-siatka-wlos {
	display: grid !important;
	gap: 1px !important;
	/* Kontener Elementora ma domyslny padding 10px. Na siatce wlosowej ten
	 * padding odslania tlo rodzica dookola komorek i zamiast wlosa 1px wychodzi
	 * jasna ramka 10px. Zmierzone na kaflach kontaktowych. */
	padding: 0 !important;
	background: var(--wds-wlos);
	border: 1px solid var(--wds-wlos);
}

.wds-sek-cd .wds-siatka-wlos {
	background: var(--wds-wlos-cd);
	border-color: var(--wds-wlos-cd);
}

.wds-siatka-wlos > .e-con,
.wds-siatka-wlos > .elementor-element {
	background: var(--wds-bg);
	width: auto !important;
}

.wds-sek-cd .wds-siatka-wlos > .e-con,
.wds-sek-cd .wds-siatka-wlos > .elementor-element {
	background: var(--wds-dark);
}

.wds-siatka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wds-siatka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wds-siatka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Zwykle siatki (bez wlosa) — uzywane do kafli zdjec. */
.wds-siatka {
	display: grid !important;
}

.e-con.wds-siatka-2x2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px !important;
}

/* Elementy flex/grid domyslnie maja min-width:auto, wiec szeroka tresc
 * (dlugie slowo, tabela) rozpycha kolumne ponad przydzielona szerokosc.
 * Zmierzone wczesniej na tej instalacji — patrz skill `elementor-pulapki`. */
.wds-siatka-wlos > *,
.wds-siatka > * {
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Sekcje — rytm pionowy
 *
 * Projekt trzyma sekcje w kontenerze 1340px z paddingiem bocznym 48px
 * (kit ustawia juz 1340) i rozdziela je odstepem 110-120px.
 * ------------------------------------------------------------------ */

/* Padding sekcji (pionowy i boczny) siedzi w kontrolkach dokumentu, nie tutaj —
 * jedno zrodlo prawdy i darmowa responsywnosc z breakpointow Elementora. */

.wds-sek-cd {
	background: var(--wds-dark);
	color: var(--wds-bg);
}

/* Specyficznosc (0,3,0), nie (0,2,0). Kazdy `post-*.css` emituje globalna regule
 * widzetu `.elementor-widget-heading .elementor-heading-title { color: … }`,
 * ktora jest tez (0,2,0) — i wygrywa, bo arkusze Elementora laduja sie PO
 * motywie potomnym. Zmierzone: naglowki ciemnych sekcji wychodzily #171C15 na
 * tle #1E2A1D, czyli nieczytelne. Dopisanie `.elementor-widget-heading`
 * przewaza szale bez `!important`. Ta sama poprawka dotyczy wszystkich regul
 * nizej, ktore ustawiaja `color` albo `font-family` na `.elementor-heading-title`. */
.wds-sek-cd .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-bg-jasne);
}

.wds-sek-cd .wds-tresc p {
	color: var(--wds-na-cd);
}

/* ------------------------------------------------------------------ *
 * O nas — hero
 * Zrodlo: `O nas.dc.html`, pierwsza <section>.
 * ------------------------------------------------------------------ */

.wds-onas-lead {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 88px !important;
	align-items: start;
}

.wds-onas-lead > * {
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * O nas — „Charakter miejsca", szesc kafli w siatce wlosowej
 * ------------------------------------------------------------------ */

.wds-wl-kafel {
	padding: 40px 34px;
}

/* Numer 01-06 — Newsreader 13px w zlocie. */
.wds-kafel-nr.elementor-widget-heading .elementor-heading-title,
.wds-kafel-nr .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-gold);
	font-family: Newsreader, Georgia, serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

.wds-kafel-tyt .elementor-heading-title {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.wds-kafel-tre p {
	margin: 0;
	color: rgba(244, 241, 234, 0.75);
	font-size: 15.5px;
	line-height: 1.68;
}

/* ------------------------------------------------------------------ *
 * O nas — „Pory roku"
 *
 * Lewa kolumna jest przyklejona. `top` musi uwzgledniac przyklejony naglowek,
 * stad 110px, a nie 0.
 * ------------------------------------------------------------------ */

.wds-onas-pory-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 88px !important;
	align-items: start;
}

.wds-onas-pory-row > * {
	min-width: 0;
}

.e-con.wds-onas-pory-lewa {
	position: sticky;
	top: 110px;
	align-self: start;
}

/* Wiersz pory roku: nazwa po lewej, opis wyrownany do prawej.
 * Wlos tylko u gory; ostatni wiersz dokłada dolny. */
.wds-pora {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 24px !important;
	padding: 24px 0;
	border-top: 1px solid var(--wds-wlos-mocny);
}

.wds-pora:last-of-type {
	border-bottom: 1px solid var(--wds-wlos-mocny);
}

.wds-pora .wds-pora-nazwa {
	width: auto !important;
	flex: 0 0 auto;
}

.wds-pora .wds-pora-nazwa .elementor-heading-title {
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

.wds-pora .wds-pora-opis {
	width: auto !important;
	flex: 0 1 330px;
}

.wds-pora .wds-pora-opis p {
	margin: 0;
	color: var(--wds-ink-2);
	font-size: 15.5px;
	line-height: 1.6;
	text-align: right;
}

/* ------------------------------------------------------------------ *
 * O nas — „Cztery domki"
 * ------------------------------------------------------------------ */

.wds-onas-domki-glowa {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 48px !important;
	flex-wrap: wrap !important;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-onas-domki-glowa > * {
	width: auto !important;
}

.wds-onas-domki-glowa .wds-onas-domki-lid {
	flex: 0 1 340px;
}

.wds-onas-domki-glowa .wds-onas-domki-lid p {
	margin: 0 0 6px;
	color: var(--wds-ink-2);
	font-size: 16px;
	line-height: 1.7;
}

.e-con.wds-domki-siatka {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px !important;
}

.wds-domki-siatka > * {
	min-width: 0;
	width: auto !important;
}

/* Kafel domku jest kontenerem-linkiem (html_tag: a + link).
 * `display: var(--display, flex)` jest konieczne, bo <a> nie jest domyslnie
 * flexem, a Elementor liczy na to, ze kontener nim bedzie. */
.wds-domek-karta {
	display: var(--display, flex);
	text-decoration: none;
	color: var(--wds-ink);
}

.wds-domek-karta .wds-domek-nazwa .elementor-heading-title {
	margin-top: 14px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	transition: color 0.3s linear;
}

.wds-domek-karta:hover .wds-domek-nazwa .elementor-heading-title {
	color: var(--wds-accent);
}

.wds-domek-karta .wds-kadr img {
	transition: transform 0.6s ease-out;
}

.wds-domek-karta:hover .wds-kadr img {
	transform: scale(1.03);
}

/* CTA kafla domku — pigulka "Zobacz domek".
 *
 * Kontener kafla ma html_tag: a, wiec widzet `button` odpada: renderuje
 * wlasna kotwice, a kotwica w kotwicy rozrywa link kafla w parserze.
 * CTA to <span class="elementor-button"> w widzecie html — reguly bazowe
 * u gory tego pliku trafiaja w KAZDY element z ta klasa (elementor-pulapki
 * paragraf 10), wiec pigulka, tlo, Archivo 14/400 i hover przychodza same.
 * Ponizej wylacznie to, co ma byc inne. */

.wds-domek-karta .wds-domek-cta {
	/* margin-top, nie bottom — Elementor zeruje kazdy margin-bottom z motywu. */
	margin-top: 14px;
}

.wds-domek-karta .wds-domek-cta .elementor-button {
	/* 11/22 zamiast domyslnych 16/30 — kafel ma okolo 300px w siatce 4-kolumnowej. */
	padding: var(--wds-btn-mini) !important;
	cursor: pointer;
}

/* Hover calego kafla musi ruszac przyciskiem, nie tylko nazwa.
 * (0,3,0) plus !important bije regule bazowa (0,2,0) niezaleznie od kolejnosci plikow. */
.wds-domek-karta:hover .wds-domek-cta .elementor-button {
	background-color: var(--wds-accent) !important;
	color: var(--wds-bg-jasne) !important;
}

/* ------------------------------------------------------------------ *
 * O nas — CTA zamykajace
 * ------------------------------------------------------------------ */

.wds-onas-cta {
	border-top: 1px solid var(--wds-wlos);
}

.wds-onas-cta-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 56px !important;
	flex-wrap: wrap !important;
}

.wds-onas-cta-row > * {
	width: auto !important;
}

/* ------------------------------------------------------------------ *
 * Responsywnosc
 *
 * Elementor chowa `elementor-hidden-tablet` juz od 1024px, wiec regul nie
 * pisze sie wylacznie na 767px — inaczej zostaje dziura na tablecie.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.wds-onas-lead,
	.wds-onas-pory-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px !important;
	}

	/* Przyklejenie ma sens tylko wtedy, gdy obok jest dluga kolumna do * przewijania. W ukladzie jednokolumnowym blokowaloby ekran. */ .e-con.wds-onas-pory-lewa {
		position: static;
	}

	.wds-siatka-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.e-con.wds-domki-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wds-lead,
	.wds-lead p {
		font-size: 23px;
	}
}

@media (max-width: 767px) {
	.wds-siatka-3,
	.wds-siatka-4,
	.e-con.wds-domki-siatka {
		grid-template-columns: minmax(0, 1fr);
	}

	.wds-wl-kafel {
		padding: 30px 24px;
	}

	/* Opis pory roku wyrownany do prawej rozjezdza sie, gdy nazwa i tekst
	 * stoja jedno pod drugim. */
	.wds-pora {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.wds-pora .wds-pora-opis {
		flex: 1 1 auto;
	}

	.wds-pora .wds-pora-opis p {
		text-align: left;
	}

	.wds-onas-cta-row {
		align-items: flex-start !important;
		gap: 28px !important;
	}

	.wds-lead,
	.wds-lead p {
		font-size: 21px;
	}
}

/* ------------------------------------------------------------------ *
 * Rytm pionowy
 *
 * W dokumentach `gap` kontenerow jest zerowy, wiec CALY rytm pionowy siedzi
 * ponizej — jedno miejsce, wartosci wprost z plikow projektu.
 *
 * UWAGA na dwa zerujace mechanizmy Elementora. Zwykly `margin-bottom` z motywu
 * potomnego przegrywa z OBOMA i wychodzi 0 (zmierzone 2026-08-01: wszystkie
 * 29 regul rytmu bylo martwych, odstepy nadtytul→tytul wynosily 0 px):
 *
 *   widzet    `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
 *             — (0,3,0), a `frontend.min.css` laduje sie PO motywie, wiec
 *             potrzeba (0,4,0): `.e-con .wds-x.elementor-widget.elementor-widget`.
 *
 *   kontener  `.e-con{margin-block-end:var(--margin-block-end)}` plus reset
 *             `.e-con{--margin-top:0;--margin-bottom:0}` — oba (0,1,0) i oba
 *             pozniej, wiec kontener zjada tez `margin-top`. Nie walcz
 *             `margin-*`, tylko podaj ZMIENNA na (0,2,0):
 *             `.e-con.wds-x{--margin-top:36px}`. Kontrolka Elementora nadal
 *             wygrywa, bo ustawia te sama zmienna na (0,3,0).
 *
 * Widzety `margin-top` maja nietkniety — dotyczy ich tylko `margin-block-end`.
 * ------------------------------------------------------------------ */

.e-con .wds-nad.elementor-widget.elementor-widget { margin-block-end: 22px; }
.e-con .wds-sek-cd .wds-nad.elementor-widget.elementor-widget { margin-block-end: 22px; }
.e-con .wds-onas-pory-lewa .wds-nad.elementor-widget.elementor-widget { margin-block-end: 22px; }

.e-con .wds-tyt-hero.elementor-widget.elementor-widget { margin-block-end: 40px; }
.e-con .wds-tyt-cd.elementor-widget.elementor-widget { margin-block-end: 34px; }
.e-con .wds-tyt-pory.elementor-widget.elementor-widget { margin-block-end: 26px; }

.wds-foto-hero { margin-top: 40px; }
.wds-foto-pory { margin-top: 24px; }

.e-con .wds-kafel-nr.elementor-widget.elementor-widget { margin-block-end: 20px; }
.e-con .wds-kafel-tyt.elementor-widget.elementor-widget { margin-block-end: 14px; }

.e-con.wds-siatka-2x2 { --margin-top: 24px; }
.e-con.wds-domki-siatka { --margin-top: 26px; }

@media (max-width: 767px) {
	.wds-nad,
	.wds-sek-cd .wds-nad,
	.e-con .wds-onas-pory-lewa .wds-nad.elementor-widget.elementor-widget { margin-block-end: 18px; }

	.e-con .wds-tyt-hero.elementor-widget.elementor-widget { margin-block-end: 22px; }
	.e-con .wds-tyt-cd.elementor-widget.elementor-widget { margin-block-end: 22px; }
	.e-con .wds-tyt-pory.elementor-widget.elementor-widget { margin-block-end: 22px; }

	.wds-foto-hero { margin-top: 22px; }
	.wds-foto-pory { margin-top: 16px; }
	.e-con.wds-siatka-2x2 { --margin-top: 16px; }
	.e-con.wds-domki-siatka { --margin-top: 14px; }
}

/* ================================================================== *
 * RAMA — naglowek i stopka wg projektu Claude Design
 *
 * Zrodlo: `Strona glowna.dc.html` (pasek gorny + naglowek + stopka)
 * i `O nas.dc.html` (naglowek z pigulka CTA).
 *
 * Dokumenty 84 i 85 zmienily sie minimalnie: doszedl wordmark i przycisk CTA,
 * a z kolumn wiersza zdjeto sztywne procenty. Cala reszta to CSS.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Pasek gorny — ciemna zielen
 * ------------------------------------------------------------------ */

.wds-pasek-kontakt.e-con {
	background: var(--wds-dark);
	color: var(--wds-na-cd-slaby);
	font-size: 12.5px;
}

.wds-pasek-kontakt .elementor-icon-list-text,
.wds-pasek-kontakt a {
	color: rgba(244, 241, 234, 0.85);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12.5px;
}

.wds-pasek-kontakt a:hover,
.wds-pasek-kontakt .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--wds-gold);
}

/* Ikony renderuja sie jako <svg fill=…>, nie <i color=…> — kolor musi isc
 * na fill, inaczej reguly nie widac. */
.wds-pasek-kontakt .elementor-icon-list-icon svg {
	fill: var(--wds-gold);
}

/* ------------------------------------------------------------------ *
 * Wiersz naglowka — przyklejony, kremowy, rozmyty
 * ------------------------------------------------------------------ */

.wds-header-row.e-con {
	gap: var(--wds-nav-gap) !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-block: 14px !important;
	background: rgba(244, 241, 234, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wds-wlos-slaby);
}

/* Kolejnosc wizualna. W DOM jest: burger, menu-lewe, logo, menu-prawe,
 * menu-mobile, CTA — bo tak wyrosl dokument historycznie. Projekt chce
 * logo -> nawigacja -> CTA. Zmiana kolejnosci przez `order` zamiast
 * przestawiania elementow w dokumencie: mniej ruchu w danych, a czytniki
 * ekranu i tak ida po DOM, gdzie logo jest przed nawigacja. */
.wds-header-row > .wds-logo { order: 1; }
.wds-header-row > .wds-menu-lewe { order: 2; }
.wds-header-row > .wds-menu-prawe { order: 3; }
.wds-header-row > .wds-header-cta { order: 4; }
.wds-header-row > .wds-burger { order: 0; }
.wds-header-row > .wds-menu-mobile { order: 5; }

/* Kolumny maja sie zwezic do tresci — procenty zeszly z dokumentu. */
.wds-header-row > .e-con {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Menu ida razem, wiec licza sie jak jedna nawigacja. */
.wds-header-row > .wds-menu-lewe,
.wds-header-row > .wds-menu-prawe {
	flex: 0 1 auto !important;
}

.wds-header-row > .wds-menu-lewe {
	margin-left: auto;
}

.wds-logo.e-con {
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
}

.wds-logo .elementor-widget-image img {
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
}

/* Wordmark obok logo — dwa wiersze, projekt: 19px szeryfem + 10px wersalikami.
 *
 * Selektor musi byc dwuklasowy: wordmark to <a>, a kit emituje `.elementor-kit-4 a`
 * (0,1,1) z terakota. Jednoklasowe `.wds-wordmark` przegrywalo i nazwa serwisu
 * wychodzila pomaranczowa zamiast atramentowej. */
.wds-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	color: var(--wds-ink);
	text-decoration: none;
}

.wds-header-row .wds-wordmark,
.wds-header-row .wds-wordmark-n {
	color: var(--wds-ink);
}

.wds-wordmark-n {
	font-family: Newsreader, Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.wds-wordmark-s {
	margin-top: 3px;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wds-wordmark:hover .wds-wordmark-n {
	color: var(--wds-accent);
}

/* Nawigacja — projekt: 13.5px, ls .04em, aktywna w terakocie. */
.wds-header-row .emcp-dyn-nav-menu .emcp-dyn-menu > li > a {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wds-ink);
}

/* Dwa menu w dwoch kontenerach = dwa zrodla odstepu. Wtyczka emcp-tools daje
 * .emcp-dyn-nav-menu .emcp-dyn-menu{gap:1.25em} (0,2,0) — przy font-size 13.5px
 * z widgetu wychodzi 16,875px, podczas gdy szew miedzy listami bierze gap wiersza
 * (32px). Widget emcp-nav-menu nie ma kontrolki odstepu, wiec rownamy tutaj.
 * Selektor CELOWO zaczepiony o `> .wds-menu-lewe/.wds-menu-prawe`, nie o
 * .wds-header-row: inaczej (0,3,0) pobiloby `gap: 0` dla .wds-menu-mobile
 * i rozstrzelilo pionowe menu w hamburgerze ponizej 1025px. */
.wds-header-row > .wds-menu-lewe .emcp-dyn-menu,
.wds-header-row > .wds-menu-prawe .emcp-dyn-menu {
	gap: var(--wds-nav-gap);
}

.wds-header-row .emcp-dyn-nav-menu .emcp-dyn-menu > li > a:hover,
.wds-header-row .emcp-dyn-nav-menu .current-menu-item > a,
.wds-header-row .emcp-dyn-nav-menu .current_page_item > a {
	color: var(--wds-accent);
}

.wds-header-row .emcp-dyn-nav-menu .sub-menu {
	background: var(--wds-bg);
	border: 1px solid var(--wds-wlos);
	border-radius: 0;
}

/* Pigulka CTA z kropka — projekt: kropka 6px w terakocie przed tekstem. */
.wds-header-cta .elementor-button {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: var(--wds-btn-mini) !important;
	font-size: 13.5px !important;
}

.wds-header-cta .elementor-button::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wds-accent);
	transition: background-color 0.3s linear;
}

.wds-header-cta .elementor-button:hover::before {
	background: var(--wds-bg);
}

@media (max-width: 1024px) {
	/* Pasek kontaktowy i menu boczne sa tu ukryte klasami Elementora —
	 * zostaje burger po lewej, logo, menu mobilne. */
	.wds-header-row > .wds-logo { order: 1; }
	.wds-header-row > .wds-header-cta { order: 2; }

	.wds-wordmark-n { font-size: 17px; }
}

@media (max-width: 767px) {
	/* Pigulka „Rezerwacja" obok burgera i logo nie miesci sie przy 390px. */
	.wds-header-row > .wds-header-cta {
		display: none;
	}

	.wds-wordmark-s { display: none; }
}

/* ------------------------------------------------------------------ *
 * Stopka
 *
 * Struktura dokumentu 85 juz odpowiada projektowi (logo + adres / Domki /
 * Serwis / Obserwuj nas + pasek dolny), wiec to wylacznie
 * przemalowanie i typografia.
 * ------------------------------------------------------------------ */

.wds-stopka.e-con {
	background: var(--wds-dark);
	color: var(--wds-na-cd-slaby);
}

.wds-stopka .elementor-heading-title {
	color: rgba(244, 241, 234, 0.45);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.wds-stopka .elementor-icon-list-text,
.wds-stopka a {
	color: var(--wds-na-cd-slaby);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
}

.wds-stopka a:hover,
.wds-stopka .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--wds-gold);
}

.wds-stopka .elementor-icon-list-icon svg {
	fill: var(--wds-gold);
}

.wds-stopka .elementor-widget-image img {
	filter: none;
}

.wds-stopka p {
	color: var(--wds-na-cd-meta);
	font-size: 12.5px;
}

/* Pasek dolny oddzielony wlosem, jak w projekcie. Wlos idzie WYLACZNIE na
 * kontener paska — na widzecie tekstowym rysowal sie drugi, urwany po 276px
 * (szerokosc samego akapitu), co wygladalo na blad ukladu. */
.wds-stopka > .e-con:last-child {
	border-top: 1px solid rgba(244, 241, 234, 0.16);
}

/* Nazwa serwisu nad adresem — projekt: Newsreader 21px w kremie. */
.wds-stopka-marka .elementor-widget-heading .elementor-heading-title,
.wds-stopka-marka.elementor-widget-heading .elementor-heading-title {
	margin-bottom: 10px;
	color: var(--wds-bg);
	font-family: Newsreader, Georgia, serif;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ================================================================== *
 * STRONA GLOWNA — projekt Claude Design (`Strona glowna.dc.html`)
 *
 * Prymitywy z etapu 1 (.wds-sek, .wds-nad, .wds-lead, .wds-kadr-*,
 * .wds-siatka-wlos, .wds-tresc) obsluguja tu sekcje 2, 6, 7 i 9.
 * Ponizej tylko to, co jest specyficzne dla tej strony.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Hero
 *
 * Projekt: 86vh, zdjecie na calej powierzchni, gradient od gory i od dolu,
 * tresc dosunieta do dolnej krawedzi.
 *
 * Typografie robi clamp(), nie kontrolka Elementora — kontrolka daje trzy
 * sztywne wartosci na trzech progach, clamp() plynne przejscie na calym
 * zakresie. Dlatego w dokumencie CELOWO nie ma ustawien typografii hero.
 * ------------------------------------------------------------------ */

.wds-hp-hero.e-con {
	position: relative;
	min-height: 86vh;
	justify-content: flex-end !important;
	overflow: hidden;
}

/* Selektor MUSI byc dwuklasowy. Elementor definiuje `.e-con::before` z
 * `content: var(--background-overlay)`, co bez skonfigurowanej nakladki
 * rozwiazuje sie do `none` — i regula jednoklasowa przegrywa, bo
 * frontend.css laduje sie po motywie potomnym. Sprawdzac `content`,
 * nie `background`. */
.wds-hp-hero.e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(20, 26, 18, 0.48) 0%,
		rgba(20, 26, 18, 0.1) 34%,
		rgba(20, 26, 18, 0.74) 100%
	);
}

/* Kontener hero jest `e-con-boxed`, wiec tresc siedzi w `.e-con-inner`, a nie
 * bezposrednio w `.e-con`. `justify-content: flex-end` na zewnetrznym kontenerze
 * nic nie daje, bo `.e-con-inner` rozciaga sie na pelna wysokosc i uklada SWOJE
 * dzieci od gory. Zmierzone: h1 na y=159 przy hero 150…924, czyli tresc lezala
 * pod naglowkiem zamiast przy dolnej krawedzi. Wyrownanie musi trafic tutaj. */
.wds-hp-hero > .e-con-inner {
	position: relative;
	z-index: 1;
	height: 100%;
	justify-content: flex-end !important;
	padding-bottom: 56px;
}

.wds-hp-hero-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 56px !important;
	flex-wrap: wrap !important;
}

.wds-hp-hero-row > * {
	width: auto !important;
}

.wds-hp-hero-tekst {
	flex: 1 1 520px;
	max-width: 860px;
}

/* Nadtytul hero ma przed soba kreske 34px — projekt rysuje ja osobnym
 * <span>, tu robi to ::before, zeby nie mnozyc widzetow. */
.wds-nad-hero.elementor-widget-heading .elementor-heading-title,
.wds-nad-hero .elementor-widget-heading .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
	color: rgba(244, 241, 234, 0.75);
}

.wds-nad-hero .elementor-heading-title::before {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: rgba(244, 241, 234, 0.5);
	flex: 0 0 auto;
}

.wds-hp-hero-tytul.elementor-widget-heading .elementor-heading-title,
.wds-hp-hero-tytul .elementor-widget-heading .elementor-heading-title {
	color: #f7f4ed;
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	line-height: 0.96;
	letter-spacing: -0.025em;
}

.wds-hp-hero-lead p {
	max-width: 600px;
	margin: 0;
	color: rgba(244, 241, 234, 0.82);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
}

.wds-hp-hero-cta {
	display: flex !important;
	flex-direction: row !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	padding-bottom: 6px;
}

.wds-hp-hero-cta > * {
	width: auto !important;
}

/* Przyciski hero — wariant „duzy” z kanonu (--wds-btn-maxi). Regula globalna
 * `.elementor-element .elementor-button` ma (0,2,0) i !important, wiec ta musi
 * miec tyle samo, !important i stac pozniej w pliku. */
.wds-hp-hero-cta .elementor-button {
	padding: var(--wds-btn-maxi) !important;
}

/* ------------------------------------------------------------------ *
 * 2. Cztery domki
 * ------------------------------------------------------------------ */

.wds-hp-domki-glowa {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 88px !important;
	align-items: end;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-hp-domki-glowa > * {
	min-width: 0;
	width: auto !important;
}

/* Akapit wprowadzajacy stoi w prawej kolumnie i jest nizszy niz blok
 * nadtytul + H2 po lewej. Bez tej reguly siatka rozciaga go na cala wysokosc
 * wiersza (align-items liczy sie jako `normal`, bo `align-items: end` wyzej
 * przegrywa z arkuszem Elementora), wiec tekst lezal przy gornej krawedzi.
 * Wlasciciel chce go w pionowym srodku obszaru; lewa kolumna bez zmian.
 * Kolumna nie ma klasy w dokumencie, wiec celujemy pozycja — (0,2,0)
 * bije `.e-con` niezaleznie od kolejnosci arkuszy. Ponizej 1025px siatka
 * jest jednokolumnowa, wiec regula nie ma tam czego zmienic. */
.wds-hp-domki-glowa > *:last-child {
	align-self: center;
}

.e-con.wds-hp-domki-siatka {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px !important;
	--margin-top: 26px;
}

.wds-hp-domki-siatka > * {
	min-width: 0;
	width: auto !important;
}

/* Kafel domku jest kontenerem-linkiem (html_tag: a + link).
 * `display: var(--display, flex)` jest konieczne, bo <a> nie jest domyslnie
 * flexem, a Elementor liczy na to, ze kontener nim bedzie. */
.wds-hp-domek {
	display: var(--display, flex);
	color: var(--wds-ink);
	text-decoration: none;
}

.wds-hp-domek .wds-kadr img {
	transition: transform 0.6s ease-out;
}

.wds-hp-domek:hover .wds-kadr img {
	transform: scale(1.03);
}

/* Trzy wiersze pod zdjeciem: nazwa+cena, typ+„za noc", parametry. */ .e-con.wds-hp-domek-r1,
.e-con.wds-hp-domek-r2 {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.wds-hp-domek-r1 > *,
.wds-hp-domek-r2 > * {
	width: auto !important;
}

.e-con.wds-hp-domek-r1 {
	--margin-top: 18px;
}

.wds-hp-domek-nazwa .elementor-heading-title {
	font-size: 30px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	transition: color 0.3s linear;
}

.wds-hp-domek:hover .wds-hp-domek-nazwa.elementor-widget-heading .elementor-heading-title,
.wds-hp-domek:hover .wds-hp-domek-nazwa .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-accent);
}

.wds-hp-domek-cena .elementor-heading-title {
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

.e-con.wds-hp-domek-r2 {
	--margin-top: 6px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-hp-domek-typ.elementor-widget-heading .elementor-heading-title,
.wds-hp-domek-typ .elementor-widget-heading .elementor-heading-title,
.wds-hp-domek-jedn.elementor-widget-heading .elementor-heading-title,
.wds-hp-domek-jedn .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wds-hp-domek-par p {
	margin: 0;
	color: var(--wds-ink-2);
	font-size: 15px;
	line-height: 1.5;
}

.wds-hp-domek-par {
	margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * 3. Opinie Google — zywy widget Trustindex na ciemnej zieleni
 *
 * Widget renderuje wlasna karuzele, wiec siatki wlosowej z makiety nie da sie
 * z niego zlozyc. Zostaje nadtytul i naglowek z projektu plus przemalowanie.
 *
 * UWAGA: obejscie hydratacji siedzi w functions.php (wp_footer prio 99).
 * Elementor 4 hydratuje kontenery przez innerHTML i kasuje div inicjujacy —
 * bez tego obejscia sekcja ma wysokosc 0.
 * ------------------------------------------------------------------ */

.wds-hp-opinie .ti-widget.ti-goog .ti-review-item > .ti-inner,
.wds-hp-opinie .ti-widget.ti-goog .ti-review-item .ti-inner {
	background: var(--wds-dark) !important;
	border: 1px solid var(--wds-wlos-cd) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.wds-hp-opinie .ti-widget.ti-goog .ti-name,
.wds-hp-opinie .ti-widget.ti-goog .ti-rating {
	color: var(--wds-bg-jasne) !important;
}

/* Klasa tresci opinii to `.ti-review-text-container`, nie `.ti-review-text` —
 * ta druga w tym wydaniu wtyczki nie istnieje w ogole. Zmierzone: akapity
 * zostawaly czarne na ciemnej zieleni. */
.wds-hp-opinie .ti-widget.ti-goog .ti-review-text-container,
.wds-hp-opinie .ti-widget.ti-goog .ti-review-content,
.wds-hp-opinie .ti-widget.ti-goog .ti-review-text,
.wds-hp-opinie .ti-widget.ti-goog .ti-inner,
.wds-hp-opinie .ti-widget.ti-goog .ti-read-more {
	color: rgba(244, 241, 234, 0.82) !important;
}

/* Boks oceny po lewej: „DOSKONAŁA" i „Na podstawie 54 opinii". */
.wds-hp-opinie .ti-widget.ti-goog .ti-rating-text {
	color: rgba(244, 241, 234, 0.75) !important;
}

/* Sama liczba opinii jest w <strong> i <span class="nowrap">, ktorym wtyczka
 * daje wlasny czarny kolor — dziedziczenie po `.ti-rating-text` ich nie
 * dotyczy. Zmierzone: `rgb(0, 0, 0)` na tle #1E2A1D. */
.wds-hp-opinie .ti-widget.ti-goog .ti-rating-text strong,
.wds-hp-opinie .ti-widget.ti-goog .ti-rating-text .nowrap,
.wds-hp-opinie .ti-widget.ti-goog .ti-rating-text a {
	color: var(--wds-bg-jasne) !important;
	font-weight: 500 !important;
}

/* „Czytaj więcej" — <span class="ti-read-more-active"> w srodku
 * `.ti-read-more`; rowniez wlasny czarny kolor, rowniez niewidoczny. */
.wds-hp-opinie .ti-widget.ti-goog .ti-read-more-active,
.wds-hp-opinie .ti-widget.ti-goog .ti-read-more span {
	color: var(--wds-gold) !important;
	cursor: pointer;
}

/* „DOSKONAŁA" siedzi w <strong class="ti-rating ti-rating-large"> — w projekcie
 * to zloty nadtytul 11px, a nie bialy napis 24/600. */
.wds-hp-opinie .ti-widget.ti-goog strong.ti-rating-large {
	color: var(--wds-gold) !important;
	font-family: Archivo, system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
}

/* Gwiazdki sa <img>, nie glifem — koloru nie da sie ustawic `color`.
 * Filtr przybliza bialy plik SVG do zlota #C99A5F z projektu. */
.wds-hp-opinie .ti-widget.ti-goog img.ti-star {
	filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(776%)
		hue-rotate(346deg) brightness(89%) contrast(85%) !important;
}

/* Strzalki karuzeli: projekt nie ma bialych krazkow — obrys na wlosie. */
.wds-hp-opinie .ti-widget.ti-goog .ti-next,
.wds-hp-opinie .ti-widget.ti-goog .ti-prev {
	background: transparent !important;
	border: 1px solid var(--wds-wlos-cd) !important;
	box-shadow: none !important;
}

.wds-hp-opinie .ti-widget.ti-goog .ti-next::after,
.wds-hp-opinie .ti-widget.ti-goog .ti-prev::after,
.wds-hp-opinie .ti-widget.ti-goog .ti-next svg,
.wds-hp-opinie .ti-widget.ti-goog .ti-prev svg {
	border-color: rgba(244, 241, 234, 0.75) !important;
	fill: rgba(244, 241, 234, 0.75) !important;
}

.wds-hp-opinie .ti-widget.ti-goog .ti-date,
.wds-hp-opinie .ti-widget.ti-goog .ti-verified-review,
.wds-hp-opinie .ti-widget.ti-goog .ti-footer {
	color: var(--wds-na-cd-meta) !important;
}

.wds-hp-opinie .ti-widget.ti-goog .ti-footer a {
	color: var(--wds-gold) !important;
}

/* Logo Google jest ciemne na jasnym tle — na zieleni znika. */
.wds-hp-opinie .ti-widget.ti-goog .ti-large-logo img,
.wds-hp-opinie .ti-widget.ti-goog .ti-footer img {
	filter: brightness(0) invert(1);
	opacity: 0.75;
}

/* ------------------------------------------------------------------ *
 * 4. FAQ — lewa kolumna przyklejona, akordeon na wlosach
 *
 * Prefiks jest czteroklasowy, bo Elementor emituje KAZDA kontrolke widzetu
 * selektorem .elementor-<post> .elementor-element.elementor-element-<id>
 * (0,3,0), a post-11.css laduje sie PO motywie potomnym.
 * ------------------------------------------------------------------ */

.wds-hp-faq-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 88px !important;
	align-items: start;
}

.wds-hp-faq-row > * {
	min-width: 0;
}

/* `.e-con` z `frontend.min.css` ustawia `position: relative` — ta sama
 * specyficznosc (0,1,0), ale pozniejszy arkusz, wiec `position: sticky`
 * z motywu przegrywalo remisem. `top` Elementor zostawia w spokoju, wiec
 * przezywalo i dzialalo jako przesuniecie wzgledne: kolumna zjezdzala
 * o 120px w dol i robila dziure pod naglowkiem sekcji (zmierzone
 * 2026-08-01 na trzech podstronach naraz). Musi byc (0,2,0). */
.e-con.wds-hp-faq-lewa {
	position: sticky;
	top: 120px;
	align-self: start;
}

.wds-hp-faq-lewa .wds-tresc p {
	max-width: 440px;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-accordion-item {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid var(--wds-wlos-mocny) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-accordion-item:last-child {
	border-bottom: 1px solid var(--wds-wlos-mocny) !important;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wds-ink) !important;
	font-family: Newsreader, Georgia, serif !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Projekt trzyma pytanie w atramencie takze wtedy, gdy odpowiedz jest otwarta —
 * akcent niesie wylacznie znak „+" po prawej. */
.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active {
	color: var(--wds-ink) !important;
}

/* Ikona: projekt uzywa znaku „+" w terakocie po prawej. Elementor renderuje
 * ja jako <svg fill=…>, wiec kolor idzie na fill, nie na color. */
.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-accordion-icon {
	order: 2;
	width: auto !important;
	margin: 0 !important;
	color: var(--wds-accent) !important;
	font-size: 20px;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-accordion-icon svg {
	fill: var(--wds-accent);
	width: 18px;
	height: 18px;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-content {
	padding: 0 0 28px !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wds-ink-2) !important;
	font-size: 17px !important;
	line-height: 1.72 !important;
}

.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-content p {
	max-width: 640px;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Galeria — kolaz 6-kolumnowy
 *
 * Wlasny wariant, NIE .wds-masonry: tamten (3 kolumny, wiersz 88px) obsluguje
 * strony domkow i /galeria/ i ma zostac bez zmian. Tutaj rytm z projektu:
 * 6 kolumn, wiersz 180px, jawne rozpietosci.
 *
 * KAZDA regula na .gallery-item musi miec !important — WordPress narzuca
 * .gallery-item{max-width:33.33%} z rdzenia.
 * ------------------------------------------------------------------ */

.wds-hp-masonry .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: 180px;
	grid-auto-flow: row dense;
	gap: 16px;
	column-count: auto;
	margin: 0 !important;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	grid-column: span 2;
	grid-row: span 1;
}

/* Rozpietosci wprost z makiety. Cykl dziewieciu kafli; 10-12 dopelniaja
 * ostatni wiersz po dwie kolumny, wiec siatka nie ma dziur przy 12 zdjeciach. */
.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(1) {
	grid-column: span 3;
	grid-row: span 2;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(2) {
	grid-column: span 3;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(3) {
	grid-column: span 1;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(5) {
	grid-column: span 2;
	grid-row: span 2;
}

.wds-hp-masonry .elementor-image-gallery .gallery-icon {
	display: block;
	overflow: hidden;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0;
}

.wds-hp-masonry .elementor-image-gallery .gallery-icon > a {
	display: block;
	height: 100%;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0 !important;
	transition: transform 0.5s ease-out;
}

.wds-hp-masonry .elementor-image-gallery .gallery-item:hover img {
	transform: scale(1.04);
}

/* Prog przelacznika: makieta pokazuje 9 kafli, nie 12. Regula jest DODATKOWA
 * wobec bazowej (ukrywa 13+) — obie skladaja sie bez konfliktu. */
@media (min-width: 768px) {
	.wds-gal-9:not(:has(.wds-gal-cb:checked))
		.elementor-image-gallery .gallery-item:nth-child(n + 10) {
		display: none !important;
	}

	.wds-gal-9:not(:has(.elementor-image-gallery .gallery-item:nth-child(10)))
		.wds-gal-toggle {
		display: none;
	}
}

/* Wariant przelacznika na ciemnej sekcji. Sam komponent stoi wyzej, przy
 * regulach progu galerii. */
.wds-sek-cd .wds-gal-btn {
	border-color: rgba(244, 241, 234, 0.45);
	color: var(--wds-bg);
}

/* ------------------------------------------------------------------ *
 * 6. Blok SEO — dwa akapity, potem tekst + udogodnienia + zdjecie
 * ------------------------------------------------------------------ */

.wds-hp-seo-2kol {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px !important;
}

.wds-hp-seo-2kol > * {
	min-width: 0;
}

.e-con.wds-hp-seo-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 80px !important;
	/* !important, bo kontrola wyrownania kontenera emituje `align-items` z
	 * (0,3,0). Bez tego wychodzilo `normal`, lewa kolumna konczyla sie wysoko
	 * przy zdjeciu 4:5 i pod spodem zostawala pionowa dziura ~400px. */
	align-items: center !important;
	--margin-top: 46px;
	padding-top: 36px;
	border-top: 1px solid var(--wds-wlos);
}

/* Projekt lamie ten tytul na dwie linie; bez ograniczenia rozlewa sie na cale
 * 1340px i sekcja zaczyna sie jednym bardzo dlugim wierszem. */
.wds-hp-seo-tytul .elementor-heading-title {
	max-width: 1000px;
	text-wrap: balance;
}

.wds-hp-seo-row > * {
	min-width: 0;
}

.wds-hp-seo-row .wds-tresc p {
	max-width: 560px;
}

/* Kadr 4:3 pokazuje 375 z 800 px zrodla (FAQ.webp, 500x800). Domyslne
 * `50% 50%` ucieloby podstawe domku i rowery — w zrodle domek siedzi
 * na y 455–700. Kotwica 93% daje okno y 395–770: nad kominem ~68 px, pod domkiem
 * ~80 px trawy. Przy 100% komin mial 13 px zapasu i kadr wygladal na
 * uciety, a trawy bylo 123 px.
 *
 * Proporcja dobrana tak, by wysokosc kadru (~427 px przy kolumnie 570 px)
 * zgadzala sie z wysokoscia lewej kolumny (~372 px). Wiersz ma
 * `align-items: center`, wiec kazda wyzsza proporcja odklada roznice
 * na puste pasy nad naglowkiem i pod tabelka — przy 4:5 bylo po 190 px,
 * przy 1:1 po 119 px, teraz po ~38 px. */
.wds-hp-seo-row .wds-kadr img {
	object-position: 50% 93%;
}

/* Komorka siatki wlosowej — udogodnienia i lista okolicy. */
.wds-wl-poz {
	padding: 22px 24px;
	font-size: 16px;
	line-height: 1.4;
	justify-content: center !important;
}

.wds-wl-poz.elementor-widget-heading .elementor-heading-title,
.wds-wl-poz .elementor-widget-heading .elementor-heading-title {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}

/* Ostatnie udogodnienie zajmuje caly wiersz — piec pozycji w dwoch kolumnach. */
.wds-hp-udogodnienia > *:last-child {
	grid-column: span 2;
}

/* ------------------------------------------------------------------ *
 * 7. Okolica — tekst i dwanascie atrakcji w siatce wlosowej
 * ------------------------------------------------------------------ */

.wds-hp-okolica-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 88px !important;
	align-items: start;
}

.wds-hp-okolica-row > * {
	min-width: 0;
}

.wds-sek-cd .wds-wl-poz.elementor-widget-heading .elementor-heading-title,
.wds-sek-cd .wds-wl-poz .elementor-widget-heading .elementor-heading-title {
	color: rgba(244, 241, 234, 0.88);
	font-size: 16.5px;
}

/* ------------------------------------------------------------------ *
 * 8. Zdjecia okolicy — cztery kolumny 4:3 z podpisami
 *
 * Podpis bierze sie z `post_excerpt` zalacznika (patrz /root/wds-podpisy.php),
 * bo <figcaption> galerii WordPressa renderuje wlasnie to pole, a nie tytul.
 * ------------------------------------------------------------------ */

.e-con.wds-hp-okolica-glowa {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 40px !important;
	flex-wrap: wrap !important;
	--margin-bottom: 22px;
}

.wds-hp-okolica-glowa > * {
	width: auto !important;
}

.wds-hp-foto .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 16px;
	column-count: auto;
	margin: 0 !important;
}

.wds-hp-foto .elementor-image-gallery .gallery-item {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.wds-hp-foto .elementor-image-gallery .gallery-icon {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0;
}

.wds-hp-foto .elementor-image-gallery .gallery-icon > a {
	display: block;
	height: 100%;
}

.wds-hp-foto .elementor-image-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0 !important;
	transition: transform 0.5s ease-out;
}

.wds-hp-foto .elementor-image-gallery .gallery-item:hover img {
	transform: scale(1.04);
}

.wds-hp-foto .elementor-image-gallery .gallery-caption {
	margin: 10px 0 0 !important;
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: left;
}

/* ------------------------------------------------------------------ *
 * 9. CTA zamykajace
 * ------------------------------------------------------------------ */

.wds-hp-cta-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 56px !important;
	flex-wrap: wrap !important;
	padding: 40px 0;
	border-top: 1px solid var(--wds-wlos);
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-hp-cta-row > * {
	width: auto !important;
}

.wds-hp-cta-prawa {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px !important;
}

.wds-hp-cta-tel.elementor-widget-heading .elementor-heading-title a,
.wds-hp-cta-tel.elementor-widget-heading .elementor-heading-title,
.wds-hp-cta-tel .elementor-widget-heading .elementor-heading-title a,
.wds-hp-cta-tel .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 52px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	transition: color 0.3s linear;
}

.wds-hp-cta-tel .elementor-heading-title a:hover {
	color: var(--wds-accent);
}

/* ------------------------------------------------------------------ *
 * Rytm pionowy i responsywnosc strony glownej
 * ------------------------------------------------------------------ */

.wds-hp-hero-tytul { margin: 22px 0 0; }
.wds-hp-hero-lead { margin-top: 26px; }
.wds-hp-hero-cta { margin-top: 0; }
.e-con.wds-hp-galeria-glowa { --margin-bottom: 24px; }
.e-con .wds-hp-seo-tytul.elementor-widget.elementor-widget { margin-block-end: 28px; }
.e-con .wds-hp-seo-h3.elementor-widget.elementor-widget { margin-block-end: 24px; }
.e-con.wds-hp-udogodnienia { --margin-top: 22px; }
.wds-hp-cta-lead { margin-top: 20px; }

@media (max-width: 1024px) {
	.wds-hp-domki-glowa,
	.wds-hp-faq-row,
	.wds-hp-okolica-row,
	.e-con.wds-hp-seo-row,
	.wds-hp-seo-2kol {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px !important;
	}

	.e-con.wds-hp-faq-lewa {
		position: static;
	}

	.e-con.wds-hp-domki-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wds-hp-masonry .elementor-image-gallery .gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 150px;
	}

	.wds-hp-foto .elementor-image-gallery .gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title {
		font-size: 24px !important;
	}
}

/* Hero: przy wezszych oknach tlo (zdjecie z markerami domkow) skaluje sie tak,
 * ze pinezki wchodza w linie naglowka — zmierzone przy 1024 i 1440 px, gdzie markery
 * przecinaly slowo „Bieszczadach". Pozycja tla tego nie ratuje: przy tej
 * szerokosci obraz dokladnie wypelnia kadr, wiec nie ma zapasu poziomego, a
 * markery siedza przy samej dolnej krawedzi zdjecia. Poglebiamy wiec dolna
 * czesc gradientu, zeby pinezki tonely pod tekstem zamiast go przecinac.
 * Selektor musi byc dwuklasowy jak regula bazowa (patrz komentarz przy niej). */
@media (max-width: 1600px) {
	.wds-hp-hero.e-con::before {
		background: linear-gradient(
			180deg,
			rgba(20, 26, 18, 0.48) 0%,
			rgba(20, 26, 18, 0.12) 26%,
			rgba(20, 26, 18, 0.72) 62%,
			rgba(20, 26, 18, 0.9) 100%
		);
	}
}

@media (max-width: 767px) {
	.wds-hp-hero.e-con {
		min-height: 78vh;
	}

	.e-con.wds-hp-domki-siatka {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Kolaz 6-kolumnowy przy 390px daje kafle po 50px — dwie rowne kolumny
	 * czytaja sie lepiej niz makieta przeskalowana wprost. */
	.wds-hp-masonry .elementor-image-gallery .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
		gap: 10px;
	}

	.wds-hp-masonry .elementor-image-gallery .gallery-item,
	.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(1),
	.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(2),
	.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(3),
	.wds-hp-masonry .elementor-image-gallery .gallery-item:nth-child(5) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.wds-hp-foto .elementor-image-gallery .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.wds-hp-udogodnienia > *:last-child {
		grid-column: span 1;
	}

	.wds-hp-cta-row {
		align-items: flex-start !important;
		gap: 28px !important;
		padding: 28px 0;
	}

	.wds-hp-cta-tel .elementor-heading-title,
	.wds-hp-cta-tel .elementor-heading-title a {
		font-size: 38px;
	}

	.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title {
		font-size: 21px !important;
		padding: 20px 0 !important;
	}

	.e-con .wds-hp-seo-tytul.elementor-widget.elementor-widget { margin-block-end: 26px; }
	.e-con.wds-hp-galeria-glowa { --margin-bottom: 24px; }
}

/* 1a. Hero na telefonie — pasek zdjecia i tekst na kremowym
 *
 * Do 767 px hero przestaje byc zdjeciem z tekstem NA nim. Rozpada sie na dwie
 * czesci: pasek zdjecia dokladnie 350 px u gory, ktorego nic nie zaslania, i blok
 * tekstu pod nim na kremowym tle z ciemna typografia. Tresc zostaje w calosci —
 * nadtytul, H1, lead i oba przyciski. Powod: zmierzone na 390 px hero mialo 658 px
 * (78vh), z czego sam blok tekstu 447 px — zdjecia praktycznie nie bylo widac.
 *
 * Pasek niesie PSEUDOELEMENT, nie tlo kontenera. Tlo kontenera pomalowaloby cala
 * jego wysokosc (350 px paska plus blok tekstu), a `background-size` nie umie
 * ograniczyc malowania do gornego wycinka bez deformacji: `100% 350px` rozciaga
 * obraz, `auto 350px` daje 525 px szerokosci, czyli krem po bokach juz przy 600 px
 * okna. `::before` z `height: 350px` robi to dokladnie i przy okazji pozwala podac
 * MNIEJSZY plik niz kontrolka Elementora.
 *
 * KOLEJNOSC W PLIKU JEST CZESCIA ROZWIAZANIA. Ten blok musi stac po
 * `@media (max-width: 1600px)` (gradient ::before) i po bloku `@media (max-width: 767px)`
 * wyzej (min-height 78vh). Przy 390 px pasuja wszystkie trzy zapytania naraz,
 * specyficznosc na kontenerze w kazdym jest ta sama (0,2,0), wiec rozstrzyga
 * pozycja — to pulapka §8j widziana od drugiej strony. */

@media (max-width: 767px) {

	/* (0,2,0). Bije `.e-con` z frontend.min.css (0,1,0), remisuje z regula bazowa
	 * hero i z blokiem 78vh wyzej — wygrywa pozycja w pliku.
	 *
	 * `min-height: 0` zdejmuje 78vh: wysokosc ma teraz wynikac z tresci
	 * (350 px paska plus blok tekstu), a nie z okna.
	 *
	 * `background-image` i `background-color` ida z `!important`, bo kontrolka tla
	 * emituje je selektorem (0,4,0) — `:not()` dolicza swoj argument:
	 * `.elementor-11 .elementor-element.elementor-element-bb000009
	 * :not(.elementor-motion-effects-element-type-background)`. Sama specyficznoscia
	 * z motywu tego nie przebijesz. */
	.wds-hp-hero.e-con {
		--wds-hp-pasek: 350px;
		min-height: 0;
		background-color: var(--wds-bg) !important;
		background-image: none !important;
	}

	/* Pasek zdjecia. (0,2,0) wobec `.e-con:before` (0,1,0) z frontend.min.css.
	 *
	 * `content: ""` powtorzone celowo, a nie przez roztargnienie: Elementor daje
	 * `.e-con::before` wartosc `content: var(--background-overlay)`, ktora bez
	 * skonfigurowanej nakladki rozwiazuje sie do `none` i caly pseudoelement
	 * przestaje istniec. Sprawdzac `content`, nie `background`.
	 *
	 * `bottom: auto` jest konieczne — regula bazowa ma `inset: 0`, czyli `bottom: 0`.
	 * Skrot `background` kasuje przy okazji gradient z reguly bazowej i z bloku
	 * 1600 px. Gradientu tu nie ma swiadomie: nad paskiem nie stoi ani jeden znak.
	 *
	 * Plik 2048x585 zamiast pelnych 3840x1097: zdjecie jest panorama 3,5:1, wiec
	 * w pasie 1,11:1 (390x350) o skali decyduje WYSOKOSC — obraz renderuje sie
	 * w 1225 px CSS niezaleznie od szerokosci okna. DPR 3 chcialby 3676 px, DPR 2
	 * 2450 px; 2048 to swiadomy kompromis (218 KB zamiast 509 KB pelnego pliku,
	 * czyli i tak mniej niz 304 KB, ktore pobieral telefon przed 09.08).
	 *
	 * `83%` zamiast `center`: przy 390 px w kadrze miesci sie tylko 31,8%
	 * szerokosci zdjecia, a cztery sylwetki domkow siedza w 62,5–82,5%. Wzor
	 * z `elementor-pulapki` §11b daje P = 0,83 — okno wypada wtedy na 56,6–88,4%
	 * przy 390 px i 31,0–93,6% przy 767 px, wiec wszystkie cztery sa widoczne
	 * na calym przedziale. `center` ucinalby trzy z nich. Pion zostaje caly
	 * (585 x 0,598 = 350), wiec druga wspolrzedna to `center`, nie lenistwo. */
	.wds-hp-hero.e-con::before {
		content: "";
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		height: var(--wds-hp-pasek);
		background: url("https://wdoliniesanu.nexussync.ovh/wp-content/uploads/2026/08/hero-dolina-domki-2048x585.webp")
			83% center / cover no-repeat;
	}

	/* Tekst schodzi pod pasek. Wlot 36 px — rowny dolnemu paddingowi kontenera
	 * z kontrolki mobilnej, wiec blok kremowy jest symetryczny.
	 *
	 * (0,3,0) plus `!important`. Elementor kladzie `padding-block-start` na
	 * `.e-con > .e-con-inner`, czyli (0,2,0), ale z pliku ladowanego PO motywie
	 * potomnym — dlatego regula bazowa `.wds-hp-hero > .e-con-inner { padding-bottom }`
	 * jest tu martwa (zmierzone: 36 px, wprost z `padding_mobile`, nie 56 z motywu).
	 *
	 * `justify-content: flex-start` jest zabezpieczeniem, nie kosmetyka. Przy
	 * `min-height: 0` roznicy nie widac, bo kontener ma wysokosc tresci. Gdyby
	 * cokolwiek przywrocilo minimalna wysokosc, `flex-end` z reguly bazowej
	 * przykleiloby tekst do dolu i pod paskiem otworzylaby sie pusta kremowa dziura. */
	.wds-hp-hero.e-con > .e-con-inner {
		padding-top: calc(var(--wds-hp-pasek) + 36px) !important;
		justify-content: flex-start !important;
	}

	/* Odstep miedzy blokiem tekstu a przyciskami. Przy 390 px wiersz lamie sie na
	 * dwie linie (`.wds-hp-hero-tekst` ma flex-basis 520 px przy 350 px dostepnych),
	 * wiec 56 px z ukladu poziomego staje sie dziura. (0,2,0) plus `!important`
	 * wobec (0,1,0) plus `!important` reguly bazowej. */
	.wds-hp-hero .wds-hp-hero-row {
		gap: 28px !important;
	}

	/* Nadtytul wraca do prymitywu `.wds-nad` — terakota na kremowym. (0,3,0): tyle
	 * ma regula bazowa i tyle trzeba, zeby pobic globalna regule widzetu
	 * (`.elementor-widget-heading .elementor-heading-title`, 0,2,0, arkusz ladowany
	 * PO motywie — §8a). */
	.wds-nad-hero.elementor-widget-heading .elementor-heading-title,
	.wds-nad-hero .elementor-widget-heading .elementor-heading-title {
		color: var(--wds-accent);
	}

	/* Kreska 34 px przed nadtytulem — ta sama terakota, zeby czytala sie jako czesc
	 * nadtytulu, a nie jako wlos separujacy sekcje. Wlos na jasnym przy 1 px bylby
	 * praktycznie niewidoczny. (0,3,0) wobec (0,2,0) reguly bazowej. */
	.wds-nad-hero.elementor-widget-heading .elementor-heading-title::before {
		background: var(--wds-accent);
	}

	/* H1 na kremowym. Rozmiaru NIE ruszamy: clamp(2.6rem, 6.4vw, 6rem) przy 390 px
	 * daje 6.4vw = 25 px, wiec clamp bierze dolna granice 41,6 px — kanonowe 42 px
	 * na telefonie wychodza same. (0,3,0) jak regula bazowa, wygrywa pozycja. */
	.wds-hp-hero-tytul.elementor-widget-heading .elementor-heading-title,
	.wds-hp-hero-tytul .elementor-widget-heading .elementor-heading-title {
		color: var(--wds-ink);
	}

	/* Lead. (0,2,1) zamiast (0,1,1) reguly bazowej. */
	.wds-hp-hero .wds-hp-hero-lead p {
		color: var(--wds-ink-2);
	}

	/* Kontener CTA — Elementor daje kazdemu `.e-con` padding 10px, wiec z 330 px
	 * szerokosci na tresc zostawalo 310, a dwa przyciski potrzebuja 314 (155 + 14
	 * gap + 145). Zabraklo czterech pikseli i wiersz lamal sie na dwa rzedy —
	 * zmierzone przy 390 px. Po zdjeciu paddingu zostaje 16 px zapasu.
	 * (0,2,0) plus `!important` wobec kontrolki kontenera. */
	.e-con.wds-hp-hero-cta {
		padding: 0 !important;
	}

	/* Przyciski — metryka. Padding schodzi z `--wds-btn-maxi` (18/34) na `--wds-btn`
	 * (16/30), czyli kanonowa metryka hero. Zmierzone: przy 18/34 oba przyciski
	 * zajmuja dokladnie 330 px, a w oknie 390 px na tresc zostaje 350 px — czyli
	 * mieszcza sie w jednym rzedzie, ale bez zapasu. Przy 16/30 to okolo 314 px.
	 * (0,3,0) plus `!important` wobec (0,2,0) plus `!important` reguly hero. */
	.wds-hp-hero-cta .elementor-element .elementor-button {
		padding: var(--wds-btn) !important;
	}

	/* „Zobacz domki" — wariant podstawowy z kanonu: ciemna zielen na kremie, hover
	 * terakota. Klasa `.wds-btn-jasny` (krem na ciemnym) jest tu dokladna
	 * odwrotnoscia potrzeby, a jej regula ma (0,3,0) z `!important` — stad (0,4,0),
	 * tez z `!important`. Stany maja (0,5,0), bo pseudoklasa liczy sie jak klasa. */
	.wds-hp-hero-cta .elementor-element.wds-btn-jasny .elementor-button {
		background-color: var(--wds-dark) !important;
		color: var(--wds-bg) !important;
	}

	.wds-hp-hero-cta .elementor-element.wds-btn-jasny .elementor-button:hover,
	.wds-hp-hero-cta .elementor-element.wds-btn-jasny .elementor-button:focus-visible {
		background-color: var(--wds-accent) !important;
		color: var(--wds-bg-jasne) !important;
	}

	/* Telefon — wariant obrysowy NA JASNYM: przezroczyste tlo, wlos, atrament,
	 * hover na pelna ciemna zielen. `.wds-btn-obrys` z gory pliku jest wariantem
	 * na CIEMNE tlo (obrys rgba(244,241,234,.45)) i tutaj bylby niewidoczny. */
	.wds-hp-hero-cta .elementor-element.wds-btn-obrys .elementor-button {
		background-color: transparent !important;
		color: var(--wds-ink) !important;
		border-color: var(--wds-wlos-mocny) !important;
	}

	.wds-hp-hero-cta .elementor-element.wds-btn-obrys .elementor-button:hover,
	.wds-hp-hero-cta .elementor-element.wds-btn-obrys .elementor-button:focus-visible {
		background-color: var(--wds-dark) !important;
		color: var(--wds-bg) !important;
		border-color: var(--wds-dark) !important;
	}
}

/* Tytul pytania jest <a class="elementor-accordion-title"> wewnatrz
 * .elementor-tab-title. Jako link lapie globalny `link_normal_color` z kitu
 * (terakota) — a projekt chce atramentu, akcent rezerwujac dla stanu
 * aktywnego i dla znaku „+". Anchor musi tez rosnac, zeby zepchnal ikone
 * na prawo; sama regula `order` na ikonie nie wystarczy, bo bez `flex-grow`
 * oba elementy skleiłyby się po lewej. */
.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-accordion-title {
	flex: 1 1 auto;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-decoration: none !important;
}

/* Elementor daje ikonie `width: 1.5em` i `float`. Float w kontenerze flex jest
 * ignorowany, ale szerokosc juz nie — bez tego znak „+" ma stala ramke
 * i odkleja sie od prawej krawedzi. */
.wds-faq.elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	width: auto !important;
	flex: 0 0 auto;
}

/* ================================================================== *
 * KONTAKT — projekt Claude Design (`Kontakt.dc.html`)
 *
 * Strona zlozona od nowa: zamiast banera ze zdjeciem i bialej karty formularza
 * projekt daje typograficzny hero, pasmo kafli kontaktowych na siatce wlosowej
 * i sekcje dojazdu z mapa. Od 09.08.2026 pasmo ma dwa kafle, telefon i adres,
 * a sekcje rezerwacji oraz formularza CF7 zostaly ze strony usuniete.
 *
 * Naglowki wszedzie z `.elementor-widget-heading` w srodku selektora —
 * inaczej przegrywaja z globalna regula widzetu z `post-76.css`.
 * ================================================================== */

/* Tlo karty na przyciemnionym kremie, jedyna wartosc spoza tabeli palety.
 * Po usunieciu formularza z Kontaktu korzysta z niej juz tylko karta na
 * stronach domkow. */
:root { --wds-bg-karta: #ede9de; }

/* ------------------------------------------------------------------ *
 * Hero — nadtytul, tytul i lead w dwoch kolumnach
 * ------------------------------------------------------------------ */

.e-con .wds-kt-hero .wds-nad.elementor-widget.elementor-widget { margin-block-end: 22px; }

.wds-kt-hero-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 88px !important;
	align-items: end !important;
}

.wds-kt-hero-row > * { min-width: 0; }

.wds-tyt-kthero.elementor-widget-heading .elementor-heading-title,
.wds-tyt-kthero .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2.6rem, 6vw, 5.5rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.wds-kt-hero-lead p {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.68;
}

/* ------------------------------------------------------------------ *
 * Kafle kontaktowe na siatce wlosowej
 *
 * Projekt rysuje wlos tylko nad i pod pasmem — pionowe krawedzie zewnetrzne
 * sa otwarte. W ukladzie trzykolumnowym z tekstem do lewej kafel skrajny lezy
 * dzieki temu rowno z osia tekstu strony. Od 09.08.2026 pasmo jest
 * dwukolumnowe, tekst stoi na srodku i padding wraca symetryczny.
 * ------------------------------------------------------------------ */

.wds-kt-siatka {
	border-left: 0;
	border-right: 0;
}

.wds-kt-kafel {
	padding: 40px 36px !important;
	text-decoration: none;
	transition: color 0.3s linear;
}

.wds-kt-siatka > .wds-kt-kafel:first-child { padding-left: 0 !important; }
.wds-kt-siatka > .wds-kt-kafel:last-child { padding-right: 0 !important; }

.wds-kt-kafel:hover .elementor-heading-title { color: var(--wds-accent); }

.wds-kt-etykieta.elementor-widget-heading .elementor-heading-title,
.wds-kt-etykieta .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

.e-con .wds-kt-etykieta.elementor-widget.elementor-widget { margin-block-end: 16px; }

.wds-kt-wartosc.elementor-widget-heading .elementor-heading-title,
.wds-kt-wartosc .elementor-widget-heading .elementor-heading-title {
	font-family: Newsreader, Georgia, serif;
	font-weight: 300;
	letter-spacing: 0;
	transition: color 0.3s linear;
}

.wds-kt-wartosc-tel .elementor-heading-title { font-size: 40px; line-height: 1.1; }
.wds-kt-wartosc-adres .elementor-heading-title { font-size: 32px; line-height: 1.25; }

/* Pasmo dwukolumnowe (Telefon + Adres). Tresc kafla jest wysrodkowana, wiec
 * padding musi byc symetryczny — reguly wyzej zerowaly go na skrajnych kaflach
 * pod uklad trzykolumnowy z tekstem do lewej. Selektor jest o klase mocniejszy,
 * a jego nadpisanie w @media podniesione tak samo: inaczej zapytanie medialne
 * przegrywa specyficznoscia i telefon zostaje z paddingiem bocznym. */
.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel,
.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel:first-child,
.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel:last-child {
	padding: 40px 36px !important;
	text-align: center;
}

.wds-kt-nota { margin-top: 12px; }

.wds-kt-nota.elementor-widget-heading .elementor-heading-title,
.wds-kt-nota .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * Tytul sekcji — wspolny dla dojazdu i pozostalych naglowkow Kontaktu
 * ------------------------------------------------------------------ */

.wds-tyt-kt.elementor-widget-heading .elementor-heading-title,
.wds-tyt-kt .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.e-con .wds-tyt-kt.elementor-widget.elementor-widget { margin-block-end: 24px; }

/* ------------------------------------------------------------------ *
 * Dojazd — naglowek, mapa 21:9, cztery kierunki na wlosach
 * ------------------------------------------------------------------ */

.wds-kt-dojazd-glowa {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 48px !important;
	flex-wrap: wrap !important;
	padding-bottom: 26px !important;
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-kt-dojazd-glowa > * { width: auto !important; }
.e-con .wds-kt-dojazd-glowa .wds-tyt-kt.elementor-widget.elementor-widget { margin-block-end: 0; }

.wds-kt-dojazd-lead p {
	max-width: 400px;
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.7;
}

.wds-kt-mapa {
	margin-top: 32px;
}

/* Mapa na Kontakcie. `height: auto` musi byc z !important, bo kontrolka
 * widzetu google_maps emituje wlasna wysokosc w px na (0,3,0). */
.wds-kt-mapa .elementor-custom-embed,
.wds-kt-mapa iframe {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	height: auto !important;
	border: 0;
	filter: grayscale(0.35) contrast(0.95);
}

@media (max-width: 1024px) {.wds-kt-hero-row{
		grid-template-columns: minmax(0, 1fr);
		gap: 40px !important;
	}

	.wds-kt-siatka { grid-template-columns: minmax(0, 1fr); }

	.wds-kt-siatka > .wds-kt-kafel,
	.wds-kt-siatka > .wds-kt-kafel:first-child,
	.wds-kt-siatka > .wds-kt-kafel:last-child {
		padding: 28px 0 !important;
	}

	.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel,
	.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel:first-child,
	.wds-kt-siatka.wds-siatka-2 > .wds-kt-kafel:last-child {
		padding: 28px 0 !important;
	}
}

/* ================================================================== *
 * STRONA DOMKU — projekt Claude Design (`Domek.dc.html`)
 *
 * Jeden szablon, cztery dokumenty (71-74). Zamiast bocznych zakladek
 * i bialej karty z Adventa projekt daje: okruszki, tytul z cena, pasek
 * kotwic, zdjecie 21:9, kolumne informacji z przyklejonym formularzem,
 * ciemna sekcje udogodnien, galerie, teksty SEO, bloki lokalizacji
 * i nawigacje miedzy domkami.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Naglowek strony
 * ------------------------------------------------------------------ */

.e-con.wds-dm-okruszki {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	--margin-bottom: 30px;
}

.wds-dm-okruszki > * { width: auto !important; }

.wds-dm-okruch.elementor-widget-heading .elementor-heading-title,
.wds-dm-okruch .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wds-dm-okruch-akt .elementor-heading-title { color: var(--wds-ink); }
.wds-dm-okruch a { color: inherit; }
.wds-dm-okruch a:hover { color: var(--wds-accent); }

.wds-dm-tytul-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 56px !important;
	flex-wrap: wrap !important;
}

.wds-dm-tytul-row > * { width: auto !important; }

.wds-tyt-dm.elementor-widget-heading .elementor-heading-title,
.wds-tyt-dm .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2.4rem, 5.6vw, 5.5rem);
	line-height: 0.96;
	letter-spacing: -0.025em;
}

.e-con.wds-dm-meta {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 22px !important;
	flex-wrap: wrap !important;
	--margin-top: 22px;
}

.wds-dm-meta > * { width: auto !important; }

.wds-dm-meta-poz.elementor-widget-heading .elementor-heading-title,
.wds-dm-meta-poz .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Kropka rozdzielajaca — projekt rysuje ja osobnym <span>, tu ::before. */
.wds-dm-meta-osoby .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 22px;
}

.wds-dm-meta-osoby .elementor-heading-title::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wds-accent);
}

.wds-dm-cena {
	align-items: flex-end !important;
	padding-bottom: 8px !important;
	text-align: right;
}

/* Kwota mniejsza od 06.08.2026 — zostaje w tym samym miejscu, ale przestaje
 * konkurowac z tytulem domku. 34/30/27 to h3-tablet / h4-desktop / h3-mobil
 * z tabeli kanonu, czyli ta sama skala, ktora niesie reszta serwisu. */
.wds-dm-cena-kwota.elementor-widget-heading .elementor-heading-title,
.wds-dm-cena-kwota .elementor-widget-heading .elementor-heading-title {
	font-family: Newsreader, Georgia, serif;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
}

.wds-dm-cena-nota { margin-top: 8px; }

.wds-dm-cena-nota.elementor-widget-heading .elementor-heading-title,
.wds-dm-cena-nota .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Pasek kotwic — plaski, na dwoch wlosach. Zadnych kafli. */
.e-con.wds-dm-taby {
	display: flex !important;
	flex-direction: row !important;
	gap: 32px !important;
	flex-wrap: wrap !important;
	--margin-top: 22px;
	padding: 16px 0 !important;
	border-top: 1px solid var(--wds-wlos);
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-dm-taby > * { width: auto !important; }

.wds-dm-tab.elementor-widget-heading .elementor-heading-title,
.wds-dm-tab .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-ink);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wds-dm-tab a { color: inherit; transition: color 0.3s linear; }
.wds-dm-tab a:hover { color: var(--wds-accent); }

/* ------------------------------------------------------------------ *
 * Hero domku — plan doliny z zaznaczonym domkiem
 *
 * Pas ze zdjeciem z lotu ptaka, na ktorym sylwetka TEGO domku jest biala,
 * a trzy pozostale przezroczyste. Kazda podstrona ma wlasny plik
 * (plan-doliny-{bear,wolf,lynx,strix}.webp, 1920x350).
 *
 * Proporcja jest proporcja pliku, wiec na desktopie nic sie nie kadruje:
 * 1920/350 przy kontenerze 1340px daje 244px. Reszta — object-fit, szerokosc,
 * `height: auto !important` — przychodzi z `.wds-kadr` (patrz komentarz przy
 * tamtej regule: wysokosc kadru nie moze zalezec od tego, czy obraz zdazyl
 * sie zaladowac).
 * ------------------------------------------------------------------ */
.wds-dm-plan,
.wds-dm-plan img { aspect-ratio: 1920 / 350; }

/* ------------------------------------------------------------------ *
 * Informacje — tresc i przyklejony formularz
 * ------------------------------------------------------------------ */

.wds-dm-info-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 88px !important;
	align-items: start !important;
}

.wds-dm-info-row > * { min-width: 0; }

.wds-dm-lead p {
	margin: 0 0 32px;
	font-size: 30px;
	line-height: 1.45;
}

.wds-dm-opisy p { margin: 0 0 20px; }

/* „Najlepszy dla…" — jedyny akcent kolorem w tej kolumnie. */
.wds-dm-dla p {
	margin: 14px 0 0;
	padding: 20px 24px;
	border-left: 2px solid var(--wds-accent);
	background: rgba(181, 100, 42, 0.06);
	color: var(--wds-ink);
	font-size: 16.5px;
	line-height: 1.6;
}

/* Tabela parametrow zbudowana z kontenerow, nie z <table> — wiersze same
 * ukladaja sie w dwie kolumny i nie wymagaja `table-layout: fixed`. */
.e-con.wds-dm-spec { --margin-top: 28px; }

.wds-dm-spec-w {
	display: grid !important;
	grid-template-columns: 45% minmax(0, 1fr);
	gap: 24px !important;
	align-items: start !important;
	padding: 15px 0 !important;
	border-top: 1px solid var(--wds-wlos);
}

.wds-dm-spec-w > * { min-width: 0; }

.wds-dm-spec-k.elementor-widget-heading .elementor-heading-title,
.wds-dm-spec-k .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.wds-dm-spec-v.elementor-widget-heading .elementor-heading-title,
.wds-dm-spec-v .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * Prawa kolumna: kadr 4:5, trzy miniatury, pod nimi przyklejony formularz
 *
 * Jeden widzet image-gallery, nie image + galeria: tylko galeria przekazuje
 * identyfikator grupy do add_lightbox_data_attributes(), wiec tylko ona
 * tworzy pokaz slajdow. Widzet image woła to samo bez grupy i klik w duze
 * zdjecie otwieralby jednoslajdowy podglad.
 *
 * Kafle od piatego chowamy, ale ZOSTAJA w DOM — lightbox zbiera je po
 * dataset.elementorLightboxSlideshow, bez badania widocznosci (patrz komentarz
 * przy przelaczniku galerii wyzej). Klik w dowolna miniature otwiera wiec
 * pelna galerie domku, a sekcja GALERIA nizej nie jest dublowana.
 *
 * `align-self: stretch` jest warunkiem zycia `position: sticky` formularza:
 * wiersz ma `align-items: start`, wiec bez tego wrapper ma wysokosc tresci
 * i przyklejanie nie ma po czym jechac.
 * ------------------------------------------------------------------ */

.e-con.wds-dm-info-prawa {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	align-self: stretch !important;
	padding: 0 !important;
}

.wds-dm-foto-gal .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	column-count: auto;
	margin: 0 !important;
}

/* WordPress narzuca kaflom `max-width: 33.33%` z wlasnego arkusza galerii. */
.wds-dm-foto-gal .elementor-image-gallery .gallery-item {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.wds-dm-foto-gal .elementor-image-gallery .gallery-item:first-child { grid-column: 1 / -1; }

/* (0,4,0) — musi przebic `display: block !important` z reguly wyzej. */
.wds-dm-foto-gal .elementor-image-gallery .gallery .gallery-item:nth-child(n + 5) {
	display: none !important;
}

.wds-dm-foto-gal .elementor-image-gallery .gallery-icon {
	display: block;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.wds-dm-foto-gal .elementor-image-gallery .gallery-icon > a { display: block; }

/* `height: auto !important` przy aspect-ratio nie jest ozdoba: bez niego
 * WebKit zwija kadr do zera i leniwie ladowany obraz juz sie nie doczytuje. */
.wds-dm-foto-gal .elementor-image-gallery img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0;
}

/* Duzy kafel dzieli kadr z miniaturami — kwadrat na wszystkich szerokosciach
 * (decyzja 06.08.2026). Wczesniej 4:5 na desktopie, 16:9 do 1024px i 4:5 do 767px. */
.wds-dm-foto-gal .elementor-image-gallery .gallery-item:first-child img { aspect-ratio: 1 / 1; }

.wds-dm-foto-nota.elementor-widget-heading .elementor-heading-title,
.wds-dm-foto-nota .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.e-con .wds-dm-foto-nota.elementor-widget.elementor-widget { margin-block-end: 0; }

.e-con.wds-dm-formularz {
	position: sticky;
	top: 110px;
	background: var(--wds-bg-karta);
	padding: 44px 40px !important;
}

.wds-dm-form-tyt.elementor-widget-heading .elementor-heading-title,
.wds-dm-form-tyt .elementor-widget-heading .elementor-heading-title {
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: 0;
}

.e-con .wds-dm-form-tyt.elementor-widget.elementor-widget { margin-block-end: 12px; }

/* Cena tam, gdzie zapada decyzja. Ta sama informacja co w wierszu tytulu,
 * ale w zasiegu wzroku przy przycisku rezerwacji. Margines tylko przez
 * `.e-con .x.elementor-widget.elementor-widget` — Elementor zeruje kazdy
 * margin-block-end widzetu regula o wadze (0,3,0). */
.wds-dm-form-cena {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--wds-wlos);
}

.e-con .wds-dm-form-cena.elementor-widget.elementor-widget { margin-block-end: 22px; }

.wds-dm-form-cena.elementor-widget-heading .elementor-heading-title,
.wds-dm-form-cena .elementor-widget-heading .elementor-heading-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
}

.wds-dm-form-cena-j {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wds-dm-form-lead p {
	margin: 0 0 30px;
	color: var(--wds-ink-2);
	font-size: 15.5px;
	line-height: 1.6;
}

.wds-dm-form-tel { margin-top: 16px; text-align: center; }

.wds-dm-form-tel.elementor-widget-heading .elementor-heading-title,
.wds-dm-form-tel .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.wds-dm-form-tel a { color: inherit; }
.wds-dm-form-tel a:hover { color: var(--wds-accent); }

/* ------------------------------------------------------------------ *
 * Udogodnienia — ciemna sekcja, dwie listy na wlosach
 * ------------------------------------------------------------------ */

.e-con .wds-dm-udo .wds-nad.elementor-widget.elementor-widget { margin-block-end: 22px; }

.wds-dm-udo-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px !important;
	align-items: start !important;
}

/* Trzecia kolumna ze zdjeciem od 06.08.2026. Po wycieciu z „W domku" pozycji,
 * ktore powtarzaly tabele parametrow, dwie listy same nie wypelnialy juz
 * ciemnego pasma. Zdjecie jest wezsze od list (0.72fr) — ma towarzyszyc
 * tresci, nie przejmowac sekcji.
 *
 * Warunek `:has()`, a nie zwykla podmiana: dopoki zdjecia w sekcji nie ma,
 * trzecia kolumna byłaby pusta i obie listy scisnelyby sie w lewo. Uklad
 * przelacza sie sam w chwili, gdy zdjecie wchodzi do dokumentu. */
.wds-dm-udo-row:has(.wds-dm-udo-foto) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.72fr);
	gap: 56px !important;
}

.wds-dm-udo-row > * { min-width: 0; }

.wds-dm-udo-foto { align-self: start; }

.e-con .wds-dm-udo-tyt.elementor-widget.elementor-widget { margin-block-end: 28px; }

.wds-dm-udo-tyt.elementor-widget-heading .elementor-heading-title,
.wds-dm-udo-tyt .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-bg-jasne);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: 0;
}

.wds-dm-udo-poz.elementor-widget-heading .elementor-heading-title,
.wds-dm-udo-poz .elementor-widget-heading .elementor-heading-title {
	color: rgba(244, 241, 234, 0.88);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16.5px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

.wds-dm-udo-poz {
	padding: 15px 0;
	border-top: 1px solid var(--wds-wlos-cd);
}

/* Odstep pozycji robi wylacznie padding wiersza. Domyslny `gap` kontenera
 * Elementora dokladalby do tego kolejne ~20px i lista rozjezdzalaby sie
 * dwukrotnie wzgledem projektu. To samo dotyczy tabeli parametrow i blokow. */
.wds-dm-udo-kol,
.e-con.wds-dm-spec,
.wds-dm-lokalizacja > .e-con-inner,
.wds-dm-nav-row {
	gap: 0 !important;
}

.e-con.wds-dm-dlaczego {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 80px !important;
	align-items: center !important;
	--margin-top: 46px;
	padding-top: 32px !important;
	border-top: 1px solid rgba(244, 241, 234, 0.2);
}

.wds-dm-dlaczego > * { min-width: 0; }

.wds-dm-dlaczego-tyt.elementor-widget-heading .elementor-heading-title,
.wds-dm-dlaczego-tyt .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-bg-jasne);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: 0;
}

.wds-dm-dlaczego-prawa .wds-tresc p { margin-bottom: 28px; }

/* ------------------------------------------------------------------ *
 * Opinie Google na stronie domku — ciag dalszy ciemnego pasma
 *
 * Sekcja dziedziczy przemalowanie Trustindeksa po klasie `wds-hp-opinie`
 * ze strony glownej; ta klasa niesie wylacznie rytm, zeby nie powielac
 * stu linii kolorow pod druga nazwa.
 *
 * Nad ta sekcja stoja ciemne UDOGODNIENIA. Dwa ciemne pasma rozdzielone
 * kremowa szpara czytaja sie jak blad skladu, wiec laczymy je w jedno
 * i dzielimy wlosem — jedyny sposob separacji uzywany w tym projekcie.
 *
 * `--margin-top`, nie `margin-top`: odstepy sekcji ida przez zmienna,
 * a wlasciwosc przegralaby remisem z reguła Elementora.
 * ------------------------------------------------------------------ */
.e-con.wds-dm-opinie {
	--margin-top: 0;
	border-top: 1px solid var(--wds-wlos-cd);
}

/* ------------------------------------------------------------------ *
 * Galeria — cztery kolumny 4:3
 * ------------------------------------------------------------------ */

.e-con.wds-dm-gal-glowa {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 40px !important;
	flex-wrap: wrap !important;
	--margin-bottom: 22px;
}

.wds-dm-gal-glowa > * { width: auto !important; }
.e-con .wds-dm-gal-glowa .wds-nad.elementor-widget.elementor-widget { margin-block-end: 20px; }

.wds-dm-siatka-gal .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	column-count: auto;
	margin: 0 !important;
}

.wds-dm-siatka-gal .elementor-image-gallery .gallery-item {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.wds-dm-siatka-gal .elementor-image-gallery .gallery-icon {
	display: block;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

.wds-dm-siatka-gal .elementor-image-gallery .gallery-icon > a { display: block; }

.wds-dm-siatka-gal .elementor-image-gallery img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0;
}

/* ------------------------------------------------------------------ *
 * SEO, bloki lokalizacji, nawigacja, pozostale domki
 * ------------------------------------------------------------------ */

.wds-tyt-dmseo.elementor-widget-heading .elementor-heading-title,
.wds-tyt-dmseo .elementor-widget-heading .elementor-heading-title {
	max-width: 1000px;
	font-size: clamp(2rem, 3.8vw, 3.375rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.e-con .wds-tyt-dmseo.elementor-widget.elementor-widget { margin-block-end: 28px; }

.wds-dm-seo-2kol {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px !important;
	align-items: start !important;
}

.wds-dm-seo-2kol > * { min-width: 0; }
.wds-dm-seo-2kol .wds-tresc p { font-size: 17.5px; line-height: 1.75; margin: 0; }

.wds-dm-blok {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px !important;
	align-items: center !important;
	padding: 28px 0 !important;
	border-top: 1px solid var(--wds-wlos);
}

.wds-dm-blok > * { min-width: 0; }

.e-con .wds-dm-blok-tyt.elementor-widget.elementor-widget { margin-block-end: 20px; }

.wds-dm-blok-tyt.elementor-widget-heading .elementor-heading-title,
.wds-dm-blok-tyt .elementor-widget-heading .elementor-heading-title {
	font-size: 38px;
	line-height: 1.12;
	letter-spacing: 0;
}

.wds-dm-nav-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 !important;
	border-top: 1px solid var(--wds-wlos);
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-dm-nav-row > * { min-width: 0; }

.wds-dm-nav-poz {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 30px 30px 30px 0 !important;
	border-right: 1px solid var(--wds-wlos);
	text-decoration: none;
}

.wds-dm-nav-next {
	align-items: flex-end !important;
	padding: 30px 0 30px 30px !important;
	border-right: 0;
	text-align: right;
}

.wds-dm-nav-et.elementor-widget-heading .elementor-heading-title,
.wds-dm-nav-et .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.wds-dm-nav-n.elementor-widget-heading .elementor-heading-title,
.wds-dm-nav-n .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-ink);
	font-family: Newsreader, Georgia, serif;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0;
	transition: color 0.3s linear;
}

.wds-dm-nav-poz:hover .wds-dm-nav-n .elementor-heading-title { color: var(--wds-accent); }

.wds-dm-poz-glowa {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 48px !important;
	flex-wrap: wrap !important;
	padding-bottom: 26px !important;
	border-bottom: 1px solid var(--wds-wlos);
}

.wds-dm-poz-glowa > * { width: auto !important; }

.e-con .wds-tyt-dmpoz.elementor-widget.elementor-widget { margin-block-end: 14px; }

.wds-tyt-dmpoz.elementor-widget-heading .elementor-heading-title,
.wds-tyt-dmpoz .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.06;
	letter-spacing: 0;
}

.wds-dm-poz-lead p { margin: 0; max-width: 560px; font-size: 16.5px; line-height: 1.7; }

.wds-dm-poz-link.elementor-widget-heading .elementor-heading-title,
.wds-dm-poz-link .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wds-dm-poz-link a { color: inherit; }
.wds-dm-poz-link a:hover { color: var(--wds-accent); }

.e-con.wds-dm-karty {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px !important;
	--margin-top: 32px;
}

.wds-dm-karty > * { min-width: 0; }

.wds-dm-karta { text-decoration: none; }

.e-con.wds-dm-karta-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
	--margin-top: 14px;
}

.wds-dm-karta-row > * { width: auto !important; }

.wds-dm-karta-n.elementor-widget-heading .elementor-heading-title,
.wds-dm-karta-n .elementor-widget-heading .elementor-heading-title {
	font-family: Newsreader, Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0;
	transition: color 0.3s linear;
}

.wds-dm-karta:hover .wds-dm-karta-n .elementor-heading-title { color: var(--wds-accent); }

.wds-dm-karta-p.elementor-widget-heading .elementor-heading-title,
.wds-dm-karta-p .elementor-widget-heading .elementor-heading-title {
	color: var(--wds-muted);
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.wds-dm-info-row,
	.wds-dm-udo-row,
	.e-con.wds-dm-dlaczego,
	.wds-dm-seo-2kol,
	.wds-dm-blok {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px !important;
	}

	.e-con.wds-dm-formularz { position: static; }
	.wds-dm-siatka-gal .elementor-image-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.wds-dm-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wds-dm-lead p { font-size: 24px; }

	/* Wiersz informacji jest juz jednokolumnowy, a formularz przestal byc
	 * przyklejony — rozciaganie wrappera nie ma juz czego obsluzyc. */
	.e-con.wds-dm-info-prawa { align-self: auto !important; }

	.wds-dm-cena-kwota.elementor-widget-heading .elementor-heading-title,
	.wds-dm-cena-kwota .elementor-widget-heading .elementor-heading-title { font-size: 30px; }

	/* Zwijanie do jednej kolumny musi byc POWTORZONE dla wariantu `:has()`.
	 * Regula zbiorcza wyzej ma wage (0,1,0), a `.wds-dm-udo-row:has(…)` (0,2,0)
	 * — i wygrywalaby takze tutaj, w zapytaniu medialnym. Zmierzone: sekcja
	 * zostawala trzykolumnowa na telefonie, a zdjecie mialo 38px wysokosci. */
	.wds-dm-udo-row:has(.wds-dm-udo-foto) {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px !important;
	}

	/* Zdjecie idzie na pelna szerokosc, wiec pionowy kadr 3:4 bylby slupem
	 * na dwa ekrany. */
	.wds-dm-udo-foto,
	.wds-dm-udo-foto img { aspect-ratio: 21 / 9; }
}

@media (max-width: 767px) {
	.e-con.wds-dm-taby { gap: 18px !important; }
	.wds-dm-cena { align-items: flex-start !important; text-align: left; }

	.wds-dm-cena-kwota.elementor-widget-heading .elementor-heading-title,
	.wds-dm-cena-kwota .elementor-widget-heading .elementor-heading-title { font-size: 27px; }

	/* Plan doliny w naturalnej proporcji dalby przy 350px pasek 64px wysokosci —
	 * sylwetki domkow zeszlyby do 16px i pas przestalby cokolwiek mowic.
	 * Kadrujemy wiec do 2:1 (175px) i kotwiczymy kadr na ikonie TEGO domku.
	 *
	 * Procenty policzone, nie dobrane na oko. Przy `object-fit: cover` i kadrze
	 * 2:1 widac 2/5,486 = 36,5% szerokosci zdjecia, czyli okno 700px z 1920.
	 * `object-position: P%` przesuwa je o P x (1920 - 700) = P x 1220, wiec zeby
	 * ikona o srodku w x px wypadla na srodku okna: P = (x - 350) / 1220.
	 * Srodki zmierzone porownaniem wariantow (plan-doliny-pomiar.php):
	 * STRIX 561px, LYNX 747px, WOLF 993px, BEAR 1269px. */
	.wds-dm-plan,
	.wds-dm-plan img { aspect-ratio: 2 / 1; }

	.wds-dm-plan-strix img { object-position: 17% center; }
	.wds-dm-plan-lynx img  { object-position: 33% center; }
	.wds-dm-plan-wolf img  { object-position: 53% center; }
	.wds-dm-plan-bear img  { object-position: 75% center; }

	/* 21:9 przy 350px to juz tylko 150px — za malo, zeby cokolwiek pokazac. */
	.wds-dm-udo-foto,
	.wds-dm-udo-foto img { aspect-ratio: 3 / 2; }

	.wds-dm-spec-w { grid-template-columns: minmax(0, 1fr); gap: 4px !important; }
	.e-con.wds-dm-formularz { padding: 28px 20px !important; }
	.wds-dm-siatka-gal .elementor-image-gallery .gallery { grid-template-columns: minmax(0, 1fr); }
	.e-con.wds-dm-karty { grid-template-columns: minmax(0, 1fr); }

	.wds-dm-nav-row { grid-template-columns: minmax(0, 1fr); }

	.wds-dm-nav-poz,
	.wds-dm-nav-next {
		align-items: flex-start !important;
		padding: 24px 0 !important;
		border-right: 0;
		text-align: left;
	}

	.wds-dm-nav-next { border-top: 1px solid var(--wds-wlos); }
}

/* Byl tu drugi blok @media dla cennika i byl martwy: .wds-cennik to sama tabela,
 * a nie pudelko, wiec .wds-cennik table nie pasowalo do niczego, a min-width 520px
 * przeczylo 560px z bloku wyzej. Usuniety 2026-08-05 — przewijanie na telefonie
 * robi blok przy komponencie cennika. */

/* ================================================================== *
 * REZERWACJA PRZEZ BOOKING.COM (2026-08-01)
 *
 * Formularze rezerwacyjne (CF7 87) znikly ze stron domkow i z sekcji
 * zapytania — dostepnosc prowadzi Booking.com, a rowna alternatywa jest
 * telefon. Formularz 87 zostal, ale jako zwykle zapytanie.
 *
 * Uwaga na dwie pulapki z tego pliku: kontenery biora marginesy ze zmiennej
 * (§ „Rytm pionowy"), a kazde nadpisanie w `@media` musi miec ten sam
 * prefiks `.e-con`, inaczej przegra z regula bazowa.
 * ================================================================== */

/* --- Kontakt: sekcja #rezerwacja ---------------------------------- */

/* Prawa kolumna: etykieta, wielki telefon, przycisk, nota — wszystko na
 * jednej osi, bez karty i bez cienia (kanon projektu). */

.e-con .wds-kt-etykieta.elementor-widget.elementor-widget { margin-block-end: 12px; }

/* --- Strona domku: przyklejony boks rezerwacji -------------------- */

.wds-dm-form-btn .elementor-button { width: 100%; }

.e-con .wds-dm-form-btn.elementor-widget.elementor-widget { margin-block-end: 18px; }

/* --- Strona glowna: sekcja CTA ------------------------------------ */

/* Drugi przycisk jest podrzedny wobec „Sprawdz dostepnosc", wiec obrys
 * na jasnym tle. `.wds-btn-obrys` z gory pliku jest wariantem na CIEMNE
 * tlo — tu potrzebny jest osobny. */
.elementor-element.wds-hp-cta-btn2 .elementor-button,
.wds-hp-cta-btn2 .elementor-button {
	background-color: transparent !important;
	color: var(--wds-ink) !important;
	border-color: var(--wds-wlos-mocny) !important;
}

.elementor-element.wds-hp-cta-btn2 .elementor-button:hover,
.wds-hp-cta-btn2 .elementor-button:hover {
	background-color: var(--wds-dark) !important;
	color: var(--wds-bg) !important;
	border-color: var(--wds-dark) !important;
}

.e-con .wds-hp-cta-btn.elementor-widget.elementor-widget { margin-block-end: 12px; }

/* Lewa kolumna sekcji CTA musi byc ograniczona, inaczej dluzszy akapit
 * rozpycha ja do 1080px i kolumna z telefonem zawija sie pod spod
 * (flex-basis idzie z tresci, `flex-wrap: wrap` robi reszte). */
.e-con.wds-hp-cta-lewa { max-width: 640px; }

.wds-hp-cta-lead,
.wds-hp-cta-lead .elementor-widget-text-editor { max-width: 600px; }

@media (max-width: 1024px) {
	.e-con.wds-hp-cta-lewa { max-width: none; }
}

/* ================================================================== *
 * TELEFON — jeden margines, cele dotyku, czytelnosc (2026-08-03)
 *
 * Audyt zmierzony w WebKicie (iPhone 14 Pro, 393 px) na dziesieciu
 * podstronach, nie oceniony na oko. Trzy rodziny usterek.
 * ------------------------------------------------------------------ */

/* 1. JEDEN MARGINES BOCZNY — te same trzy wartosci, co na stronie glownej:
 *    48 px, od tabletu 32 px, na telefonie 20 px.
 *
 * Zmierzone: strona glowna, O nas, Oferta i Galeria maja komplet, ale
 * /kontakt/ ma 0 px na wszystkich pieciu sekcjach, a strony domkow 0 px
 * (jedna 10 px) — te dwie rodziny dokumentow powstaly pozniej i nikt nie
 * ustawil im paddingu kontrolka.
 *
 * To NIE jest usterka samego telefonu: odleglosc tresci od krawedzi wynosila
 * 0 px takze przy 768, 900 i 1024 px. Widac ja wszedzie ponizej ~1436 px.
 *
 * Na szerokich ekranach zmiana jest niewidoczna, bo KAZDA sekcja `.wds-sek`
 * jest `e-con-boxed`: przy 1440 px tresc stoi na x=50 i ma 1340 px niezaleznie
 * od tego, czy padding wynosi 0, 10 czy 48 (zmierzone na trzech podstronach,
 * 23 sekcje).
 *
 * `!important` jest konieczne, a nie wygodne. Kontrolka Elementora emituje
 * `--padding-left: 0px` selektorem
 * `.elementor-76 .elementor-element.elementor-element-kt000100` — (0,3,0)
 * w post-76.css, ktory laduje sie PO motywie potomnym. Podniesienie naszego
 * selektora do (0,3,0) daloby remis, a remis rozstrzyga kolejnosc plikow. */
.e-con.wds-sek {
	--padding-left: 48px !important;
	--padding-right: 48px !important;
}

@media (max-width: 1024px) {
	.e-con.wds-sek {
		--padding-left: 32px !important;
		--padding-right: 32px !important;
	}
}

@media (max-width: 767px) {

	.e-con.wds-sek {
		--padding-left: 20px !important;
		--padding-right: 20px !important;
	}

	/* 2. CELE DOTYKU >= 44 px (WCAG 2.2 AA, wytyczne Apple).
	 *
	 * Powiekszamy PADDINGIEM, nie czcionka — wyglad zostaje nietkniety,
	 * rosnie tylko obszar klikalny. Zmierzone przed zmiana: pasek zakladek
	 * na stronach domkow 13-15 px (najgorszy przypadek w serwisie), linki
	 * stopki 26-28 px, pytania FAQ 24 px, filtry galerii 38 px, ikona
	 * Facebooka 14 px, wordmark w naglowku 18 px. */
	.wds-dm-taby .wds-dm-tab a,
	.wds-dm-okruszki .wds-dm-okruch a,
	.wds-dm-poz-glowa .wds-dm-poz-link a,
	.wds-dm-formularz .wds-dm-form-tel a,
	.wds-logo .wds-wordmark {
		display: inline-block;
		padding-block: 15px;
	}

	/* Pasek zakladek ma wlasny padding 16 px z gory i z dolu — po dodaniu
	 * 15 px do samych linkow zrobilby sie na 76 px. Scinamy go do zera,
	 * bo obszar dotyku niesie juz link. */
	.e-con.wds-dm-taby {
		--padding-top: 0px;
		--padding-bottom: 0px;
	}

	/* Listy ikonowe: link jest w <li>, wiec padding idzie na link, nie na
	 * pozycje — regula Elementora na `.elementor-icon-list-item` ma (0,5,0)
	 * z `padding-block-end` i wygralaby z kazda nasza. */
	.wds-stopka .elementor-icon-list-item a {
		padding-block: 9px;
	}

	.wds-galnav .elementor-icon-list-item a {
		padding-block: 4px;
	}

	.wds-stopka .elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
	}

	.wds-faq .elementor-accordion .elementor-tab-title {
		padding-block: 10px;
	}

	/* 3. CZYTELNOSC — 12 px na tresci to za malo w rece.
	 *
	 * Nadtytulow `.wds-nad` (11 px, wersaliki z rozstrzeleniem) NIE ruszamy:
	 * to etykieta z projektu, a nie tekst do czytania. Podnosimy tylko to,
	 * co niesie informacje: parametry domku, metryke karty, nazwy miejsc
	 * w okolicy i etykiety pol formularza.
	 *
	 * Specyficznosc (0,3,0) — tyle maja reguly bazowe tych klas (l. 4187,
	 * 4535, 3947). Przy remisie wygrywa ta regula, bo jest nizej w pliku. */.wds-dm-spec-k.elementor-widget-heading .elementor-heading-title,
	.wds-dm-spec-k .elementor-widget-heading .elementor-heading-title,
	.wds-dm-karta-p.elementor-widget-heading .elementor-heading-title,
	.wds-dm-karta-p .elementor-widget-heading .elementor-heading-title{
		font-size: 13px;
	}

	/* Regula bazowa ma tu identyfikator (l. 3816), wiec (1,1,0). */
}

/* Trzy cele dotyku, ktore przetrwaly pierwsze podejscie — kazdy z innego
 * powodu, wiec kazdy inaczej (zmierzone po wdrozeniu):
 *
 *  FAQ    — pytanie to <a class="elementor-accordion-title">, a padding
 *           dostal jego rodzic `.elementor-tab-title`. Zadna regula nie
 *           dotykala samego linku, wiec mial czysta wysokosc wiersza 24 px.
 *  galnav — filtry maja wlasna regule (0,4,0) ze skrotem `padding`, ktora
 *           bije nasze `padding-block` na (0,3,0). Powtarzamy ich selektor
 *           co do znaku i wygrywamy kolejnoscia w pliku.
 *  telefon na /kontakt/ — 32 px, brakowalo 12. */
@media (max-width: 767px) {
	.wds-faq .elementor-accordion-title {
		display: block;
		padding-block: 10px;
	}

	.wds-galnav.elementor-widget.elementor-widget-icon-list .elementor-icon-list-item a {
		padding-block: 12px;
	}
}

/* ================================================================== *
 * PASEK WEZWANIA DO DZIALANIA NA TELEFONIE (2026-08-03)
 *
 * Ponizej 1024 px naglowek zostaje z samym logotypem — „Rezerwacja"
 * i pasek kontaktowy sa schowane. Zmierzone: na stronach domkow i na
 * stronie oferty pierwszy ekran nie zawieral ani telefonu, ani Bookingu.
 *
 * UWAGA na komentarze: pierwsza wersja tego naglowka zawierala sciezke
 * zapisana jako gwiazdka miedzy ukosnikami, co ZAMKNELO komentarz w polowie
 * zdania. Parser zjadl wtedy cala regule bazowa i pasek renderowal sie
 * statycznie na koncu dokumentu, zamiast przykleic sie do dolu ekranu.
 *
 * Pasek jest ukryty do czasu miniecia pierwszego ekranu (klase dokłada
 * js/header-scroll.js). Gdyby wisial od gory, zaslanialby wezwania hero
 * i konkurowal sam ze soba.
 * ------------------------------------------------------------------ */

.wds-pasek-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 190;
	display: none;
	gap: 10px;
	align-items: center;
	justify-content: center;
	/* Dolna wartosc to pasek gestow iPhone'a — bez env() przyciski laduja
	 * pod uchwytem systemowym i klika sie je z trudem. */
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(244, 241, 234, 0.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--wds-wlos-slaby);
	transform: translateY(110%);
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wds-pasek-cta--widoczny {
	transform: translateY(0);
}

.wds-pasek-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s linear 0s, color 0.3s linear 0s;
}

/* Warianty musza byc na (0,2,0), a nie (0,1,0), z dwoch niezaleznych powodow
 * — oba zmierzone, nie przewidziane:
 *
 *   kolor  — kit Elementora maluje `.elementor-kit-4 a { color: #B5642A }`,
 *            czyli (0,1,1). Sama klasa `.wds-pasek-cta-tel` przegrywala
 *            i oba przyciski wychodzily terakotowe.
 *   ramka  — przegrywala z NASZA WLASNA regula `.wds-pasek-cta a`, ktora tez
 *            jest (0,1,1) i ustawia `border: 1px solid transparent` po to,
 *            zeby pigulka pelna i obrysowa mialy identyczna wysokosc. */
.wds-pasek-cta .wds-pasek-cta-tel {
	background: var(--wds-dark);
	color: var(--wds-bg-jasne);
}

.wds-pasek-cta .wds-pasek-cta-tel:hover,
.wds-pasek-cta .wds-pasek-cta-tel:focus-visible {
	background: var(--wds-accent);
	color: var(--wds-bg-jasne);
}

.wds-pasek-cta .wds-pasek-cta-book {
	background: transparent;
	color: var(--wds-ink);
	border-color: var(--wds-wlos-mocny);
}

.wds-pasek-cta .wds-pasek-cta-book:hover,
.wds-pasek-cta .wds-pasek-cta-book:focus-visible {
	background: var(--wds-ink);
	color: var(--wds-bg-jasne);
	border-color: var(--wds-ink);
}

@media (max-width: 1024px) {
	.wds-pasek-cta {
		display: flex;
	}

	/* Zeby pasek nie zaslanial ostatniego wiersza stopki po dojechaniu
	 * na sam dol strony. 64px = wysokosc paska, reszta to margines. */
	.wds-stopka {
		padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Przy otwartym menu mobilnym pasek schodzi z drogi — inaczej przykrywa
 * dwie ostatnie pozycje listy. */
body:has(.wds-burger-cb:checked) .wds-pasek-cta {
	transform: translateY(110%);
}

/* Rozwijane menu w naglowku dziedziczylo cien `0 0 10px rgba(0,0,0,.2)`
 * po adventowym arkuszu wtyczki menu. Projekt Claude Design nie uzywa ANI
 * JEDNEGO cienia — cala separacja stoi na wlosowych obramowaniach. Widac to
 * tylko po najechaniu na „Domki", wiec przezylo wszystkie wczesniejsze
 * przeglady; wylapal to dopiero automatyczny audyt kanonu. */
.emcp-dyn-nav-menu .sub-menu,
.wds-header-row .sub-menu {
	box-shadow: none !important;
	border: 1px solid var(--wds-wlos-slaby);
}

/* ========================================================================
 * Lightbox galerii — PhotoSwipe 5.4.4
 *
 * Zastapil wbudowany lightbox Elementora 4.2.1 (2026-08-09). Powod byl
 * mierzalny, nie estetyczny: niewidzialne pasy nawigacji Elementora mialy
 * 216 px szerokosci i CALA wysokosc ekranu, wiec klikniecie w ciemne tlo
 * dawalo trzy rozne skutki zaleznie od odleglosci od krawedzi, a samo
 * zdjecie nie reagowalo w ogole. Tutaj tlo zamyka wszedzie poza paskiem
 * kontrolek u dolu, a zdjecie przybliza.
 *
 * Biblioteka siedzi w vendor/photoswipe/ i jest nietknieta — caly wyglad
 * robi ten blok, przez zmienne --pswp-* i nadpisania. Aktualizacja
 * PhotoSwipe polega wiec na podmianie trzech plikow, bez ruszania stylow.
 *
 * Kanon: pigulki 999px, wlosowe obramowania, ZERO cieni.
 *
 * KAZDY selektor ma przodka `.pswp`, choc element i tak siedzi w srodku.
 * Powod: kit Elementora maluje `.elementor-kit-4 button`, czyli (0,1,1),
 * a `.pswp__button` to (0,1,0) i PRZEGRYWA — kontrolki dostawaly wtedy
 * padding 16x30, zielone tlo i ikone zgnieciona do zera. `.pswp .pswp__x`
 * daje (0,2,0) i wygrywa. Ta sama pulapka co przy przyciskach bloga.
 * ===================================================================== */

.pswp {
	--pswp-bg: var(--wds-ink);
	--pswp-placeholder-bg: var(--wds-dark);
	--pswp-icon-color: var(--wds-bg);
	--pswp-preloader-color: rgba(244, 241, 234, 0.25);
	--pswp-preloader-color-secondary: rgba(244, 241, 234, 0.85);

	/* Domyslne 100000 przebija pasek administratora (99999) — celowo,
	 * inaczej zalogowany redaktor widzi go nad zdjeciem. */
	--pswp-root-z-index: 100000;

	font-family: Archivo, system-ui, sans-serif;
}

/* Tlo BEZ przezroczystosci. U Elementora bylo rgba(0,0,0,.8) i tresc strony
 * przeswitywala przez zdjecie — najbardziej widoczne przy jasnych kadrach. */
.pswp .pswp__bg {
	background: var(--wds-ink);
}

/* Projekt Claude Design nie uzywa ani jednego cienia. PhotoSwipe rysuje
 * obrys ikon druga sciezka (.pswp__icn-shadow) i cien tekstowy pod licznikiem
 * — oba wylatuja. */
.pswp *,
.pswp *::before,
.pswp *::after {
	box-shadow: none;
}

.pswp .pswp__icn-shadow {
	display: none;
}

.pswp .pswp__counter {
	text-shadow: none;
}

/* --- Przyciski: pigulki 48 px ------------------------------------------ */

/* Kontrolki leza NA zdjeciu, wiec tlo pigulki jest ciemne, a nie jasne jak
 * w .wds-btn-obrys — nad przeswietlonym kadrem jasny wariant znika. */
.pswp .pswp__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;

	/* `padding: 0` NIE jest ozdobnikiem. Kit daje przyciskom `padding: 16px 30px`,
	 * a przy `box-sizing: border-box` i szerokosci 48px pole tresci schodzi wtedy
	 * do zera — SVG dostaje szerokosc 0, `overflow: hidden` go docina i pigulka
	 * jest pusta. Ikony znikaly bez jednego bledu w konsoli. */
	padding: 0;
	border: 1px solid var(--wds-wlos-cd);
	border-radius: 999px;
	background: rgba(23, 28, 21, 0.5);
	color: var(--wds-bg);
	opacity: 1;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease;
}

.pswp .pswp__button:hover,
.pswp .pswp__button:focus,
.pswp .pswp__button:active {
	background: var(--wds-accent);
	border-color: var(--wds-accent);
	opacity: 1;
}

.pswp .pswp__button:focus-visible {
	outline: 1px solid var(--wds-bg);
	outline-offset: 2px;
}

/* Ikony sa kreskowe (stroke), a PhotoSwipe domyslnie je wypelnia i ustawia
 * `color` na --pswp-icon-color-secondary. Bez tych trzech linii sciezki
 * zlewaja sie w plame, a currentColor robi sie przezroczysty. */
.pswp .pswp__icn {
	position: static;
	width: 22px;
	height: 22px;
	color: inherit;
	fill: none;
	stroke: currentColor;
}

.pswp.pswp--zoomed-in .pswp__zoom-plus {
	display: none;
}

.pswp:not(.pswp--zoomed-in) .pswp__zoom-minus {
	display: none;
}

/* --- Gorny pasek -------------------------------------------------------- */

.pswp .pswp__top-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	padding: 16px 24px 0;
	background: none;
}

.pswp .pswp__counter {
	height: auto;
	margin: 0 auto 0 0;
	font-size: 12.5px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.62);
	opacity: 1;
}

/* --- Strzalki ----------------------------------------------------------- */

/* 48 px zamiast 75×100 z biblioteki i zamiast 216×900 z Elementora. Cala
 * reszta ciemnego tla nalezy do „zamknij". PhotoSwipe sam chowa strzalki
 * na urzadzeniach dotykowych (.pswp--touch) i pokazuje po ruchu myszy. */
.pswp .pswp__button--arrow {
	width: 48px;
	height: 48px;
	top: 50%;
	margin-top: -24px;
}

.pswp .pswp__button--arrow--prev {
	left: 20px;
}

.pswp .pswp__button--arrow--next {
	right: 20px;
}

.pswp .pswp__button--arrow .pswp__icn {
	top: auto;
	margin-top: 0;
	width: 22px;
	height: 22px;
}

/* PhotoSwipe zaklada, ze obie strzalki dostaja TEN SAM znak, i odbija prawa
 * lustrzanie (`transform: scale(-1,1)`). My dajemy dwa osobne SVG, wiec bez
 * tego zerowania prawa strzalka pokazuje w lewo. */
.pswp .pswp__button--arrow--next .pswp__icn {
	right: auto;
	transform: none;
}

/* --- Podpis ------------------------------------------------------------- */

/* Tresc to czlon TYTULU zalacznika po dwukropku (inc/lightbox.php), czyli
 * „rozpalony kominek w salonie". ALT-y sie tu nie nadaja: kazdy konczy sie
 * tym samym ogonem pod wyszukiwarke, wiec przy 36 zdjeciach dawalyby 36 razy
 * ten sam pasek tekstu. */
.pswp .pswp__wds-podpis {
	position: absolute;
	left: 50%;
	bottom: 72px;
	z-index: 10;
	max-width: min(720px, calc(100% - 48px));
	transform: translateX(-50%);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: rgba(244, 241, 234, 0.75);

	/* Twarde dwa wiersze. Rezerwa u dolu kadru (paddingFn w wds-lightbox.js)
	 * jest policzona co do piksela: 12 + 56 paska + 4 + 48 podpisu = 120.
	 * Bez tego ograniczenia dluzszy podpis rosnie w gore i wchodzi na zdjecie. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.pswp .pswp__wds-podpis[hidden] {
	display: none;
}

/* --- Pasek miniatur ----------------------------------------------------- */

/* `safe center` centruje przy kilku kafelkach, ale przy 36 nie chowa
 * poczatku listy poza zasiegiem przewijania — zwykle `center` by chowalo. */
.pswp .pswp__wds-miniatury {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	justify-content: safe center;
	gap: 8px;
	height: 56px;
	padding: 0 24px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.pswp .pswp__wds-miniatury::-webkit-scrollbar {
	display: none;
}

.pswp .pswp__wds-mini {
	flex: 0 0 auto;
	width: 76px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--wds-wlos-cd-mocny);
	border-radius: 0;
	background: none;
	cursor: pointer;
	opacity: 0.45;
	transition:
		opacity 0.18s ease,
		border-color 0.18s ease;
}

.pswp .pswp__wds-mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pswp .pswp__wds-mini:hover {
	opacity: 0.8;
}

.pswp .pswp__wds-mini.is-active {
	opacity: 1;
	border-color: rgba(244, 241, 234, 0.85);
}

.pswp .pswp__wds-mini:focus-visible {
	outline: 1px solid var(--wds-bg);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.pswp .pswp__top-bar {
		padding: 10px 12px 0;
	}

	.pswp .pswp__button {
		width: 44px;
		height: 44px;
	}

	.pswp .pswp__wds-podpis {
		bottom: 60px;
		max-width: calc(100% - 24px);
		font-size: 14px;
	}

	.pswp .pswp__wds-miniatury {
		bottom: 8px;
		height: 48px;
		gap: 6px;
		padding: 0 12px;
	}

	.pswp .pswp__wds-mini {
		width: 62px;
		height: 44px;
	}
}