/*
 * ═══════════════════════════════════════════════════════════════════════
 *  Gdańsk Bay Tech — design systemu ekosystemu, warstwa wspólna
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Ten arkusz jest PRZENIESIENIEM designu strony głównej (gdanskbaytech.pl,
 * motyw WordPress `gbt`) na kalendarz. Kierunek jest jednostronny: wzorem
 * jest `wp-content/themes/gbt/{theme.json, assets/css/gbt.css}`, a tutaj
 * stoi jego odpowiednik bez zależności od WordPressa.
 *
 * Zmiana wyglądu zaczyna się WE WZORCU, nie tutaj. Ten plik ma pozostać
 * wierną kopią jego decyzji: paleta, krój, skala, komponenty i uzasadnienia
 * kontrastu są przepisane 1:1 wraz z komentarzami, żeby przy kolejnej
 * zmianie było widać, skąd wzięła się każda wartość.
 *
 * Podział na pliki:
 *   gbt-design.css  — TEN plik: tokeny + komponenty wspólne z witryną
 *   app.css         — wyłącznie to, czego witryna nie ma (filtry, siatka
 *                     miesiąca, ruletka, modale kalendarzowe)
 */

/* ═══ Krój ══════════════════════════════════════════════════════════════
 *
 * Sora — ten sam plik variable co w motywie (`assets/fonts/`). Hostowany
 * lokalnie, nie z Google Fonts: witryna też go serwuje ze swojego katalogu,
 * a lokalny plik znosi zależność od zewnętrznego CDN-u.
 */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("./fonts/sora-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Polskie znaki (ą ć ę ł ń ó ś ź ż) leżą w latin-ext — bez tego pliku
   diakrytyki podmieniają się na krój zapasowy w połowie wyrazu. */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("./fonts/sora-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
		U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══ Tokeny ════════════════════════════════════════════════════════════ */

:root {
	/* ── Próbnik (theme.json motywu, sekcja `color.palette`) ── */
	--deep-baltic: #0b1f2a;
	--deep-baltic-2: #12293a;
	--abyss: #071722;
	--sand-skin: #fcf7f1;
	--sand-2: #f2efe9;
	--sand-line: #e8dfd5;
	--rust-red: #c24a2a;
	--rust-deep: #a63a19;
	--setting-sun: #fd6124;
	--steel-blue: #3a6f8f;
	--steel-deep: #2f5c73;
	--fresh-air: #c3d9e8;
	--fresh-air-2: #dce9f2;
	--slate: #4a5a63;
	--slate-2: #33454f;
	--mist: #b9c8d2;

	/*
	 * ── Role ──
	 *
	 * Motyw dzieli kolory na CZTERY role, bo wcześniej używano ich dowolnie:
	 * rdza bywała akcentem, stal ozdobą, pomarańcz dodatkiem. Nowy element
	 * bierze rolę, nie próbnik — dzięki temu kolor niesie informację.
	 */
	--akcja: var(--rust-red);          /* działanie: przyciski, odnośniki wiodące, stan aktywny */
	--akcja-ciemniej: var(--rust-deep); /* tekst drobny i tło pod białym napisem */
	--dane: var(--steel-blue);          /* fakty: liczby, etykiety, metadane */
	--dane-ciemniej: var(--steel-deep);
	--uwaga: var(--setting-sun);        /* nowe i pilne — oszczędnie */
	--poboczne: var(--fresh-air-2);     /* tło informacji drugoplanowej */
	--poboczne-obrys: #cfe0ec;

	/* ── Powierzchnie i tekst ── */
	--tlo: var(--sand-skin);
	--tlo-2: var(--sand-2);
	--tlo-karta: #ffffff;
	--obrys: var(--sand-line);
	--obrys-slaby: #f0eae2;
	--tekst: var(--deep-baltic);
	--tekst-sredni: var(--slate-2);
	--tekst-slabszy: var(--slate);

	/*
	 * Cień pojawia się WYŁĄCZNIE przy najechaniu — karta w spoczynku jest
	 * płaska i trzyma się ramką. Stąd jedna wartość, nie para stanów.
	 */
	--cien-hover: 0 8px 20px rgba(11, 31, 42, 0.1);

	/*
	 * ── Rytm ──
	 *
	 * DWIE skale, bo służą różnym rzeczom i motyw też ich nie miesza:
	 *
	 *  `--sp-10..60` — skala UKŁADU z `theme.json` (12/20/28/40/80/86 px).
	 *    Odstępy sekcji, marginesy bloków, przerwy między kartami.
	 *
	 *  `--sp-1..10` — skala WNĘTRZA komponentu (bazowa 4 px). Odległości
	 *    wewnątrz karty, paska narzędzi czy formularza, gdzie skok 12 → 20 px
	 *    jest za gruby. Wartości są tu z poprzedniego systemu kalendarza
	 *    i celowo się nie zmieniają — porządkują wnętrza, nie layout.
	 */
	--sp-10: 12px;  /* układ: bardzo mały */
	--sp-20: 20px;  /* układ: mały */
	--sp-30: 28px;  /* układ: średni */
	--sp-40: 40px;  /* układ: duży */
	--sp-50: 80px;  /* układ: sekcja */
	--sp-60: 86px;  /* układ: hero */

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;

	/* Odstęp między głównymi blokami kolumny treści (nagłówek → pasek → lista). */
	--content-gap: var(--sp-30);

	/*
	 * ── Skala pisma ──
	 *
	 * PŁYNNA, wg `docs/kanon-podstron.md` §4 — rozmiary skalują się
	 * z szerokością okna, nie stoją na stałych wartościach. Stopnie
	 * przepisane z podstron wzorcowych `/dlaczego-pomorze/` i
	 * `/future-founders/`, bo to one wyznaczają standard nowych ekranów.
	 *
	 * Największy skok w poprzedniej skali wynosił 42 → 17 px i nic nie
	 * krzyczało. Kanon rozciąga krańce: liczba-plakat u góry, mikro-podpis
	 * wersalikami u dołu — dopiero ten rozstrzał robi hierarchię.
	 */
	--f-plakat: clamp(72px, 10vw, 145px);   /* jedna dana: „86", „80,4 mln t" */
	--f-h1: clamp(46px, 5.5vw, 68px);
	--f-h2: clamp(36px, 4.5vw, 54px);
	--f-h2-s: clamp(31px, 4vw, 46px);       /* H2 drugiego rzędu */
	--f-h3: clamp(28px, 3vw, 38px);
	--f-h3-s: clamp(24px, 2.4vw, 32px);
	/*
	 * TEKST BIEŻĄCY NIE SKALUJE SIĘ PŁYNNIE.
	 *
	 * Pomiar podstrony wzorcowej `/dlaczego-pomorze/`: `clamp()` obsługuje
	 * WYŁĄCZNIE nagłówki i liczbę-plakat. Tekst czytany stoi na stałych
	 * stopniach — 18 px lead, 17 px wprowadzenie, 15 px drobne, 13 px nadtytuł.
	 * Puszczenie `clamp()` na treść rozdmuchiwało ją na szerokim ekranie:
	 * lead robił się 29 px zamiast 18, a akapit 20 px zamiast 17.
	 */
	--f-lead: 18px;      /* lead sekcji, `.gbp-lead` (lh 1.72) */
	--f-wiodacy: 17px;   /* wprowadzenie i akapit treści (lh 1.7) */
	--f-drobny: 15px;
	--f-mikro: 11px;     /* podpis pod liczbą, wersaliki */

	/* Stopnie interfejsu — drobne elementy sterujące nie skalują się płynnie,
	   bo muszą trzymać stałą wysokość kontrolek. */
	--f-eyebrow: 13px;   /* `.gbp-eyebrow` — 13 px, tracking .12em */
	--f-xs: 12.5px;
	--f-cta: 13px;
	--f-s: 14px;
	--f-m: 16px;
	--f-card: 17px;
	--f-l: clamp(17px, 2vw, 19px);

	/* Zgodność wstecz — te nazwy zostały w regułach niżej. */
	--f-h34: var(--f-h3-s);
	--f-h38: var(--f-h3);
	--f-xl: var(--f-h1);
	--f-xxl: var(--f-plakat);

	/* Kolumna treści witryny. Siatki i nagłówki trzymają się tej szerokości. */
	--kolumna: 1240px;

	/*
	 * ── Szerokości ── (kanon §5)
	 *
	 * Kolumna TEKSTU jest węższa od kolumny układu: przy 850 px i stopniu
	 * 16 px wiersz miał 106 znaków, a czyta się do ~75. Sekcje 1000–1050 px,
	 * kolumny tekstu 520–900 px, karty i etykiety 190–440 px.
	 */
	--szer-sekcja: 1050px;
	/*
	 * `ch` to szerokość cyfry „0", a w Sorze jest ona SZERSZA od średniej
	 * litery — 68ch dawało 1010 px, czyli 85 znaków w wierszu zamiast 68.
	 * Wartość skorygowana pomiarem na realnej treści: 46ch ≈ 68 znaków.
	 */
	--szer-tekst: 46ch;
	--szer-karta: 440px;

	/*
	 * ── Rytm pionowy ── (plan oprawy, poz. 14)
	 *
	 * Trzy poziomy zamiast równego oddechu wszędzie — odstęp niesie
	 * informację o tym, czy temat się kończy, czy trwa.
	 */
	--odstep-domkniecie: 96px;  /* koniec tematu */
	--odstep-ciag: 56px;        /* dalszy ciąg */
	--odstep-blisko: 24px;      /* elementy powiązane */

	color-scheme: light;
}

/* ═══ Podstawa ══════════════════════════════════════════════════════════ */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: var(--tlo);
	color: var(--tekst);
	font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--f-s);
	line-height: 1.5;
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
	line-height: 1.2;
	font-weight: 700;
}

