/* gowebv3 — warstwa zgodności z WordPressem i Contact Form 7.
   Ładowana zawsze, po arkuszu właściwym dla widoku.
   Nie zmienia wyglądu projektu — dopasowuje markup generowany przez WP/CF7. */

/* ------------------------------------------------------------ dostępność */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: #fff;
	clip: auto;
	clip-path: none;
	color: #1f2329;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
	border-radius: 10px;
}

/* Pasek administratora nie może zasłaniać przyklejonego nagłówka. */
.admin-bar #hdr {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar #hdr {
		top: 46px;
	}
}

/* ------------------------------------------------- treść z edytora WP */

.art-body img,
.lg-block img,
.rz-body img {
	max-width: 100%;
	height: auto;
}

.art-body figure,
.rz-body figure {
	margin: 28px 0;
}

.art-body figure img,
.rz-body figure img {
	display: block;
}

/* Zdjęcia w treści mają te same zaokrąglenia co reszta serwisu. Reguła celuje
   w każdy obrazek, nie tylko ten w <figure> — edytor blokowy owija zdjęcia
   w figure, ale wklejone czy wstawione po staremu bywają gołym <img>. */
.art-body img,
.rz-body img {
	border-radius: 14px;
}

/* Zdjęcie wyróżniające zaokrągla już kontener z overflow:hidden — i to innym
   promieniem (16 px w realizacji). Gdyby obrazek zaokrąglał się dodatkowo sam,
   w narożnikach wyszłaby szczelina między jego łukiem a łukiem kontenera. */
.art-shot img,
.rz-shot img {
	border-radius: 0;
}

.art-body figcaption,
.rz-body figcaption {
	margin-top: 10px;
	font-size: 13.8px;
	line-height: 1.6;
	color: var(--muted);
	text-align: center;
}

.art-body .alignleft,
.rz-body .alignleft {
	float: left;
	margin: 6px 24px 18px 0;
}

.art-body .alignright,
.rz-body .alignright {
	float: right;
	margin: 6px 0 18px 24px;
}

.art-body .aligncenter,
.rz-body .aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.art-body .wp-block-embed,
.rz-body .wp-block-embed {
	margin: 28px 0;
}

.art-body .wp-block-embed iframe,
.rz-body .wp-block-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 14px;
	display: block;
}

/* ------------------------------------------------------- bloki z kodem */

/* Blok „Kod” z edytora dostaje obudowę: pasek z językiem i przyciskiem
   kopiowania, stałą kolumnę z numerami linii i przewijaną w poziomie treść.
   Numery stoją poza obszarem przewijania, więc przy długiej linii nie odjeżdżają
   razem z kodem — a że kod się nie zawija, jedna linia źródła to jedna linia
   na ekranie i numeracja zawsze się zgadza. */
.gw-code {
	--gw-code-line: 1.62;
	margin: 28px 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #f8f9fb;
	overflow: hidden;
}

.gw-code-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--line);
	background: #f2f4f7;
}

.gw-code-lang {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Bez etykiety języka przycisk ma zostać przy prawej krawędzi. */
.gw-code-bar > .gw-code-copy:only-child {
	margin-left: auto;
}

.gw-code-copy {
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 8px;
	padding: 5px 11px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.gw-code-copy:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--lime);
}

.gw-code-copy[data-ok] {
	background: var(--lime);
	border-color: var(--lime);
	color: var(--ink);
}

.gw-code-body {
	display: flex;
	align-items: stretch;
}

.gw-code-nums {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: 16px 0 16px 14px;
	border-right: 1px solid var(--line);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: var(--gw-code-line);
	color: var(--muted);
	text-align: right;
	opacity: .65;
	user-select: none;
}

.gw-code-nums span {
	padding-right: 14px;
	min-width: 20px;
}

/* Krój siedzi na <pre>, nie na <code> — klasyczny edytor tworzy sam <pre>,
   bez zagnieżdżonego <code>, a numeracja musi trzymać tę samą interlinię. */
.art-body .gw-code pre,
.rz-body .gw-code pre {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 16px 18px;
	background: none;
	border: 0;
	border-radius: 0;
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: var(--gw-code-line);
	color: var(--ink);
}

.art-body .gw-code code,
.rz-body .gw-code code {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
}

/* Barwy tokenów. Trzymają się z dala od limonki motywu — ta jest zarezerwowana
   dla akcji, a tu chodzi o spokojne rozróżnienie składni. */
.gw-kom { color: #6b7078; font-style: italic; }
.gw-str { color: #2c7a4b; }
.gw-tag { color: #1f5fbf; }
.gw-slo { color: #1f5fbf; font-weight: 600; }
.gw-atr { color: #b3541e; }
.gw-num { color: #7a3ea3; }

/* Na wąskim ekranie każdy piksel szerokości to jeden znak kodu mniej,
   więc marginesy wewnętrzne i kolumna z numerami schodzą do minimum. */
@media ( max-width: 600px ) {
	.gw-code {
		margin: 22px 0;
	}

	.gw-code-bar {
		padding: 8px 10px;
	}

	.gw-code-nums {
		padding: 14px 0 14px 10px;
	}

	.gw-code-nums span {
		padding-right: 10px;
		min-width: 14px;
	}

	.art-body .gw-code pre,
	.rz-body .gw-code pre {
		padding: 14px;
	}
}

/* Kod w zdaniu — krótka plakietka, nie blok. */
.art-body :not(pre) > code,
.rz-body :not(pre) > code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--soft);
	border: 1px solid var(--line);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
	color: var(--ink);
}

/* Zanim skrypt zbuduje obudowę, blok ma wyglądać znośnie, a nie jak surowy
   tekst na całą szerokość ekranu. */
.art-body pre:not(.gw-code pre),
.rz-body pre:not(.gw-code pre) {
	overflow-x: auto;
}

/* Cytat z edytora wygląda jak .art-quote z projektu. */
.art-body blockquote {
	margin: 0;
}

.art-body blockquote p {
	margin: 0;
}

/* ------------------------------------------------------- Contact Form 7 */

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 13px 16px;
	border-width: 1px;
	border-radius: 11px;
	font-size: 14px;
	line-height: 1.55;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #e0a800;
	color: #6b5200;
	background: rgba(255, 214, 92, .14);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #d94b4b;
	color: #8e2020;
	background: rgba(217, 75, 75, .1);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--lime);
	color: #4b6a08;
	background: rgba(182, 255, 46, .18);
}

/* Opakowania CF7 nie mogą łamać siatki formularza z projektu. */
.wpcf7-form-control-wrap {
	display: block;
	position: relative;
	width: 100%;
}

.ct-field .wpcf7-form-control-wrap,
.pkf-field .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #d94b4b;
	font-weight: 600;
}

.pkf-card .wpcf7-not-valid-tip {
	color: #ffb4b4;
}

.ct-input.wpcf7-not-valid,
.pkf-input.wpcf7-not-valid {
	border-color: #d94b4b;
}

.wpcf7-spinner {
	margin: 0 0 0 10px;
	vertical-align: middle;
}

/* Zgoda RODO — spłaszczenie zagnieżdżeń [acceptance] do układu z projektu. */
.ct-consent .wpcf7-form-control-wrap,
.ct-consent .wpcf7-acceptance,
.ct-consent .wpcf7-list-item,
.pkf-consent .wpcf7-form-control-wrap,
.pkf-consent .wpcf7-acceptance,
.pkf-consent .wpcf7-list-item {
	display: contents;
}

.ct-consent .wpcf7-list-item > label,
.pkf-consent .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
}

