/**
 * Gdańsk Bay Tech — uzupełnienie theme.json.
 *
 * Odwzorowuje wariant 1a: siatki, kafle, warstwy hero i panele, których
 * globalne style bloków nie wyrażają. Desktop 1:1 z projektem; poniżej
 * 900 px siatki zwijają się, żeby strona nigdy nie scrollowała poziomo.
 */

/* ─── Wspólne ──────────────────────────────────────────────────────── */

/* Projekt wyrównuje treść DO LEWEJ krawędzi kolumny 1240 px, a niektóre
   bloki dodatkowo skraca (hero H1 760, akapit 620, wprowadzenie 680,
   nota CTA 560). WordPress w układzie „constrained" centruje KAŻDE dziecko
   regułą `margin-inline:auto !important`, więc samo `max-width` zepchnęłoby
   te bloki na środek. Ograniczamy je więc przez wewnętrzny wrapper:
   blok zostaje pełnej szerokości kolumny, a skraca się jego TREŚĆ. */
/* Rozwiązanie: skrócony blok dostaje lewy margines równy odsunięciu
   kolumny od krawędzi sekcji — (100% − 1240px)/2 — więc startuje dokładnie
   pod nadtytułem, a na wąskim ekranie degraduje się do zera. */

/* Nadtytuł sekcji: „GDAŃSK · GDYNIA · POMORZE", „CO BUDUJEMY" itd. */
.gbt-eyebrow {
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
}

/* Rust Red #C24A2A na Sand Skin daje 4,58:1 i przechodzi przy 11 px.
   Na jaśniejszym Fresh Air (Radar) spada do 3,94 — tam nadtytuł idzie
   na 19 px, gdzie przy grubości 700 obowiązuje próg 3,0. */
.gbt-radar .gbt-eyebrow {
	/* Klasa rozmiaru z theme.json ma równą wagę i stoi później — stąd !important. */
	font-size: 19px !important;
	letter-spacing: 1.6px;
}

/* Wprowadzenie pod nagłówkiem — w projekcie ograniczone do ~640–680 px
   i dosunięte DO LEWEJ.
   WordPress dla układu „constrained" wypisuje `margin-left:auto !important`,
   które centruje każde dziecko. Dosunięcie do lewej wymaga tej samej wagi. */
.gbt-lead {
	max-inline-size: 680px;
	margin-inline-start: max(0px, (100% - 1240px) / 2) !important;
	margin-inline-end: auto !important;
}

/* ─── Nagłówek strony ──────────────────────────────────────────────── */

.gbt-header {
	border-bottom: 1px solid var(--wp--preset--color--sand-line);
}

/* Pasek ma w projekcie stałą wysokość 76 px. */
.gbt-header__bar {
	min-height: 76px;
	/* Odstęp między grupami (logo | menu | narzędzia | wezwanie) ustępuje
	   przy ciasnocie — pasek jest jednym rzędem, więc nie ma dokąd zawinąć. */
	gap: clamp(14px, 2vw, 26px);
}

.gbt-nav__lang a {
	opacity: 0.6;
}

/*
 * Przełącznik języków: JEDEN ciąg „PL / EN", nie dwie pełne nazwy.
 *
 * Polylang wypisuje dwie osobne pozycje menu i nie ma opcji „krótkie kody",
 * więc nazwy gasimy w ustawieniach pozycji (`show_names = 0`), a kody
 * podstawiamy tutaj z `content`. Dwie pełne nazwy zajmowały ~90 px i
 * współtworzyły zawijanie paska; „PL / EN" mieści się w ~48 px.
 */
/*
 * Nazwa („Polski"/„English") ZOSTAJE w markupie — czyta ją czytnik ekranu
 * i wyszukiwarka. Wizualnie gasi ją `font-size: 0`, a kod wchodzi z `::after`
 * własnym rozmiarem. Polylang wymusza nazwy nawet przy `show_names = 0`
 * (inaczej link byłby pusty), więc podmiana musi iść przez arkusz.
 */
.gbt-nav .lang-item a {
	display: inline-block;
	font-size: 0;
	line-height: 1;
}

.gbt-nav .lang-item a::after {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.gbt-nav .lang-item-pl a::after {
	content: "PL";
}

.gbt-nav .lang-item-en a::after {
	content: "EN";
}

/* Ukośnik rysuje pozycja EN, żeby stał MIĘDZY kodami, a nie po skrajnym. */
.gbt-nav .lang-item-en::before {
	content: "/";
	margin-right: 6px;
	color: var(--gbt-tekst);
	opacity: 0.35;
}

/* Kody stoją obok siebie jak jeden przełącznik — bez odstępu listy 20 px. */
.gbt-nav__list .lang-item + .lang-item {
	margin-left: -14px;
}

/*
 * Aktywny język pełną mocą, drugi wygaszony — ale nie poniżej progu WCAG AA.
 * Pomiar kontrastu wobec tła paska: 0,45 dawało 2,82:1 w jasnym motywie
 * (próg dla tekstu to 4,5:1). 0,65 daje 5,16:1 jasny / 6,76:1 ciemny.
 */
.gbt-nav .lang-item a {
	color: var(--gbt-tekst);
	opacity: 0.65;
}

.gbt-nav .lang-item.current-lang a {
	opacity: 1;
}

.gbt-nav .lang-item a:hover,
.gbt-nav .lang-item a:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--rust-red);
}

/* Logo: wektor motywu, dopóki redaktor nie wgra własnego pliku w Wyglądzie. */
.gbt-logo img {
	height: 38px;
	width: auto;
	display: block;
}

.gbt-logo__link {
	display: block;
	color: var(--gbt-tekst);
	text-decoration: none;
}

.gbt-logo .logo {
	/* Kadr 880×420 — przy 44 px wysokosci znak ma 92 px szerokosci
	   i pasek naglowka zostaje przy dotychczasowej wysokosci. */
	height: 44px;
	width: auto;
	display: block;
}

.gbt-logo .logo path {
	/* Wektor nie niesie koloru — bierze go z rodzica, jak w GBT Calendar. */
	fill: currentColor;
}

/* W ciemnej stopce ten sam wektor ma byc bialy — stad `currentColor`. */
.gbt-footer .gbt-logo__link {
	color: var(--wp--preset--color--white);
}

.gbt-logo__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust-red);
	outline-offset: 4px;
}

.gbt-logo:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.gbt-logo .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

/* ─── Hero ─────────────────────────────────────────────────────────── */

/* Ogniska światła i gradient bazowy w JEDNEJ własności background —
   tak jak w projekcie. Rozbicie ich na pseudoelement z ujemnym z-index
   chowało ogniska za tłem rodzica, więc nigdy się nie pokazywały. */
.gbt-hero {
	position: relative;
	overflow: hidden;
	/* Warstwy gradientu; kolor bazowy MUSI iść po skrócie `background`,
	   bo skrót zeruje background-color. Baza jest widoczna, gdyby gradient
	   się nie wczytał, i stanowi punkt odniesienia dla kontrastu. */
	background-image:
		radial-gradient(circle at 86% 24%, rgba(195, 217, 232, 0.85), transparent 20%),
		linear-gradient(105deg, #0b1f2a 0%, #3b2b2b 40%, #c24a2a 73%, #fd6124 100%);
	background-color: #0b1f2a;
}

/*
 * Oddech hero. Ognisko pomarańczowe wędruje BARDZO wolno — pełny cykl 40 s,
 * wychylenie kilka procent szerokości. Ruchu nie da się zauważyć patrząc
 * wprost; znika dopiero wrażenie zrzutu ekranu.
 *
 * ANIMUJEMY `transform` NA OSOBNEJ WARSTWIE, nie `background-position` na samej
 * sekcji. Zmierzone: animacja pozycji tła zbijała stronę główną z 57 na 23 fps,
 * bo każda klatka wymusza ponowne narysowanie całego wielowarstwowego
 * gradientu na pełną szerokość okna. `transform` przesuwa gotową warstwę
 * i idzie przez kompozytor — koszt bliski zeru.
 *
 * Ognisko przenosimy więc do `::before`, a sekcja zostaje z gradientem bazowym.
 */
.gbt-hero::before {
	content: "";
	position: absolute;
	/* Z zapasem poza krawędzie: warstwa się przesuwa, więc nie może odsłonić
	   gołego tła przy brzegu. */
	inset: -12%;
	background-image: radial-gradient(circle at 72% 65%, rgba(253, 97, 36, 0.95), transparent 31%);
	will-change: transform;
	animation: gbt-oddech 40s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes gbt-oddech {
	from { transform: translate3d(-1.2%, -1%, 0) scale(1.02); }
	to   { transform: translate3d(1.4%, 1.6%, 0) scale(1.06); }
}

/* Zero ruchu, gdy użytkownik go nie chce — bez wyjątków. */
@media (prefers-reduced-motion: reduce) {
	.gbt-hero::before {
		animation: none;
	}
}

/* Poza ekranem animacja nie ma czego pokazywać, a kosztuje przeliczanie
   w każdej klatce. Klasę zdejmuje i nakłada obserwator w `gbt-hero.js`. */
.gbt-hero--poza::before {
	animation-play-state: paused;
}

/* Ziarno — warstwa nad tłem i nad ogniskiem, pod treścią. */
.gbt-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
}

.gbt-hero > * {
	position: relative;
	/* Nad ogniskiem (::before, bez z-index) i nad ziarnem (::after, z-index 1). */
	z-index: 2;
}

/* Hero jest wyrównane do lewej; „constrained" centrowałoby te bloki
   regułą z !important, więc dosunięcie wymaga tej samej wagi. */
.gbt-hero h1 {
	max-inline-size: 760px;
	margin-inline-start: max(0px, (100% - 1240px) / 2) !important;
	margin-inline-end: auto !important;
}

.gbt-hero > p:not(.gbt-eyebrow) {
	max-inline-size: 620px;
	margin-inline-start: max(0px, (100% - 1240px) / 2) !important;
	margin-inline-end: auto !important;
}

/* Liczby ekosystemu w hero: 38 px, odstęp 56 px, margines górny 70 px. */
.gbt-hero .gbt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	margin-top: 70px;
}

.gbt-stat strong {
	display: block;
	font-size: 38px;
	line-height: 1.1;
	font-weight: 700;
}

