/**
 * Genialni - style bazowe.
 *
 * Tokeny odpowiadają wartościom z projektu Figma (desktop 1920 px, mobile 440 px).
 * Rozmiary płynne liczone są tak, by przy 1920 px dawać dokładnie wartości z projektu.
 */

@font-face {
	font-family: "Host Grotesk";
	src: url("../fonts/host-grotesk-var.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Kolory */
	--gn-ink: #1d1b1a;
	--gn-gold: #eda921;
	--gn-cream: #f7f1f0;
	--gn-purple: #240046;
	--gn-muted: #cac0bf;
	--gn-white: #fff;
	--gn-gold-20: rgb(237 169 33 / 0.2);
	--gn-cream-20: rgb(247 241 240 / 0.2);

	/* Typografia */
	--gn-font: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--gn-tracking: -0.02em;
	--gn-fs-display: clamp(64px, 13.334vw, 256px);
	--gn-fs-h1: clamp(56px, 6.667vw, 128px);
	--gn-fs-hero: clamp(40px, 4.167vw, 80px);
	--gn-fs-stat: clamp(48px, 3.334vw, 64px);
	--gn-fs-h2: clamp(24px, 1.667vw, 32px);
	--gn-fs-lead: clamp(18px, 1.25vw, 24px);
	--gn-fs-chip: 18px;
	--gn-fs-text-lg: 18px;
	--gn-fs-text: 16px;

	/* Układ */
	--gn-edge: clamp(20px, 2.605vw, 50px);
	--gn-container: min(1420px, 100% - 2 * clamp(20px, 3.5vw, 50px));
	--gn-wide: min(1820px, 100% - 2 * var(--gn-edge));
	--gn-section-gap: clamp(60px, 7.292vw, 140px);
	--gn-grid-gap: 20px;

	/* Zaokrąglenia - lewy górny / prawy górny / prawy dolny / lewy dolny */
	--gn-radius-xl: clamp(40px, 5.2vw, 100px) 20px clamp(40px, 5.2vw, 100px) clamp(40px, 5.2vw, 100px);
	--gn-radius-lg: 25px 5px 25px 25px;
	--gn-radius-md: 20px 5px 20px 20px;
	--gn-radius-sm: 10px 5px 10px 10px;

	/* Cienie */
	--gn-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.2);
	--gn-glow: 0 0 30px rgb(237 169 33 / 0.8);

	--gn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Zmienne Blocksy - spójne kolory i font w elementach generowanych przez motyw nadrzędny */
	--theme-font-family: var(--gn-font);
	--theme-text-color: var(--gn-ink);
	--theme-headings-color: var(--gn-ink);
	--theme-link-initial-color: var(--gn-ink);
	--theme-link-hover-color: var(--gn-gold);
	--theme-palette-color-1: var(--gn-gold);
	--theme-palette-color-2: var(--gn-purple);
	--theme-palette-color-3: var(--gn-ink);
	--theme-palette-color-4: var(--gn-ink);
	--theme-palette-color-5: var(--gn-muted);
	--theme-palette-color-6: var(--gn-cream);
	--theme-palette-color-7: var(--gn-cream);
	--theme-palette-color-8: var(--gn-white);
}

body {
	font-family: var(--gn-font);
	font-size: var(--gn-fs-text);
	line-height: 1.6;
	letter-spacing: var(--gn-tracking);
	color: var(--gn-ink);
	background: var(--gn-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
 * Sekcje bloków (.gn-section) oraz nagłówek i stopka (.gn-chrome) - pełna szerokość,
 * bez marginesów kontenera Blocksy.
 * Resety (.gn-section + element) wygrywają z regułami Blocksy dla treści wpisu,
 * a przegrywają z regułami sekcji, które są zagnieżdżone pod klasą bloku.
 * ------------------------------------------------------------------------- */

.gn-section {
	position: relative;
	box-sizing: border-box;
	font-family: var(--gn-font);
	letter-spacing: var(--gn-tracking);
}

:is(.gn-section, .gn-chrome) *,
:is(.gn-section, .gn-chrome) *::before,
:is(.gn-section, .gn-chrome) *::after {
	box-sizing: border-box;
}

/* Tracking -2% liczony od rozmiaru fontu każdego elementu (wartość w em dziedziczyłaby się jako px) */
:is(.gn-section, .gn-chrome),
:is(.gn-section, .gn-chrome) * {
	letter-spacing: var(--gn-tracking);
}

.entry-content > :is(.gn-section, .gn-chrome) {
	max-width: none;
	width: 100%;
	margin: 0;
}

:is(.gn-section, .gn-chrome) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote) {
	margin: 0;
}

:is(.gn-section, .gn-chrome) :is(blockquote, figure) {
	padding: 0;
	border: 0;
	font: inherit;
}

/*
 * Nagłówki dziedziczą krój - rozmiar i grubość nadają klasy (h2/h3 wynikają z SEO, nie z wyglądu).
 * Specyficzność elementu: wygrywa z Blocksy (ładowany wcześniej), przegrywa z klasami typografii.
 */
:where(.gn-section, .gn-chrome) :is(h1, h2, h3, h4, h5, h6) {
	font: inherit;
	color: inherit;
}

:is(.gn-section, .gn-chrome) :is(ul, ol) {
	padding: 0;
	list-style: none;
}

:where(.gn-section, .gn-chrome) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.gn-section, .gn-chrome) a {
	color: inherit;
	text-decoration: none;
}