.pkf-consent .wpcf7-list-item > label {
	gap: 11px;
}

.ct-consent .wpcf7-list-item-label,
.pkf-consent .wpcf7-list-item-label {
	display: inline;
}

/* Panel „Dziękujemy!” po wysłaniu (przełączany klasą data-sent z theme.js). */
.ct-card[data-sent="1"] [data-form-body],
.pkf-card[data-sent="1"] [data-form-body] {
	display: none;
}

.ct-card[data-sent="1"] .ct-success {
	display: flex;
}

.ct-card[data-sent="1"] .wpcf7-response-output,
.pkf-card[data-sent="1"] .wpcf7-response-output {
	display: none !important;
}

/* Przycisk wysyłki generowany przez CF7 zachowuje wygląd z projektu. */
.ct-submit[disabled],
.pkf-submit[disabled] {
	opacity: .6;
	cursor: default;
}

/* --------------------------------------- powrót do listy w pojedynczej realizacji */

/* Drobny odnośnik nad zdjęciem. Celowo słabszy niż nawigacja „poprzednia /
   następna” pod treścią — to droga wyjścia, nie zachęta. Strzałka odjeżdża
   przy najechaniu, tak samo jak w tamtej nawigacji. */
.rz-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(18px, 2.2vw, 26px);
	font-family: 'Google Sans';
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--muted);
	text-decoration: none;
	transition: color .18s ease;
}

.rz-back svg {
	width: 16px;
	height: 16px;
	transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.rz-back:hover {
	color: var(--ink);
}

.rz-back:hover svg {
	transform: translateX(-4px);
}

/* ------------------------------------------------ pasek boczny realizacji */

/* Branża i kategoria prowadzą do przefiltrowanej listy. Bez tego dziedziczyłyby
   zielony kolor domyślnych odnośników i odcinały się od reszty danych.
   Zostaje kolor tekstu, a klikalność sygnalizuje delikatne podkreślenie. */
.rz-meta-v a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(31, 35, 41, .25);
	text-underline-offset: 3px;
	transition: text-decoration-color .18s ease;
}

.rz-meta-v a:hover {
	color: inherit;
	text-decoration-color: var(--ink);
}

/* Element siatki ma domyślnie min-width:auto, czyli nie skurczy się poniżej
   szerokości swojej treści. Blok kodu nie zawija linii, więc kolumna rozpychała
   się do długości najdłuższej linii i wypychała całą stronę poza ekran —
   na telefonie strona jechała w bok razem z nagłówkiem. Zerowe minimum pozwala
   kolumnie zmieścić się w torze, a kod przewija się wtedy wewnątrz swojej karty. */
.art-layout > *,
.rz-layout > * {
	min-width: 0;
}

/* ------------------------------- treść stron domyślnych (polityka, regulamin) */

/* Arkusz tych stron opisywał tylko akapity i listy wypunktowane. Listy
   numerowane brały kolor z dziedziczenia, więc wychodziły grafitowe obok
   szarych punktów, zagnieżdżone poziomy dostawały odstęp jak pozycje
   najwyższego rzędu, a nagłówki H3 i pogrubienia nie miały żadnej reguły.
   Wyrównujemy całość do typografii treści artykułu — ten sam stopień pisma,
   interlinia i kolor co w Strefie wiedzy. */
.lg-block p,
.lg-block li {
	color: #52565f;
	font-size: 16px;
	line-height: 1.75;
}

.lg-block ul,
.lg-block ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.lg-block ul {
	list-style: disc;
}

.lg-block ol {
	list-style: decimal;
}

.lg-block li {
	margin: 0 0 10px;
}

.lg-block li::marker {
	color: var(--muted);
}

/* Lista zagnieżdżona należy do swojej pozycji, więc trzyma się jej blisko
   zamiast otwierać nowy blok. */
.lg-block li > ul,
.lg-block li > ol {
	margin: 10px 0 0;
}

.lg-block li:last-child {
	margin-bottom: 0;
}

.lg-block h3,
.lg-block h4 {
	font-family: 'Google Sans';
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 26px 0 10px;
}

.lg-block strong,
.lg-block b {
	color: var(--ink);
	font-weight: 700;
}

/* -------------------------------------------------- pas CTA nad stopką */

/* Kolumny po połowie. Wcześniej był to flex ze „space-between”, ale opis nie
   miał żadnego ograniczenia szerokości — rozpychał się na całą linię i wypychał
   przyciski do następnego wiersza. Siatka dzieli pas na równe połowy niezależnie
   od długości tekstu. Poniżej 860 px wraca układ jeden pod drugim. */
.cta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 28px;
}

.cta-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

@media ( max-width: 860px ) {
	.cta-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.cta-btns {
		justify-content: flex-start;
	}
}

@media ( max-width: 560px ) {
	.cta-btns {
		flex-direction: column;
		align-items: stretch;
	}

	.cta-btns > a {
		justify-content: center;
	}
}

/* ------------------------------------------- pola formularzy na telefonie */

/* Safari na iOS przybliża stronę po dotknięciu pola, którego tekst jest
   mniejszy niż 16 px — a wszystkie trzy formularze (Kontakt, Darmowa wycena,
   Praktyki) mają 15 px. Po takim przybliżeniu strona już nie wraca do
   poprzedniej skali, więc reszta formularza wypada poza ekran.
   Podnosimy pola do 16 px wyłącznie na wąskich ekranach — wygląd na desktopie
   zostaje bez zmian. Alternatywa, czyli maximum-scale w meta viewport,
   odbiera możliwość powiększania całej strony, więc jej nie używamy. */