.gbt-stat small,
.gbt-stat span {
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* ─── Siatki ───────────────────────────────────────────────────────── */

.gbt-grid {
	display: grid;
	gap: 18px;
	/*
	 * Kolumny opisane sa jako `minmax(0, 1fr)`, nigdy `1fr`. Samo `1fr` znaczy
	 * `minmax(auto, 1fr)` — minimum kolumny wyznacza wtedy najszerszy element
	 * w srodku. Obrazek o naturalnych 760 px rozpychal kolumne do 806 px
	 * w kontenerze 880 px, karty wchodzily na pasek boczny, a strona dostawala
	 * 290 px poziomego scrolla.
	 */
	/* Karty rozciągają się na równą wysokość rzędu — inaczej `margin-top:auto`
	   nie ma luzu i odnośnik/znacznik nie siada przy dolnej krawędzi. */
	align-items: stretch;
}

/* WordPress dokłada dzieciom bloku `margin-block-start`, przez co pierwszy
   kafel siatki startował 11 px wyżej niż pozostałe. */
.gbt-grid > * {
	margin-block: 0 !important;
}

/* Ten sam `margin-block-start` od WordPressa siadał na `main` i na stopce.
   Między sekcją wezwania (rgb 11,31,42) a stopką (rgb 7,23,34) przebijał
   przez to kremowy pasek tła strony — dwa ciemne bloki wyglądały jak
   rozdzielone, obce pola. Sekcje same trzymają odstęp paddingiem. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Stopka trzymała się końca TREŚCI, nie końca OKNA — na krótkich stronach
   (404, wyniki wyszukiwania bez trafień) wisiała w połowie ekranu, a pod nią
   zostawał pusty kremowy pas. Kolumna na całą wysokość okna + `auto` na
   górnym marginesie stopki spycha ją na dół, gdy treści jest mało, i nie
   rusza jej, gdy treści jest dużo.

   `100svh`, nie `100vh` — na telefonach `vh` liczy okno bez paska adresu,
   więc stopka schodziła poniżej krawędzi i robiła pionowy przeskok przy
   pierwszym przewinięciu. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.wp-site-blocks > .gbt-footer {
	margin-block-start: auto;
}

.gbt-grid--4 {
	/* `minmax(0, 1fr)`, nie `1fr` — patrz komentarz przy .gbt-grid. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gbt-grid--3 {
	/* `minmax(0, 1fr)`, nie `1fr` — patrz komentarz przy .gbt-grid. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dwie kolumny — lista aktualności obok paska bocznego. */
.gbt-grid--2 {
	/* `minmax(0, 1fr)`, nie `1fr` — patrz komentarz przy .gbt-grid. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Query Loop renderuje <ul>; siatka musi działać także na liście. */
ul.gbt-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.gbt-grid > li {
	margin: 0;
}

/* ─── „Dlaczego Pomorze" — białe karty z ikoną w kółku ─────────────── */

/* W projekcie każdy atut jest kartą: białe tło, ramka Sand Line,
   padding 26/22 — nie samym tekstem na tle sekcji. */
.gbt-feature {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	padding: 26px 22px;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gbt-feature:hover,
.gbt-feature:focus-within {
	border-color: var(--wp--preset--color--rust-red);
	box-shadow: 0 8px 20px rgba(11, 31, 42, 0.1);
}

.gbt-feature:hover .gbt-icon {
	background: var(--wp--preset--color--steel-blue);
	color: var(--wp--preset--color--white);
}

/* Znak w krążku. Przy 38 px krążka i 16 px znaku symbole (⚓ ⌂ ◎ ↗) zlewały
   się w plamkę — znak zajmował 42 % średnicy i szedł kreską z kroju pisma,
   która przy tym rozmiarze niemal znika. Krążek 52 px, znak 26 px (50 %
   średnicy) i pełny kolor roli „dane" zamiast Steel Blue na wprost. */
.gbt-icon {
	transition: background-color 0.18s ease, color 0.18s ease;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--fresh-air);
	color: var(--wp--preset--color--deep-baltic);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	/* Symbole techniczne bierze krój systemowy, nie Sora — ta ma je wąskie
	   i cienkie. Kolejność: co ma pełny znak, to go poda. */
	font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", sans-serif;
}

/* ─── „Cztery wejścia" — kafle na granacie ─────────────────────────── */

/* W projekcie jeden kafel jest rdzawy — to statyczny mockup, który może
   pokazać tylko JEDEN stan naraz. Rdza to stan NAJECHANIA: wszystkie kafle
   startują na #12293a i zmieniają tło po najechaniu lub fokusie. */
.gbt-tile {
	background: var(--wp--preset--color--deep-baltic-2);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	transition: background-color 0.18s ease;
}

.gbt-tile:hover,
.gbt-tile:focus-within {
	background: var(--wp--preset--color--rust-red);
}

/* Opis na rdzy: #fff4ef daje 4,58:1, mist na granacie 8,6:1. */
.gbt-tile p:not(.gbt-tile__link) {
	transition: color 0.18s ease;
}

.gbt-tile:hover p:not(.gbt-tile__link),
.gbt-tile:focus-within p:not(.gbt-tile__link) {
	/* Klasa koloru z theme.json (.has-mist-color) ma równą wagę i stoi
	   później w kaskadzie, więc nadpisanie wymaga !important. */
	color: #fff4ef !important;
}

/* Odnośnik w kaflu: w projekcie to pogrubiony tekst 12,5 px w kolorze
   odziedziczonym (biały), nie osobny kolor odnośnika.
   `margin-top:auto` dosuwa go do dołu kafla — reguła układu WordPressa
   nadpisuje margines inline, więc powtarzamy ją tutaj. */
.gbt-tile__link,
.gbt-tile__link a,
.gbt-tile__link strong {
	font-size: 12.5px !important;
}

.gbt-tile__link {
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

.gbt-tile__link a {
	color: #fff !important;
	text-decoration: none;
	transition: color 0.18s ease;
}

.gbt-tile:hover .gbt-tile__link a,
.gbt-tile:focus-within .gbt-tile__link a {
	color: #fff;
}

.gbt-tile__link a:hover {
	text-decoration: underline;
}

.gbt-tile__link a:hover {
	text-decoration: underline;
}

/* ─── „Siła regionu" — panel rozpięty na dwa rzędy ─────────────────── */

.gbt-spec {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 16px;
}

.gbt-spec__lead {
	grid-row: 1 / 3;
	background: var(--wp--preset--color--rust-red);
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
}

.gbt-spec__note {
	color: #fff4ef;
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

.gbt-spec__card {
	background: var(--wp--preset--color--white);
	border-top: 3px solid var(--wp--preset--color--steel-blue);
	padding: 24px 22px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gbt-spec__card:hover,
.gbt-spec__card:focus-within {
	border-top-color: var(--wp--preset--color--rust-red);
	box-shadow: 0 8px 20px rgba(11, 31, 42, 0.1);
}

/* ─── Radar ────────────────────────────────────────────────────────── */

.gbt-radar__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

.gbt-radar__panel {
	background: var(--wp--preset--color--white);
	border-radius: 6px;
	box-shadow: 0 14px 34px rgba(11, 31, 42, 0.14);
	padding: 18px;
}

/* Atrapa wyszukiwarki — realny Radar to zewnętrzna aplikacja. */
/* Nota pod przyciskami Radaru — w projekcie #5a6b74. */
.gbt-radar__note {
	color: #586974 !important;
}

/* Wyszukiwarka w panelu Radaru. Wcześniej stała tu ATRAPA — `div` z samym
   napisem, bez pola i bez przycisku. Teraz to zwykły formularz prowadzący
   do wyszukiwarki serwisu; wygląd trzyma się kafla z paska bocznego, a kolory
   idą z tokenów, żeby szły za trybem jasnym i ciemnym. */
.gbt-search-radar {
	display: flex;
	gap: 0;
	margin-bottom: 16px;
}

.gbt-search-radar__pole {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--sand-line);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: var(--gbt-tlo-karta);
	color: var(--gbt-tekst);
	padding: 11px 14px;
	font-size: 12.5px;
	font-family: inherit;
}

.gbt-search-radar__pole::placeholder {
	color: var(--gbt-tekst-slabszy);
	opacity: 1;
}

.gbt-search-radar__pole:focus-visible {
	outline: 2px solid var(--gbt-akcja);
	outline-offset: -2px;
}

/* Rust Deep, nie Rust Red: biały napis 12,5 px na Rust Red daje 3,94:1. */
.gbt-search-radar__przycisk {
	flex: none;
	border: 1px solid var(--wp--preset--color--rust-deep, #a63d21);
	border-radius: 0 4px 4px 0;
	background: var(--wp--preset--color--rust-deep, #a63d21);
	color: #fff;
	padding: 11px 18px;
	font-size: 12.5px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}

.gbt-search-radar__przycisk:hover {
	background: var(--wp--preset--color--rust-red);
	border-color: var(--wp--preset--color--rust-red);
}

.gbt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.gbt-table th,
.gbt-table td {
	text-align: left;
	padding: 12px 6px;
	border-bottom: 1px solid #f2efe9;
}

.gbt-table th {
	font-size: 11px;
	font-weight: 700;
	border-bottom: 1px solid #eee;
}

.gbt-table tr:last-child td {
	border-bottom: 0;
}

.gbt-table tbody tr {
	transition: background-color 0.15s ease;
}

.gbt-table tbody tr:hover {
	background: var(--wp--preset--color--sand-2);
}

/* Pigułka sektora w tabeli Radaru. */
.gbt-pill {
	display: inline-block;
	background: var(--wp--preset--color--fresh-air);
	color: var(--gbt-tekst);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 10.5px;
}

/* Wąski ekran: tabela przewija się we własnym kontenerze. */
.gbt-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ─── Wydarzenia ───────────────────────────────────────────────────── */

.gbt-event {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gbt-event:hover,
.gbt-event:focus-within {
	border-color: var(--wp--preset--color--rust-red);
	box-shadow: 0 8px 20px rgba(11, 31, 42, 0.1);
}

/* Tytuł wydarzenia jest odnośnikiem, ale w projekcie ma kolor tekstu,
   nie globalny kolor odnośnika. */
.gbt-event .wp-block-post-title a {
	color: var(--gbt-tekst);
	text-decoration: none;
}

.gbt-event .wp-block-post-title a:hover {
	color: var(--wp--preset--color--rust-red);
	text-decoration: underline;
}

.gbt-event-date {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--wp--preset--color--rust-red);
}

/* Znacznik rodzaju: miękka pigułka na piaskowym tle. Kanciasta ramka w rdzy
   biła się z rdzawą datą nad tytułem i wychodziła na kartach jak obwódka
   pola formularza. Tekst `slate-2` na `sand-2` daje 8,69:1 — powyżej progu
   7:1 — a etykieta zostaje drugoplanowa, bo taka jest jej rola. */
.gbt-badge {
	align-self: flex-start;
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

.gbt-badge,
.gbt-badge a {
	display: inline-block;
	font-size: 9.5px !important;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 20px;
	background: var(--wp--preset--color--sand-2);
	border: 0;
	color: var(--wp--preset--color--slate-2);
	text-decoration: none;
}

/* Gdy znacznik jest odnośnikiem, ramkę rysuje element zewnętrzny. */
.gbt-badge a {
	border: 0;
	padding: 0;
}

.gbt-badge a:hover {
	text-decoration: underline;
}

/* ─── One Stop Shop — panel w rdzy ─────────────────────────────────── */

.gbt-oss {
	background: var(--wp--preset--color--rust-red);
	padding: 44px 40px;
	display: flex;
	align-items: center;
	gap: 36px;
}

.gbt-oss__text {
	flex: 1;
}

.gbt-oss__note {
	color: #fff4ef;
}

.gbt-oss__cta {
	flex: none;
}

.gbt-oss__cta .wp-element-button {
	white-space: nowrap;
}

/* ─── Rosnący ekosystem — wyśrodkowany ─────────────────────────────── */

.gbt-community {
	text-align: center;
}

.gbt-community__stats {
	display: flex;
	justify-content: center;
	gap: 80px;
}

/* Liczby w tej sekcji są większe niż w hero: 52 px. */
.gbt-stat--big strong {
	font-size: 52px;
}

.gbt-stat--big small {
	color: var(--wp--preset--color--slate);
}

.gbt-tags {
	color: var(--wp--preset--color--slate);
}

/* ─── CTA ──────────────────────────────────────────────────────────── */

.gbt-cta__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.gbt-cta__note {
	max-inline-size: 560px;
	margin-inline-start: max(0px, (100% - 1240px) / 2) !important;
	margin-inline-end: auto !important;
}

/* Miejsce na kod QR — w projekcie pusta ramka 110×110. */
.gbt-qr {
	width: 110px;
	height: 110px;
	border: 5px solid #fff;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9px;
	color: var(--wp--preset--color--mist);
	text-align: center;
}

/* ─── Stopka ───────────────────────────────────────────────────────── */

.gbt-footer__bar {
	gap: 24px;
}

/* Odnośniki i napisy po prawej stronie paska, jak w projekcie. */
.gbt-footer__links {
	margin-left: auto;
}

/* Logo witryny jest jedno (ciemne); stopka stoi na granacie. */
.gbt-footer .gbt-logo img {
	height: 30px;
	filter: brightness(0) invert(1);
}

/* ─── Odnośniki na ciemnym tle ─────────────────────────────────────── */

/* Globalny Rust Red daje na granacie 3,7:1. Fresh Air trzyma próg AA. */
.gbt-footer a:where(:not(.wp-element-button)),
.gbt-section--dark a:where(:not(.wp-element-button)),
.gbt-hero a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--fresh-air);
}

.gbt-footer a:where(:not(.wp-element-button)):hover,
.gbt-section--dark a:where(:not(.wp-element-button)):hover,
.gbt-hero a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--white);
}

/* ─── Dostępność ───────────────────────────────────────────────────── */

.gbt-hero a:focus-visible,
.gbt-footer a:focus-visible,
.gbt-section--dark a:focus-visible,
.gbt-tile a:focus-visible,
.gbt-oss a:focus-visible {
	outline: 2px solid var(--wp--preset--color--fresh-air);
	outline-offset: 3px;
}

.gbt-skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gbt-skip-link:focus {
	position: absolute;
	z-index: 100;
	top: 8px;
	left: 8px;
	padding: 12px 18px;
	background: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);
	border-radius: 4px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ─── Zwijanie na węższych ekranach ────────────────────────────────── */

/* Projekt jest rysowany na desktop. Poniżej 900 px siatki schodzą do
   dwóch kolumn, poniżej 600 px do jednej — bez poziomego scrolla. */
@media (max-width: 900px) {
	.gbt-grid--4,
	.gbt-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gbt-grid--2 {
		grid-template-columns: 1fr;
	}

	.gbt-spec {
		grid-template-columns: 1fr 1fr;
	}

	.gbt-spec__lead {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	.gbt-radar__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.gbt-cta__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.gbt-community__stats {
		gap: 48px;
	}
}

@media (max-width: 600px) {
	.gbt-grid--4,
	.gbt-grid--3,
	.gbt-grid--2,
	.gbt-spec {
		grid-template-columns: 1fr;
	}

	.gbt-oss {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 24px;
	}

	.gbt-hero .gbt-stats {
		gap: 32px;
		margin-top: 44px;
	}

	.gbt-community__stats {
		gap: 32px;
	}

	.gbt-stat--big strong {
		font-size: 40px;
	}

	.gbt-footer__links {
		margin-left: 0;
	}
}

/* ─── Podstrony: treść + sidebar ───────────────────────────────────── */

/*
 * Strona główna oddycha, bo sekcje zmieniają tło. Podstrona miała jeden płaski
 * blok piasku od nagłówka do stopki. Treść siada więc na białej karcie —
 * odcina się od tła sekcji i wyznacza kolumnę czytania.
 */
.gbt-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
	/*
	 * Węziej niż kanoniczne 1240 px: przy pasku 320 i odstępie 40 karta
	 * dostaje ~760 px, a po odjęciu paddingu jej wnętrze to ~656 px —
	 * czyli miara wiersza ~65 znaków przy 17 px. Tekst wypełnia kolumnę.
	 */
	max-width: 1120px !important;
	margin-inline: auto;
}

/*
 * Podstrona BEZ paska bocznego (polityka prywatności i inne dokumenty).
 * Siatka rezerwowała drugą kolumnę 320 px razem z odstępem 40 px, mimo że
 * nie było czego w niej postawić — karta dostawała 760 px zamiast 1120 px
 * i treść wyglądała na wciśniętą w rynnę.
 *
 * `:has()` sprawdza układ w chwili renderu: jedno dziecko = brak paska =
 * jedna kolumna na pełną szerokość. Strony z paskiem zachowują się jak dotąd.
 */
.gbt-with-sidebar:not(:has(> aside)):not(:has(> .gbt-sidebar)) {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: 1240px !important;
}

.gbt-article {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	padding: 48px 52px;
}

/* Elementy pełnej szerokości (obraz, cytat, okładka) wychodzą poza padding
   karty aż do jej krawędzi — to przełamuje rytm kolumny tekstu. */
.gbt-article > .alignwide,
.gbt-article > .wp-block-pullquote,
.gbt-article > .wp-block-cover,
.gbt-article > .wp-block-gallery,
.gbt-article > .wp-block-media-text,
.gbt-article > pre {
	margin-left: -52px;
	margin-right: -52px;
	width: calc(100% + 104px);
	max-inline-size: none;
}

.gbt-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Kafel w pasku bocznym. */
.gbt-widget {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	padding: 22px 20px;
}

.gbt-widget__title {
	font-size: 11px !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	/* Rdza na bieli daje 3,94:1 — poniżej progu dla napisu 11 px. */
	color: var(--wp--preset--color--rust-deep, #a63a19);
	margin: 0 0 12px !important;
}

.gbt-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbt-widget li {
	font-size: 12.5px;
	line-height: 1.5;
	padding: 8px 0;
	border-bottom: 1px solid var(--wp--preset--color--sand-line);
}

.gbt-widget li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.gbt-widget a {
	color: var(--gbt-tekst);
	text-decoration: none;
}

/* Przycisk wyszukiwarki dziedziczy Setting Sun z globalnego stylu przycisku;
   w kanonie strony przyciski są w Rust Red. */
.gbt-widget .wp-block-search__button {
	background: var(--wp--preset--color--rust-red);
	color: var(--wp--preset--color--white);
	border: 0;
	font-size: 12.5px;
	font-weight: 700;
	padding: 10px 14px;
}

.gbt-widget .wp-block-search__button:hover {
	background: var(--wp--preset--color--deep-baltic);
}

.gbt-widget .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--sand-line);
	font-size: 12.5px;
	padding: 9px 12px;
}

.gbt-widget a:hover {
	color: var(--wp--preset--color--rust-red);
	text-decoration: underline;
}

/* Kafel wyróżniony — wezwanie do kontaktu w pasku bocznym. */
.gbt-widget--accent {
	background: var(--wp--preset--color--deep-baltic);
	border-color: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);
}

.gbt-widget--accent .gbt-widget__title {
	color: var(--wp--preset--color--fresh-air);
}

.gbt-widget--accent p {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--mist);
	margin: 0 0 14px;
}

