/**
 * Mateusz Handel — Main styles
 * Jednostki responsywne: rem, em, vw, vmin (bez px).
 * Typografia i spacing: single source of truth (theme.json + FOUNDATION).
 */

/* ========== FOUNDATION — single source of truth ========== */
:root {
	/* Palette (theme.json mirror + layout) */
	--accent-1: #FF4E31;
	--accent-2: #C39374;
	--accent-3: #7C614E;
	--accent-4: #0558DA;
	--accent: var(--accent-1);
	--text: #1a1a1a;
	--bg: #fff;
	--muted: #555;
	/* Typography */
	--font-sans: "Atkinson Hyperlegible Next", sans-serif;
	--font-primary: var(--font-sans);
	--text-base: 1rem;
	--text-sm: 0.875rem;
	--text-lg: 1.125rem;
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.6;
	--heading-1: clamp(1.75rem, 4vw, 2.5rem);
	--heading-2: clamp(1.25rem, 3vw, 1.5rem);
	--heading-3: clamp(1.125rem, 2.5vw, 1.25rem);
	--heading-4: 1.125rem;
	--heading-5: 1rem;
	--heading-6: 0.875rem;
	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	/* Layout (theme.json contentSize / wideSize) */
	--content-width: min(45rem, 90vw);
	--wide-width: min(75rem, 95vw);
	/* Globalny margines boczny: 80px przy 1920px (4.1667vw), responsywnie clamp; wszędzie identyczny. */
	--page-margin-x: clamp(1rem, 4.1667vw, 5rem);
	--spacing: var(--space-5);
	--spacing-lg: var(--space-7);
	/* Surfaces */
	--radius: 0.25rem;
	--shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
	/* Blog tiles: proporcja 565×618 (jak na projekcie) — home i zakładka Blog */
	--blog-tile-aspect: 565 / 618;
	--blog-title-size: clamp(1.5rem, 3.2vw, 3.75rem);
	--blog-title-line: 1.083;
	/* Lead excerpt: 20px przy 1920px (1.04vw), mniej na mniejszych ekranach */
	--blog-lid-size: clamp(0.875rem, 1.04vw, 1.25rem);
	--blog-lid-line: 1.25;
	--blog-btn-size: clamp(1rem, 1.2vw, 1.25rem);
	--blog-btn-line: 2.15;
	--blog-font: var(--font-sans);
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--text);
	background: var(--bg);
	margin: 0;
	padding-top: var(--header-height, 6.25rem);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Global typography — używaj w treści, komponenty mogą nadpisywać */
h1, .h1 { font-size: var(--heading-1); font-weight: 700; line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
h2, .h2 { font-size: var(--heading-2); font-weight: 700; line-height: var(--leading-tight); margin: 0 0 var(--space-2); }
h3, .h3 { font-size: var(--heading-3); font-weight: 600; line-height: var(--leading-normal); margin: 0 0 var(--space-2); }
h4, .h4 { font-size: var(--heading-4); font-weight: 600; margin: 0 0 var(--space-2); }
h5, .h5 { font-size: var(--heading-5); font-weight: 600; margin: 0 0 var(--space-2); }
h6, .h6 { font-size: var(--heading-6); font-weight: 600; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
small, .text-sm { font-size: var(--text-sm); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.5rem; }
li + li { margin-top: var(--space-1); }
blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: none; border-image: none; font-style: italic; color: var(--muted); }
hr { border: 0; border-top: 0.0625rem solid #ddd; margin: var(--space-6) 0; }
table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
th, td { border: 0.0625rem solid #ddd; padding: var(--space-2) var(--space-3); text-align: left; }
th { background: #f5f5f5; font-weight: 600; }

/* Flow utility — odstępy między rodzeństwem bez duplikowania margin */
.flow > * + * {
	margin-top: var(--flow-space, var(--space-4));
}

/* Kontener */
.container {
	width: 100%;
	max-width: var(--wide-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--page-margin-x);
	padding-right: var(--page-margin-x);
}

/* Linki globalne — bez underline dla .u-szlaczek (ma własny SVG) */
a {
	color: var(--accent);
	text-decoration: none;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
}
a:not(.u-szlaczek):not(.u-szlaczek2):not(.u-szlaczek3):hover {
	text-decoration: underline;
}
a:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.125rem;
}

/* Scroll margin — sticky header nie zasłania nagłówków przy #anchor */
[id] {
	scroll-margin-top: calc(var(--header-height, 6.25rem) + var(--space-4));
}

/* ========== REVEAL — scroll animations (opacity + transform only) ========== */
:root {
	--reveal-duration: 950ms;
	--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--reveal-stagger: 140ms;
}

.reveal {
	opacity: 0;
	transform: translateY(1rem);
	visibility: hidden;
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
	will-change: transform, opacity;
	contain: layout paint;
	backface-visibility: hidden;
}

.reveal.is-inview {
	opacity: 1;
	transform: translate(0);
	visibility: visible;
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}

.reveal--up {
	transform: translateY(1rem);
}

.reveal--up.is-inview {
	transform: translate(0);
}

.reveal--left {
	transform: translateX(1.25rem);
}

.reveal--left.is-inview {
	transform: translate(0);
}

.reveal--right {
	transform: translateX(-1.25rem);
}

.reveal--right.is-inview {
	transform: translate(0);
}

.reveal--scale {
	transform: translateY(0.75rem) scale(0.98);
}

.reveal--scale.is-inview {
	transform: translate(0) scale(1);
}

.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }
.reveal--delay-4 { transition-delay: 480ms; }
.reveal--delay-5 { transition-delay: 600ms; }
.reveal--delay-6 { transition-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		visibility: visible;
		transition: none;
		will-change: auto;
		contain: none;
	}
	.reveal.is-inview {
		opacity: 1;
		transform: none;
	}
	.reveal--delay-1,
	.reveal--delay-2,
	.reveal--delay-3,
	.reveal--delay-4,
	.reveal--delay-5,
	.reveal--delay-6 {
		transition-delay: 0ms;
	}
}

/* ========== U-szlaczek — jeden komponent underline (menu, karty, CTA) ========== */
.u-szlaczek {
	position: relative;
	display: inline-block;
	width: fit-content;
	text-decoration: none !important;
	color: inherit;
	padding-bottom: 0.875rem;
}

.u-szlaczek__svg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.75rem;
	pointer-events: none;
}

.u-szlaczek__path {
	stroke: currentColor;
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
	stroke-linecap: square;
	stroke-linejoin: miter;
	transition: opacity 0.2s;
}

.u-szlaczek:hover .u-szlaczek__path,
.u-szlaczek:focus-visible .u-szlaczek__path {
	opacity: 0.9;
}

.u-szlaczek:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0.2rem;
}

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

/* ========== U-szlaczek2 — linia dynamiczna + stały ogon SVG (menu, tytuły kart) ========== */
.u-szlaczek2 {
	--szl-stroke: 0.375rem;
	--szl-gap: 0.625rem;
	--tail-w: 19.75rem;
	--tail-h: 2.0625rem;
	position: relative;
	display: inline-block;
	width: fit-content;
	text-decoration: none !important;
	padding-bottom: calc(var(--szl-gap) + var(--tail-h));
	color: inherit;
}

/* Górna linia: prawie pełna szerokość + ogon w SVG z prawej */
.u-szlaczek2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: var(--szl-gap);
	height: var(--szl-stroke);
	width: calc(100% - (var(--tail-w) * 0.12));
	background: currentColor;
	pointer-events: none;
}

/* Dolna linia: krótsza, wcięta z lewej i prawej (pod górną, „jak ma być”) */
.u-szlaczek2::before {
	content: '';
	position: absolute;
	left: 15%;
	bottom: 0;
	width: 70%;
	height: var(--szl-stroke);
	background: currentColor;
	pointer-events: none;
}

.u-szlaczek2__tail {
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--tail-w);
	height: var(--tail-h);
	pointer-events: none;
}

/* Linia w SVG (łączy z ::after) – tylko stroke; trójkąt – tylko fill, bez stroke (unikamy efektu taperu). */
.u-szlaczek2__tail .u-szlaczek2__tail-line {
	stroke: currentColor;
	stroke-width: var(--szl-stroke);
	stroke-linecap: square;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	fill: none;
}
.u-szlaczek2__tail .u-szlaczek2__tail-triangle {
	fill: currentColor;
	stroke: none;
}

.u-szlaczek2:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0.2rem;
}

@media (max-width: 48em) {
	.u-szlaczek2 {
		--tail-w: 11.25rem;
		--tail-h: 1.25rem;
		--szl-gap: 0.5rem;
	}
}