@media ( max-width: 900px ) {
	.ct-input,
	.pkf-input,
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="number"],
	.wpcf7 input[type="date"],
	.wpcf7 select,
	.wpcf7 textarea {
		font-size: 16px;
	}
}

/* ------------------------------------------------- pierwsze sekcje podstron */

/* Element siatki ma domyślnie min-width:auto — nie skurczy się poniżej
   szerokości swojej treści. W nagłówkach tych sekcji siedzi wyróżniona fraza
   w inline-blocku (np. „z doświadczeniem”), której szerokość stawała się
   minimum dla całej kolumny z tekstem. Na stronie „O nas” kolumna rozpychała
   się ponad swoją połowę, a zdjęcie dostawało resztę i wyraźnie się kurczyło.
   Zerowe minimum przywraca zadane proporcje, a fraza zawija się, gdy zabraknie
   dla niej miejsca. Pozostałe dwie siatki mieszczą się dziś w swoich kolumnach,
   ale mają tę samą budowę — reguła nic w nich nie zmienia, dopóki nie urosną
   im nagłówki. */
.ab-top > *,
.uk-grid > *,
.pk-hero > * {
	min-width: 0;
}

/* ------------------------------------------------------- menu mobilne */

/* Projekt animuje pełnoekranową płachtę menu przez `transition: opacity .22s,
   visibility .22s`. Dwa problemy: 0,22 s przenikania całego białego ekranu
   czyta się jako ociąganie, a `visibility` jest właściwością skokową — podanie
   jej czasu trwania każe przeglądarce interpolować coś, co i tak przeskakuje,
   przez co przy zamykaniu płachta zostaje klikalna przez pełne 0,22 s.
   Skracamy przenikanie i przełączamy `visibility` wzorcem docelowym:
   przy otwieraniu zmiana natychmiast, przy zamykaniu dokładnie na końcu. */
.mm {
	transition: opacity .16s ease, visibility 0s linear .16s;
}

#hdr[data-menu="open"] ~ .mm,
.mm[data-open="1"] {
	transition: opacity .16s ease, visibility 0s linear 0s;
}

/* ------------------------- nagłówek sekcji „Wybrane realizacje” na mobile */

/* Projekt składa ten nagłówek na wąskim ekranie w kolumnę i wyśrodkowuje:
   @media(max-width:860px){.cs-head{flex-direction:column;align-items:center;
   text-align:center;gap:0}}. Reguła przegrywała jednak ze stylem inline
   z szablonu, który ustawiał align-items:flex-end i gap:24px — a stylu inline
   nie pokona żaden selektor bez !important. Efekt: w kolumnie dzieci lądowały
   przy prawej krawędzi, więc nagłówek uciekał w prawo zamiast stanąć na środku.
   Zamiast dokładać !important przenosimy obie wartości ze stylu inline tutaj
   i zawężamy je do desktopu, powyżej progu z projektu. */
@media ( min-width: 861px ) {
	.cs-head {
		align-items: flex-end;
		gap: 24px;
	}
}

/* ------------------------------------------------ kafelki na stronie Oferta */

/* Tytuł 21 px i opis 14,8 px zamiast domowych 20 i 16 — te same kafelki
   z ikoną co gdzie indziej, tylko z własnym stopniem pisma. Kafelek CTA
   w tej samej siatce dostaje to samo, żeby nie odstawał od sąsiadów.
   Geometrii ikony (44 px podkładka, 21 px glif) nie ruszam — to spójny,
   nieco mniejszy wariant karty, a nie rozjazd. */
.of-title,
.of-cta-title {
	font-size: 20px;
	line-height: 1.3;
}

.of-desc,
.of-cta-desc {
	font-size: 16px;
	line-height: 1.68;
}

/* Hover ostatniego kafelka (ciemne CTA) zachowuje się teraz jak w sąsiednich
   kartach. Brakowało dwóch rzeczy: ikona nie miała ani przejścia, ani reguły
   :hover — więc nigdy nie zmieniała koloru; a cień, który miał towarzyszyć
   uniesieniu, gasiła późniejsza reguła spłaszczająca ciemne powierzchnie
   (box-shadow:none!important). Zostawało samo przesunięcie o 6 px, bez
   żadnego sygnału głębi — stąd wrażenie suchego przeskoku. */
.of-cta-ico {
	transition: background .28s ease, color .28s ease;
}

.of-cta:hover .of-cta-ico {
	background: var(--lime);
	color: var(--ink);
}

/* Ruch sam w sobie był animowany (0,28 s), ale kafelek CTA — w odróżnieniu
   od sąsiadów i od kart na stronie głównej — nie zmienia przy tym ani tła,
   ani kolorów tekstu: jest ciemny od początku. Zostawało samo przesunięcie,
   które przy krótkiej, przyspieszającej krzywej czyta się jak podskok.
   Właściwa przyczyna była jednak inna i siedziała w tej warstwie: klasa
   .gw-anim deklaruje `transition: opacity`, a `transition` to skrót — późniejsza
   deklaracja zastępuje wcześniejszą w całości. Kafelek nosi obie klasy
   (`of-cta gw-anim`), obie mają specyficzność (0,1,0), więc .gw-anim z wp.css
   wygrywała i kasowała przejście dla `transform`. Uniesienie działo się
   natychmiast. Zwykłe karty ocalały tylko dlatego, że projekt deklaruje ich
   przejście przez `.of-grid .of-card`, czyli o klasę wyżej — robimy tu
   dokładnie to samo. Do tego delikatne rozjaśnienie tła, żeby najechanie
   miało drugi sygnał poza samym ruchem, jak w pozostałych kafelkach. */
.of-grid .of-cta {
	transition:
		transform .28s cubic-bezier(.4, 0, .2, 1),
		box-shadow .28s ease,
		background .28s ease;
}

.of-cta:hover {
	background: #262b33 !important;
	box-shadow: 0 26px 50px -28px rgba(31, 35, 41, .6) !important;
}

/* --------------------------------------- kafelki z ikoną: Praktyki i O nas */

/* Kafelki z ikoną powtarzają się w całym serwisie z tą samą konstrukcją —
   podkładka 50 px, ikona 23 px, tytuł H3, opis akapitem. Na podstronach
   Praktyki („Tryby praktyk”) i O nas („Wartości”) miały jednak własne,
   mniejsze stopnie pisma: tytuł 19 px zamiast 20 i opis 14,5 px zamiast 16.
   Sprowadzamy je do wzorca — tego samego, z którego korzystają .pv-feat
   i .sup-card na podstronach usługowych. */