/* Lista taksonomii w pasku bywa długa (14 rodzajów wydarzeń) i przerasta
   treść. Ograniczamy wysokość — reszta przewija się w kaflu. */
.gbt-widget--scroll ul {
	max-height: 268px;
	overflow-y: auto;
}

/* ─── Nagłówek podstrony ───────────────────────────────────────────── */

/* Pas tytułowy: ten sam granat co sekcje ciemne, ale niższy niż hero. */
.gbt-pagehead {
	background: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);
}

.gbt-pagehead .gbt-eyebrow {
	color: var(--wp--preset--color--fresh-air);
}

.gbt-pagehead h1 {
	max-inline-size: 860px;
	margin-inline-start: max(0px, (100% - 1240px) / 2) !important;
	margin-inline-end: auto !important;
}

/* Data i autor pod tytułem wpisu. */
.gbt-postmeta {
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
}

/* ─── Lista aktualności ────────────────────────────────────────────── */

.gbt-post-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gbt-post-card:hover,
.gbt-post-card:focus-within {
	border-color: var(--wp--preset--color--rust-red);
	box-shadow: 0 8px 20px rgba(11, 31, 42, 0.1);
}

/* W wąskiej kolumnie (powiązane wpisy: 241 px) długi tytuł łamał się na
   siedem wierszy i rozpychał kartę do 708 px. Trzy wiersze i wielokropek —
   karty w rzędzie zostają porównywalne. */
.gbt-post-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gbt-post-card .wp-block-post-title a {
	color: var(--gbt-tekst);
	text-decoration: none;
}

.gbt-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--rust-red);
	text-decoration: underline;
}

.gbt-post-card img {
	/* Bez `.wp-block-post-featured-image` — motyw klasyczny wypisuje sam <a><img>. */
	display: block;
	width: 100%;
	height: 168px;
	object-fit: cover;
}

/* Odnosnik owijajacy obrazek nie moze przenosic jego naturalnej szerokosci. */
.gbt-post-card > a {
	display: block;
	min-width: 0;
}

/* ─── Treść wpisu — własna skala redakcyjna ────────────────────────── */

/*
 * Wielkości z projektu (42/40/38) są zaprojektowane dla sekcji na PEŁNEJ
 * szerokości 1240 px. W kolumnie tekstu 876 px H2 o rozmiarze 42 px było
 * większe od H1 (40 px) — hierarchia stawała na głowie. Treść czytana
 * dostaje więc własną, mniejszą skalę; kolory i krój zostają z kanonu.
 */

.gbt-article {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--slate-2);
}

/*
 * Miary wiersza NIE wymuszamy na akapicie — inaczej tekst kończy się w pół
 * karty i po prawej zostaje pusty pas. Zamiast tego zwężamy samą kartę
 * (patrz .gbt-with-sidebar), więc jej wnętrze JEST miarą wiersza,
 * a tekst wypełnia kolumnę do krawędzi.
 */

.gbt-article :where(p, ul, ol) {
	font-size: 17px;
	line-height: 1.65;
}

/* `:not(.wp-block-post-title)` — powiązane wpisy stoją teraz WEWNĄTRZ
   artykułu, a ich tytuły to karty, nie nagłówki tekstu. Bez tego wyjątku
   dostawały 28 px z `!important` zamiast 17 px, kreskę nad sobą i odstęp
   domknięcia; karta rosła do 708 px przy 241 px szerokości. */
.gbt-article h2:not(.wp-block-post-title) {
	font-size: 28px !important;
	line-height: 1.2;
	margin-top: 52px;
	margin-bottom: 14px;
	color: var(--gbt-tekst);
}

/* Kreska nad nagłówkiem — dzieli tekst na części bez dodatkowej linii. */
.gbt-article h2:not(.wp-block-post-title)::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--wp--preset--color--rust-red);
	margin-bottom: 18px;
}

.gbt-article h3:not(.wp-block-post-title) {
	font-size: 21px !important;
	line-height: 1.3;
	margin-top: 34px;
	margin-bottom: 10px;
	color: var(--gbt-tekst);
}

.gbt-article h4:not(.wp-block-post-title) {
	font-size: 17px !important;
	line-height: 1.4;
	margin-top: 26px;
	margin-bottom: 8px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	/* Rola, nie próbnik. `--wp--preset--color--rust-red` CELOWO nie jest
	   odwracany (służy też za tło przycisków), więc jako kolor PISMA dawał
	   na ciemnym tle 3,27:1. `--gbt-akcja` rozjaśnia się w trybie ciemnym. */
	color: var(--gbt-akcja);
}

/* Pierwszy nagłówek nie odsuwa się od góry kolumny. */
.gbt-article > :where(h2, h3):first-child {
	margin-top: 0;
}

.gbt-article :where(ul, ol) {
	padding-left: 22px;
}

.gbt-article li {
	margin-bottom: 7px;
}

.gbt-article li::marker {
	color: var(--wp--preset--color--rust-red);
}

/* Wprowadzenie — większe od tekstu podstawowego, ciemniejsze. */
.gbt-article .gbt-lead,
.gbt-article .is-style-lead {
	font-size: 20px !important;
	line-height: 1.5;
	color: var(--gbt-tekst);
	max-inline-size: none;
	margin-inline: 0 !important;
}

/* ─── Cytaty ───────────────────────────────────────────────────────── */

.gbt-article blockquote {
	border-left: 3px solid var(--wp--preset--color--rust-red);
	padding: 4px 0 4px 24px;
	margin: 32px 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--gbt-tekst);
}

.gbt-article blockquote p {
	font-size: inherit;
	line-height: inherit;
}

.gbt-article blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	font-style: normal;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

/* Cytat wyróżniony — wychodzi poza kolumnę tekstu, na tle granatu. */
.gbt-article .wp-block-pullquote {
	background: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);
	padding: 40px 44px;
	margin: 44px 0;
	max-inline-size: none;
	border: 0;
	text-align: left;
}

.gbt-article .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	max-inline-size: none;
}

.gbt-article .wp-block-pullquote p {
	font-size: 26px !important;
	line-height: 1.35;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	margin: 0;
}

.gbt-article .wp-block-pullquote cite {
	color: var(--wp--preset--color--fresh-air);
	margin-top: 18px;
}

/* ─── Obrazy ───────────────────────────────────────────────────────── */

.gbt-article figure {
	margin: 36px 0;
}

.gbt-article img {
	display: block;
	width: 100%;
	height: auto;
}

/* Podpis pod ilustracją. */
.gbt-article figcaption,
.gbt-article .wp-element-caption {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
	border-left: 2px solid var(--wp--preset--color--sand-line);
	padding-left: 12px;
}

/* Obraz szerszy niż kolumna tekstu — przełamuje rytm strony. */
.gbt-article .alignwide {
	max-inline-size: none;
	width: 100%;
}

/* Obraz oblewany tekstem. */
.gbt-article .alignleft {
	float: left;
	margin: 6px 28px 20px 0;
	max-width: 42%;
}

.gbt-article .alignright {
	float: right;
	margin: 6px 0 20px 28px;
	max-width: 42%;
}

.gbt-article .alignleft img,
.gbt-article .alignright img {
	width: 100%;
}

/* Galeria. */
.gbt-article .wp-block-gallery {
	max-inline-size: none;
	margin: 36px 0;
}

.gbt-article .wp-block-gallery figcaption {
	border: 0;
	padding-left: 0;
}

/* Obraz z tekstem obok. */
.gbt-article .wp-block-media-text {
	max-inline-size: none;
	margin: 40px 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
}

.gbt-article .wp-block-media-text__content {
	padding: 28px 32px;
}

.gbt-article .wp-block-media-text__content > :where(p, h3) {
	max-inline-size: none;
}

/* Okładka z tekstem na obrazie. */
.gbt-article .wp-block-cover {
	max-inline-size: none;
	margin: 40px 0;
}

.gbt-article .wp-block-cover :where(p, h2, h3) {
	max-inline-size: 52ch;
}

.gbt-article .wp-block-cover h2::before {
	display: none;
}

/* ─── Wyróżnienia w tekście ────────────────────────────────────────── */

.gbt-article mark,
.gbt-article .has-inline-color {
	background: transparent;
}

/* Podświetlenie fragmentu — piaskowe tło zamiast jaskrawego żółtego. */
.gbt-article mark {
	background: var(--wp--preset--color--fresh-air-2);
	color: var(--gbt-tekst);
	padding: 1px 5px;
	border-radius: 2px;
}

.gbt-article code {
	background: var(--wp--preset--color--sand-2);
	border: 1px solid var(--wp--preset--color--sand-line);
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gbt-article pre {
	max-width: 100%;
	background: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--fresh-air);
	padding: 22px 24px;
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.6;
	max-inline-size: none;
}

.gbt-article pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.gbt-article kbd {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	border-bottom-width: 2px;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gbt-article :where(abbr, .gbt-abbr) {
	text-decoration: underline dotted var(--wp--preset--color--steel-blue);
	text-underline-offset: 3px;
	cursor: help;
}

/* Odnośnik w tekście — podkreślenie, nie tylko kolor. */
.gbt-article p a,
.gbt-article li a {
	text-decoration: underline;
	text-decoration-color: rgba(194, 74, 42, 0.4);
	text-underline-offset: 3px;
}

.gbt-article p a:hover,
.gbt-article li a:hover {
	text-decoration-color: currentColor;
}

/* ─── Tabela w treści ──────────────────────────────────────────────── */

.gbt-article .wp-block-table {
	overflow-x: auto;
}

.gbt-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.gbt-article .wp-block-table :where(th, td) {
	padding: 11px 14px;
	border-bottom: 1px solid var(--wp--preset--color--sand-line);
	text-align: left;
}

.gbt-article .wp-block-table th {
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--deep-baltic);
}

.gbt-article .wp-block-table tbody tr:hover {
	background: var(--wp--preset--color--sand-2);
}

.gbt-article .wp-block-table figcaption {
	border: 0;
	padding-left: 0;
}

/* ─── Pozostałe bloki ──────────────────────────────────────────────── */

.gbt-article hr,
.gbt-article .wp-block-separator {
	max-inline-size: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--sand-line);
	margin: 44px 0;
}

.gbt-article .wp-block-columns {
	max-inline-size: none;
	margin: 36px 0;
	gap: 32px;
}