@media (max-width: 26.25em) {
	.u-szlaczek2 {
		--tail-w: 8.75rem;
		--tail-h: 1rem;
		--szl-gap: 0.375rem;
	}
}

/* ========== U-szlaczek3 — 2 SVG (linia + ogon), na szerokość napisu ========== */
.u-szlaczek3 {
	--szl-gap: 0.05rem;
	--szl-h: 1rem;
	--tail-w: calc(var(--szl-h) * 11.6 / 12.955);
	position: relative;
	display: inline-block;
	width: fit-content;
	text-decoration: none !important;
	padding-bottom: calc(var(--szl-gap) + var(--szl-h));
	color: inherit;
}
.u-szlaczek3:has(.u-szlaczek3__inner) {
	padding-bottom: 0;
}

/* Wrapper tylko na szerokość tekstu; dekor ~10% dłuższy niż napis. */
.u-szlaczek3__inner {
	display: inline-block;
	width: fit-content;
	position: relative;
	padding-bottom: calc(var(--szl-gap) + var(--szl-h));
	overflow: visible;
}

.u-szlaczek3__decor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--szl-h);
	display: flex;
	align-items: flex-end;
	gap: 0;
	pointer-events: none;
}

.u-szlaczek3__line {
	flex: 1 1 auto;
	min-width: 0.5rem;
	height: var(--szl-h);
	overflow: hidden;
	transform: translateX(-0.12rem); /* lewa linia trochę w lewo, prawy ogon bez zmian */
}

.u-szlaczek3__tail {
	flex: 0 0 auto;
	height: var(--szl-h);
	width: var(--tail-w);
	margin-left: -2px;
	overflow: visible;
}

.u-szlaczek3__line svg,
.u-szlaczek3__tail svg {
	height: 100%;
	display: block;
}

.u-szlaczek3__line svg {
	width: 100%;
	/* preserveAspectRatio="none" w SVG — linia rozciąga się do kontenera, zawsze widoczna */
}
.u-szlaczek3__tail svg {
	width: auto;
}

.u-szlaczek3__tail svg path,
.u-szlaczek3__tail svg polygon {
	vector-effect: non-scaling-stroke;
}

.u-szlaczek3:focus-visible {
	outline: 0.125rem solid currentColor;
	outline-offset: 0.2rem;
}

@media (max-width: 48em) {
	.u-szlaczek3 {
		--szl-h: 1.375rem;
		--szl-gap: 0.5rem;
	}
}

@media (max-width: 26.25em) {
	.u-szlaczek3 {
		--szl-h: 1.125rem;
		--szl-gap: 0.375rem;
	}
}

/* Gutenberg / entry content — jeden typography scope (single + page) */
.entry-content {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--text);
	max-width: var(--content-width);
	overflow-wrap: break-word;
	word-break: break-word;
}
/* Nagłówki: hierarchia SEO (h2–h6), spójne rozmiary */
.entry-content h1.wp-block-heading { font-size: 45px; }
.entry-content h2 { font-size: var(--heading-2); margin: var(--space-6) 0 var(--space-3); font-weight: 700; line-height: var(--leading-tight); }
.entry-content h3 { font-size: var(--heading-3); margin: var(--space-5) 0 var(--space-2); font-weight: 600; }
.entry-content h4 { font-size: var(--heading-4); margin: var(--space-4) 0 var(--space-2); font-weight: 600; }
.entry-content h5 { font-size: var(--heading-5); margin: var(--space-4) 0 var(--space-2); font-weight: 600; }
.entry-content h6 { font-size: var(--heading-6); margin: var(--space-4) 0 var(--space-2); font-weight: 600; }
.entry-content p { margin: 0 0 var(--space-4); }
.entry-content a { color: var(--accent); }
.entry-content ul, .entry-content ol { margin: 0 0 var(--space-4); padding-left: 1.5rem; }
.entry-content blockquote { margin: var(--space-5) 0; padding-left: var(--space-4); border-left: none; border-image: none; font-style: italic; color: var(--muted); }
.entry-content blockquote cite { font-size: var(--text-sm); font-style: normal; color: var(--muted); display: block; margin-top: var(--space-2); }
.entry-content img { margin: var(--space-4) 0; }
.entry-content hr { border: 0; border-top: 0.0625rem solid #ddd; margin: var(--space-6) 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.entry-content th, .entry-content td { border: 0.0625rem solid #ddd; padding: var(--space-2) var(--space-3); text-align: left; }
.entry-content th { background: #f5f5f5; }
.entry-content .wp-block-image img { margin: calc(var(--space-4) * 2.5) 0; }
.entry-content .wp-block-separator { margin: var(--space-6) 0; }
/* Code / pre (blok Code) */
.entry-content pre,
.entry-content .wp-block-code code { font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace; font-size: var(--text-sm); line-height: var(--leading-normal); }
.entry-content .wp-block-code { margin: var(--space-5) 0; padding: var(--space-4); background: #f5f5f5; border-radius: var(--radius); overflow-x: auto; border: 0.0625rem solid #e0e0e0; }
.entry-content .wp-block-code code { padding: 0; background: none; }
/* Pullquote (cytat wyróżniony) */
.entry-content .wp-block-pullquote { margin: var(--space-6) 0; padding: var(--space-5); border: none; border-left: 0.25rem solid var(--accent); font-size: var(--text-lg); font-style: italic; color: var(--muted); }
.entry-content .wp-block-pullquote blockquote { margin: 0; padding: 0; border: none; }
.entry-content .wp-block-pullquote cite { font-size: var(--text-sm); font-style: normal; margin-top: var(--space-2); }
/* Wiersz / poezja (Verse) */
.entry-content .wp-block-verse { font-family: inherit; white-space: pre-wrap; margin: var(--space-5) 0; padding: var(--space-4) 0; font-size: var(--text-base); line-height: 1.7; }
/* Inline: sub, sup */
.entry-content sub, .entry-content sup { font-size: 0.75em; line-height: 0; vertical-align: baseline; position: relative; }
.entry-content sup { top: -0.4em; }
.entry-content sub { bottom: -0.2em; }
/* Przycisk (Gutenberg) */
.entry-content .wp-block-button__link { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; border-radius: var(--radius); margin: var(--space-2) 0; transition: opacity 0.2s ease; }
.entry-content .wp-block-button__link:hover { opacity: 0.9; }
/* Plik do pobrania */
.entry-content .wp-block-file { margin: var(--space-4) 0; }
.entry-content .wp-block-file a { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Galeria (minimalnie) */
.entry-content .wp-block-gallery { margin: var(--space-5) 0; }
.entry-content .wp-block-gallery figcaption { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); }
/* Kolumny */
.entry-content .wp-block-columns { margin: var(--space-5) 0; gap: var(--space-4); }
.entry-content .wp-block-columns .wp-block-column { min-width: 0; }

/* ========== koniec FOUNDATION ========== */

/* Skip link (a11y) */
.skip-link,
.screen-reader-text {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: #000;
	color: #fff;
	text-decoration: none;
	z-index: 100000;
	top: 0;
	left: 0;
}

/* Focus visible */
:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.125rem;
}

/* ---- Site header (sticky + blur, auto-hide, full-screen mobile) ---- */
/* Przy 1920px: wys. 171px, logo 117.7px, odsunięcie logo 76px, menu 83px od krawędzi. Menu: 25px medium line-height 43px. */
:root {
	--header-height: clamp(4rem, 8vw, 10.6875rem);
	--header-height-sticky: clamp(3rem, 5.5vw, 5rem);
	--header-color: #0558DA;
	--header-font-nav: var(--font-sans);
	--header-font-logo: var(--font-sans);
	--header-transition: 260ms ease;
	--header-padding-left: var(--page-margin-x);
	--header-padding-right: var(--page-margin-x);
	--header-logo-width: clamp(4rem, 6.2vw, 7.35625rem);
	--nav-link-size: clamp(1rem, 1.3vw, 1.5625rem);
	--nav-link-line: 1.72;
	/* Przy 1920px przycisk Blog ma szer. 183px — padding daje efekt (bez sztywnej width) */
	--nav-link-padding-inline: clamp(0.5rem, 3.35vw, 4rem);
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--header-height);
	background: #fff;
	box-shadow: none;
	--header-height-ease: 400ms ease;
	transition: transform var(--header-transition), height var(--header-height-ease), background var(--header-transition), box-shadow var(--header-transition), backdrop-filter var(--header-transition), -webkit-backdrop-filter var(--header-transition), pointer-events var(--header-transition);
}

.site-header--hidden {
	transform: translateY(-110%);
	pointer-events: none;
}

.site-header--sticky {
	height: var(--header-height-sticky);
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(1rem);
	-webkit-backdrop-filter: blur(1rem);
	box-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.06);
}