.ab-val h3 {
	font-size: 20px;
	letter-spacing: -.02em;
	line-height: 1.3;
}

.ab-val p {
	font-size: 16px;
	line-height: 1.68;
}

/* Formularz na Praktykach: przycisk 16 px jak .ct-submit, zgoda 13,8 px jak
   przy formularzu kontaktowym. Tytuły i opisy kafelków wracają do reguł
   bazowych — nadpisania zdjęte prosto z szablonu. */
.pk-mode-ico svg {
	width: 23px;
	height: 23px;
}

.pkf-submit {
	font-size: 16px;
}

.pkf-consent label {
	font-size: 13.8px;
	line-height: 1.6;
}

/* ------------------------------------- pasek z telefonem na darmowej wycenie */

/* Jednowierszowy wariant paska (etykieta + numer + godziny obok siebie) włączał
   się już od 901 px, ale hero to wtedy dwie kolumny — pasek dostaje niecałe
   410 px i numer łamie się na cztery wiersze. Miejsca starcza dopiero
   od ~1100 px, więc próg podnosimy do 1200 px z zapasem na dłuższy numer
   albo inne godziny. W paśmie tabletowym wraca układ z projektu: numer nad
   godzinami, etykieta ukryta — czyli dokładnie to, co miało tam zostać. */