.gbt-article .wp-block-columns :where(p, h3, h4) {
	max-inline-size: none;
}

/* Ramka informacyjna — wyróżniony akapit z treści pomocniczej. */
.gbt-article .gbt-note {
	background: var(--wp--preset--color--fresh-air-2);
	border-left: 3px solid var(--wp--preset--color--steel-blue);
	padding: 20px 24px;
	margin: 32px 0;
	font-size: 15px !important;
	line-height: 1.6;
	max-inline-size: none;
}

.gbt-article .wp-block-embed {
	max-inline-size: none;
	margin: 36px 0;
}

.gbt-article .wp-block-buttons {
	max-inline-size: none;
	margin: 32px 0;
}

/* Definicje — lista opisowa. */
.gbt-article dl dt {
	font-weight: 700;
	color: var(--gbt-tekst);
	margin-top: 16px;
}

.gbt-article dl dd {
	margin: 4px 0 0;
	padding-left: 16px;
	border-left: 2px solid var(--wp--preset--color--sand-line);
	color: var(--wp--preset--color--slate);
}

/* ─── Karta organizacji ────────────────────────────────────────────── */

.gbt-org-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gbt-org-meta li {
	display: flex;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.6;
	padding: 9px 0;
	border-bottom: 1px solid var(--wp--preset--color--sand-line);
}

.gbt-org-meta li:last-child {
	border-bottom: 0;
}

.gbt-org-meta dt,
.gbt-org-meta .etykieta {
	flex: 0 0 104px;
	font-weight: 700;
	color: var(--wp--preset--color--slate);
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 1px;
}

/* ─── Zwijanie sidebara ────────────────────────────────────────────── */

@media (max-width: 900px) {
	.gbt-with-sidebar {
		/* `minmax(0, 1fr)`, nie `1fr` — inaczej szeroki blok (kod, tabela)
		   rozpycha kolumnę ponad szerokość ekranu i strona scrolluje w bok. */
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.gbt-sidebar {
		position: static;
	}
}

/* ─── Menu w motywie klasycznym ────────────────────────────────────── */

/*
 * `wp_nav_menu()` wypisuje zwykłą listę <ul>, a nie markup bloku nawigacji —
 * układ poziomy trzeba nadać samemu, inaczej pozycje układają się w pionie
 * i nagłówek rośnie z 76 do blisko 300 px.
 */
.gbt-nav__list,
.gbt-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbt-nav__list li {
	margin: 0;
}

.gbt-nav a {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gbt-tekst);
	text-decoration: none;
}

.gbt-nav a:hover {
	color: var(--wp--preset--color--rust-red);
}

/* Rozwijane podmenu. */
.gbt-nav .sub-menu {
	position: absolute;
	z-index: 20;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 200px;
	padding: 8px 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand-line);
	box-shadow: 0 10px 26px rgba(11, 31, 42, 0.12);
}

.gbt-nav li:hover > .sub-menu,
.gbt-nav li:focus-within > .sub-menu {
	display: flex;
}

.gbt-nav .sub-menu li a {
	display: block;
	padding: 8px 16px;
}

.gbt-nav li {
	position: relative;
}

/* Menu w stopce — poziomo, oddzielone kropkami. */
.gbt-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbt-footer__menu li + li::before {
	content: "· ";
	margin-right: 10px;
	color: var(--wp--preset--color--slate);
}

.gbt-footer__menu li {
	display: flex;
	align-items: center;
}

/* ─── Poprawki po przejściu na motyw klasyczny ─────────────────────── */

/*
 * Sekcje pełnej szerokości nie mają już kontenera bloku — nadajemy go tu.
 * Każdy element wymieniony niżej wyznacza tę samą linię pionową: 1240 px,
 * wyśrodkowaną. Po przebudowie stopki na trzy kolumny klasa `gbt-footer__bar`
 * zniknęła z szablonu, a jej następcy nie zostali tu dopisani — stopka
 * rozlewała się wtedy na 1520 px przy oknie 1600 px.
 */
.gbt-header__bar,
.gbt-footer__kolumny,
.gbt-footer__dol,
.gbt-pagehead > *,
.gbt-section > *,
.gbt-hero > * {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.gbt-header,
.gbt-footer,
.gbt-pagehead,
.gbt-section,
.gbt-hero {
	padding-left: clamp(20px, 5vw, 40px);
	padding-right: clamp(20px, 5vw, 40px);
}

.gbt-pagehead {
	padding-top: 56px;
	padding-bottom: 56px;
}

.gbt-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.gbt-footer__dol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

/*
 * Pasek nagłówka zostaje JEDNYM rzędem. Przy `wrap` wezwanie „Dołącz"
 * spadało do drugiego rzędu, gdy suma szerokości przekraczała kontener
 * 1240 px — a `min-height: 76px` sprawiał, że pasek wtedy puchł.
 * Odstęp menu maleje przy ciasnocie, zamiast łamać układ.
 */
.gbt-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.gbt-header__bar > * {
	flex-shrink: 0;
}

.gbt-nav {
	min-width: 0;
}

.gbt-nav__list {
	gap: clamp(10px, 1.3vw, 20px);
}

.gbt-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Obraz tła w bloku okładki — w motywie klasycznym trzeba dołożyć
   pozycjonowanie, którego nie wnosi arkusz bloków. */
.wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 40px;
}

.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	margin: 0;
}

.wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Galeria — siatka niezależna od arkusza bloków. */
.wp-block-gallery.has-nested-images {
	display: grid;
	gap: 12px;
}

.wp-block-gallery.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.wp-block-gallery.has-nested-images figure {
	margin: 0;
}

/*
 * Kadr galerii trzyma FIGURE (element siatki), a obraz wypełnia go w całości.
 * Ustawianie wysokości na samym <img> nie działa: arkusz bloków WordPressa
 * daje figurze `display:flex` i to ona wyznacza wysokość rzędu.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image {
	height: 200px;
	margin: 0;
	overflow: hidden;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img,
.gbt-article .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

.wp-block-gallery .blocks-gallery-caption {
	grid-column: 1 / -1;
}

/* Multimedia i tekst — siatka dwukolumnowa. */
.wp-block-media-text {
	display: grid;
	align-items: center;
}

.wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Kolumny. */
.wp-block-columns {
	display: flex;
	gap: 32px;
}

.wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Przyciski. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	padding: 14px 20px;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}

/* Stronicowanie list. */
.gbt-pagination {
	margin-top: var(--wp--preset--spacing--40);
}

.gbt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
}

/* Tło z `--gbt-tlo-karta`, nie `white`: token `white` NIE jest odwracany
   w trybie ciemnym (służy też za kolor napisów na ciemnych sekcjach), więc
   numery stron zostawały białymi kaflami, a odnośnik w kolorze akcji dawał
   na nich 2,75:1. */
.gbt-pagination .page-numbers {
	padding: 8px 13px;
	border: 1px solid var(--wp--preset--color--sand-line);
	background: var(--gbt-tlo-karta);
	color: var(--gbt-tekst);
	text-decoration: none;
}

.gbt-pagination .page-numbers.current {
	background: var(--wp--preset--color--rust-red);
	border-color: var(--wp--preset--color--rust-red);
	color: var(--wp--preset--color--white);
}

/* Nawigacja między wpisami. */
.gbt-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: var(--wp--preset--spacing--30);
	font-size: 13px;
	font-weight: 700;
}

/* Formularz wyszukiwania w motywie klasycznym. */
.gbt-widget .search-form,
.gbt-article .search-form {
	display: flex;
	gap: 0;
}

.gbt-widget .search-form label,
.gbt-article .search-form label {
	flex: 1;
	min-width: 0;
}

/* Pole tekstowe bez jawnego tła bierze biel od przeglądarki — w trybie
   ciemnym świeciło białym prostokątem w ciemnym kaflu. Tło i kolor pisma
   z tokenów, żeby szło za trybem. */
.gbt-widget .search-field,
.gbt-article .search-field {
	width: 100%;
	border: 1px solid var(--wp--preset--color--sand-line);
	background: var(--gbt-tlo-karta);
	color: var(--gbt-tekst);
	padding: 9px 12px;
	font-size: 12.5px;
	font-family: inherit;
}

/* Podpowiedź w polu musi zostać czytelna w obu trybach. */
.gbt-widget .search-field::placeholder,
.gbt-article .search-field::placeholder {
	color: var(--gbt-tekst-slabszy);
	opacity: 1;
}

.gbt-widget .search-submit,
.gbt-article .search-submit {
	background: var(--wp--preset--color--rust-red);
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.gbt-widget .search-submit:hover,
.gbt-article .search-submit:hover {
	background: var(--wp--preset--color--deep-baltic);
}

/* Strona zbudowana w Elementorze — motyw nie narzuca ramki artykułu. */
.gbt-elementor .gbt-article {
	background: transparent;
	border: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.wp-block-gallery.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-columns,
	.wp-block-media-text {
		display: block;
	}

	.wp-block-column + .wp-block-column {
		margin-top: 24px;
	}
}

@media (max-width: 600px) {
	.wp-block-gallery.columns-3 {
		grid-template-columns: 1fr;
	}

	.gbt-article {
		padding: 28px 22px;
	}

	.gbt-article > .alignwide,
	.gbt-article > .wp-block-pullquote,
	.gbt-article > .wp-block-cover,
	.gbt-article > .wp-block-gallery,
	.gbt-article > .wp-block-media-text,
	.gbt-article > pre {
		margin-left: -22px;
		margin-right: -22px;
		width: calc(100% + 44px);
	}

	.gbt-article .alignleft,
	.gbt-article .alignright {
		float: none;
		max-width: 100%;
		margin: 24px 0;
	}
}

/* ─── Widgety Elementora ───────────────────────────────────────────── */

/*
 * Treść budowana w Elementorze omija selektory `.gbt-article h2` itd.,
 * bo widgety mają własny markup. Skala redakcyjna musi więc obowiązywać
 * także tutaj — inaczej strona z Elementora wygląda inaczej niż z motywu.
 */

.gbt-elementor .gbt-article {
	background: transparent;
	border: 0;
	padding: 0;
}

/* Nagłówki widgetu „Heading”. */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--wp--preset--font-family--sora);
	color: var(--gbt-tekst);
	font-weight: 700;
}

.elementor-widget-heading h2.elementor-heading-title {
	font-size: 28px;
	line-height: 1.2;
	margin-bottom: 6px;
}

/* Kreska nad nagłówkiem — ten sam znak co w treści motywu. */
.elementor-widget-heading h2.elementor-heading-title::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--wp--preset--color--rust-red);
	margin-bottom: 18px;
}

.elementor-widget-heading h3.elementor-heading-title {
	font-size: 21px;
	line-height: 1.3;
}

.elementor-widget-heading h4.elementor-heading-title {
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	/* Rola, nie próbnik — patrz komentarz przy `.gbt-article h4`. */
	color: var(--gbt-akcja);
}

/* Widget „Text editor”. */
.elementor-widget-text-editor {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--slate-2);
}

.elementor-widget-text-editor :where(ul, ol) {
	padding-left: 22px;
	margin: 12px 0;
}

.elementor-widget-text-editor li {
	margin-bottom: 7px;
}

.elementor-widget-text-editor li::marker {
	color: var(--wp--preset--color--rust-red);
}

.elementor-widget-text-editor a {
	color: var(--wp--preset--color--rust-red);
	text-decoration: underline;
	text-decoration-color: rgba(194, 74, 42, 0.4);
	text-underline-offset: 3px;
}

.elementor-widget-text-editor a:hover {
	text-decoration-color: currentColor;
}

.elementor-widget-text-editor mark {
	background: var(--wp--preset--color--fresh-air-2);
	color: var(--gbt-tekst);
	padding: 1px 5px;
	border-radius: 2px;
}

.elementor-widget-text-editor code {
	background: var(--wp--preset--color--sand-2);
	border: 1px solid var(--wp--preset--color--sand-line);
	border-radius: 3px;
	padding: 2px 6px;
	font-size: 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.elementor-widget-text-editor abbr {
	text-decoration: underline dotted var(--wp--preset--color--steel-blue);
	text-underline-offset: 3px;
	cursor: help;
}

/* Podpis pod obrazem. */
.elementor-widget-image figcaption.widget-image-caption {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
	border-left: 2px solid var(--wp--preset--color--sand-line);
	padding-left: 12px;
	text-align: left;
}

/* Cytat. */
.elementor-widget-blockquote blockquote {
	border-left: 3px solid var(--wp--preset--color--rust-red);
	border-right: 0;
	padding: 4px 0 4px 24px;
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--gbt-tekst);
	background: transparent;
}

.elementor-widget-blockquote .elementor-blockquote__author {
	font-size: 12.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}

/* Galeria — ten sam kadr co w treści motywu. */
.elementor-widget-image-gallery .gallery-item img {
	height: 200px;
	object-fit: cover;
	width: 100%;
	border: 0 !important;
}

/* Przyciski — kanon marki, nie domyślny błękit Elementora. */
.elementor-widget-button .elementor-button {
	background-color: var(--wp--preset--color--rust-red);
	color: var(--wp--preset--color--white);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 13px;
	font-weight: 700;
	padding: 14px 20px;
}

.elementor-widget-button .elementor-button:hover {
	background-color: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);
}

