/* ═══════════════════════════════════════════════════════════════════
   BAZA — reset, typografia, elementy formularzy, dostępność
   ═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Atrybut `hidden` ────────────────────────────────────────────────
   Przywrócenie zachowania, które przeglądarka i tak deklaruje — ale
   w SWOIM arkuszu, a ten przegrywa z każdą deklaracją `display` z arkusza
   autora. Element z `display: flex` albo `display: grid` nie znikał więc po
   ustawieniu `hidden`, tylko zostawał widoczny.

   Ten sam błąd wystąpił w tym projekcie CZTERY razy w niezależnych
   miejscach: filtr parametrów nie ukrywał wierszy, panel mega-menu zostawał
   otwarty, panele galerii nachodziły na siebie, a nakładka „ładowanie"
   w edytorze hotspotów zasłaniała zdjęcie i przechwytywała kliknięcia,
   uniemożliwiając dodawanie punktów.

   `!important` jest tu uzasadniony: `hidden` znaczy „tego elementu nie ma
   w prezentacji", więc żadna reguła układu nie powinna tego znosić. Element,
   który ma być widoczny, po prostu nie powinien nosić tego atrybutu.

   Wyjątkiem jest `hidden="until-found"` (treść odnajdywana wyszukiwaniem
   w przeglądarce) — gdyby kiedyś była potrzebna, trzeba ją wyłączyć
   selektorem `[hidden="until-found"] { content-visibility: hidden; }`. */
[hidden] { display: none !important; }


html {
	/* Odsunięcie celu kotwicy od przyklejonej belki — bez tego klik w spis
	   treści artykułu chowa nagłówek pod belką. */
	scroll-padding-top: calc(var(--gt-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gt-bg);
	color: var(--gt-tx);
	font-family: var(--gt-font);
	font-size: var(--gt-t-body);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ── Typografia ─────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 { font-size: var(--gt-t-h1); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: var(--gt-t-h2); letter-spacing: -.028em; }
h3 { font-size: var(--gt-t-h3); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Miara wiersza — tekst czytany, nie interfejs. Ok. 65 znaków. */
.gt-prose,
.gt-lead {
	max-width: var(--gt-measure);
}

.gt-lead {
	font-size: var(--gt-t-lead);
	color: var(--gt-tx2);
	line-height: 1.55;
}

/* Etykieta mono — nośnik charakteru całego designu. Występuje wszędzie:
   eyebrow sekcji, klucz parametru, licznik, kod produktu. */
.gt-mono {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gt-tx2);
}

.gt-num {
	font-family: var(--gt-mono);
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--gt-acc);
	text-decoration: none;
}

a:hover {
	color: var(--gt-tx);
}

.gt-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

strong, b { font-weight: 700; }

small { font-size: var(--gt-t-sm); }

hr {
	border: 0;
	border-top: 1px solid var(--gt-line);
	margin: var(--gt-s6) 0;
}

code, kbd, pre, samp {
	font-family: var(--gt-mono);
	font-size: .875em;
}

code {
	background: var(--gt-surf2);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	padding: .1em .35em;
	word-break: break-word;
}

pre {
	background: var(--gt-surf2);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	padding: var(--gt-s4);
	overflow-x: auto;
	line-height: 1.6;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
}

blockquote {
	margin: var(--gt-s5) 0;
	padding: var(--gt-s4) var(--gt-s5);
	border-left: 2px solid var(--gt-acc);
	background: var(--gt-acc-soft);
	font-size: 1.08rem;
	line-height: 1.5;
}

blockquote p:last-child { margin-bottom: 0; }

/* ── Media ──────────────────────────────────────────────────────── */

img, svg, video, canvas, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Aspect-ratio nie działa na iframe z atrybutami width/height —
   wymuszamy je tam, gdzie osadzamy kalkulator i mapy. */
iframe { border: 0; }

figure { margin: 0; }

figcaption {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gt-tx2);
	margin-top: var(--gt-s2);
}

/* ── Tabele ─────────────────────────────────────────────────────── */

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	text-align: left;
	padding: var(--gt-s2) var(--gt-s3);
	border-bottom: 1px solid var(--gt-line);
	vertical-align: top;
}

th {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gt-tx2);
}

/* Każda tabela w treści dostaje własne przewijanie poziome — bez tego
   szeroka tabela specyfikacji rozpycha całą stronę w bok na telefonie. */
.gt-scroll-x {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* ── Formularze ─────────────────────────────────────────────────── */

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

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: .7rem .85rem;
	background: var(--gt-surf);
	color: var(--gt-tx);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	transition: border-color var(--gt-fast) var(--gt-ease);
}

input::placeholder,
textarea::placeholder {
	color: var(--gt-tx3);
	opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--gt-line2);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--gt-acc);
	box-shadow: 0 0 0 3px var(--gt-acc-soft);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

select {
	appearance: none;
	/* Strzałka jako gradient, nie obrazek — nie generuje żądania i sama
	   przełącza kolor razem z motywem. */
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.1rem) center,
		calc(100% - .75rem) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

label { display: block; }

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

:focus-visible {
	outline: 2px solid var(--gt-acc);
	outline-offset: 2px;
	border-radius: var(--gt-r);
}

/* Klawiaturowe pominięcie nawigacji. Widoczne tylko przy fokusie. */
.gt-skip {
	position: absolute;
	left: var(--gt-s4);
	top: -100%;
	z-index: 200;
	padding: .7rem 1.1rem;
	background: var(--gt-acc);
	color: var(--gt-acc-ink);
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--gt-r);
	transition: top var(--gt-fast) var(--gt-ease);
}

.gt-skip:focus {
	top: var(--gt-s4);
	color: var(--gt-acc-ink);
}

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

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	white-space: normal;
}

/* Jedno miejsce wyłączające cały ruch w motywie. Animacje wejścia
   sekcji są dodatkowo wyłączane w JS, żeby nie zostawiać elementów
   z opacity:0 — patrz assets/js/reveal.js. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Powłoki układu ─────────────────────────────────────────────── */

.gt-shell {
	width: 100%;
	max-width: var(--gt-max);
	margin-inline: auto;
	padding-inline: var(--gt-gut);
}

.gt-section {
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
	border-bottom: 1px solid var(--gt-line);
}

.gt-section--flush { border-bottom: 0; }

/* Nagłówek sekcji: mono-etykieta i link „wszystkie" po przeciwnych stronach */
.gt-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gt-s4);
	flex-wrap: wrap;
	margin-bottom: var(--gt-s5);
}

/* Siatka tła — subtelny raster, który spina „panelowy" charakter designu */
.gt-grid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--gt-grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--gt-grid) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}