@media ( min-width: 901px ) and ( max-width: 1199px ) {
	.uk-bar-txt {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

	.uk-bar-pre {
		display: none;
	}

	.uk-bar-lbl {
		margin-left: 0;
		padding-left: 0;
	}
}

/* Numer telefonu nigdy nie łamie się w środku. Gdyby kiedyś zabrakło miejsca,
   do drugiego wiersza schodzą godziny, a nie połowa numeru. */
.uk-bar-tel {
	white-space: nowrap;
}

.uk-bar-txt {
	flex-wrap: wrap;
}

/* ------------------------- nawigacja między realizacjami na wąskim ekranie */

/* Pełne etykiety („Poprzednia realizacja”) nie mieszczą się obok siebie na
   telefonie i łamią się na dwa wiersze. Zamiast rozbijać układ na dwa rzędy
   skracamy same podpisy — oba odnośniki zostają wtedy w jednej linii,
   przy swoich krawędziach, tak jak zaprojektowano. */
.rz-nav-kr {
	display: none;
}

@media ( max-width: 640px ) {
	.rz-nav {
		gap: 12px;
		padding-top: 24px;
	}

	.rz-nav a {
		font-size: 14.5px;
		gap: 8px;
	}

	.rz-nav-dl {
		display: none;
	}

	.rz-nav-kr {
		display: inline;
	}
}

/* -------------------------------- formularz kontaktowy */

/* Arkusz strony kontaktowej składa .ct-row do jednej kolumny na każdej
   szerokości, więc e-mail i telefon szły jeden pod drugim także na desktopie.
   Przywracamy podział 50/50 znany z darmowej wyceny, razem z tym samym progiem
   i przerwą — dzięki temu oba formularze zachowują się identycznie, a arkusz
   wyceny zostaje nietknięty. */
.ct-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media ( max-width: 640px ) {
	.ct-row {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------- artykuł w Strefie wiedzy */

/* Projekt zwężał kolumnę z treścią do 1120 px i dawał węższy pasek (300 px),
   przez co artykuł był węższy niż każda inna sekcja serwisu. Wyrównujemy
   geometrię do pojedynczej realizacji: pełna szerokość kontenera, pasek 320 px,
   ta sama przerwa między kolumnami. */
.art-layout {
	max-width: none;
	gap: clamp(40px, 5vw, 72px);
}

/* Dwie kolumny tylko powyżej progu, na którym projekt składa układ w jedną —
   ta reguła jest później w kaskadzie, więc bez zawężenia zabrałaby wersji
   mobilnej jej pojedynczą kolumnę. */
@media ( min-width: 901px ) {
	.art-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* Nagłówek „Informacje” zniknął z paska, a hierarchia wierszy jest ta sama
   co w pasku realizacji: drobna, szara etykieta nad wyraźną wartością.
   Zostaje tylko wyrównanie stopnia etykiety do .rz-meta-k (13,8 → 13 px);
   krój wartości projekt ma już identyczny. */
.art-meta-k {
	font-size: 13px;
}

/* Wiersze rozdzielone włoskową kreską — dokładnie jak w pasku realizacji.
   Bez niej kategoria i data zlewały się w jeden blok czterech linii, podczas
   gdy każda inna sekcja paska ma swój wyraźny podział. Ostatni wiersz kreski
   nie dostaje, bo tuż pod nim biegnie już obramowanie całej sekcji. */
.art-meta-list {
	gap: 0;
}

.art-meta-row {
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}

.art-meta-row:first-child {
	padding-top: 0;
}

.art-meta-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* -------------------------------- autor artykułu */

/* Avatar może pochodzić z pola ACF albo prosto z WordPressa (get_avatar),
   a w ostateczności zostają inicjały — wszystkie trzy warianty mają
   wyglądać tak samo. */
.art-author-av {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.art-author-ini {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--soft);
	font-family: 'Google Sans';
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.art-author-name {
	font-family: 'Google Sans';
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink);
}

/* Stanowisko stoi wprost pod nazwiskiem, w kolumnie obok avatara. */
.art-author-bio {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* -------------------------------- udostępnianie artykułu */

/* Projekt dawał limonkowe tło z białą ikoną — biel na limonce ma kontrast
   poniżej 1.5:1 i ikona po najechaniu praktycznie znikała. Odwracamy to na
   grafitowe tło z limonkową ikoną, jak przyciski obrysowe w reszcie motywu. */
.art-share-v a:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--lime);
}

/* -------------------------------- spis treści artykułu */

/* Spis startuje zwinięty: widać same nagłówki H2, a podpunkty H3 chowają się
   pod przyciskiem przy tym H2, który je ma. */
.art-toc-inline .toc-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.art-toc-inline .toc-row > a {
	flex: 1;
	min-width: 0;
}

.art-toc-inline .toc-tog {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 8px;
	color: var(--muted);
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

.art-toc-inline .toc-tog:hover {
	background: var(--soft);
	color: var(--ink);
}

.art-toc-inline .toc-tog svg {
	width: 15px;
	height: 15px;
	transition: transform .18s ease;
}

/* Zwinięty spis: strzałka w dół („rozwiń”). Po rozwinięciu obraca się
   o pół obrotu i wskazuje w górę. */
.art-toc-inline .toc-i.is-open > .toc-row .toc-tog svg {
	transform: rotate(180deg);
}

.art-toc-inline .toc-sub {
	display: none;
}

.art-toc-inline .toc-i.is-open > .toc-sub {
	display: flex;
}

/* -------------------------------- przycisk w sekcji wsparcia */

/* Przycisk „Wsparcie po wdrożeniu” ma w szablonie samą klasę .btn-p, bez .btn,
   a przejście dla koloru siedzi właśnie w .btn — kolor tła przeskakiwał więc
   przy najechaniu skokowo. Dokładamy to samo przejście, którym płynnie
   zmieniają się pozostałe przyciski motywu. */
.btn-p {
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* -------------------------------- plakietka z oceną w stopce */

/* Kompaktowy wariant plakietki spod sekcji z opiniami (ok. 3/4 wielkości).
   Reguły bazowe .ops-badge leżą w arkuszach stron z opiniami — na pozostałych
   podstronach ich nie ma, a stopka jest wszędzie. Dlatego wariant opisujemy
   tu w całości, łącznie z tym, co zwykle dziedziczy po .ops-badge.
   Tło pełną limonką jak w sekcjach na ciemnym tle — stopka też jest ciemna. */
.f-badge-wrap {
	margin-top: 22px;
}

.f-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	background: var(--lime);
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 9px 15px;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.f-badge:hover {
	background: var(--lime-d);
	border-color: var(--lime-d);
	transform: translateY(-2px);
}

.f-badge .ops-badge-logo {
	height: 15px;
	width: auto;
	display: block;
}

.f-badge .ops-badge-txt {
	font-family: 'Google Sans';
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--ink);
}

.f-badge .ops-badge-stars {
	display: inline-flex;
	gap: 3px;
}

.f-badge .ops-badge-stars svg {
	width: 15px;
	height: 15px;
	fill: var(--ink);
	stroke: none;
}

/* -------------------------------- tabela pakietów */

/* Kwota skaluje się z szerokością ekranu — clamp(34px, 4.6vw, 52px) — ale
   grosze i waluta miały sztywne 20 px. Na desktopie wychodzi z tego 0,39
   wysokości kwoty (drobny indeks górny), na wąskim ekranie już 0,59: „00 zł”
   urastało niemal do rozmiaru samej kwoty i cena robiła się nieczytelna.
   Te same clampy przemnożone przez 0,385 trzymają proporcję na każdej
   szerokości. Marginesy skalujemy tak samo, żeby grosze zostały przy górnej,
   a waluta przy dolnej krawędzi cyfr. */
.pk-cents {
	font-size: clamp(13px, 1.77vw, 20px);
	margin-top: clamp(4px, .53vw, 6px);
}

.pk-cur {
	font-size: clamp(13px, 1.77vw, 20px);
	margin-bottom: clamp(4px, .53vw, 6px);
}

/* Wyróżniony pakiet dostawał wyższą sekcję nagłówka (padding 38/32 zamiast
   30/26, bez dolnej kreski) — w sumie 13 px więcej. Siatka centruje karty
   w pionie, więc ta nadwyżka rozjeżdżała wszystkie wiersze niżej: cena,
   okres rozliczeniowy i cała lista cech stały o kilka pikseli niżej niż
   u sąsiadów. Wyrównujemy wysokość nagłówka; przezroczysta kreska zastępuje
   tę, której ciemny nagłówek mieć nie może. */
.pk-featured .pk-head {
	padding-top: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid transparent;
}

/* Karty równej wysokości. Bez tego wystarczyłaby jedna cecha więcej
   w dowolnym pakiecie, żeby centrowanie znów przesunęło wiersze. */
.pk-grid {
	align-items: stretch;
}

/* -------------------------------- przycisk „Wszystkie realizacje” */

/* Projekt zadeklarował na tym przycisku przejście dla tła, ramki i koloru,
   ale samego stanu :hover już nie napisał — jako jedyny przycisk w motywie
   nie reagował na najechanie. Dokładamy zachowanie pozostałych przycisków
   obrysowych (.btn-s / .btn-ghost): wypełnienie grafitem i biały tekst.
   Strzałka rysowana jest przez currentColor, więc bieleje razem z napisem.
   !important, bo kolor i ramkę ustawia styl inline z szablonu usługi. */
.cs-all:hover,
.cs-all-m:hover {
	background: var(--ink);
	border-color: var(--ink) !important;
	color: #fff !important;
}

/* -------------------------------- kafelki informacyjne bez efektu hover */

/* Kafelki w „Co zyskujesz” i „Nie zostawiamy Cię po starcie” nie są klikalne,
   więc unoszenie ich i podświetlanie ramki przy najechaniu tylko myli.
   Zerujemy sam stan :hover, zamiast wyłączać przejścia na kafelku — inaczej
   zgasłoby razem z nimi pojawianie się sekcji (klasa .gw-anim animuje
   przezroczystość tym samym przejściem). */
#pv-co .pv-feat:hover {
	transform: none;
	box-shadow: none;
	border-color: #e6e8ea;
}

#pv-support .sup-card:hover {
	transform: none;
	border-color: #e6e8ea;
}

/* ------------------------------------------------------ zdjęcia „Dlaczego my” */

/* Proporcja trzymana przez ramkę, nie przez <img>. Gdy WordPress nie wygeneruje
   przyciętej wersji (zdjęcie mniejsze niż zarejestrowany rozmiar), atrybuty
   width/height oryginału potrafią przebić regułę na obrazku i kadr się rozjeżdża.
   Ramka jest na to odporna — obrazek po prostu ją wypełnia. */
.wn-media {
	aspect-ratio: 4 / 3;
}

.wn-media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------ karuzela logotypów */

/* Logotypy pod hero — projekt dawał 0.62, na życzenie podbite do 0.80. */
.logos-track img {
	opacity: .8;
}

/* ------------------------------------------------------- przyklejone kolumny */

/* Wspólny offset dla bocznych kolumn (filtry realizacji, pasek artykułu).
   Nagłówek ma 77 px, więc 105 px daje ok. 28 px prześwitu pod nim.
   Zalogowanym użytkownikom pasek administratora przesuwa nagłówek w dół —
   bez tej korekty kolumna wjeżdżała pod niego. */
:root {
	--gw-sticky-top: 105px;
}

.admin-bar {
	--gw-sticky-top: 137px;
}

@media screen and (max-width: 782px) {
	.admin-bar {
		--gw-sticky-top: 151px;
	}
}

.pf-side,
.art-side {
	top: var(--gw-sticky-top);
}

/* ------------------------------------------------------- filtry realizacji */

/* Filtry są linkami (przeładowanie strony), a nie przyciskami — trzeba więc
   zdjąć podkreślenie i odtworzyć stan „niedostępny” dla kombinacji bez wyników.
   Komunikat o pustym wyniku renderuje serwer, więc musi być widoczny. */
a.pf-opt,
a.pf-reset {
	text-decoration: none;
}

.pf-opt[data-disabled] {
	opacity: .38;
	cursor: not-allowed;
	pointer-events: none;
}

.pf-empty {
	display: block;
}

/* Reset oddzielony linią i odstępem, tak jak „Kategoria” od „Branży”.

   Linii nie rysujemy tutaj: obecność tego opakowania sprawia, że pudełko
   „Branża” przestaje być ostatnim elementem swojego typu, więc odzyskuje
   własne border-bottom z projektu. Dołożenie drugiej krawędzi dawało
   podwójny separator. Zostaje sam odstęp, dopełniający rytm 18 px. */
.pf-reset-wrap {
	margin-top: 18px;
}

/* ------------------------------------------------------ awatary w opiniach */

/* Delikatna obwódka oddzielająca zdjęcie/logo od tła karty — szczególnie gdy
   awatar ma jasne tło. Kolor dobrany pod kontekst sekcji: na stronie głównej
   karty są białe, na podstronach ofertowych i „O nas” — ciemne.
   Obramowanie mieści się w 42 px dzięki globalnemu box-sizing:border-box,
   więc układ się nie zmienia. */
#opinie .op-who img {
	border: 1px solid var(--line);
}

#pv-opinie .op-who img {
	border: 1px solid rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------- plakietka opinii */

/* Logo w plakietce z oceną ma być grafitowe, tak jak „5,0” i gwiazdki obok,
   zamiast zachowywać oryginalne kolory. Łańcuch filtrów sprowadza dowolny
   kolorowy plik do var(--ink) — sprawdzone: daje rgb(31,35,40) przy #1f2329.
   Wymaga logo z przezroczystym tłem (PNG lub SVG); plik JPG zostałby
   zamalowany w całości. */
.ops-badge-logo {
	filter:
		brightness(0)
		saturate(100%)
		invert(13%)
		sepia(10%)
		saturate(700%)
		hue-rotate(170deg)
		brightness(105%);
}

/* ------------------------------------------------------- łamanie nagłówków */

/* Projekt ustawia na nagłówkach text-wrap:balance, które wyrównuje długość
   wierszy zamiast wypełniać pierwszy — przez to wyrazy przenosiły się niżej,
   mimo że jeszcze się mieściły („Dlaczego warto / pracować z nami?”).

   text-wrap:pretty wypełnia wiersze normalnie, a jedynie unika zostawienia
   pojedynczego słowa w ostatniej linii. Przeglądarki bez jego obsługi
   (Firefox, starsze Safari) zachowają się jak przy zwykłym „wrap”, czyli też
   poprawnie. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
	text-wrap: pretty;
}

/* Nagłówki hero miały ciasne limity liczone w znakach. Poluzowane na tyle,
   żeby wiersz wypełniał kolumnę, ale nie rozciągał się na całą szerokość strony. */
.pt-h1 {
	max-width: 28ch;
}

.art-h1 {
	max-width: 26ch;
}

/* --------------------------------------------------------- animacje wejścia */

/* Własna klasa, niezależna od arkuszy z projektu (te miały własne .reveal/.rv
   wraz z globalnymi wyłącznikami !important). Animujemy wyłącznie
   przezroczystość — bez transformacji, więc nic nie może rozjechać układu,
   pozycjonowania sticky ani efektów hover. */
/* Uwaga: `transition` jest skrótem, więc ta deklaracja ZASTĘPUJE przejścia
   zadeklarowane wcześniej dla elementu. Jeśli element nosi „gw-anim”, a jego
   własne przejście (hover) jest opisane selektorem o tej samej specyficzności
   co poniższy, straci je. Lekarstwo: opisz je selektorem o klasę wyżej —
   tak jak `.of-grid .of-card` w projekcie i `.of-grid .of-cta` powyżej. */
.gw-anim {
	opacity: 0;
	transition: opacity .45s cubic-bezier(.33, 0, .2, 1);
}

.gw-anim.is-in {
	opacity: 1;
}

/* Bez JavaScriptu nic nie doda klasy „is-in”, więc treść musi być widoczna. */
html:not(.gowebv3-js) .gw-anim {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.gw-anim {
		opacity: 1;
		transition: none;
	}
}

/* --------------------------------------------------- awatary komentarzy */

.bl-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #e6e8ea;
}