.gn-container {
	width: var(--gn-container);
	margin-inline: auto;
}

.gn-wide {
	width: var(--gn-wide);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Typografia
 * ------------------------------------------------------------------------- */

.gn-h-display,
.gn-h-1,
.gn-h-hero,
.gn-h-2 {
	font-weight: 600;
}

.gn-h-1 {
	font-size: var(--gn-fs-h1);
	line-height: 1.33;
}

.gn-h-hero {
	font-size: var(--gn-fs-hero);
	line-height: 1.4;
}

.gn-h-2 {
	font-size: var(--gn-fs-h2);
	line-height: 1.4;
}

.gn-lead {
	font-size: var(--gn-fs-h2);
	font-weight: 600;
	line-height: 1.6;
	color: var(--gn-gold);
}

.gn-text-lg {
	font-size: var(--gn-fs-text-lg);
	line-height: 1.6;
}

/* Przycięcie do wysokości wersalików - tak jak w projekcie ("text-box-trim") */
.gn-trim {
	text-box: trim-both cap alphabetic;
}

.gn-prose > * + * {
	margin-top: 10px;
}

.gn-prose strong,
.gn-prose b {
	font-weight: 600;
}

.gn-prose a {
	color: var(--gn-gold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------------
 * Mini nagłówek (chip)
 * ------------------------------------------------------------------------- */

.gn-chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 5px 20px;
	border-radius: var(--gn-radius-lg);
	background: var(--gn-gold-20);
	color: var(--gn-gold);
	font-size: var(--gn-fs-chip);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.gn-chip--ink {
	color: var(--gn-ink);
}

.gn-chip--on-dark {
	background: var(--gn-cream-20);
}

@media (max-width: 767px) {
	.gn-chip {
		font-size: 16px;
	}
}

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

.gn-btn {
	--gn-btn-height: 50px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--gn-btn-height);
	padding: 0 20px;
	border: 0;
	border-radius: var(--gn-radius-lg);
	font-family: var(--gn-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: var(--gn-tracking);
	color: var(--gn-ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s var(--gn-ease), box-shadow 0.2s var(--gn-ease), transform 0.2s var(--gn-ease);
}

.gn-btn--primary {
	background: var(--gn-gold);
	box-shadow: var(--gn-glow);
}

.gn-btn--primary:hover {
	box-shadow: 0 0 40px rgb(237 169 33 / 1);
	transform: translateY(-1px);
}

.gn-btn--ghost {
	background: transparent;
	filter: drop-shadow(0 0 10px rgb(237 169 33 / 0.5));
}

.gn-btn--ghost:hover {
	color: var(--gn-gold);
}

.gn-btn__icon {
	flex: none;
	width: 16px;
	height: auto;
	transition: transform 0.2s var(--gn-ease);
}

.gn-btn:hover .gn-btn__icon {
	transform: translateX(3px);
}

.gn-btn__icon.gn-icon--arrow-up-right {
	width: 12px;
}

.gn-btn:hover .gn-icon--arrow-up-right {
	transform: translate(2px, -2px);
}

/* Grupa przycisków w złotej ramce (hero, nagłówek) */
.gn-btn-group {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gn-gold);
	border-radius: var(--gn-radius-lg);
}

/* ---------------------------------------------------------------------------
 * Lista usług rozdzielona ukośnikami
 * ------------------------------------------------------------------------- */

.gn-service-lines__items {
	display: flex;
	flex-wrap: wrap;
}

.gn-service-lines__item {
	display: inline-flex;
}

.gn-service-lines__item + .gn-service-lines__item::before {
	content: "/";
	padding-inline: 0.3em;
	color: var(--gn-muted);
}

.gn-service-lines__title {
	font: inherit;
}

.gn-service-lines a {
	transition: color 0.2s var(--gn-ease);
}

.gn-service-lines a:hover {
	color: var(--gn-gold);
}

/* ---------------------------------------------------------------------------
 * Drobne elementy
 * ------------------------------------------------------------------------- */

.gn-separator {
	width: var(--gn-container);
	height: 0;
	margin: 0 auto;
	border: 0;
	border-top: 1px solid var(--gn-muted);
}

.gn-icon {
	display: block;
	flex: none;
}

:is(.gn-section, .gn-chrome) :focus-visible {
	outline: 2px solid var(--gn-gold);
	outline-offset: 3px;
}

.gn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	:is(.gn-section, .gn-chrome) * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}