.site-header--sticky .site-header__inner {
	align-items: center;
	padding-bottom: 0;
}

.site-header--sticky .site-header__logo-img {
	width: calc(var(--header-logo-width) * 0.82);
}

@supports not (backdrop-filter: blur(1rem)) {
	.site-header--sticky {
		background: rgba(255, 255, 255, 0.95);
	}
}

.site-header__inner {
	max-width: 120rem;
	margin: 0 auto;
	padding: 0 var(--header-padding-right) calc(var(--header-height) * 0.2) var(--header-padding-left);
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
	transition: padding-bottom 400ms ease;
}

.site-header__brand {
	display: flex;
	align-items: center;
	color: var(--header-color);
	text-decoration: none;
	font-family: var(--header-font-logo);
	font-size: clamp(1.125rem, 2.5vw, 1.4375rem);
	font-weight: 400;
	line-height: 1.2;
}

.site-header__brand:hover {
	color: var(--header-color);
	text-decoration: none;
	opacity: 0.9;
}

.site-header__logo-img {
	display: block;
	width: var(--header-logo-width);
	height: auto;
	object-fit: contain;
	transition: width 400ms ease;
}

/* Desktop nav */
.site-nav {
	display: none;
}

.site-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.site-nav__menu li {
	position: relative;
}

.site-nav .u-szlaczek2,
.site-nav .u-szlaczek3 {
	margin: 0 0.5rem;
	padding-left: var(--nav-link-padding-inline);
	padding-right: var(--nav-link-padding-inline);
	color: var(--header-color);
	font-family: var(--header-font-nav);
	font-size: var(--nav-link-size);
	font-weight: 500;
	line-height: var(--nav-link-line);
}

.site-nav .u-szlaczek2 .u-szlaczek2__tail path {
	opacity: 0;
}

.site-nav .u-szlaczek2:hover .u-szlaczek2__tail path,
.site-nav .current-menu-item .u-szlaczek2 .u-szlaczek2__tail path {
	opacity: 1;
}

.site-nav .u-szlaczek2::after,
.site-nav .u-szlaczek2::before {
	opacity: 0;
}

.site-nav .u-szlaczek2:hover::after,
.site-nav .u-szlaczek2:hover::before,
.site-nav .current-menu-item .u-szlaczek2::after,
.site-nav .current-menu-item .u-szlaczek2::before {
	opacity: 1;
}

.site-nav .u-szlaczek3 {
	/* 0rem (nie 0) — unitless 0 w calc() może psuć layout */
	--szl-gap: 0rem;
}
.site-nav .u-szlaczek3__inner {
	/* Odstęp szlaczka od napisu w menu */
	padding-bottom: calc(var(--szl-gap) + var(--szl-h) * 0.75);
}
.site-nav .u-szlaczek3 .u-szlaczek3__decor {
	opacity: 0;
	width: 110%;
	right: auto;
}

.site-nav .u-szlaczek3:hover .u-szlaczek3__decor,
.site-nav .current-menu-item .u-szlaczek3 .u-szlaczek3__decor {
	opacity: 1;
}

/* Mobile FAB (nav-fab) — fixed bottom-right, min 48×48 */
.nav-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: 3rem;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: none;
	border-radius: 0;
	background: #fff;
	color: var(--header-color);
	cursor: pointer;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
	border: 0.125rem solid var(--header-color);
	position: relative;
	z-index: 1002;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s, box-shadow 0.2s;
}

.nav-fab:hover {
	opacity: 0.95;
}

.nav-fab:focus-visible {
	outline: 0.125rem solid var(--header-color);
	outline-offset: 0.25rem;
}

.nav-fab__icon {
	display: block;
	width: 1.25rem;
	height: 0.1875rem;
	background: currentColor;
	position: relative;
	margin: 0 auto;
	transition: opacity 0.26s ease;
}

.nav-fab__icon::before,
.nav-fab__icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.1875rem;
	background: currentColor;
	transition: transform 0.26s ease;
}

.nav-fab__icon::before {
	top: -0.5rem;
}

.nav-fab__icon::after {
	top: 0.5rem;
}

/* Ukrywamy tylko środkową linię hamburgera; ::before/::after tworzą X */
.nav-fab[aria-expanded="true"] .nav-fab__icon {
	background: transparent;
}

.nav-fab[aria-expanded="true"] .nav-fab__icon::before,
.nav-fab[aria-expanded="true"] .nav-fab__icon::after {
	top: 0;
	background: #fff;
}

.nav-fab[aria-expanded="true"] .nav-fab__icon::before {
	transform: rotate(45deg);
}

.nav-fab[aria-expanded="true"] .nav-fab__icon::after {
	transform: rotate(-45deg);
}

/* Otwarte menu: FAB z białym X (widoczny na niebieskim overlay) — ikona biała, żeby nie zlewała się z tłem */
body.menu-open .nav-fab[aria-expanded="true"] {
	background: var(--header-color);
	border-color: #fff;
	color: #fff;
}

body.menu-open .nav-fab[aria-expanded="true"] .nav-fab__icon::before,
body.menu-open .nav-fab[aria-expanded="true"] .nav-fab__icon::after {
	background-color: #fff;
}

/* Full-screen mobile menu */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1001;
	display: block;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.26s ease, visibility 0.26s ease;
}

.mobile-menu[hidden] {
	display: none !important;
}

.mobile-menu.is-open {
	display: block !important;
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: var(--header-color);
	cursor: pointer;
}

.mobile-menu__panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 2rem);
	transform: translateY(-0.5rem);
	transition: transform 0.26s ease;
	pointer-events: none;
}

.mobile-menu__panel > * {
	pointer-events: auto;
}

.mobile-menu.is-open .mobile-menu__panel {
	transform: translateY(0);
}