/* Tytuł hero — wzorzec (1 - Lista wydarzeń): line-height 1.04 przy 68 px, czyli
   70,72 px wiersza. Globalne 1.2 dawało 81,6 px i rozjeżdżało blok nagłówka
   względem projektu o ~11 px na wiersz. */
.gbt-pagehead__grid h1 {
	line-height: 1.04;
}

/*
 * Obrys fokusu bez zaokrąglenia — w tym systemie nic go nie ma.
 * Na ciemnych tłach rdza schodzi do 3,1:1, więc obrys bierze Fresh Air.
 */
:focus-visible {
	outline: 2px solid var(--akcja);
	outline-offset: 2px;
}

.gbt-pagehead :focus-visible,
.gbt-section--dark :focus-visible,
.gbt-footer :focus-visible,
.gbt-tile :focus-visible {
	outline-color: var(--fresh-air);
	outline-offset: 3px;
}

/* Odnośnik pomijający nawigację — widoczny dopiero przy fokusie. */
.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(--deep-baltic);
	color: #fff;
	font-weight: 700;
}

/* ═══ Typografia sekcji ═════════════════════════════════════════════════ */

/*
 * Nadtytuł: „KALENDARZ WYDARZEŃ", „KIEDY", „KATEGORIE". Wersalik 11 px
 * z rozstrzeleniem — znak rozpoznawczy layoutu witryny.
 * Rust Red na Sand Skin daje 4,58:1 i przechodzi przy 11 px.
 */