/* Separator. */
.elementor-widget-divider .elementor-divider-separator {
	border-top-color: var(--wp--preset--color--sand-line);
}

/* Tabela wstawiona widgetem HTML. */
.elementor-widget-html table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.elementor-widget-html :where(th, td) {
	padding: 11px 14px;
	border-bottom: 1px solid var(--wp--preset--color--sand-line);
	text-align: left;
}

.elementor-widget-html th {
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	border-bottom: 2px solid var(--wp--preset--color--deep-baltic);
}

.elementor-widget-html tbody tr:hover {
	background: var(--wp--preset--color--sand-2);
}

.elementor-widget-html .wp-block-table {
	overflow-x: auto;
}

/* ─── Formularz kontaktowy ─────────────────────────────────────────── */

/*
 * Wtyczka wnosi własny wygląd pól — neutralny, obcy wobec projektu.
 * Poniżej sprowadzamy go do tej samej typografii, kolorów i kantów,
 * co reszta serwisu: kwadratowe pola, obrys Sand Line, akcent Rust Red.
 */

.frm-fluent-form {
	--gbt-pole-obrys: #e8dfd5;
	font-family: var(--wp--preset--font-family--sora, inherit);
}

.frm-fluent-form .ff-el-group {
	margin-bottom: 20px;
}

.frm-fluent-form .ff-el-input--label label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gbt-tekst);
	margin-bottom: 6px;
}

/* Gwiazdka pola obowiązkowego — czytelna, ale nie krzycząca. */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--rust-red);
	margin-left: 4px;
}

.frm-fluent-form .ff-el-form-control {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gbt-tekst);
	background: #fff;
	border: 1px solid var(--gbt-pole-obrys);
	border-radius: 2px;
	padding: 12px 14px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--slate);
	opacity: 1;
}

.frm-fluent-form .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--steel-blue);
}

.frm-fluent-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--rust-red);
	box-shadow: 0 0 0 3px rgba(194, 74, 42, 0.16);
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 150px;
	resize: vertical;
}

/* Imię i nazwisko stoją obok siebie, na wąskim ekranie jedno pod drugim. */
.frm-fluent-form .ff-name-field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Zgoda: pole wyboru przy tekście, wyrównane do pierwszego wiersza. */
.frm-fluent-form .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.frm-fluent-form .ff-el-form-check-input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--rust-red);
	flex: none;
}

.frm-fluent-form .ff-el-form-check label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate-2);
}

.frm-fluent-form .ff-el-help-message {
	font-size: 13px;
	color: var(--wp--preset--color--slate);
	margin-top: 4px;
}

/* Komunikat błędu przy polu — czerwień marki, nie domyślna wtyczki. */
.frm-fluent-form .error.text-danger,
.frm-fluent-form .ff-el-is-error .error {
	font-size: 13px;
	color: var(--wp--preset--color--rust-red);
	margin-top: 5px;
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--rust-red);
}

.frm-fluent-form .ff-btn-submit {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #fff;
	background: var(--wp--preset--color--rust-red);
	border: 1px solid var(--wp--preset--color--rust-red);
	border-radius: 2px;
	padding: 14px 26px;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.frm-fluent-form .ff-btn-submit:hover {
	background: var(--wp--preset--color--deep-baltic);
	border-color: var(--wp--preset--color--deep-baltic);
}

.frm-fluent-form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--deep-baltic);
	outline-offset: 3px;
}

/* Podziękowanie po wysłaniu — jak ramka informacyjna w treści. */
.ff-message-success {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gbt-tekst);
	background: var(--wp--preset--color--fresh-air-2, #eef4f8);
	border-left: 3px solid var(--wp--preset--color--steel-blue);
	padding: 18px 20px;
}

@media (max-width: 600px) {
	.frm-fluent-form .ff-name-field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ─── Oprawa graficzna stron treściowych ───────────────────────────── */

/*
 * Podstrony miały dwa płaskie kolory i zero gradientów, podczas gdy strona
 * główna ma pięć teł i pełną oprawę hero. Poniżej wariant D: pas tytułowy
 * dostaje tę samą oprawę co hero, treść oddycha na tle piaskowym (bez karty),
 * a pasek boczny zyskuje trzy różne kafle.
 *
 * Zakres celowo zawężony do `.page` — wpisy, archiwa i wyniki wyszukiwania
 * zostają jak były. Strona główna nie ma pasa tytułowego, więc jej to nie
 * dotyczy.
 *
 * Tabel w treści ten wariant NIE zmienia — mają własny, wcześniejszy styl.
 */

/* Pas tytułowy wygląda TAK SAMO wszędzie, gdzie w ogóle występuje.
   Wcześniej gradient wisiał na klasach `body` — `.page` i `.blog`. Wydarzenia
   to archiwum typu treści (`post-type-archive-gbt_event`), wyszukiwarka to
   `.search`, a 404 to `.error404` — żadna z nich nie pasowała, więc trzy
   ekrany dostawały płaskie tło i pas niższy o 4 px. Reguła stoi teraz na
   samym `.gbt-pagehead`: nowy typ ekranu z niej nie wypadnie. */
.gbt-pagehead {
	position: relative;
	overflow: hidden;
	/* Warstwy w JEDNEJ własności; kolor bazowy MUSI iść osobno po skrócie. */
	background-image:
		radial-gradient(circle at 88% 18%, rgba(195, 217, 232, 0.55), transparent 26%),
		radial-gradient(circle at 74% 88%, rgba(253, 97, 36, 0.75), transparent 38%),
		linear-gradient(105deg, #0b1f2a 0%, #2c2530 42%, #8e3a24 78%, #c24a2a 100%);
	background-color: var(--wp--preset--color--deep-baltic);
	padding-top: 76px;
	padding-bottom: 76px;
}

/* Ziarno — ta sama gęstość co w hero, żeby oba pasy były z jednej rodziny. */
.gbt-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 4px 4px;
}

/* Tekst nad ziarnem, nie pod nim. */
.gbt-pagehead > * {
	position: relative;
}

/* Akapit wprowadzający — wyróżniony, jak nota na marginesie. */
.page .gbt-article > p:first-of-type {
	background: var(--wp--preset--color--fresh-air-2, #eaf2f7);
	border-left: 3px solid var(--wp--preset--color--steel-blue);
	padding: 18px 22px;
	font-size: 19px;
	line-height: 1.6;
}

.page .gbt-article h2:not(.wp-block-post-title)::before {
	width: 52px;
	height: 4px;
	background: var(--wp--preset--color--rust-red);
}

.page .gbt-article h2:not(.wp-block-post-title) {
	margin-top: 52px;
}

/* Odstępy sekcji przenoszą się na wewnętrzny układ — treść nie stoi w karcie,
   tylko oddycha na tle, tak jak sekcje strony głównej. */
.page .gbt-section {
	padding-top: 0;
	padding-bottom: 0;
}

.page .gbt-with-sidebar {
	padding-top: 52px;
	padding-bottom: 52px;
}

/* Cytat na ciemnym gradiencie — najmocniejszy akcent w treści. */
.page .gbt-article blockquote {
	background-image: linear-gradient(105deg, #0b1f2a 0%, #8e3a24 100%);
	background-color: var(--wp--preset--color--deep-baltic);
	color: #fff;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--setting-sun);
	padding: 30px 34px;
	margin: 40px 0;
}

.page .gbt-article blockquote :where(p, cite, strong, em) {
	color: #fff;
}

.page .gbt-article figure {
	margin: 36px 0;
}

.page .gbt-article img {
	border: 1px solid var(--wp--preset--color--sand-line);
}

/* Pasek boczny: trzy różne kafle zamiast trzech identycznych.
   Tło z `--gbt-tlo-karta`, nie wpisane `#fff` — token odwraca się w trybie
   ciemnym. Na sztywnej bieli nadtytuł kafla (kolor akcji) dawał 2,75:1.
   Selektor bez klasy `body`: wcześniej ta sama reguła stała w dwóch kopiach
   (`.page` i `.blog`), więc każdy nowy typ ekranu z niej wypadał. */
.gbt-sidebar .gbt-widget {
	background: var(--gbt-tlo-karta);
	border: 1px solid var(--wp--preset--color--sand-line);
}

/*
 * Wygląd kafla zależy od JEGO RODZAJU, nie od pozycji w pasku. Kolejność
 * ustawia redaktor w Wyglądzie → Widgety, więc `:last-child` malowałoby
 * na ciemno przypadkowy kafel.
 */
.gbt-sidebar .gbt-widget--accent {
	background-image: linear-gradient(140deg, #0b1f2a 0%, #3a6f8f 140%);
	background-color: var(--wp--preset--color--deep-baltic);
	border: 0;
}

.gbt-sidebar .gbt-widget--accent :where(p, h2, h3, a, span, strong) {
	color: #fff;
}

/* Kafel wyszukiwarki jest CELOWO inny od pozostałych — to jedna z „trzech
   różnych" powierzchni paska. Tło bierze z roli `--gbt-poboczne`, która
   odwraca się w trybie ciemnym; wcześniej stała tu wprost jasna barwa
   i obrys #cfe0ec, więc w trybie ciemnym kafel świecił obcym błękitem.
   Zakres bez klasy `body`: reguła wisiała na `.page`, przez co na liście
   aktualności i w wynikach wyszukiwania kafel wyglądał inaczej. */
.gbt-sidebar .widget_search {
	background: var(--gbt-poboczne);
	border-color: var(--wp--preset--color--sand-line);
}

/* Strzałka przy odnośniku wychodzącym poza serwis. */
.gbt-zewnetrzny {
	font-size: 0.85em;
	/* Rola, nie kolor — w trybie ciemnym rdza spada do 3,27:1. */
	color: var(--gbt-akcja);
	margin-left: 2px;
}

/* Wstęp nad listą aktualności — redagowany w panelu, więc odstępy z motywu. */
.gbt-wstep {
	padding-top: 44px;
	padding-bottom: 0;
}

.gbt-wstep .elementor-widget:last-child {
	margin-bottom: 0;
}

/* ═══ Fundament: role kolorów, skala, rytm odstępów ═══════════════════ */

/*
 * Paleta ma siedemnaście kolorów i do tej pory nic nie mówiło, kiedy którego
 * użyć — rdza bywała akcentem, stal ozdobą, pomarańcz dodatkiem. Poniżej
 * cztery ROLE. Nowy element bierze rolę, nie próbnik; dzięki temu kolor
 * niesie informację, a nie tylko urodę.
 */

:root {
	/* Działanie użytkownika: przyciski, odnośniki wiodące, stan aktywny. */
	--gbt-akcja: var(--wp--preset--color--rust-red);
	--gbt-akcja-ciemniej: var(--wp--preset--color--rust-deep);

	/* Dane i fakty: liczby, etykiety wskaźników, osie. */
	--gbt-dane: var(--wp--preset--color--steel-blue);

	/* Nowe i pilne: znaczniki, terminy, ostrzeżenia. Używać oszczędnie. */
	--gbt-uwaga: var(--wp--preset--color--setting-sun);

	/* Tło informacji pobocznej: noty, ramki, kafle pomocnicze. */
	--gbt-poboczne: var(--wp--preset--color--fresh-air-2, #eaf2f7);
	--gbt-poboczne-obrys: #cfe0ec;

	/* Powierzchnie i tekst — jedno miejsce, żeby tryb ciemny miał co odwrócić. */
	--gbt-tlo: var(--wp--preset--color--sand-skin);
	--gbt-tlo-karta: #ffffff;
	--gbt-obrys: var(--wp--preset--color--sand-line);
	--gbt-tekst: var(--wp--preset--color--deep-baltic);
	--gbt-tekst-slabszy: var(--wp--preset--color--slate);

	/*
	 * Kontrast skali. Największy skok w serwisie to było 40 px do 17 px —
	 * za mało, żeby cokolwiek krzyczało. Dokładamy dwa stopnie na krańcach;
	 * środek zostaje nietknięty.
	 */
	--gbt-tekst-liczba: clamp(44px, 6vw, 72px);
	--gbt-tekst-mikro: 11px;

	/*
	 * Rytm odstępów. Odstęp jest informacją o hierarchii, nie dekoracją:
	 * inny oddech domyka temat, inny prowadzi dalej, inny wiąże elementy.
	 */
	--gbt-odstep-domkniecie: 96px;
	--gbt-odstep-ciag: 56px;
	--gbt-odstep-blisko: 24px;
}

@media (max-width: 780px) {
	:root {
		--gbt-odstep-domkniecie: 64px;
		--gbt-odstep-ciag: 40px;
		--gbt-odstep-blisko: 20px;
	}
}

/* ── Rola: działanie ─────────────────────────────────────────────────── */

.gbt-akcja,
.wp-block-button__link.has-rust-red-background-color,
.frm-fluent-form .ff-btn-submit {
	background-color: var(--gbt-akcja);
	border-color: var(--gbt-akcja);
}

.gbt-article a:not(.wp-element-button):not(.elementor-button),
.gbt-wstep a:not(.elementor-button) {
	color: var(--gbt-akcja);
	text-underline-offset: 3px;
}

/* ── Rola: dane ──────────────────────────────────────────────────────── */

.gbt-liczba {
	display: block;
	font-size: var(--gbt-tekst-liczba);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--gbt-dane);
}

.gbt-liczba__podpis {
	display: block;
	margin-top: 8px;
	font-size: var(--gbt-tekst-mikro);
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--gbt-tekst-slabszy);
}

/* Sekcje na ciemnym tle: liczby świecą, nie gasną. */
.gbt-section--dark .gbt-liczba,
.gbt-hero .gbt-liczba {
	color: var(--wp--preset--color--fresh-air);
}

.gbt-section--dark .gbt-liczba__podpis,
.gbt-hero .gbt-liczba__podpis {
	color: var(--wp--preset--color--mist);
}

/* ── Rola: uwaga ─────────────────────────────────────────────────────── */

.gbt-znacznik {
	display: inline-block;
	padding: 3px 9px;
	font-size: var(--gbt-tekst-mikro);
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	background: var(--gbt-uwaga);
	border-radius: 2px;
}

/* ── Rola: informacja poboczna ───────────────────────────────────────── */

.gbt-note,
.page .gbt-article > p:first-of-type {
	background: var(--gbt-poboczne);
	border-left: 3px solid var(--gbt-dane);
}

/* ── Rytm odstępów w treści ──────────────────────────────────────────── */

/* Nagłówek drugiego stopnia domyka poprzedni temat i otwiera nowy. */
.gbt-article h2:not(.wp-block-post-title) {
	margin-top: var(--gbt-odstep-domkniecie);
}

.gbt-article h3:not(.wp-block-post-title) {
	margin-top: var(--gbt-odstep-ciag);
}

/* Podpis, lista i cytat należą do tego, co nad nimi — stoją blisko. */
.gbt-article figcaption,
.gbt-article :where(ul, ol) {
	margin-top: var(--gbt-odstep-blisko);
}

/* Pierwszy nagłówek nie potrzebuje domknięcia — nad nim nic nie ma. */
.gbt-article > h2:first-child,
.gbt-article > h3:first-child {
	margin-top: 0;
}

/* ── Element dominujący (pozycja 16) ─────────────────────────────────── */

/*
 * Na każdym ekranie ma być JEDEN element, na którym oko siada. Bez tego
 * wszystko waży tyle samo i wzrok nie wie, gdzie zacząć.
 */
.gbt-dominanta {
	font-size: var(--gbt-tekst-liczba);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 18ch;
}

.gbt-dominanta + * {
	margin-top: var(--gbt-odstep-blisko);
}

/* Sąsiedztwo dominanty schodzi o stopień, żeby jej nie przekrzykiwało. */
.gbt-ma-dominante :where(h2, h3):not(.gbt-dominanta) {
	font-size: 21px;
}

/* ── Ruch (pozycja 20) ───────────────────────────────────────────────── */

/*
 * Skokowa zmiana koloru sprawia wrażenie strony złożonej, nie zbudowanej.
 * 160 ms wystarczy, żeby ruch był zauważalny, a nie spowalniał.
 */
.gbt-tile,
.gbt-feature,
.gbt-post-card,
.gbt-event,
.gbt-widget,
.wp-block-button__link,
.gbt-spec__card {
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.gbt-post-card:hover,
.gbt-event:hover,
.gbt-feature:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 31, 42, 0.1);
}

.gbt-post-card:focus-within,
.gbt-event:focus-within {
	transform: none;
}

/* Strzałka odnośnika przesuwa się w stronę, w którą prowadzi. */
.gbt-tile__link a .gbt-zewnetrzny,
.gbt-tile__link a::after {
	transition: transform 160ms ease;
}

.gbt-tile__link a:hover .gbt-zewnetrzny {
	transform: translate(2px, -2px);
}

/* Kto wyłączył animacje w systemie, ma je wyłączone i tutaj. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.gbt-post-card:hover,
	.gbt-event:hover,
	.gbt-feature:hover {
		transform: none;
	}
}

/* ═══ Menu mobilne ═══════════════════════════════════════════════════ */

/*
 * Na telefonie osiem pozycji rozlewało się na trzy rzędy, a nagłówek zajmował
 * 261 px — ponad ćwierć ekranu. Poniżej 900 px menu chowa się w panelu
 * wysuwanym z prawej.
 */

.gbt-nav__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--gbt-obrys);
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.gbt-nav__toggle:hover {
	border-color: var(--gbt-akcja);
}

.gbt-nav__toggle:focus-visible {
	outline: 2px solid var(--gbt-akcja);
	outline-offset: 2px;
}

/* Trzy kreski z jednego elementu: środkowa to tło, skrajne to cienie. */
.gbt-nav__toggle-kreski,
.gbt-nav__toggle-kreski::before,
.gbt-nav__toggle-kreski::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--gbt-tekst);
	transform: translateX(-50%);
	transition: transform 160ms ease, opacity 160ms ease;
}