.mobile-menu__nav {
	width: 100%;
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.mobile-menu__list li {
	position: relative;
}

.mobile-menu__list .u-szlaczek2,
.mobile-menu__list .u-szlaczek3 {
	display: inline-block;
	min-height: 2.75rem;
	padding: 1rem 0.5rem 1rem;
	color: #fff;
	font-family: var(--header-font-nav);
	font-size: var(--nav-link-size);
	font-weight: 700;
	line-height: var(--nav-link-line);
	-webkit-tap-highlight-color: transparent;
}

.mobile-menu__list .u-szlaczek3 {
	--szl-h: 0.75rem;
	--szl-gap: 0.375rem;
}

.mobile-menu__list .u-szlaczek2 .u-szlaczek2__tail path {
	opacity: 0;
}

.mobile-menu__list .u-szlaczek2:hover .u-szlaczek2__tail path,
.mobile-menu__list .u-szlaczek2:focus-visible .u-szlaczek2__tail path,
.mobile-menu__list .current-menu-item .u-szlaczek2 .u-szlaczek2__tail path {
	opacity: 1;
}

.mobile-menu__list .u-szlaczek2::after,
.mobile-menu__list .u-szlaczek2::before {
	opacity: 0;
}

.mobile-menu__list .u-szlaczek2:hover::after,
.mobile-menu__list .u-szlaczek2:hover::before,
.mobile-menu__list .u-szlaczek2:focus-visible::after,
.mobile-menu__list .u-szlaczek2:focus-visible::before,
.mobile-menu__list .current-menu-item .u-szlaczek2::after,
.mobile-menu__list .current-menu-item .u-szlaczek2::before {
	opacity: 1;
}

.mobile-menu__list .u-szlaczek3 .u-szlaczek3__decor {
	opacity: 0;
	width: 110%;
	right: auto;
}

.mobile-menu__list .u-szlaczek3:hover .u-szlaczek3__decor,
.mobile-menu__list .u-szlaczek3:focus-visible .u-szlaczek3__decor,
.mobile-menu__list .current-menu-item .u-szlaczek3 .u-szlaczek3__decor {
	opacity: 1;
}

.mobile-menu__list .u-szlaczek2:focus-visible,
.mobile-menu__list .u-szlaczek3:focus-visible {
	outline: 0.125rem solid #fff;
	outline-offset: 0.25rem;
}

/* Desktop: pokaż site-nav, ukryj FAB; header 171px przy 1920px */
@media (min-width: 64em) {
	:root {
		--header-height: clamp(5.5rem, 8.9vw, 10.6875rem);
		--header-height-sticky: clamp(3.5rem, 5.5vw, 5.5rem);
	}
	.site-nav {
		display: block;
	}
	.nav-fab {
		display: none;
	}
}

/* Mobile: FAB i to-top w jednym rzędzie — ten sam rozmiar (3.5rem) i ta sama wysokość (bottom) */
@media (max-width: 63.9375em) {
	.nav-fab {
		display: flex !important;
		position: fixed;
		right: clamp(1rem, 4vw, 1.5rem);
		bottom: clamp(1rem, 4vw, 1.5rem);
		z-index: 1002;
		width: 3.5rem;
		height: 3.5rem;
		min-width: 3.5rem;
		min-height: 3.5rem;
	}
	body.menu-open .nav-fab {
		right: calc(clamp(1rem, 4vw, 1.5rem) + var(--scrollbar-width, 0));
	}
	body.menu-open .nav-fab[aria-expanded="true"] {
		background: var(--header-color);
		border-color: #fff;
		color: #fff;
	}
	body.menu-open .nav-fab[aria-expanded="true"] .nav-fab__icon::before,
	body.menu-open .nav-fab[aria-expanded="true"] .nav-fab__icon::after {
		background-color: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition-duration: 0.01ms;
	}
	.site-header__inner,
	.site-header__logo-img {
		transition-duration: 0.01ms;
	}
	.mobile-menu,
	.mobile-menu__panel {
		transition-duration: 0.01ms;
	}
	.nav-fab__icon::before,
	.nav-fab__icon::after,
	.nav-fab__icon span {
		transition-duration: 0.01ms;
	}
}

/* Przy otwartym menu: blokada scrollu strony */
body.menu-open {
	overflow: hidden;
}

/* Przy otwartym menu: header nad overlayem; FAB jest poza headerem i ma własny z-index 1002 */
body.menu-open .site-header {
	z-index: 1002;
}

/* ---- Site footer — 4 kolumny ≈338px, odstęp 80px przy 1920px (responsywne) ---- */
:root {
	--footer-color: #0558DA;
	--footer-heading-size: clamp(1.25rem, 1.4vw, 1.5625rem);
	--footer-body-size: clamp(0.875rem, 1vw, 0.9375rem);
	--footer-body-line: 1.33;
	--footer-bar-height: clamp(4rem, 10vw, 5.75rem);
	/* Przy 1920px: 338px = 21.125rem, 80px = 5rem; 4×338 + 3×80 = 1592px = 99.5rem */
	--footer-col-width: 21.125rem;
	--footer-gap: 5rem;
	--footer-grid-max: 99.5rem;
}

.site-footer {
	margin-top: var(--spacing-lg);
	font-family: var(--header-font-nav);
}
@media (max-width: 47.9375em) {
	.site-footer {
		margin-top: clamp(3rem, 8vw, 5rem);
	}
}
@media (max-width: 30em) {
	.site-footer {
		margin-top: clamp(5rem, 16vw, 9rem);
	}
}

.site-footer__top {
	background: #fff;
	padding: clamp(1.5rem, 4vw, 3.5rem) var(--page-margin-x) clamp(2rem, 5vw, 4rem);
	width: 100%;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
}

.site-footer__inner {
	max-width: none;
	width: 100%;
	margin: 0 auto;
}

/* Nagłówek w jednej linii, poniżej treści */
.site-footer__header-wrap {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.site-footer__heading {
	white-space: nowrap;
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	/* Odstęp responsywny: przy 1920 = 80px (5rem), na wąskich ekranach mniejszy */
	gap: clamp(1.5rem, 4.17vw, var(--footer-gap));
}

.site-footer__col--empty {
	min-height: 0;
}

.site-footer__col-heading--nowrap,
.site-footer__line--nowrap {
	white-space: nowrap;
}

@media (max-width: 47.9375em) {
	.site-footer__col--empty {
		display: none;
	}
	.site-footer__heading {
		white-space: normal;
	}
	.site-footer__col-heading--nowrap,
	.site-footer__line--nowrap {
		white-space: normal;
	}
}

.site-footer__col {
	min-width: 0;
}

/* Kolumny 1 i 2: min. szerokość na desktop, żeby długie frazy się nie zawijały */
.site-footer__col--1 {
	min-width: min(100%, var(--footer-col-width));
}
.site-footer__col--2 {
	min-width: min(100%, var(--footer-col-width));
}

.site-footer__heading {
	margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
	font-size: var(--footer-heading-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--footer-color);
}

.site-footer__col-heading {
	margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem);
	font-size: var(--footer-body-size);
	font-weight: 500;
	line-height: var(--footer-body-line);
	color: var(--footer-color);
}

.site-footer__col-heading a {
	color: inherit;
	text-decoration: none;
}

.site-footer__col-heading a:hover {
	text-decoration: underline;
}

.site-footer__col-text--body {
	font-size: var(--footer-body-size);
	font-weight: 500;
	line-height: var(--footer-body-line);
	color: var(--footer-color);
}

.site-footer__col-text--body p {
	margin: 0 0 0.35rem;
}

.site-footer__col-text--body p:last-child {
	margin-bottom: 0;
}

.site-footer__email {
	color: var(--footer-color);
	text-decoration: none;
}

.site-footer__email:hover {
	text-decoration: underline;
}

.site-footer__social {
	margin-top: clamp(0.75rem, 2vw, 1.25rem);
}

.site-footer__social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 0.75rem);
}

.site-footer__social-list li {
	display: flex;
	align-items: center;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	flex-shrink: 0;
	line-height: 0;
	background: var(--footer-color);
	color: #fff;
	text-decoration: none;
	transition: opacity 0.2s;
	box-sizing: border-box;
}

.site-footer__social-link svg {
	align-self: center;
}

/* Pierwszy przycisk (niebieskie tło) jest wyżej — przesuwamy cały link w dół do linii z resztą. */
.site-footer__social-list > li:first-child .site-footer__social-link {
	transform: translateY(0.125rem);
}

.site-footer__social-link:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}

.site-footer__social-link:focus-visible {
	outline: 0.125rem solid #fff;
	outline-offset: 0.125rem;
}

.site-footer__social-icon {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	min-width: 1.125rem;
	min-height: 1.125rem;
	object-fit: contain;
	vertical-align: middle;
	fill: currentColor;
	vertical-align: middle;
	/* Wyrównanie 1:1 – ikony w jednej linii (np. X ma inny viewBox content) */
	position: relative;
	top: 0;
}

/* Do 1355px: 1 kolumna w stopce (czytelna); pusty col ukryty */
@media (max-width: 84.6875em) {
	.site-footer__col--empty {
		display: none;
	}
}
@media (min-width: 84.6875em) {
	/* 4 kolumny od 1355px */
	.site-footer__cols {
		grid-template-columns: repeat(4, 1fr);
	}
}

.site-footer__bar {
	height: var(--footer-bar-height);
	background: var(--footer-color);
	display: flex;
	align-items: center;
}
.site-footer__bar-inner {
	width: 100%;
	max-width: 120rem;
	margin: 0 auto;
	padding: 0 var(--page-margin-x);
}
.site-footer__bar-content {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
}
.site-footer__bar-credit a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.2s ease;
}
.site-footer__bar-credit a:hover {
	color: #fff;
}
.site-footer__bar-credit--right {
	text-align: right;
}
@media (max-width: 47.9375em) {
	.site-footer__bar-inner {
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
	}
	/* Tylko DESIGN i WDROŻENIE wyśrodkowane w pasku; reszta stopki (Spotkajmy się!, kontakt, ikony) — do lewej */
	.site-footer__bar-content {
		flex-direction: column;
		gap: 0.25rem;
		justify-content: center;
		align-items: center;
	}
	.site-footer__bar-credit,
	.site-footer__bar-credit--right {
		text-align: center;
	}
}

/* ---- To-top (arrow up) ---- */
.to-top {
	position: fixed;
	right: var(--space-5);
	bottom: 5.25rem;
	left: auto;
	z-index: 999;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.5rem);
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	box-shadow: var(--shadow);
	-webkit-tap-highlight-color: transparent;
}
.to-top:not(.is-visible) {
	pointer-events: none;
	opacity: 0 !important;
	visibility: hidden !important;
}
.to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}
.to-top:hover {
	opacity: 0.95;
}
.to-top:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
}
.to-top__icon {
	display: block;
	width: 1rem;
	height: 1rem;
	margin: 0 auto;
	border-left: 0.2em solid currentColor;
	border-top: 0.2em solid currentColor;
	transform: rotate(45deg);
	position: relative;
	top: 0.25rem;
}
@media (max-width: 63.9375em) {
	.to-top {
		left: clamp(1rem, 4vw, 1.5rem);
		right: auto;
		bottom: clamp(1rem, 4vw, 1.5rem);
		width: 3.5rem;
		height: 3.5rem;
	}
}
@media (min-width: 64em) {
	.to-top {
		left: auto;
		right: var(--space-5);
		bottom: var(--space-6);
	}
}
@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}

/* ---- Main ---- */
.site-main {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: var(--spacing) var(--page-margin-x);
}