/* Wartości 1:1 z `.gbp-eyebrow` podstrony wzorcowej. */
.gbt-eyebrow {
	margin-bottom: 14px;
	font-size: var(--f-eyebrow);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--akcja);
}

/* Na granacie rdza ma 3,7:1 — nadtytuł bierze wtedy Fresh Air. */
.gbt-section--dark .gbt-eyebrow,
.gbt-pagehead .gbt-eyebrow {
	color: var(--fresh-air);
}

/* Wprowadzenie pod nagłówkiem — w projekcie ograniczone do ~680 px. */
/* Wartości 1:1 z `.gbp-lead`: 18 px, interlinia 1,72, kolumna do 820 px. */
.gbt-lead {
	max-inline-size: 820px;
	font-size: var(--f-lead);
	line-height: 1.72;
	color: var(--tekst-sredni);
}

.gbt-section--dark .gbt-lead,
.gbt-pagehead .gbt-lead {
	color: var(--fresh-air);
}

/* ═══ Sekcje ════════════════════════════════════════════════════════════ */

.gbt-section {
	padding: var(--sp-50) clamp(20px, 5vw, 40px);
}

/* Treść sekcji w tej samej kolumnie co reszta strony. */
.gbt-section > * {
	width: min(1120px, calc(100% - 64px));
	margin-inline: auto;
}

.gbt-section--sand-2 {
	background: var(--tlo-2);
}

.gbt-section--dark {
	background: var(--deep-baltic);
	color: #fff;
}

/*
 * Globalny Rust Red daje na granacie 3,7:1 — poniżej progu AA.
 * Odnośniki na ciemnym biorą Fresh Air (8,4:1).
 */