.gbt-nav__toggle-kreski {
	top: 50%;
	margin-top: -1px;
}

.gbt-nav__toggle-kreski::before,
.gbt-nav__toggle-kreski::after {
	content: "";
	left: 0;
	transform: none;
}

.gbt-nav__toggle-kreski::before {
	top: -6px;
}

.gbt-nav__toggle-kreski::after {
	top: 6px;
}

/* Otwarty panel: kreski składają się w krzyżyk. */
.gbt-nav__toggle[aria-expanded="true"] .gbt-nav__toggle-kreski {
	background: transparent;
}

.gbt-nav__toggle[aria-expanded="true"] .gbt-nav__toggle-kreski::before {
	transform: translateY(6px) rotate(45deg);
}

.gbt-nav__toggle[aria-expanded="true"] .gbt-nav__toggle-kreski::after {
	transform: translateY(-6px) rotate(-45deg);
}

.gbt-nav__tlo {
	display: none;
}

/* Wezwanie w nagłówku ma własny rozmiar, nie pożyczony.
   Arkusz bloków WordPressa wnosi `.wp-block-button.has-custom-font-size
   .wp-block-button__link { font-size: inherit }`, ale ładuje się TYLKO na
   podstronach — strona główna jest dokumentem Elementora i go nie zaciąga.
   Skutkiem tego ten sam przycisk miał 14 px na stronie głównej i 12,5 px
   na podstronach, więc zmieniał szerokość (205 → 187 px) i pozycję. */
.gbt-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--nav);
}

/*
 * Nagłówek ma WŁASNY próg 1200 px, wyższy niż 900 px reszty motywu.
 * Pomiar: 7 pozycji menu + „PL / EN" + logo + tryb + wezwanie to ~1278 px
 * przy kontenerze 1240 px. Między 900 a 1200 px pasek był przepełniony,
 * a hamburger jeszcze nie wchodził — stąd rozjazd. Próg siatek i sekcji
 * zostaje na 900 px, bo dotyczy układu treści, nie paska.
 */
@media (max-width: 1200px) {
	.gbt-nav__toggle {
		display: block;
		order: 3;
	}

	.gbt-header__bar {
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* Wezwanie „Dołącz" wchodzi do panelu — w pasku nie ma na nie miejsca. */
	.gbt-header__cta {
		display: none;
	}

	.gbt-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 1000;
		/* Bez `border-box` padding dolicza się do szerokości i panel wychodzi
		   na 391 px zamiast 335 — motyw nie ustawia tego globalnie. */
		box-sizing: border-box;
		width: min(86vw, 340px);
		padding: 84px 28px 32px;
		overflow-y: auto;
		background: var(--wp--preset--color--deep-baltic);
		transform: translateX(100%);
		transition: transform 220ms ease;
	}

	.gbt-menu-otwarte .gbt-nav {
		transform: translateX(0);
	}

	.gbt-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gbt-nav__list li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.gbt-nav__list a {
		display: block;
		padding: 15px 0;
		font-size: 17px;
		color: #fff;
	}

	.gbt-nav__list a:hover,
	.gbt-nav__list .current-menu-item > a {
		color: var(--wp--preset--color--fresh-air);
	}

	.gbt-nav__tlo {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(11, 31, 42, 0.55);
	}

	.gbt-nav__tlo[hidden] {
		display: none;
	}

	/* Strona pod panelem nie przewija się razem z nim. */
	.gbt-menu-otwarte {
		overflow: hidden;
	}

	/* Przycisk otwierający zostaje nad panelem, żeby dało się go zamknąć. */
	.gbt-menu-otwarte .gbt-nav__toggle {
		position: fixed;
		top: 16px;
		right: clamp(20px, 5vw, 40px);
		z-index: 1001;
		border-color: rgba(255, 255, 255, 0.35);
	}

	.gbt-menu-otwarte .gbt-nav__toggle-kreski::before,
	.gbt-menu-otwarte .gbt-nav__toggle-kreski::after {
		background: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gbt-nav {
		transition: none;
	}
}

/* ═══ Okruszki ═══════════════════════════════════════════════════════ */

.gbt-okruszki {
	margin-bottom: 18px;
}

.gbt-okruszki ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--gbt-tekst-mikro);
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.gbt-okruszki li + li::before {
	content: "/";
	margin-right: 10px;
	opacity: 0.45;
}

.gbt-okruszki a {
	color: var(--wp--preset--color--fresh-air);
	text-decoration: none;
}

.gbt-okruszki a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ostatni okruszek to miejsce, w którym się stoi — nie jest odnośnikiem. */
.gbt-okruszki [aria-current="page"] {
	color: rgba(255, 255, 255, 0.62);
}

/* ═══ Stopka ═════════════════════════════════════════════════════════ */

.gbt-footer__kolumny {
	display: grid;
	grid-template-columns:
		minmax(0, 1.3fr)
		minmax(150px, 0.85fr)
		minmax(190px, 1.05fr)
		minmax(0, 1fr);
	gap: 48px;
	padding-top: 64px;
	padding-bottom: 64px;
	align-items: start;
}

/* Logo */
.gbt-footer .gbt-logo img,
.gbt-footer .gbt-logo .logo {
	height: 88px;
	width: auto;
}

/* Opis marki */
.gbt-footer__kolumna--marka p {
	margin-top: 22px;
	max-width: 34ch;
	font-size: 14px !important;
	line-height: 1.65;
}

/* Nagłówki kolumn */
.gbt-footer__tytul {
	margin: 0 0 18px;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--setting-sun);
}

/* Tekst */
.gbt-footer__kolumna > p.has-footer-font-size {
	font-size: 14px !important;
	line-height: 1.6;
}

/* Menu */
.gbt-footer__nawigacja {
	font-size: 14px !important;
	line-height: 1.45;
}

.gbt-footer__nawigacja .gbt-footer__menu {
	flex-direction: column;
	gap: 11px;
}

.gbt-footer__nawigacja .gbt-footer__menu li + li::before {
	content: none;
}

.gbt-footer__nawigacja .gbt-footer__menu a {
	font-size: 14px !important;
	font-weight: 500;
}

/* Kontakt */
.gbt-footer__akcja {
	margin-top: 18px;
}

.gbt-footer__akcja a {
	color: var(--wp--preset--color--fresh-air);
	font-size: 16px !important;
	font-weight: 700;
}

/* Dolny pasek */
.gbt-footer__dol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	align-items: center;
	padding-top: 22px;
	padding-bottom: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px !important;
}

.gbt-footer__dol p,
.gbt-footer__dol a {
	font-size: 12px !important;
}

.gbt-footer__dol p {
	margin: 0;
	opacity: 0.72;
}

/* Tablet */
@media (max-width: 1000px) {
	.gbt-footer__kolumny {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 42px 56px;
		padding-top: 52px;
		padding-bottom: 52px;
	}
}