/* ---- Home i zakładka Blog — pełna szerokość, jak HOME (sekcja .home-blog do marginesów) ---- */
.home.site-main,
.archive--blog.site-main {
	padding: 0;
	max-width: none;
}

/* Hero: Figma — cream bg, lewa niebieska (#0558DA), prawa czarna + zdjęcie. */
.home-hero {
	background: #F7F5EF;
	min-height: min(57rem, 95vh);
	position: relative;
	padding-bottom: clamp(2rem, 4vw, 4.375rem);
}
.home-hero__inner {
	display: grid;
	grid-template-columns: 0.48fr 0.52fr;
	max-width: none;
	width: 100%;
	min-height: min(53rem, 92vh);
	margin: 0;
	padding-left: 0;
	padding-right: var(--page-margin-x);
	box-sizing: border-box;
}
.home-hero__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.home-hero__col--left {
	background: #0558DA;
	padding: clamp(2rem, 5vw, 7.875rem) var(--page-margin-x) clamp(2rem, 6vw, 10rem);
	padding-left: var(--page-margin-x);
	align-items: flex-end;
	flex-direction: row;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 3rem);
}
.home-hero__col--right {
	background: #000;
	padding: 0;
	overflow: hidden;
	position: relative;
}
/* Logo: 636.07px przy viewport 1920px → 33.13vw, max 39.75rem */
.home-hero__logo {
	flex-shrink: 0;
	width: min(33.13vw, 39.75rem);
}
.home-hero__logo img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0) invert(1);
}
.home-hero__text {
	margin: 0;
	max-width: 26rem;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(1.125rem, 2.2vw, 2.1875rem);
	line-height: 1.23;
	color: #fff;
	flex: 1;
	min-width: min(100%, 18rem);
	overflow-wrap: break-word;
	word-break: break-word;
}
.home-hero__image-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
.home-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	outline: none;
	border: none;
}

/* Sekcja BLOG: rozciągnięta do marginesów (globalnie jak hero/kontakt). */
.home-blog {
	padding: calc(3 * var(--spacing-lg)) var(--page-margin-x);
	margin: 0 auto;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	overflow-x: hidden;
}

.home-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: clamp(1.25rem, 2vw, 1.875rem);
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.home-blog__tile {
	position: relative;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
	aspect-ratio: var(--blog-tile-aspect);
}

.home-blog__tile--post {
	background: var(--accent);
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-blog__tile--post:hover {
	transform: translateY(-0.125rem);
	box-shadow: var(--shadow);
}

.home-blog__tile-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.5rem, 4vw, 5.25rem) clamp(1.5rem, 3vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
	color: inherit;
	text-decoration: none !important;
}

.home-blog__tile-link:hover {
	color: #fff;
	text-decoration: none !important;
}

/* Zawsze zajmuje tę samą wysokość (min-height), żeby tytuł zaczynał się równo z/bez ikon */
.home-blog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
	min-height: calc(clamp(2rem, 4vw, 3.25rem) + clamp(0.75rem, 2vw, 1.25rem));
	box-sizing: border-box;
}

.home-blog__tag-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(2rem, 4vw, 3.25rem);
	height: clamp(2rem, 4vw, 3.25rem);
	background: #fff;
}

.home-blog__tag-icon img {
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
}

.home-blog__tag-placeholder {
	display: block;
	font-family: var(--blog-font);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	color: #5a524a;
}

/* Tytuł: szlaczek; odstęp pod tytułem (między tytułem a leadem) */
.home-blog__tile-title {
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	font-family: var(--blog-font);
	font-size: var(--blog-title-size);
	font-weight: 700;
	line-height: var(--blog-title-line);
	color: #fff;
}

.home-blog__tile-title .u-szlaczek2,
.home-blog__tile-title .u-szlaczek3 {
	color: inherit;
}
.home-blog__tile-title .u-szlaczek3 {
	--szl-gap: 2rem;
	/* Szlaczek na szerokość nagłówka (tekstu), nie całego boksu; odstęp pod tekstem */
	width: fit-content;
	max-width: 100%;
	display: inline-block;
}

/* Lid: na dole boksu, zaraz nad przyciskiem (margin-top: auto przykleja do dołu); line-clamp żeby nie wychodzić poza kafelek */
.home-blog__tile-excerpt {
	margin: auto 0 0.75rem 0;
	font-family: var(--blog-font);
	font-size: var(--blog-lid-size);
	font-weight: 400;
	line-height: var(--blog-lid-line);
	color: #fff;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* Przycisk CTA: biała ramka, ostre rogi, bez szlaczka (1:1 z projektem) */
.home-blog__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	font-family: var(--blog-font);
	font-size: var(--blog-btn-size);
	font-weight: 500;
	line-height: var(--blog-btn-line);
	color: #FBFBF9;
	border: 0.1875rem solid #FBFBF9;
	border-radius: 0;
	background: transparent;
	text-decoration: none !important;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.home-blog__tile-link:hover .home-blog__btn {
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.home-blog__btn {
		transition: none;
	}
	.home-blog__tile--post {
		transition: none;
	}
	.home-blog__tile--post:hover {
		transform: none;
	}
}

.home-blog__tile--image {
	background: #000;
	display: block;
	position: relative;
	overflow: hidden;
}

/* Zdjęcie zawsze COVER — wypełnia cały kafelek (pełna wysokość i szerokość) */
.home-blog__tile--image .home-blog__tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: center center;
	outline: none;
	border: none;
	display: block;
}

.home-blog__tile--empty {
	background: #1a1a1a;
}

/* Ostatnia sekcja home — układ 1:1 z Figmy (1920×1143): tło, coral, czarna kafelka, teksty */
.home-section-values {
	background: #F7F5EF;
	padding: 0;
	margin: 0;
}

/* Kontener zachowuje proporcje Figmy 1920×1143 */
.home-section-values__wrap {
	position: relative;
	width: 100%;
	max-width: 120rem;
	margin: 0 auto;
	aspect-ratio: 1920 / 1143;
	min-height: 18rem;
	overflow: visible;
}

.home-section-values__wrap > * {
	position: absolute;
}
/* Na desktopie content-box jest przezroczysty dla layoutu — heading i text jak w oryginale (Figma) */
@media (min-width: 48em) {
	.home-section-values__content-box {
		display: contents;
	}
}

/* Tło całe #F7F5EF */
.home-section-values__bg {
	inset: 0;
	background: #F7F5EF;
}

/* Lewy blok coral #FF4E31 — Figma: 646×1143, left 0, top 0 */
.home-section-values__coral {
	left: 0;
	top: 0;
	width: 33.6458%;
	height: 100%;
	background: #FF4E31;
}

/* Czarna kafelka — Figma: 949×771, left 80, top 284 */
.home-section-values__tile {
	left: 4.1667%;
	top: 24.847%;
	width: 49.427%;
	height: 67.454%;
	background: #000;
	overflow: hidden;
	border: none;
	outline: none;
}

.home-section-values__tile .home-section-values__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: none;
	outline: none;
}

/* Nagłówek — Figma: 537px, left 1124, top 85; 60px Roboto 700, line-height 65px */
.home-section-values__heading {
	position: absolute;
	left: 58.5417%;
	top: 7.436%;
	width: 27.96875%;
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(1.25rem, 3.125vw, 3.75rem);
	font-weight: 700;
	line-height: 1.083;
	color: #FF4E31;
	word-wrap: break-word;
}

/* Tekst mniejszy — Figma: 377px, left 1381, top 499; 25px Roboto 500, line-height 30px */
.home-section-values__text {
	position: absolute;
	left: 71.927%;
	top: 43.657%;
	width: 19.635%;
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(0.875rem, 1.3vw, 1.5625rem);
	font-weight: 500;
	line-height: 1.2;
	color: #FF4E31;
	word-wrap: break-word;
	overflow-x: visible;
	overflow-y: visible;
}

.home-section-values__text p {
	margin: 0 0 0.5rem;
}

.home-section-values__text p:last-child {
	margin-bottom: 0;
}

/* ---- Post card ---- */
.post-card {
	--accent: var(--accent-1);
}
.post-card__link {
	display: block;
	color: inherit;
	border: 0.0625rem solid #eee;
	padding: 0;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.post-card__link:hover {
	border-color: var(--accent);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.post-card__link:focus-visible {
	outline-offset: 0.25rem;
}
.post-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f0f0f0;
}
.post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-card__body {
	padding: 1rem;
}
.post-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: var(--accent);
}
.post-card__excerpt {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	color: #555;
}
.post-card__date {
	font-size: 0.85rem;
	color: #888;
}