/* ------------------------------------------------- LCP: animacja swash w hero

   Element LCP strony głównej to h1#hero (tekst, nie zdjęcie). Lighthouse mierzył
   „element render delay” 1025 ms przy animation-delay .95 s — Chrome uznaje drugą
   linię nagłówka za namalowaną dopiero w chwili startu animacji, bo do tego czasu
   .swash-t stoi na `color:transparent` (background-clip:text) z limonką o zerowej
   szerokości. Cały delay wchodzi więc 1:1 do LCP.

   Efekt zostaje, tylko rusza od razu i trwa krócej. Nadpisujemy longhandem, bo
   home.css ustawia to shorthandem `animation` — kolejność plików załatwia resztę
   (wp.css ładowany po arkuszu widoku, specyficzność podniesiona przez #hero). */

#hero .swash,
#hero .swash-t {
	animation-delay: .15s;
	animation-duration: .6s;
}

/* ------------------------------------------------ podgląd zdjęcia realizacji

   Kafelek pokazuje kadr 1120x700, więc zdjęcie prosi się o podgląd w pełnym
   formacie. Przycisk siedzi w rogu obrazka, a nie pod nim — nie zabiera
   wysokości i nie rozpycha układu. */

.rz-shot {
	position: relative;
}

.rz-shot[data-lb] {
	cursor: zoom-in;
}

.rz-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px 14px;
	border: 0;
	border-radius: 100px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
	color: var(--ink);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 2px rgba(31, 35, 41, .06), 0 10px 26px -16px rgba(31, 35, 41, .5);
	cursor: zoom-in;
	transition: background .16s, color .16s, transform .16s;
}

.rz-zoom svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.rz-shot:hover .rz-zoom,
.rz-zoom:focus-visible {
	background: var(--lime);
	transform: translateY(-1px);
}

/* Na wąskim ekranie pigułka zjadała jedną trzecią szerokości kadru. */
@media (max-width: 640px) {
	.rz-zoom {
		right: 10px;
		bottom: 10px;
		padding: 8px 12px;
		font-size: 12.5px;
		gap: 6px;
	}

	.rz-zoom svg {
		width: 15px;
		height: 15px;
	}
}