.gbt-section--dark a:not(.gbt-btn),
.gbt-footer a:not(.gbt-btn),
.gbt-pagehead a:not(.gbt-btn) {
	color: var(--fresh-air);
}

.gbt-section--dark a:not(.gbt-btn):hover,
.gbt-footer a:not(.gbt-btn):hover,
.gbt-pagehead a:not(.gbt-btn):hover {
	color: #fff;
}

/* ═══ Pas tytułowy ══════════════════════════════════════════════════════
 *
 * Odpowiednik `.gbt-pagehead` z motywu — pas nad treścią z tą samą oprawą
 * co hero strony głównej. Warstwy gradientu w JEDNEJ własności; kolor bazowy
 * MUSI iść osobno po skrócie, bo skrót zeruje `background-color`.
 */
.gbt-pagehead {
	position: relative;
	overflow: hidden;
	padding: var(--sp-50) clamp(20px, 5vw, 40px);
	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(--deep-baltic);
	color: #fff;
}

/* 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. */
/* Ta sama kolumna co `main` i stopka — wzór `.gbp-inner`. */
.gbt-pagehead > * {
	position: relative;
	z-index: 1;
	width: min(1120px, calc(100% - 64px));
	margin-inline: auto;
}

/*
 * Pagehead jest JEDNĄ kolumną (artboard „Kalendarz GBT"): nadtytuł, tytuł,
 * lead, rząd liczb — jedno pod drugim. Wcześniejsze `max-inline-size: none`
 * obsługiwało układ dwukolumnowy .7fr/1.3fr; po zwężeniu pasa o szpaltę
 * filtrów rozciągnięty tytuł nachodził na lead i na liczby.
 */
.gbt-pagehead__grid {
	display: flex;
	flex-direction: column;
}

.gbt-pagehead__grid .gbt-lead {
	margin-top: 22px;
	max-inline-size: 820px;
}

.gbt-pagehead h1 {
	font-size: var(--f-h1);
	/* Nagłówek łamie się wcześniej niż akapit — długi wiersz w dużym stopniu
	   czyta się gorzej niż w małym. */
	max-inline-size: 18ch;
	margin-top: 12px;
	letter-spacing: -0.02em;
}

/*
 * Liczby ekosystemu — wzór `.gbt-stats` z hero: 38 px, odstęp 56 px.
 * Podpis wersalikiem 11 px, jak nadtytuł.
 */
.gbt-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(34px, 5vw, 78px);
	margin-top: var(--odstep-ciag);
}

.gbt-stat strong {
	display: block;
	/* Liczba ekosystemu jest daną wiodącą pasa — stopień plakatowy,
	   nie nagłówkowy (kanon §7). */
	font-size: clamp(48px, 6vw, 84px);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.gbt-stat span {
	font-size: var(--f-eyebrow);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--fresh-air);
}

/* ═══ Liczba-plakat i dominanta ═════════════════════════════════════════
 *
 * Komponenty z kanonu (§7 „liczba-plakat", plan oprawy poz. 16 „element
 * dominujący"). Jedna dana urasta do rozmiaru plakatu i niesie sekcję;
 * reszta schodzi o stopień. Bez tego wszystko stoi na jednym poziomie
 * ważności i strona nie ma o czym krzyczeć.
 */