/* ---- Archive ---- */
.archive__header {
	margin-bottom: var(--spacing);
}
.archive__title {
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0;
}
.home-blog .archive__title {
	margin-bottom: var(--spacing-lg);
}
.archive__grid {
	display: grid;
	gap: var(--spacing);
	grid-template-columns: 1fr;
}
.archive .wp-block-query-pagination,
.pagination,
.home-blog .archive__pagination {
	width: 100%;
	margin-top: clamp(3rem, 8vw, 5rem);
	padding-top: var(--spacing);
	border-top: 0.375rem solid var(--accent-4);
	box-sizing: border-box;
}
/* Sekcja blog: jedna linia zamiast dwóch — border tylko na wewnętrznym wrapperze */
.home-blog .archive__pagination {
	border-top: none;
}
.home-blog .archive__pagination > * {
	border-top: 0.375rem solid var(--accent-4);
	box-sizing: border-box;
}
.archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.archive .nav-links a,
.archive .nav-links span {
	padding: 0.25rem 0.75rem;
	border: 0.0625rem solid #ddd;
}
.archive .nav-links .current {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* ---- Single post (layout PDF/Figma: hero, kolumna, share, podsumowanie) ---- */
.single-post {
	padding: 0;
	padding-top: var(--header-height, 6.25rem);
	max-width: none;
}
/* Na single: przerwa między białą sekcją a stopką ma tło #F7F5EF; treść od dolnej krawędzi headera */
body.single-post {
	background: #F7F5EF;
	padding-top: 0;
}
.single-post__article {
	position: relative;
	margin-bottom: clamp(3rem, 8vw, 6rem);
	/* 55px od góry hero, responsywnie: min 20px, 2.86vw, max 55px (3.4375rem) */
	--single-hero-offset: clamp(1.25rem, 2.86vw, 3.4375rem);
	--single-hero-height: clamp(18rem, 61vw, 73rem);
	--single-hero-margin-y: clamp(1.25rem, 2.5vw, 2.5rem); /* 40px góra/dół przy zdjęciu */
}
.single-post__bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	background: #F7F5EF;
}
.single-post__hero {
	position: relative;
	width: 100%;
}
.single-post__hero--has-img {
	height: var(--single-hero-height);
	min-height: 0;
	margin-bottom: var(--single-hero-margin-y);
}
.single-post__hero-img-wrap {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 91.4%;
	max-width: 109.6rem;
	z-index: 1;
	overflow: hidden;
}
.single-post__hero-img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: middle;
}
.single-post__hero-overlay {
	position: absolute;
	inset: 0;
	background: var(--accent);
	opacity: 0.45;
	pointer-events: none;
}
/* Biała sekcja — zdjęcie w tle nieruchome; biała sekcja odsunięta od góry sekcji ze zdjęciem o 55px (responsywnie) */
.single-post__content-wrap {
	max-width: min(76rem, 95vw);
	margin: 0 auto;
	padding: var(--single-hero-offset) var(--page-margin-x) clamp(1.5rem, 3vw, 3.4rem);
	background: #fff;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
/* Wciągamy białą sekcję nad hero: górna krawędź białej = 55px od góry hero (margin w flow, stopka OK); tylko margin-bottom hero */
.single-post__article--has-hero .single-post__content-wrap {
	--single-offset-px: 1.25rem; /* 20px na małych ekranach */
	margin-top: calc(var(--single-offset-px) - var(--single-hero-height) - var(--single-hero-margin-y));
}
@media (min-width: 48em) {
	.single-post__article--has-hero .single-post__content-wrap {
		--single-offset-px: 2rem;
	}
}
@media (min-width: 64em) {
	.single-post__article--has-hero .single-post__content-wrap {
		--single-offset-px: 3.4375rem; /* 55px */
	}
}
/* Social media: pierwszy element w białej sekcji, górny prawy róg — NAD content-inner */
.single-post__share-bar {
	position: absolute;
	top: var(--single-hero-offset);
	right: var(--page-margin-x);
	z-index: 1;
}
.single-post__content-inner {
	min-width: 0;
	/* Miejsce na social w górnym prawym rogu — tytuł zaczyna się poniżej */
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.single-post__header {
	margin-bottom: 0;
}
.single-post__title {
	font-family: var(--font-sans);
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--accent);
	margin: 0 0 clamp(0.35rem, 1vw, 0.5rem);
	word-wrap: break-word;
}
/* Szlaczek pod tytułem — ten sam co w sekcji WPISY (u-szlaczek3), tylko większy */
.single-post__title .u-szlaczek3 {
	--szl-h: clamp(1.25rem, 2.5vw, 1.75rem);
	--szl-gap: 0.15rem;
	color: var(--accent);
}
.single-post__date {
	display: block;
	font-family: var(--font-sans);
	font-size: clamp(0.875rem, 1.05vw, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--accent);
	margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.single-post__lead {
	font-family: var(--font-sans);
	font-size: clamp(0.9rem, 1.3vw, 1.5625rem);
	font-weight: 700;
	line-height: 1.32;
	color: var(--accent);
	margin: 0 0 clamp(1rem, 2.5vw, 2rem);
	word-wrap: break-word;
}
/* Social media: górny prawy róg sekcji z białym tłem, bez tła paska */
.single-post__share-bar .site-footer__social {
	margin-top: 0;
}
.single-post__share-bar .site-footer__social-link {
	background: var(--accent);
}
.single-post__share-bar .site-footer__social-link:focus-visible {
	outline-color: var(--accent);
}
.single-post__content-inner .single-post__content.entry-content {
	margin-top: 0;
}
.single-post .single-post__content.entry-content {
	max-width: none;
	font-family: var(--font-sans);
	font-size: clamp(0.9rem, 1.3vw, 1.5625rem);
	font-weight: 400;
	line-height: 1.32;
	color: #1a1a1a;
}
.single-post .single-post__content.entry-content p,
.single-post .single-post__content.entry-content li,
.single-post .single-post__content.entry-content figcaption {
	font-weight: 400;
}
.single-post .single-post__content.entry-content h2 {
	font-size: clamp(1.5rem, 2.6vw, 3.125rem);
	font-weight: 700;
	line-height: 1.32;
	color: #1a1a1a;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(0.75rem, 1.5vw, 1rem);
}
.single-post .single-post__content.entry-content h3 {
	font-size: clamp(1.25rem, 2.2vw, 2rem);
	font-weight: 600;
	line-height: 1.32;
	color: #1a1a1a;
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 var(--space-2);
}
.single-post .single-post__content.entry-content h4 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: var(--space-4) 0 var(--space-2);
	color: #1a1a1a;
}
.single-post .single-post__content.entry-content h5 {
	font-size: 1rem;
	font-weight: 600;
	margin: var(--space-4) 0 var(--space-2);
	color: #1a1a1a;
}
.single-post .single-post__content.entry-content h6 {
	font-size: 0.875rem;
	font-weight: 600;
	margin: var(--space-4) 0 var(--space-2);
	color: #1a1a1a;
}
.single-post .single-post__content.entry-content a {
	color: var(--accent);
}
/* Gutenberg: styl bloku „Tekst w kolorze akcentu” (Akapit → Styl) */
.single-post .single-post__content.entry-content .wp-block-paragraph.is-style-accent-color {
	color: var(--accent);
}
/* Zdjęcia z Gutenberga — bez obramowania */
.single-post .single-post__content.entry-content .wp-block-image img,
.single-post .single-post__content.entry-content .wp-block-image figure img,
.single-post .single-post__content.entry-content img {
	border: none;
	background: transparent;
}
/* Bloki Gutenberg w single — spójne z designem */
.single-post .single-post__content.entry-content ul,
.single-post .single-post__content.entry-content ol {
	font-weight: 400;
	margin: 0 0 var(--space-4);
	padding-left: 1.5rem;
}
.single-post .single-post__content.entry-content li {
	font-weight: 400;
}
.single-post .single-post__content.entry-content blockquote {
	font-weight: 400;
	font-style: italic;
	margin: var(--space-5) 0;
	padding-left: var(--space-4);
	border-left: none;
	border-image: none;
	color: var(--muted);
}
.single-post .single-post__content.entry-content .wp-block-quote p {
	font-weight: 400;
}
.single-post .single-post__content.entry-content .wp-block-separator {
	border: 0;
	border-top: 0.0625rem solid #ddd;
	margin: var(--space-6) 0;
}
.single-post .single-post__content.entry-content strong {
	font-weight: 700;
}
.single-post .single-post__content.entry-content .wp-block-image {
	margin: var(--space-4) 0;
}
.single-post .single-post__content.entry-content .wp-block-image figcaption {
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--muted);
	margin-top: var(--space-2);
}
.single-post .single-post__content.entry-content .wp-block-code,
.single-post .single-post__content.entry-content .wp-block-pullquote,
.single-post .single-post__content.entry-content .wp-block-verse {
	font-size: inherit;
}
.single-post .single-post__content.entry-content blockquote cite,
.single-post .single-post__content.entry-content .wp-block-pullquote cite {
	font-size: var(--text-sm);
}
.single-post__summary {
	margin-top: clamp(2rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--accent);
	color: #fff;
	box-sizing: border-box;
}
.single-post__summary-title {
	font-family: var(--font-sans);
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
	color: #fff;
}
.single-post__summary-text {
	font-family: var(--font-sans);
	font-size: clamp(0.9rem, 1.3vw, 1.5625rem);
	font-weight: 500;
	line-height: 1.32;
	color: #fff;
}
.single-post__summary-text p {
	margin: 0 0 0.75em;
	color: #fff;
}
.single-post__summary-text p:last-child {
	margin-bottom: 0;
}
@media (min-width: 75rem) {
	.single-post__content-wrap {
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
	}
}