/* Telefon */
@media (max-width: 600px) {
	.gbt-footer__kolumny {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.gbt-footer .gbt-logo img,
	.gbt-footer .gbt-logo .logo {
		height: 44px;
	}
}

/* ═══ Tryb ciemny ════════════════════════════════════════════════════ */

/*
 * Klasy kolorów WordPressa odwołują się do zmiennych, więc wystarczy podmienić
 * TOKENY — reguły zostają nietknięte. Deep Baltic celowo NIE jest odwracany:
 * to tło ciemnych sekcji, które w trybie ciemnym mają zostać ciemne.
 * Odwracamy powierzchnie jasne: piasek, biel kart, linie i tekst.
 */

:root[data-motyw="ciemny"] {
	--wp--preset--color--sand-skin: #0e1c24;
	--wp--preset--color--sand-2: #16262f;
	--wp--preset--color--sand-line: #27393f;
	/* `white` NIE jest odwracany: służy też jako kolor tekstu na ciemnych
	   sekcjach (`has-white-color`). Odwrócenie go gasi nagłówki i przyciski.
	   Karty biorą ciemne tło z `--gbt-tlo-karta`. */
	--wp--preset--color--slate: #93a6b0;
	--wp--preset--color--slate-2: #b7c7d0;
	--wp--preset--color--mist: #c3d2da;
	--wp--preset--color--fresh-air-2: #16303c;

	--gbt-tlo: #0e1c24;
	--gbt-tlo-karta: #14242c;
	--gbt-obrys: #27393f;
	--gbt-tekst: #e6eef3;
	--gbt-tekst-slabszy: #93a6b0;
	--gbt-poboczne: #16303c;
	--gbt-poboczne-obrys: #24404d;
}

/*
 * Tekst strony bierze kolor z tokenu Deep Baltic, którego nie odwracamy —
 * dlatego jego wartość dla trybu ciemnego ustawiamy tu wprost.
 */
:root[data-motyw="ciemny"] body {
	color: var(--gbt-tekst);
}

:root[data-motyw="ciemny"] .has-deep-baltic-color:not(.wp-block-button__link) {
	color: var(--gbt-tekst) !important;
}

:root[data-motyw="ciemny"] .gbt-post-card,
:root[data-motyw="ciemny"] .gbt-event,
:root[data-motyw="ciemny"] .gbt-feature,
:root[data-motyw="ciemny"] .gbt-spec__card,
:root[data-motyw="ciemny"] .gbt-widget,
:root[data-motyw="ciemny"] .gbt-article {
	background: var(--gbt-tlo-karta);
	border-color: var(--gbt-obrys);
	color: var(--gbt-tekst);
}

:root[data-motyw="ciemny"] .gbt-post-card h2,
:root[data-motyw="ciemny"] .gbt-event h3,
:root[data-motyw="ciemny"] .gbt-feature h3,
:root[data-motyw="ciemny"] .gbt-spec__card h3,
:root[data-motyw="ciemny"] .gbt-article :where(h1, h2, h3, h4) {
	color: var(--gbt-tekst);
}

/* Obrys pola formularza i tło wejść. */
:root[data-motyw="ciemny"] .frm-fluent-form .ff-el-form-control {
	background: #10202a;
	border-color: var(--gbt-obrys);
	color: var(--gbt-tekst);
}

:root[data-motyw="ciemny"] .frm-fluent-form .ff-el-input--label label {
	color: var(--gbt-tekst);
}

/* Obraz w trybie ciemnym bywa oślepiający — lekko go przygaszamy. */
:root[data-motyw="ciemny"] .gbt-article img {
	filter: brightness(0.92);
}

/* Wybór systemowy działa tylko wtedy, gdy użytkownik nic nie wybrał sam. */
@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="jasny"]) {
		--wp--preset--color--sand-skin: #0e1c24;
		--wp--preset--color--sand-2: #16262f;
		--wp--preset--color--sand-line: #27393f;
		/* `white` NIE jest odwracany: służy też jako kolor tekstu na ciemnych
	   sekcjach (`has-white-color`). Odwrócenie go gasi nagłówki i przyciski.
	   Karty biorą ciemne tło z `--gbt-tlo-karta`. */
		--wp--preset--color--slate: #93a6b0;
		--wp--preset--color--slate-2: #b7c7d0;
		--wp--preset--color--mist: #c3d2da;
		--wp--preset--color--fresh-air-2: #16303c;

		--gbt-tlo: #0e1c24;
		--gbt-tlo-karta: #14242c;
		--gbt-obrys: #27393f;
		--gbt-tekst: #e6eef3;
		--gbt-tekst-slabszy: #93a6b0;
		--gbt-poboczne: #16303c;
		--gbt-poboczne-obrys: #24404d;
	}

	:root:not([data-motyw="jasny"]) body {
		color: var(--gbt-tekst);
	}

	:root:not([data-motyw="jasny"]) .has-deep-baltic-color:not(.wp-block-button__link) {
		color: var(--gbt-tekst) !important;
	}

	:root:not([data-motyw="jasny"]) :where(.gbt-post-card, .gbt-event, .gbt-feature, .gbt-spec__card, .gbt-widget, .gbt-article) {
		background: var(--gbt-tlo-karta);
		border-color: var(--gbt-obrys);
		color: var(--gbt-tekst);
	}
}

/* ── Przełącznik ─────────────────────────────────────────────────────── */

.gbt-motyw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--gbt-obrys);
	border-radius: 2px;
	color: var(--gbt-tekst);
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.gbt-motyw:hover {
	border-color: var(--gbt-akcja);
	color: var(--gbt-akcja);
}

.gbt-motyw:focus-visible {
	outline: 2px solid var(--gbt-akcja);
	outline-offset: 2px;
}

.gbt-motyw svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* Widoczna jest ikona STANU DOCELOWEGO: w jasnym trybie księżyc. */
.gbt-motyw__ksiezyc {
	display: block;
}

.gbt-motyw__slonce {
	display: none;
}

:root[data-motyw="ciemny"] .gbt-motyw__ksiezyc {
	display: none;
}

:root[data-motyw="ciemny"] .gbt-motyw__slonce {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="jasny"]) .gbt-motyw__ksiezyc {
		display: none;
	}

	:root:not([data-motyw="jasny"]) .gbt-motyw__slonce {
		display: block;
	}
}

@media (max-width: 900px) {
	.gbt-motyw {
		order: 2;
	}
}

/* ── Kontrast w trybie ciemnym ───────────────────────────────────────── */

/*
 * Rust Red na ciemnym tle daje 3,27:1 — poniżej progu 4,5:1 dla tekstu.
 * Sam token zostaje nietknięty, bo służy też jako TŁO przycisków, gdzie
 * jego rozjaśnienie zepsułoby biały napis. Podnosimy tylko rolę działania.
 */
:root[data-motyw="ciemny"] {
	--gbt-akcja: #f2794f;
	/* Rola „dane" (Steel Blue #3A6F8F) na ciemnym tle dawała 2,5–3,2:1.
	   #6f9fbc trzyma 4,8–6,1:1 na wszystkich trzech ciemnych powierzchniach
	   (sekcja, karta, tło poboczne) i zostaje rozpoznawalnym Steel Blue.
	   Rola „uwaga" (#FD6124) zmian nie potrzebuje — ma tam 4,54:1. */
	--gbt-dane: #6f9fbc;
}

:root[data-motyw="ciemny"] a:not(.wp-element-button):not(.elementor-button):not(.gbt-logo__link) {
	color: var(--gbt-akcja);
}

:root[data-motyw="ciemny"] .gbt-widget__title,
:root[data-motyw="ciemny"] .gbt-eyebrow.has-rust-red-color {
	color: var(--gbt-akcja);
}

/* Znaczniki kategorii na kartach. */
:root[data-motyw="ciemny"] .gbt-event-date {
	color: var(--gbt-akcja);
}

/* Pigułka znacznika ma własne, jasne tło — w ciemnym trybie musi je oddać,
   inaczej zostaje biała plama na ciemnej karcie. */
:root[data-motyw="ciemny"] .gbt-badge,
:root[data-motyw="ciemny"] .gbt-badge a {
	background: #1e3a46;
	color: var(--gbt-tekst);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="jasny"]) {
		--gbt-akcja: #f2794f;
		--gbt-dane: #6f9fbc;
	}

	:root:not([data-motyw="jasny"]) a:not(.wp-element-button):not(.elementor-button):not(.gbt-logo__link),
	:root:not([data-motyw="jasny"]) .gbt-widget__title,
	:root:not([data-motyw="jasny"]) .gbt-event-date {
		color: var(--gbt-akcja);
	}

	:root:not([data-motyw="jasny"]) .gbt-badge,
	:root:not([data-motyw="jasny"]) .gbt-badge a {
		background: #1e3a46;
		color: var(--gbt-tekst);
	}
}

/* ── Kontrast niezależny od trybu ────────────────────────────────────── */

/*
 * Znaki ⚓ ⌂ ◎ ↗ nad atutami dawały 3,74:1 — są ozdobą, ale przeglądarka
 * czyta je jako tekst. Ciemniejszy odcień stali podnosi je ponad próg.
 */
.gbt-icon {
	color: var(--wp--preset--color--deep-baltic);
	opacity: 0.85;
}

/*
 * `.gbt-icon` ma własne jasne tło (krążek Fresh Air), które w trybie ciemnym
 * zostaje jasne. Znak musi więc pozostać CIEMNY — rozjaśnienie go dawało
 * 1,24:1, czyli gorzej niż przed poprawką.
 */
:root[data-motyw="ciemny"] .gbt-icon {
	color: var(--wp--preset--color--deep-baltic);
	opacity: 1;
}

/* Przycisk szukania: 3,94:1 to za mało dla napisu 13 px. */
.gbt-widget .search-submit,
.frm-fluent-form .ff-btn-submit,
.wp-block-search__button {
	background-color: var(--wp--preset--color--rust-deep, #a63d21);
	border-color: var(--wp--preset--color--rust-deep, #a63d21);
	color: #fff;
}


/* ── Tryb ciemny: poprawki kontrastu w sekcjach ──────────────────────

   UWAGA na kształt selektora. Każda reguła niżej istnieje w dwóch wersjach:

   * `[data-motyw="ciemny"]` — użytkownik WYBRAŁ tryb ciemny przełącznikiem.
     Działa zawsze, bo atrybut jest wtedy ustawiony wprost.
   * `:not([data-motyw="jasny"])` — użytkownik NIC nie wybrał, więc rozstrzyga
     ustawienie systemu. Ten wariant MUSI stać w `@media (prefers-color-scheme: dark)`.

   Wcześniej drugi wariant stał POZA media query. Atrybut `data-motyw` jest
   domyślnie pusty, więc `:not([data-motyw="jasny"])` pasował także w trybie
   JASNYM i wpychał tam — z `!important` — kolory tekstu z trybu ciemnego.
   Skutek: `.has-slate-2-color` malowany #bccbd4 na kremowym tle sekcji dawał
   1,56:1 zamiast wymaganych 4,5:1, na czterech ekranach naraz. */

/* ── Tryb ciemny: sekcja Radaru ──────────────────────────────────────── */

/*
 * Radar stoi na tle Fresh Air 2, odwracanym na ciemne. Napisy pisane
 * kolorami Slate i Slate 2 dawały tam 2,4–3,6:1.
 */
:root[data-motyw="ciemny"] .gbt-radar :where(p, h2, h3, td, th, span, div) {
	color: var(--gbt-tekst);
}

:root[data-motyw="ciemny"] .gbt-radar .gbt-eyebrow,
:root[data-motyw="ciemny"] .gbt-radar__note {
	color: var(--gbt-akcja);
}

:root[data-motyw="ciemny"] .gbt-radar__panel,
:root[data-motyw="ciemny"] .gbt-pill {
	background: #1e3a46;
	color: var(--gbt-tekst);
}



/* Kafelki „Cztery wejścia" i atuty na odwróconym tle. */
:root[data-motyw="ciemny"] .gbt-feature :where(h3, p):not(.gbt-icon) {
	color: var(--gbt-tekst);
}




/* Nadtytuły sekcji: rdza na ciemnym tle daje 3,56:1. */
:root[data-motyw="ciemny"] .gbt-eyebrow {
	color: var(--gbt-akcja);
}



/* Na sekcjach, które są ciemne ZAWSZE, nadtytuł ma własny kolor z projektu. */
:root[data-motyw="ciemny"] .gbt-section--dark .gbt-eyebrow,
:root[data-motyw="ciemny"] .gbt-hero .gbt-eyebrow,
:root[data-motyw="ciemny"] .gbt-pagehead .gbt-eyebrow {
	color: var(--wp--preset--color--fresh-air);
}



/*
 * Klasy kolorów WordPressa niosą `!important`, więc żadna reguła oparta na
 * specyficzności ich nie przebije. W trybie ciemnym nadpisujemy je wprost.
 */
:root[data-motyw="ciemny"] .has-rust-red-color:not(.wp-element-button):not(.elementor-button) {
	color: var(--gbt-akcja) !important;
}

:root[data-motyw="ciemny"] .has-slate-color {
	color: #9db0ba !important;
}

:root[data-motyw="ciemny"] .has-slate-2-color {
	color: #bccbd4 !important;
}



/* Panel „Siła regionu" jest ciemny zawsze — jego napisy zostają białe. */
:root[data-motyw="ciemny"] .gbt-spec__lead :where(p, h2) {
	color: #fff !important;
}



/* Uwaga pod przyciskami Radaru ma kolor wpisany z `!important` — nadpisujemy. */
:root[data-motyw="ciemny"] .gbt-radar__note {
	color: #9db0ba !important;
}



/*
 * Pas One Stop Shop stoi na Rust Red i jest jasny ZAWSZE — jego nadtytuł
 * musi zostać biały, a nie przejąć koloru akcji z trybu ciemnego.
 */
:root[data-motyw="ciemny"] .gbt-oss :where(.gbt-eyebrow, h2, p) {
	color: #fff !important;
}

/* Ten sam zestaw, gdy o trybie decyduje ustawienie systemu. */
@media (prefers-color-scheme: dark) {
	:root:not([data-motyw="jasny"]) .gbt-radar :where(p, h2, h3, td, th, span, div) {
		color: var(--gbt-tekst);
	}

	:root:not([data-motyw="jasny"]) .gbt-radar .gbt-eyebrow,
	:root:not([data-motyw="jasny"]) .gbt-radar__note {
		color: var(--gbt-akcja);
	}

	:root:not([data-motyw="jasny"]) .gbt-radar__panel,
	:root:not([data-motyw="jasny"]) .gbt-pill {
		background: #1e3a46;
		color: var(--gbt-tekst);
	}

	:root:not([data-motyw="jasny"]) .gbt-feature :where(h3, p):not(.gbt-icon) {
		color: var(--gbt-tekst);
	}

	:root:not([data-motyw="jasny"]) .gbt-eyebrow {
		color: var(--gbt-akcja);
	}

	:root:not([data-motyw="jasny"]) .gbt-section--dark .gbt-eyebrow,
	:root:not([data-motyw="jasny"]) .gbt-hero .gbt-eyebrow,
	:root:not([data-motyw="jasny"]) .gbt-pagehead .gbt-eyebrow {
		color: var(--wp--preset--color--fresh-air);
	}

	:root:not([data-motyw="jasny"]) .has-rust-red-color:not(.wp-element-button):not(.elementor-button) {
		color: var(--gbt-akcja) !important;
	}

	:root:not([data-motyw="jasny"]) .has-slate-color {
		color: #9db0ba !important;
	}

	:root:not([data-motyw="jasny"]) .has-slate-2-color {
		color: #bccbd4 !important;
	}

	:root:not([data-motyw="jasny"]) .gbt-spec__lead :where(p, h2) {
		color: #fff !important;
	}

	:root:not([data-motyw="jasny"]) .gbt-radar__note {
		color: #9db0ba !important;
	}

	:root:not([data-motyw="jasny"]) .gbt-oss :where(.gbt-eyebrow, h2, p) {
		color: #fff !important;
	}
}

/* ═══ Grafika karty ══════════════════════════════════════════════════ */

/*
 * Rysowana z danych wpisu, gdy nie ma zdjęcia. Wektor jest wpisany w stronę,
 * więc nie kosztuje żądania ani nie czeka na pobranie.
 */
.gbt-karta-grafika {
	overflow: hidden;
	line-height: 0;
}

.gbt-karta-grafika svg {
	display: block;
	width: 100%;
	height: 168px;
}

.gbt-karta-grafika__link {
	display: block;
	min-width: 0;
}

/* Ten sam gest co przy zdjęciu: karta reaguje na najechanie. */
.gbt-post-card:hover .gbt-karta-grafika svg,
.gbt-event:hover .gbt-karta-grafika svg {
	transform: scale(1.03);
}

.gbt-karta-grafika svg {
	transition: transform 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.gbt-karta-grafika svg {
		transition: none;
	}

	.gbt-post-card:hover .gbt-karta-grafika svg,
	.gbt-event:hover .gbt-karta-grafika svg {
		transform: none;
	}
}

/* ═══ Rytm miesięcy na liście wydarzeń ═══════════════════════════════ */

/*
 * Wydarzenia czyta się kalendarzem, nie listą. Nagłówek miesiąca przykleja się
 * przy przewijaniu, żeby przy dziesiątej karcie wiadomo było, o którym miesiącu
 * mowa.
 */
.gbt-miesiac {
	position: sticky;
	top: 0;
	z-index: 5;
	margin: var(--gbt-odstep-ciag) 0 var(--gbt-odstep-blisko);
	padding: 10px 0;
	font-size: var(--gbt-tekst-mikro);
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--gbt-dane);
	background: var(--gbt-tlo);
	border-bottom: 1px solid var(--gbt-obrys);
}

.gbt-miesiac:first-child {
	margin-top: 0;
}

/* Kreska „dziś" — jedyny punkt odniesienia w czasie na całej liście. */
.gbt-dzis {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--gbt-odstep-blisko) 0;
	font-size: var(--gbt-tekst-mikro);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gbt-akcja);
}