.gbt-plakat {
	display: block;
	font-size: var(--f-plakat);
	font-weight: 800;
	line-height: .92;
	/* Duże stopnie wymagają ujemnego świata — inaczej cyfry się rozjeżdżają. */
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* Podpis pod liczbą: wersaliki 11 px, nigdy zdanie. */
.gbt-plakat__podpis {
	display: block;
	margin-top: 10px;
	font-size: var(--f-mikro);
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* ═══ Siatki ════════════════════════════════════════════════════════════ */

/*
 * Kolumny opisane są jako `minmax(0, 1fr)`, nigdy `1fr`. Samo `1fr` znaczy
 * `minmax(auto, 1fr)` — minimum kolumny wyznacza wtedy najszerszy element
 * w środku, a długi tytuł albo obrazek rozpycha siatkę i strona dostaje
 * poziomy scroll.
 */
.gbt-grid {
	display: grid;
	gap: 18px;
	/* Karty równej wysokości w rzędzie — inaczej `margin-top:auto` nie ma
	   luzu i znacznik nie siada przy dolnej krawędzi. */
	align-items: stretch;
}

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

/*
 * ── Siatki asymetryczne ── (kanon §5)
 *
 * Nierówne kolumny są SYGNATURĄ wizualną serwisu, nie ozdobnikiem.
 * Wąska kolumna niesie etykietę, liczbę albo datę; szeroka — treść.
 * Stąd proporcje w rodzaju `.62fr 1.38fr`, a nie równe połówki.
 * Równy podział zostaje wyłącznie zestawieniom porównawczym.
 *
 * Wartości przepisane z podstron wzorcowych; `minmax(0, …)` z tego samego
 * powodu co wyżej.
 */
.gbt-grid--etykieta { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.gbt-grid--waska    { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.gbt-grid--szeroka  { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.gbt-grid--lekka    { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.gbt-grid--wstep    { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.gbt-grid--domkniecie { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.gbt-grid--glowa    { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }

/*
 * Rząd z numerem: wąska kolumna stała (55–85 px) na liczbę porządkową
 * albo datę, reszta na treść. Wzór `.gbp-track` z podstrony.
 */
.gbt-grid--numer {
	grid-template-columns: 55px minmax(0, 1fr);
	align-items: center;
}

/*
 * Odstępy ze skali kanonu (10–78 px). Jeden `gap` na wszystko spłaszczał
 * hierarchię — bliskie sobie elementy mają siedzieć ciaśniej niż osobne bloki.
 */
.gbt-grid--ciasno  { gap: 12px; }
.gbt-grid--zwarto  { gap: 18px; }
.gbt-grid--luzno   { gap: 34px; }
.gbt-grid--szeroko { gap: 60px; }
/* Największy odstęp rozdziela bloki, które są osobnymi myślami — nie
   elementami jednej listy. W podstronie: 75–80 px. */
.gbt-grid--rozstaw { gap: clamp(34px, 5vw, 80px); }

/* Wyrównanie w pionie — kanon używa go świadomie przy siatkach nierównych. */
.gbt-grid--gora  { align-items: start; }
.gbt-grid--dol   { align-items: end; }
.gbt-grid--srodek { align-items: center; }

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

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

/* ═══ Karta wydarzenia ══════════════════════════════════════════════════
 *
 * Wzór `.gbt-event` z motywu: biała karta, ramka Sand Line, padding 24/22,
 * BEZ zaokrągleń. Przy najechaniu ramka przechodzi w rdzę i dochodzi cień.
 */
.gbt-event {
	background: var(--tlo-karta);
	border: 1px solid var(--obrys);
	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(--akcja);
	box-shadow: var(--cien-hover);
}

/* Tytuł jest odnośnikiem, ale ma kolor TEKSTU, nie odnośnika. */
.gbt-event__tytul {
	font-size: var(--f-card);
	font-weight: 700;
}

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

.gbt-event__tytul a:hover {
	color: var(--akcja);
	text-decoration: underline;
}

/* Data: wersalik rdzawy 11 px — pierwszy element karty. */
.gbt-event__data {
	font-size: var(--f-eyebrow);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--akcja);
}

.gbt-event__opis {
	font-size: var(--f-xs);
	color: var(--tekst-slabszy);
}

.gbt-event__meta {
	font-size: var(--f-xs);
	color: var(--tekst-slabszy);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

/*
 * Znacznik sektora: chip Z OBRYSEM — przezroczyste tło, ramka i tekst w rdzy
 * (4,88:1 na białej karcie), nie wypełniony blok.
 */
.gbt-chip {
	align-self: flex-start;
	margin-top: auto;
	display: inline-block;
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 8px;
	background: transparent;
	border: 1px solid var(--akcja);
	color: var(--akcja);
	text-decoration: none;
}

/* Wariant „dane" — dla faktów (miasto, format), nie dla działania. */
.gbt-chip--dane {
	border-color: var(--dane);
	color: var(--dane-ciemniej);
}

/* ═══ Kafel na granacie ═════════════════════════════════════════════════
 *
 * Wzór `.gbt-tile`: wszystkie kafle startują na #12293a i zmieniają tło
 * na rdzę po najechaniu lub fokusie.
 */
.gbt-tile {
	background: var(--deep-baltic-2);
	color: #fff;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.gbt-tile:hover,
.gbt-tile:focus-within {
	background: var(--akcja);
}

.gbt-tile h3 {
	font-size: var(--f-m);
}

/* Opis: mist na granacie 8,6:1, #fff4ef na rdzy 4,58:1. */
.gbt-tile p {
	font-size: var(--f-xs);
	color: var(--mist);
	transition: color 0.18s ease;
}

.gbt-tile:hover p,
.gbt-tile:focus-within p {
	color: #fff4ef;
}

.gbt-tile__link {
	margin-top: auto;
	font-size: var(--f-xs);
	font-weight: 700;
	color: #fff;
}

/* ═══ Karta z ikoną ═════════════════════════════════════════════════════
 *
 * Wzór `.gbt-feature` — biała karta ze znakiem w krążku.
 */
.gbt-feature {
	background: var(--tlo-karta);
	border: 1px solid var(--obrys);
	padding: 26px 22px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gbt-feature:hover,
.gbt-feature:focus-within {
	border-color: var(--akcja);
	box-shadow: var(--cien-hover);
}

.gbt-feature:hover .gbt-icon {
	background: var(--dane);
	color: #fff;
}

/*
 * Znak w krążku. Przy 38 px krążka i 16 px znaku symbole zlewały się
 * w plamkę — krążek 52 px, znak 26 px (50 % średnicy).
 */
.gbt-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--fresh-air);
	color: var(--deep-baltic);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	transition: background-color 0.18s ease, color 0.18s ease;
	/* Symbole techniczne bierze krój systemowy, nie Sora — ta ma je wąskie. */
	font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", sans-serif;
}

/* ═══ Przyciski ═════════════════════════════════════════════════════════
 *
 * Ostre, bez zaokrągleń. Biel na Rust Red daje 3,94:1 — za mało dla tekstu
 * 12,5 px, więc wypełnienie bierze Rust Deep (5,3:1), a rdza zostaje
 * stanem najechania.
 */
.gbt-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	border: 1px solid var(--akcja-ciemniej);
	background: var(--akcja-ciemniej);
	color: #fff;
	font-family: inherit;
	font-size: var(--f-xs);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	/* Etykieta w jednym wierszu (artboard) — po zwężeniu paska o szpaltę filtrów
	   „Dodaj wydarzenie" łamało się na trzy linie i rozpychało pasek. */
	white-space: nowrap;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.gbt-btn:hover {
	background: var(--akcja);
	border-color: var(--akcja);
	color: #fff;
}

/* Wariant drugoplanowy — obrys, tło karty. */
.gbt-btn--obrys {
	background: var(--tlo-karta);
	border-color: var(--obrys);
	color: var(--tekst);
}

.gbt-btn--obrys:hover {
	background: var(--tlo-karta);
	border-color: var(--akcja);
	color: var(--akcja);
}

/* Na ciemnym tle: obrys biały, wypełnienie przezroczyste. */
.gbt-section--dark .gbt-btn--obrys,
.gbt-pagehead .gbt-btn--obrys {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.gbt-section--dark .gbt-btn--obrys:hover,
.gbt-pagehead .gbt-btn--obrys:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

/* ═══ Nagłówek strony ═══════════════════════════════════════════════════
 *
 * Pasek ma w projekcie stałą wysokość 76 px i linię Sand Line pod spodem.
 * Jest JASNY — granat należy do sekcji, nie do nawigacji.
 */
.gbt-header {
	/* Przyklejenie idzie przez KLASĘ, nie inline — inline nadpisywałby reguły
	   @media i blokował ewentualne zmiany na wąskim ekranie (ta sama pułapka,
	   która zabiła szufladę sidebara). Wartości ze wzorca: sticky, top 0, z 30. */
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--tlo);
	border-bottom: 1px solid var(--obrys);
}

.gbt-header__bar {
	display: flex;
	align-items: center;
	/* Zawija się przy ciasnocie (artboard) — po zwężeniu paska o szpaltę filtrów
	   cztery elementy nie mieszczą się w jednym rzędzie na węższych ekranach. */
	flex-wrap: wrap;
	gap: 10px clamp(14px, 2vw, 26px);
	min-height: 76px;
	width: min(1120px, calc(100% - 64px));
	margin-inline: auto;
}

/* Logo bierze kolor z rodzica (`currentColor`), jak w motywie. */
.gbt-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--tekst);
}

.gbt-logo svg {
	height: 38px;
	width: auto;
	fill: currentColor;
	display: block;
}

.gbt-header__title {
	font-size: var(--f-xs);
	color: var(--tekst-slabszy);
	/* Podtytuł ustępuje pierwszy — przyciski są ważniejsze niż opis. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gbt-header__spacer {
	flex: 1;
}

/*
 * Przełącznik języka: JEDEN ciąg „PL / EN", nie dwa pełne przyciski.
 * Aktywny pełną mocą, drugi wygaszony do 0,65 — pomiar z motywu daje
 * wtedy 5,16:1 wobec tła paska (próg dla tekstu to 4,5:1).
 */
.gbt-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.gbt-lang button {
	border: 0;
	background: transparent;
	padding: 2px;
	font-family: inherit;
	font-size: var(--f-xs);
	font-weight: 600;
	color: var(--tekst);
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 0.18s ease, color 0.18s ease;
}

.gbt-lang button:hover {
	opacity: 1;
	color: var(--akcja);
}

.gbt-lang button[aria-pressed="true"] {
	opacity: 1;
}

/* Ukośnik rysuje drugi kod, żeby stał MIĘDZY nimi, a nie po skrajnym. */
.gbt-lang button + button::before {
	content: "/";
	margin-right: 6px;
	opacity: 0.35;
	font-weight: 400;
}

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

.gbt-footer {
	background: var(--abyss);
	color: #fff;
	padding: var(--sp-40) clamp(20px, 5vw, 40px);
}

.gbt-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	/* Wzorzec: width: min(1120px, 100%) — margines boczny daje `padding`
	   stopki, nie zawężenie paska. Odjęcie 64 px robiło pasek węższy od
	   kolumny treści nad nim. */
	width: min(1120px, 100%);
	margin-inline: auto;
	font-size: var(--f-eyebrow);
	color: var(--mist);
}

.gbt-footer .gbt-logo {
	color: #fff;
}

.gbt-footer .gbt-logo svg {
	height: 30px;
}

/* Odnośniki po prawej stronie paska, jak w projekcie. */
.gbt-footer__links {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ═══ Tabela ════════════════════════════════════════════════════════════ */

.gbt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--f-xs);
}

.gbt-table th,
.gbt-table td {
	text-align: left;
	padding: 12px 6px;
	border-bottom: 1px solid var(--tlo-2);
}

.gbt-table th {
	font-size: var(--f-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--tekst-slabszy);
}

.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(--tlo-2);
}

/* Wąski ekran: tabela przewija się we WŁASNYM kontenerze, nie strona. */
.gbt-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ═══ Nota poboczna ═════════════════════════════════════════════════════
 *
 * Wzór z motywu: akapit wprowadzający na tle Fresh Air 2 z lewą krechą
 * ze stali — informacja drugoplanowa, ale nie zmarginalizowana.
 */
.gbt-nota {
	background: var(--poboczne);
	border-left: 3px solid var(--dane);
	padding: 18px 22px;
	font-size: var(--f-lead);
	line-height: 1.6;
	color: var(--tekst-sredni);
}

/* ═══ Zwijanie ══════════════════════════════════════════════════════════
 *
 * 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, minmax(0, 1fr));
	}

	.gbt-grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Siatki NIERÓWNE składają się do jednej kolumny wcześniej niż równe.
	 * Przy 700 px układ `.7fr 1.3fr` dawał węższej kolumnie 185 px — nagłówek
	 * łamał się po kilka znaków. Asymetria ma sens tylko wtedy, gdy WĄSKA
	 * kolumna wciąż mieści treść.
	 */
	.gbt-grid--etykieta,
	.gbt-grid--waska,
	.gbt-grid--szeroka,
	.gbt-grid--lekka,
	.gbt-grid--wstep,
	.gbt-grid--domkniecie,
	.gbt-grid--glowa {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Bez dwóch kolumn wyrównanie w pionie nie ma czego wyrównywać. */
	.gbt-grid--dol,
	.gbt-grid--srodek {
		align-items: start;
	}

	/* Rozstaw 80 px między blokami jest miarą POZIOMĄ — w pionie to za dużo. */
	.gbt-grid--rozstaw {
		gap: 28px;
	}

	.gbt-stats {
		gap: 40px;
	}
}

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

	.gbt-section,
	.gbt-pagehead {
		padding-top: var(--sp-40);
		padding-bottom: var(--sp-40);
	}

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

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

/* Zero ruchu, gdy użytkownik go nie chce — bez wyjątków. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}