/* ---- Single post: widok mobilny — hero w całości na górze, potem karta (zdjęcie w tle widoczne) ---- */
@media (max-width: 47.9375em) {
	.single-post__article--has-hero {
		--single-hero-height: min(20rem, 55vh);
		--single-hero-margin-y: 0;
	}
	/* Hero na full width, zdjęcie wypełnia prostokąt (object-fit: cover) */
	.single-post__hero-img-wrap {
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
	}
	.single-post__hero-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	/* Biała karta PONIŻEJ hero (bez nakładki) — zdjęcie w całości widoczne */
	.single-post__article--has-hero .single-post__content-wrap {
		margin-top: 1rem;
	}
	.single-post__content-wrap {
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
		padding-top: 1.5rem;
		border-radius: 0;
		box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.06);
	}
	.single-post__share-bar {
		top: 1rem;
		right: var(--page-margin-x);
	}
	.single-post__share-bar .site-footer__social {
		gap: 0.5rem;
	}
	.single-post__share-bar .site-footer__social-list {
		margin-bottom: var(--space-7); /* 40px — tylko na mobilce */
	}
	.single-post__share-bar .site-footer__social-link {
		width: 2.25rem;
		height: 2.25rem;
	}
	/* Odstęp między share-bar (social list) a tytułem — share-bar jest absolute, więc padding przesuwa tytuł w dół */
	.single-post__content-inner {
		padding-top: 6.5rem; /* 1rem (top share-bar) + ~3rem (wys. listy) + 2.5rem (odstęp) */
	}
	/* Tytuł wpisu = ten sam rozmiar/grubość/line-height co h1 w treści (.entry-content h1.wp-block-heading: 45px) */
	.single-post__title {
		font-size: 2.8125rem; /* 45px — jak .entry-content h1.wp-block-heading */
		font-weight: 700;
		line-height: var(--leading-tight);
	}
	.single-post__date,
	.single-post__lead {
		font-size: 0.9rem;
	}
}

/* ---- Page (default) ---- */
.page .entry-header {
	margin-bottom: var(--spacing);
}
.page .entry-title {
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0;
}
.page .entry-content {
	max-width: var(--content-width);
}

/* ---- Kontakt ---- */
.kontakt__header {
	margin-bottom: var(--spacing);
}
.kontakt__title {
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0;
}
.kontakt__content {
	max-width: var(--content-width);
	overflow-wrap: break-word;
	word-break: break-word;
}
.kontakt__row {
	margin: 0 0 1rem;
}
.kontakt__org {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 1rem;
	margin: 1rem 0;
}
.kontakt__org dt {
	margin: 0;
	font-weight: 700;
}
.kontakt__org dd {
	margin: 0;
}
.kontakt__notka {
	margin-top: 1.5rem;
}
.kontakt__social {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.kontakt__row a,
.kontakt__social a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* ---- Kontakt (strona) — pełna szerokość do krawędzi (treść wcięta o --page-margin-x); bez odstępu pod headerem. ---- */
main.site-main.page--kontakt,
.page--kontakt .site-main {
	margin: calc(-1 * var(--header-height, 6.25rem)) 0 0 !important;
	padding: 0;
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}
.kontakt-section {
	position: relative;
	margin: 0;
	min-height: min(100vh, 56.25rem);
	width: 100%;
	box-sizing: border-box;
}
.kontakt-section::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	min-height: 100%;
	background: #F7F5EF;
}
/* Szerokość jak .home-blog — treść (obie kolumny) wcięta o --page-margin-x; padding-top żeby nie chować pod fixed headerem. */
.kontakt-section__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: none;
	min-height: min(56.25rem, 100vh);
	padding: var(--header-height, 6.25rem) var(--page-margin-x) 0;
	box-sizing: border-box;
}
.kontakt-section__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 5vw, 8.5rem) clamp(1.5rem, 2vw, 2.5rem) clamp(2rem, 6vw, 4rem) 0;
}
/* Dymek na górze — tekst „Mateusz Handel” w jednej linii na dużych ekranach */
.kontakt-section__bubble-wrap {
	position: relative;
	display: inline-block;
	max-width: min(28rem, 100%);
	margin-bottom: 1rem;
}
.kontakt-section__bubble-img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}
/* 42px przy 1920px → 2.625rem; jedna linia na dużych szerokościach */
.kontakt-section__bubble-text {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5rem 0.5rem;
	box-sizing: border-box;
	color: #fff;
	font-size: clamp(1.25rem, 2.2vw, 2.625rem);
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
}
.kontakt-section__title {
	color: #0558DA;
	font-family: var(--font-sans);
	font-size: var(--heading-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0 0 0;
	word-wrap: break-word;
}
/* Przerwa 110px między „Spotkajmy się!” a blokiem „Rynek 16…” (responsywnie). */
.kontakt-section__blocks {
	margin-top: clamp(3rem, 5.73vw, 6.875rem);
	display: flex;
	flex-direction: column;
	gap: 0;
}
.kontakt-section__block {
	margin: 0;
}
/* Figma: linia 5px (left: 0), tekst left: 17px — gap 12px; linie 100px / 103px wysokości. */
.kontakt-section__block-with-line {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0.25rem 0;
}
/* Przerwa 30px między sekcjami (responsywnie: clamp ≈ 20–30px). */
.kontakt-section__block-with-line + .kontakt-section__block-with-line {
	margin-top: clamp(1.25rem, 1.56vw, 1.875rem);
}
.kontakt-section__block-with-line .kontakt-section__block {
	margin: 0;
	flex: 1;
	min-width: 0;
}
.kontakt-section__line {
	width: 0.3125rem; /* 5px */
	background: #FF4E31;
	flex-shrink: 0;
	align-self: stretch;
}
/* Sekcja kontakt: font 25px, interlinia 25px (line-height: 1) — ciasno jak na zrzucie. */
.kontakt-section__block-with-line .kontakt-section__block {
	font-size: clamp(1rem, 1.6vw, 1.5625rem); /* jak kontakt@ */
	line-height: 1;
}
.kontakt-section__text {
	color: #FF4E31;
	font-size: clamp(1rem, 1.6vw, 1.5625rem); /* jak kontakt@ */
	font-family: var(--font-sans);
	font-weight: 500;
	line-height: 1;
	margin: 0;
	word-wrap: break-word;
}
.kontakt-section__block-with-line .kontakt-section__block p {
	line-height: 1;
	margin: 0;
}
/* ENTER tylko po pierwszej linii bloku (Rynek 16… / Związek Stowarzyszeń…). */
.kontakt-section__block--address .kontakt-section__text:first-child + .kontakt-section__text,
.kontakt-section__block--org .kontakt-section__text:first-child + .kontakt-section__text {
	margin-top: 1.5625rem; /* 25px = jedna linia */
}
.kontakt-section__hours p {
	margin: 0;
	line-height: 1;
}
/* Przerwa nad emailem: 3rem; pod emailem: 30px (responsywnie). */
.kontakt-section__email {
	margin: 3rem 0 clamp(1.25rem, 1.56vw, 1.875rem);
}
.kontakt-section__email a {
	color: #FF4E31;
	font-size: clamp(1rem, 1.6vw, 1.5625rem);
	font-family: var(--font-sans);
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
}
.kontakt-section__email a:hover {
	text-decoration: underline;
}
/* Te same ikony co w stopce, tło czerwone (jak na zrzucie). */
.kontakt-section__social {
	margin: 0 0 1.5rem;
}
.kontakt-section__social-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.kontakt-section__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	min-width: 3.5rem;
	min-height: 3.5rem;
	background: #FF4E31;
	color: #fff;
	text-decoration: none;
	border-radius: 0;
	transition: opacity 0.2s;
	line-height: 0;
}
/* Pierwsza ikona (X) siedzi wyżej w SVG — wyrównanie do linii z resztą. */
.kontakt-section__social-list > li:first-child .kontakt-section__social-link {
	transform: translateY(0.125rem);
}
.kontakt-section__social-link:hover {
	opacity: 0.9;
}
.kontakt-section__social-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	vertical-align: middle;
}
.kontakt-section__right {
	background: #000;
	position: relative;
	overflow: hidden;
}
.kontakt-section__image-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kontakt-section__image-wrap--empty {
	background: #000;
}
.kontakt-section__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
@media (max-width: 47.9375em) {
	.kontakt-section__inner {
		grid-template-columns: 1fr;
	}
	.kontakt-section__left {
		padding: var(--spacing) 0;
	}
	.kontakt-section__right {
		min-height: min(18rem, 60vmin);
	}
	.kontakt-section__image-wrap {
		position: relative;
		min-height: min(18rem, 60vmin);
	}
	/* Na mobilce dymek węższy (mniej dominuje). */
	.kontakt-section__bubble-wrap {
		max-width: min(16rem, 85vw);
	}
	/* Na mobilce typografia jak globalnie (te same wielkości co reszta strony). */
	.kontakt-section__bubble-text {
		font-size: var(--heading-3);
	}
	.kontakt-section__title {
		font-size: var(--heading-1);
		font-weight: 700;
		line-height: var(--leading-tight);
	}
	.kontakt-section__block-with-line .kontakt-section__block,
	.kontakt-section__text,
	.kontakt-section__block-with-line .kontakt-section__block p,
	.kontakt-section__hours p {
		font-size: var(--text-base);
		line-height: var(--leading-normal);
	}
	.kontakt-section__block--address .kontakt-section__text:first-child + .kontakt-section__text,
	.kontakt-section__block--org .kontakt-section__text:first-child + .kontakt-section__text {
		margin-top: 1em;
	}
	.kontakt-section__email a {
		font-size: var(--text-base);
	}
}