.gbt-dzis::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--gbt-akcja);
}

/* ═══ Pusta lista ════════════════════════════════════════════════════ */

.gbt-pusto {
	padding: var(--gbt-odstep-ciag) 34px;
	text-align: center;
	background: var(--gbt-tlo-karta);
	border: 1px dashed var(--gbt-obrys);
}

.gbt-pusto__znak {
	margin: 0;
	font-size: 40px;
	line-height: 1;
	color: var(--gbt-akcja);
	opacity: 0.5;
}

.gbt-pusto__tytul {
	margin: 18px 0 8px !important;
	font-size: 21px;
	color: var(--gbt-tekst);
}

.gbt-pusto__opis {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--gbt-tekst-slabszy);
}

.gbt-pusto__szukaj {
	margin: 22px auto 0;
	max-width: 360px;
}

.gbt-pusto__drogi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin-top: 26px;
}

/* ═══ Powiązane pod wpisem ═══════════════════════════════════════════ */

.gbt-powiazane {
	margin-top: var(--gbt-odstep-domkniecie);
	padding-top: var(--gbt-odstep-ciag);
	border-top: 1px solid var(--gbt-obrys);
}

.gbt-powiazane__tytul {
	margin: 0 0 var(--gbt-odstep-blisko) !important;
	font-size: 21px;
	color: var(--gbt-tekst);
}

/* Trzy karty w kolumnie tekstu są wąskie — poniżej 900 px schodzą do jednej. */
@media (max-width: 900px) {
	.gbt-powiazane .gbt-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gbt-powiazane__kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: var(--gbt-odstep-ciag);
	padding: 22px 26px;
	background: var(--gbt-poboczne);
	border-left: 3px solid var(--gbt-dane);
}

.gbt-powiazane__kontakt p {
	margin: 0;
}

.gbt-powiazane__pytanie {
	font-weight: 700;
	color: var(--gbt-tekst);
}

/* ═══ Filtry wyników wyszukiwania ════════════════════════════════════ */

.gbt-filtry {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--gbt-odstep-blisko);
}

.gbt-filtry__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--gbt-tekst);
	background: var(--gbt-tlo-karta);
	border: 1px solid var(--gbt-obrys);
	border-radius: 2px;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.gbt-filtry__chip:hover {
	border-color: var(--gbt-akcja);
	color: var(--gbt-akcja);
}

.gbt-filtry__chip--wybrany {
	color: #fff;
	background: var(--wp--preset--color--deep-baltic);
	border-color: var(--wp--preset--color--deep-baltic);
}

.gbt-filtry__chip--wybrany:hover {
	color: #fff;
}

/* Zbiór bez wyników zostaje widoczny, ale przygaszony — filtr ma mówić prawdę. */
.gbt-filtry__chip--pusty {
	opacity: 0.5;
}

.gbt-filtry__ile {
	font-size: var(--gbt-tekst-mikro);
	font-weight: 700;
	opacity: 0.7;
}

.gbt-filtry__chip--wybrany .gbt-filtry__ile {
	opacity: 0.85;
}

/*
 * Przełącznik trybu stoi po PRAWEJ, w grupie narzędzi obok wezwania — między
 * logo a menu rozbijał nawigację na dwie części.
 */
.gbt-motyw {
	margin-left: auto;
}

.gbt-nav {
	margin-right: 0;
}

@media (max-width: 1200px) {
	/* W układzie z hamburgerem kolejność w pasku: logo, tryb, hamburger. */
	.gbt-motyw {
		margin-left: auto;
		order: 2;
	}

	.gbt-nav__toggle {
		order: 3;
		margin-left: 0;
	}
}

/* GBT LinkedIn — pływający odnośnik do profilu firmowego ─────────────
   Kolory z palety motywu: zmiana w `theme.json` przechodzi tu sama.
   Tło w trybie jasnym to Deep Baltic, czyli dokładnie kolor tła trybu
   ciemnego — dlatego niżej przycisk dostaje tam własne barwy.            */

.gbt-linkedin {
	position: fixed;
	right: 0;
	top: 55%;
	transform: translateY(-50%);
	z-index: 900;

	display: flex;
	align-items: center;
	gap: 10px;

	padding: 11px 15px 11px 12px;

	background: var(--wp--preset--color--deep-baltic);
	color: var(--wp--preset--color--white);

	border: 1px solid rgba(255, 255, 255, .18);
	border-right: 0;
	border-radius: 8px 0 0 8px;

	font-family: var(--wp--preset--font-family--sora, "Sora", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;
	box-shadow: 0 8px 24px rgba(11, 31, 42, .18);

	transition: background .2s ease, padding .2s ease;
}

.gbt-linkedin:hover,
.gbt-linkedin:focus-visible {
	background: var(--wp--preset--color--rust-red);
	color: var(--wp--preset--color--white);
	padding-right: 20px;
}

/* Kanon dostępności motywu: obwódka Fresh Air z odstępem 3 px. */
.gbt-linkedin:focus-visible {
	outline: 2px solid var(--wp--preset--color--fresh-air);
	outline-offset: 3px;
}

.gbt-linkedin__znak {
	flex: 0 0 auto;
	display: block;
}

.gbt-linkedin__napis {
	white-space: nowrap;
}

/* Tryb ciemny — tło strony to Deep Baltic, więc przycisk musi odciąć się
   od niego sam. Steel Blue z jaśniejszą krawędzią zachowuje kontrast. */
:root[data-motyw="ciemny"] .gbt-linkedin {
	background: var(--wp--preset--color--steel-blue);
	border-color: rgba(255, 255, 255, .28);
	box-shadow: 0 8px 24px rgba(7, 23, 34, .45);
}

:root[data-motyw="ciemny"] .gbt-linkedin:hover,
:root[data-motyw="ciemny"] .gbt-linkedin:focus-visible {
	background: var(--wp--preset--color--setting-sun);
	color: var(--wp--preset--color--abyss);
}

/* Fresh Air na Setting Sun daje 2,08:1 — poniżej progu 3:1 dla obwódki.
   Na pomarańczu widać ciemną, nie jasną. */
:root[data-motyw="ciemny"] .gbt-linkedin:focus-visible {
	outline-color: var(--wp--preset--color--abyss);
}

/* Na wąskim ekranie napis nie mieści się obok treści — zostaje sam znak
   w kółku nad prawym dolnym rogiem. Próg 600 px jak w reszcie motywu. */
@media (max-width: 600px) {
	.gbt-linkedin {
		top: auto;
		right: 16px;
		bottom: 24px;
		transform: none;

		width: 48px;
		height: 48px;
		padding: 0;

		justify-content: center;

		border: 0;
		border-radius: 50%;
	}

	.gbt-linkedin:hover,
	.gbt-linkedin:focus-visible {
		padding: 0;
	}

	.gbt-linkedin__napis {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gbt-linkedin {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Powiększanie zdjęć — pasek narzędzi lightboxa Elementora.

   Nagłówek dostaje od Elementora `width: 100%` RAZEM z `padding: 15px 52px
   15px 20px`, a bez `border-box` szerokość i wyściełanie się sumują: przy
   oknie 1549 px pasek miał 1621 px. Skutek był podwójny — ikona udostępniania
   wychodziła 13 px poza prawą krawędź ekranu, a zamknięcie nachodziło na
   powiększanie (zmierzone zachodzenie: 30 px).

   `border-box` mieści pasek w oknie, a stały odstęp między ikonami rozsuwa
   je równo, zamiast zostawiać przypadkowe 44/20/28 px z układu Elementora.

   Przycisk zamknięcia NIE jest dzieckiem paska — Elementor trzyma go
   w `.dialog-widget-content` i pozycjonuje absolutnie (`right: 15px`).
   Nie da się go więc wstawić do rzędu; zamiast tego pasek rezerwuje mu
   miejsce prawym wyściełaniem (30 px ikony + 15 px odsunięcia + odstęp),
   dzięki czemu ikona udostępniania kończy się przed nim, a nie pod nim.
   --------------------------------------------------------------------------- */
.elementor-lightbox .elementor-slideshow__header {
	box-sizing: border-box;
	gap: 12px;
	padding-right: 69px;
}

.elementor-lightbox .elementor-slideshow__header > * {
	flex: none;
}

/* Licznik „1/1” ma zostać przy lewej krawędzi, ikony przy prawej. */
.elementor-lightbox .elementor-slideshow__counter {
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Tabele w treści stron (polityka prywatności, dokumenty prawne).

   Motyw nie miał dla nich żadnych reguł: `border-collapse: separate`,
   `padding: 1px`, zero linii — komórki zlewały się w jeden blok, a przy oknie
   390 px tabela wystawała 31 px poza ekran i robiła poziomy scroll.

   Kreski Sand Line i wyrównanie do lewej — ten sam wzór, co w tabelach
   kalendarza (`api/app/web/templates/privacy.html`).
   --------------------------------------------------------------------------- */
.gbt-tabela {
	width: 100%;
	margin: 16px 0 22px;
	border-collapse: collapse;
	/* `fixed` — bez tego długa treść w komórce rozpycha tabelę ponad szerokość
	   kontenera, mimo `width: 100%`. To była przyczyna scrolla na 390 px. */
	table-layout: fixed;
}

.gbt-tabela th,
.gbt-tabela td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--sand-line, #e8dfd5);
	font-size: 15px;
	line-height: 1.6;
	/* Długi adres e-mail albo nazwa własna nie może rozepchnąć kolumny. */
	overflow-wrap: anywhere;
}

.gbt-tabela thead th {
	padding-bottom: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	opacity: 0.75;
}

.gbt-tabela tbody th {
	font-weight: 700;
}

.gbt-tabela tbody tr:last-child th,
.gbt-tabela tbody tr:last-child td {
	border-bottom: none;
}

/* Pierwsza kolumna węższa — to etykieta wiersza, nie treść. */
.gbt-tabela th:first-child {
	width: 30%;
}

/* Tabela praw ma dwie kolumny: prawo i podstawa. Podstawa jest krótka. */
.gbt-tabela td:last-child:first-of-type {
	width: 30%;
}

@media (max-width: 560px) {
	.gbt-tabela th,
	.gbt-tabela td {
		padding: 9px 10px;
		font-size: 14px;
	}
}