/* Podgląd. Bez animacji skalowania — zdjęcie i tak dociąga się z sieci,
   a ruch tła tylko opóźniałby moment, w którym widać treść. */

.gw-lb {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(15, 17, 20, .92);
	animation: gwLbIn .16s ease-out both;
}

.gw-lb[hidden] {
	display: none;
}

@keyframes gwLbIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.gw-lb-fig {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
}

.gw-lb-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - clamp(32px, 8vw, 96px));
	border-radius: 10px;
	object-fit: contain;
	cursor: zoom-out;
}

/* Dopóki oryginał się nie wczyta, w miejscu zdjęcia pulsuje sam prostokąt —
   bez tego okno przez chwilę byłoby puste i wyglądałoby na zepsute. */
.gw-lb[data-loading] .gw-lb-img {
	min-width: min(60vw, 520px);
	min-height: min(40vh, 320px);
	background: rgba(255, 255, 255, .06);
	animation: gwLbPulse 1s ease-in-out infinite;
}

@keyframes gwLbPulse {
	50% { background: rgba(255, 255, 255, .12); }
}

.gw-lb-x {
	position: absolute;
	top: clamp(12px, 2vw, 20px);
	right: clamp(12px, 2vw, 20px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: #f7f8f8;
	background: rgba(255, 255, 255, .06);
	cursor: pointer;
	transition: color .16s, background .16s, border-color .16s;
}

.gw-lb-x svg {
	width: 19px;
	height: 19px;
}

.gw-lb-x:hover,
.gw-lb-x:focus-visible {
	color: var(--ink);
	background: var(--lime);
	border-color: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
	.gw-lb,
	.gw-lb[data-loading] .gw-lb-img {
		animation: none;
	}
}

/* ------------------------------------------ nagłówek przy otwieraniu menu

   Na stronie głównej nagłówek jest w spoczynku przezroczysty, a panel menu
   (.mm) jest biały i leży pod nim (z-index 45 wobec 50). Oba przejścia
   startowały równocześnie, więc zanim tło nagłówka zdążyło zajść grafitem
   (.28 s), przez półprzezroczysty pasek prześwitywała wjeżdżająca biel —
   stąd błysk.

   Tła nagłówka nie ruszamy, bo tym samym przejściem steruje zmiana koloru
   przy przewijaniu; opóźnienie na nim zrobiłoby ospały pasek. Zamiast tego
   dokładamy osobną warstwę, która pojawia się natychmiast przy otwarciu,
   a znika dopiero wtedy, gdy panel jest już wygaszony. */

#hdr::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ink);
	opacity: 0;
	pointer-events: none;
	/* zamykanie: przeczekaj wygaszanie panelu (.16 s — patrz przejście .mm
	   wyżej w tym pliku), dopiero potem ustąp */
	transition: opacity .18s ease .16s;
}

#hdr[data-menu="open"]::before {
	opacity: 1;
	/* otwieranie: pasek ma być kryjący, zanim biel zdąży się pokazać */
	transition: opacity 0s;
}

@media (prefers-reduced-motion: reduce) {
	#hdr::before {
		transition: none;
	}
}

/* ------------------------------- menu mobilne ponad widgetami zewnętrznymi

   Cookiebot wstawia swoją pływającą ikonę z z-index 2147483631, więc przy
   otwartym menu nachodziła na przycisk „Darmowa wycena” w stopce panelu.
   Podnosimy panel ponad nią, ale wyłącznie na czas otwarcia — w spoczynku
   nagłówek zostaje na 50, inaczej przykrywałby podgląd zdjęcia w realizacji
   (z-index 2000) i każdą przyszłą warstwę modalną.

   Nagłówek musi zostać nad panelem, żeby krzyżyk zamykania był klikalny. */

#hdr[data-menu="open"] {
	z-index: 2147483646;
}

#hdr[data-menu="open"] ~ .mm,
.mm[data-open="1"] {
	z-index: 2147483645;
}

/* ------------------------------------------------- obwódka celu kotwicy

   setupAnchors() nadaje celowi tabindex="-1" i przenosi na niego fokus, żeby
   czytnik ekranu i klawiatura trafiły tam, gdzie skoczył wzrok. Skutek uboczny:
   po tapnięciu w spis treści albo „Czytaj więcej” przeglądarka obrysowywała
   nagłówek ramką fokusu, choć nikt nie nawigował klawiaturą.

   Fokusu nie zdejmujemy — bez niego wróciłby problem z dostępnością. Gasimy
   samą obwódkę i tylko tam, gdzie skok wyszedł od palca albo myszy; skoki
   z klawiatury zachowują domyślną ramkę przeglądarki.

   Nie opieramy się na :focus-visible, bo o tym, czy ramka ma się pokazać,
   decyduje wtedy heurystyka przeglądarki. Znacznik ustawia setupAnchors(),
   które zna źródło zdarzenia — zachowanie jest przewidywalne. */

[data-gw-anchor="wskaznik"]:focus {
	outline: none;
}

/* ------------------------------------------------------ zdjęcia zespołu 1:1

   Projekt dawał kadr 4:5, ale rozmiar „gowebv3-square” przycina pliki do
   600x600. Kwadrat wciskany w pionowy prostokąt tracił boki — przy portrecie
   znaczy to obcięte ramiona albo ucho. Kontener dostaje proporcje zdjęcia. */

.tm-photo {
	aspect-ratio: 1 / 1;
}

/* ------------------------------------------- zakładka „Logowanie do hostingu”

   Szablon korzysta z bazowego arkusza podstron (legal.css), więc tu leżą
   wyłącznie style tej jednej zakładki. Układ dwukolumnowy powtarza siatkę
   kontaktu (.ct-grid), żeby zakładka nie odstawała od reszty serwisu. */

/* Kolejność w kodzie to kolejność na wąskim ekranie: wstęp, formularz, dopiero
   potem noty i pomoc. Formularz jest tu główną czynnością i nie może chować się
   pod ekranem tekstu. Na szerokim ekranie siatka odkłada go do prawej kolumny,
   przez całą wysokość. */
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
.lg-head  { grid-column: 1; grid-row: 1; }
.lg-card  { grid-column: 2; grid-row: 1 / span 2; }
.lg-aside { grid-column: 1; grid-row: 2; }

@media (max-width: 900px) {
	.lg-grid { grid-template-columns: 1fr; gap: 34px; }
	.lg-head, .lg-card, .lg-aside { grid-column: 1; grid-row: auto; }
}