/* Ogólna czytelność na mobile: typografia, overflow na body (jedna strona = jeden scroll); padding-bottom w main, żeby stopka nie wchodziła w sekcję */
@media (max-width: 47.9375em) {
	body {
		font-size: max(1rem, 2.5vw);
		overflow-x: hidden;
	}
	main,
	.site-main {
		min-width: 0;
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
		padding-bottom: var(--spacing-lg);
	}
	.page--kontakt .site-main {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Home: mobile — hero i sekcja w kolumnę, blog 1 kolumna (do 768px) */
@media (max-width: 47.9375em) {
	.home.site-main {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: clamp(5rem, 12vw, 8rem);
	}
	.home-blog {
		min-width: 0;
	}
	.home-hero__inner {
		grid-template-columns: 1fr;
		aspect-ratio: auto;
		gap: 1rem;
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
	}
	.home-hero__col--left {
		flex-direction: column;
		align-items: flex-start;
	}
	.home-hero__logo {
		width: 100%;
		max-width: 20rem;
	}
	.home-hero__col--right {
		aspect-ratio: 1 / 1;
		min-height: min(17.5rem, 50vmin);
	}
	.home-blog__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		aspect-ratio: auto;
		gap: 0.75rem;
	}
	.home-blog__tile-link {
		padding-top: calc(clamp(1.25rem, 4vw, 2rem) + 15%);
		padding-bottom: clamp(1.25rem, 3vw, 2rem);
	}
	.home-blog__tile-title .u-szlaczek3 {
		--szl-gap: 0.3rem;
	}
	/* Mobilka: u góry CZERWONY (coral), potem jeden beżowy boks (content-box) z nagłówkiem i leadem; bez beżu nad sekcją */
	.home-section-values.reveal {
		contain: none;
		overflow: visible;
	}
	.home-section-values {
		background: transparent;
		padding-top: 0;
		padding-bottom: clamp(8rem, 20vw, 14rem);
	}
	.home-section-values__wrap {
		display: flex;
		flex-direction: column;
		aspect-ratio: none;
		min-height: 0;
		overflow: visible;
	}
	.home-section-values__wrap > * {
		position: static;
		width: 100%;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
	}
	.home-section-values__bg {
		display: none;
	}
	.home-section-values__coral {
		min-height: 5rem;
		height: auto;
		flex-shrink: 0;
		background: #FF4E31;
	}
	.home-section-values__tile {
		position: relative;
		min-height: min(14rem, 55vmin);
		aspect-ratio: 16 / 10;
		flex-shrink: 0;
	}
	.home-section-values__content-box {
		background: #F7F5EF;
		padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 4vw, 1.5rem) clamp(3.5rem, 10vw, 6rem);
		flex-shrink: 0;
		min-height: 10rem;
		overflow: visible;
	}
	.home-section-values__content-box .home-section-values__heading,
	.home-section-values__content-box .home-section-values__text {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
	}
	.home-section-values__content-box .reveal {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
	.home-section-values__content-box .home-section-values__text {
		display: block !important;
		min-height: 2.5em;
		color: #1a1a1a;
	}
	.home-section-values__heading {
		min-width: 0;
		padding: 0 0 0.75rem;
		margin-top: 0;
		font-size: clamp(1.25rem, 5vw, 1.75rem);
		line-height: 1.2;
		box-sizing: border-box;
		overflow-wrap: break-word;
		word-break: break-word;
		flex-shrink: 0;
		background: transparent;
	}
	.home-section-values__text {
		min-width: 0;
		padding: 0;
		margin-top: 0.25rem;
		font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
		line-height: 1.35;
		box-sizing: border-box;
		overflow-wrap: break-word;
		word-break: break-word;
		overflow: visible;
		max-height: none;
		flex-shrink: 0;
		background: transparent;
	}
	.home-section-values__text p {
		margin: 0 0 0.5rem;
	}
	.home-section-values__text p:last-child {
		margin-bottom: 0;
	}
	.archive .nav-links a,
	.archive .nav-links span {
		min-height: 2.75rem;
		min-width: 2.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.75rem;
	}
}

/* Sekcja values poniżej 480px: czerwony u góry, jeden beżowy boks z leadem, duży margines dolny */
@media (max-width: 30em) {
	.home-section-values {
		padding-bottom: clamp(7.5rem, 20vw, 13rem);
	}
	.home-section-values__content-box {
		padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 1.5rem) clamp(3rem, 9vw, 5rem);
	}
	.home-section-values__heading {
		padding: 0 0 0.5rem;
	}
	.home-section-values__text {
		padding: 0;
		margin-top: 0.25rem;
	}
}

/* Bardzo wąskie ekrany (np. 316–375px): 1 kolumna blog — czytelność */
@media (max-width: 23.4375em) {
	.home-blog {
		min-width: 0;
		padding-left: var(--page-margin-x);
		padding-right: var(--page-margin-x);
	}
	.home-blog__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 0.75rem;
	}
	.home-blog__tile {
		aspect-ratio: var(--blog-tile-aspect);
		min-height: 10rem;
	}
	.home-blog__tile-link {
		padding-top: calc(1.5rem + 15%);
		padding-bottom: 1.5rem;
		padding-left: clamp(1rem, 4vw, 1.25rem);
		padding-right: clamp(1rem, 4vw, 1.25rem);
	}
	.home-blog__tile-title {
		font-size: clamp(1.125rem, 4vw, 1.5rem);
	}
	.home-blog__tile-excerpt {
		font-size: clamp(0.875rem, 2.5vw, 1rem);
	}
}

/* ---- RWD: 48em (tablet) 768–1024px — 2 kolumny, ta sama proporcja kafelków (aspect-ratio), bez zgniatania ---- */
@media (min-width: 48em) and (max-width: 63.9375em) {
	.archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-blog {
		min-width: 0;
	}
	.home-blog__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto;
		aspect-ratio: none;
		gap: clamp(1.25rem, 2vw, 1.875rem);
		align-items: start;
	}
	.home-blog__tile {
		aspect-ratio: var(--blog-tile-aspect);
		min-height: 0;
	}
	.home-blog__tile-link {
		padding-top: clamp(1.75rem, 5vw, 2.5rem);
		padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
		padding-left: clamp(1.25rem, 3vw, 2rem);
		padding-right: clamp(1.25rem, 3vw, 2rem);
	}
}

/* Archive 2 kolumny od 48em (64em nadpisuje na 4) */
@media (min-width: 48em) {
	.archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- RWD: 64em (desktop) — blog 3 kolumny, wysokość z proporcji kafelków (bez obcinania) ---- */
@media (min-width: 64em) {
	.archive__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.home-blog__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
		gap: clamp(1.25rem, 2vw, 1.875rem);
		align-items: start;
	}
}

/* ---- RWD: 90em ---- */
@media (min-width: 90em) {
	:root {
		--wide-width: min(87.5rem, 95vw);
	}
}