/* ---- kolumna opisowa ---- */

.lg-notes { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(26px, 3vw, 34px); }
@media (max-width: 900px) { .lg-notes { margin-top: 0; } }

.lg-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--muted);
}

.lg-note-i { display: inline-flex; flex-shrink: 0; margin-top: 3px; color: var(--ink); }
.lg-note-i svg { width: 16px; height: 16px; }

.lg-help { margin-top: clamp(28px, 3.2vw, 38px); padding-top: clamp(24px, 2.8vw, 32px); border-top: 1px solid var(--line); }
.lg-help h2 { font-size: clamp(19px, 2vw, 22px); color: var(--ink); margin: 0 0 10px; }
.lg-help-body { color: var(--muted); font-size: 15.5px; line-height: 1.68; margin-bottom: 18px; }
.lg-help-body p:last-child { margin-bottom: 0; }

/* ---- karta z formularzem ---- */

/* Karta i pola jeden do jednego z formularzem kontaktowym (.ct-card /
   .ct-input w kontakt.css) — to ta sama rodzina komponentów. */
.lg-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: clamp(26px, 3vw, 34px);
	box-shadow: 0 1px 2px rgba(31, 35, 41, .04), 0 14px 32px -26px rgba(31, 35, 41, .16);
}

.lg-form { display: flex; flex-direction: column; gap: 18px; }

/* Oba kroki (dane i kod 2FA) leżą w tej samej komórce siatki, więc karta ma
   stale wysokość wyższego z nich i nie kurczy się przy przejściu do kodu.
   Krok nieaktywny zostaje w układzie, ale `visibility: hidden` wyjmuje go
   z kolejności tabulatora i z drzewa dostępności — dlatego wystarczy zamiast
   atrybutu `inert`. */
.lg-steps { display: grid; }
.lg-steps > .lg-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px; }
.lg-steps > .lg-step[hidden] { visibility: hidden; pointer-events: none; }

/* Krok z kodem jest niższy — środkujemy go w tej zapasowej wysokości. */
.lg-steps > .lg-step[data-lg-step="kod"] { justify-content: center; align-items: center; }
.lg-steps > .lg-step[data-lg-step="kod"] .lg-field { width: 100%; }
.lg-steps > .lg-step[data-lg-step="kod"] .lg-label { text-align: center; }
.lg-steps > .lg-step[data-lg-step="kod"] .lg-wroc { align-self: center; }

.lg-label {
	display: block;
	font-family: 'Google Sans';
	font-weight: 600;
	font-size: 13.8px;
	color: #52565f;
	margin-bottom: 8px;
}

.lg-form input[type="text"],
.lg-form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Google Sans';
	font-size: 15px;
	color: var(--ink);
	background: #f5f6f7;
	border: 1px solid #c9ced6;
	border-radius: 10px;
	padding: 14px 16px;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lg-form input:focus { border-color: #1f2329; background: #fff; box-shadow: none; }
.lg-form input::placeholder { color: #9aa0ad; }

/* Odstępstwo od kontaktu: poniżej 16 px iOS przybliża stronę przy tapnięciu
   w pole. Na formularzu logowania, wypełnianym najczęściej z telefonu, ten skok
   przeszkadza bardziej, niż waży różnica jednego piksela. */
@media (max-width: 640px) {
	.lg-form input[type="text"],
	.lg-form input[type="password"] { font-size: 16px; }
}

/* Kod 2FA: sześć kratek po jednej cyfrze. Selektor z „input” bije regułę
   ogólną pól i mobilną regułę 16 px. */
.lg-kod { display: flex; justify-content: center; gap: 10px; }

.lg-form input.lg-cyfra {
	width: 48px;
	height: 56px;
	padding: 0;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
}

.lg-kod-hint { margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--muted); }

@media (max-width: 420px) {
	.lg-kod { gap: 8px; }
	.lg-form input.lg-cyfra { width: 42px; height: 52px; font-size: 20px; }
}

.lg-pass { position: relative; display: block; }
.lg-pass input { padding-right: 52px !important; }

.lg-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color .16s, background .16s;
}

.lg-eye svg { width: 19px; height: 19px; }
.lg-eye:hover, .lg-eye:focus-visible { color: var(--ink); background: rgba(31, 35, 41, .07); }

.lg-wroc {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lg-wroc:hover { color: var(--ink); }

.lg-turnstile { min-height: 65px; }

.lg-blad {
	display: flex;
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fdf0f0;
	color: #a3332f;
	font-size: 13.8px;
	line-height: 1.55;
}

.lg-blad[hidden] { display: none; }

.lg-submit { width: 100%; justify-content: center; padding: 16px; border-radius: 13px; font-size: 16px; }
.lg-submit[disabled] { opacity: .5; cursor: not-allowed; }

/* Podczas wysyłki blokujemy całe pole formularza, nie sam przycisk. */
.lg-form[aria-busy="true"] input,
.lg-form[aria-busy="true"] .lg-eye { pointer-events: none; opacity: .6; }

/* Nota nad przyciskiem — ta sama drobna typografia co reszta podpisów
   w serwisie (okruszki, „Wróć i zmień dane”). Obie noty stoją w jednej komórce
   siatki, żeby różnica ich wysokości też nie ruszała kartą. */
.lg-noty { display: grid; }
.lg-noty > .lg-nota { grid-area: 1 / 1; }
.lg-noty > .lg-nota[hidden] { visibility: hidden; pointer-events: none; }

.lg-nota {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 13.8px;
	line-height: 1.6;
	color: var(--muted);
}

.lg-nota-i { display: inline-flex; flex-shrink: 0; margin-top: 3px; color: var(--muted); }
.lg-nota-i svg { width: 15px; height: 15px; }

/* Odnośniki jak w treści podstron (#pv-legal a): ciemniej, grubiej,
   podkreślenie dopiero pod kursorem. */
.lg-nota a { color: var(--accent); font-weight: 600; text-decoration: none; }
.lg-nota a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ostrzeżenie przed wyłudzaniem danych — spokojna ramka w tonacji serwisu,
   bez alarmowej czerwieni, która na stronie logowania czytałaby się jak błąd. */
.lg-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: clamp(26px, 3vw, 34px);
	padding: 16px 18px;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.lg-alert-i { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--ink); }
.lg-alert-i svg { width: 18px; height: 18px; }
.lg-alert-h { display: block; font-family: 'Google Sans'; font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.lg-alert-t { display: block; font-size: 13.8px; line-height: 1.6; color: var(--muted); }