/* =========================================================================
   NOVA - arkusz motywu
   Kolor, typografia i rytm pochodza z theme.json. Tutaj mieszka wylacznie to,
   czego theme.json nie potrafi wyrazic: stany, warstwy, ruch i uklad naglowka.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Skroty na tokeny
   ------------------------------------------------------------------------- */
:root {
	--nova-h: var(--wp--custom--naglowek-wysokosc, 76px);
	--nova-obrys: var(--wp--custom--obrys, rgba(255, 255, 255, 0.08));
	--nova-obrys-mocny: var(--wp--custom--obrys-mocny, rgba(255, 255, 255, 0.16));
	--nova-poswiata: var(--wp--custom--poswiata, rgba(255, 198, 26, 0.3));
	--nova-przejscie: var(--wp--custom--przejscie, 260ms cubic-bezier(0.22, 1, 0.36, 1));
	--nova-promien-s: var(--wp--custom--promien--s, 10px);
	--nova-promien-m: var(--wp--custom--promien--m, 16px);
	--nova-promien-l: var(--wp--custom--promien--l, 22px);
}

/* -------------------------------------------------------------------------
   2. Fundament
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	/* clip, NIE hidden - "hidden" zabija position:sticky na naglowku. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--akcent);
	color: var(--wp--preset--color--tlo);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--akcent);
	outline-offset: 3px;
	border-radius: 4px;
}

@supports (scrollbar-color: auto) {
	html {
		scrollbar-color: #2b2b38 var(--wp--preset--color--tlo);
		scrollbar-width: thin;
	}
}

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

/* Pomijalnik do klawiatury - WordPress renderuje go nad trescia. */
.skip-link:focus {
	background: var(--wp--preset--color--akcent);
	color: var(--wp--preset--color--tlo);
	font-family: var(--wp--preset--font-family--naglowki);
	font-weight: 700;
}

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

/* -------------------------------------------------------------------------
   3. Ziarno - cienka warstwa szumu nad calą strona
   ------------------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   4. Warianty stylow blokow rdzenia
   ------------------------------------------------------------------------- */

/* Guzik "obrys" - drugorzedne CTA. Kontrast wlasny, nie dziedziczony z sekcji. */
.wp-block-button.is-style-nova-obrys > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--tekst);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--akcent);
	transition: background-color var(--nova-przejscie), color var(--nova-przejscie);
}

.wp-block-button.is-style-nova-obrys > .wp-block-button__link:hover,
.wp-block-button.is-style-nova-obrys > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--akcent);
	color: var(--wp--preset--color--tlo);
}

.wp-block-button__link {
	transition: background-color var(--nova-przejscie), color var(--nova-przejscie),
		transform var(--nova-przejscie), box-shadow var(--nova-przejscie);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

/* Karta */
.wp-block-group.is-style-nova-karta {
	background-color: var(--wp--preset--color--powierzchnia);
	border: 1px solid var(--nova-obrys);
	border-radius: var(--nova-promien-l);
	padding: var(--wp--preset--spacing--50);
}

/* Nadtytul nad naglowkiem sekcji */
.wp-block-heading.is-style-nova-nadtytul {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wp-block-heading.is-style-nova-nadtytul::before {
	content: "";
	width: 26px;
	height: 1px;
	flex: none;
	background: currentColor;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   5. Naglowek
   ------------------------------------------------------------------------- */
.nova-naglowek {
	position: sticky;
	top: 0;
	z-index: 90;
	padding-block: 0;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--nova-przejscie), border-color var(--nova-przejscie),
		backdrop-filter var(--nova-przejscie);
}

.nova-naglowek.jest-przewiniety {
	background-color: rgba(10, 10, 15, 0.72);
	border-bottom-color: var(--nova-obrys);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

/* Uklad "constrained" ogranicza DZIECI, nie kontener - stad odstep boczny tutaj. */
.nova-naglowek__wnetrze {
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.nova-naglowek__pas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--nova-h);
}

/* --- logo --- */
.nova-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.62rem;
	flex: none;
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.nova-logo:hover,
.nova-logo:focus {
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.nova-logo__znak {
	display: block;
	width: 30px;
	height: 30px;
	flex: none;
	filter: drop-shadow(0 0 10px rgba(255, 198, 26, 0.35));
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
		filter var(--nova-przejscie);
}

.nova-logo:hover .nova-logo__znak {
	filter: drop-shadow(0 0 16px rgba(255, 198, 26, 0.6));
}

@media (prefers-reduced-motion: no-preference) {
	.nova-logo:hover .nova-logo__znak {
		transform: rotate(180deg);
	}
}

.nova-logo__nazwa {
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	padding-left: 0.06em;
}

/* --- nawigacja --- */
.nova-nawigacja {
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}

.nova-nawigacja .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--tekst-cichy);
	padding-block: 0.4rem;
	text-decoration: none;
	transition: color var(--nova-przejscie);
}

.nova-nawigacja .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	background: var(--wp--preset--color--akcent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--nova-przejscie);
}

.nova-nawigacja .wp-block-navigation-item__content:hover,
.nova-nawigacja .wp-block-navigation-item__content:focus,
.nova-nawigacja .current-menu-item > .wp-block-navigation-item__content,
.nova-nawigacja .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.nova-nawigacja .wp-block-navigation-item__content:hover::after,
.nova-nawigacja .wp-block-navigation-item__content:focus::after,
.nova-nawigacja .current-menu-item > .wp-block-navigation-item__content::after,
.nova-nawigacja .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* podmenu */
.nova-nawigacja .wp-block-navigation__submenu-container {
	background-color: rgba(16, 16, 23, 0.97);
	border: 1px solid var(--nova-obrys);
	border-radius: var(--nova-promien-m);
	padding: 0.5rem;
	min-width: 264px;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nova-nawigacja .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: var(--nova-promien-s);
	transition: background-color var(--nova-przejscie), color var(--nova-przejscie);
}

.nova-nawigacja .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.nova-nawigacja .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--wp--preset--color--akcent);
}

/* --- CTA w naglowku --- */
.nova-naglowek__cta {
	flex: none;
}

.nova-naglowek__cta .wp-block-button__link {
	padding: 0.7rem 1.35rem;
	font-size: var(--wp--preset--font-size--xs);
}

/* --- widok mobilny --- */
.nova-nawigacja .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--tlo);
	padding: clamp(1.5rem, 6vw, 3rem);
}

.nova-nawigacja .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
}

.nova-nawigacja .wp-block-navigation__responsive-container-open,
.nova-nawigacja .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--tekst);
}

/* -------------------------------------------------------------------------
   6. Odslanianie na scrollu (obsluga w nova.js)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.nova-odslon {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--nova-opoznienie, 0ms);
	}

	.nova-odslon.jest-widoczny {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   7. Hero - pelny ekran, tlo liczone w czasie rzeczywistym
   ------------------------------------------------------------------------- */
.nova-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--wp--preset--color--tlo);
	/* Naglowek jest lepki i przezroczysty - hero wchodzi pod niego. */
	margin-top: calc(-1 * var(--nova-h));
	padding-top: calc(var(--nova-h) + clamp(1.5rem, 5vh, 4rem));
	padding-bottom: clamp(2.5rem, 8vh, 6rem);
}

@supports not (min-height: 100svh) {
	.nova-hero {
		min-height: 100vh;
	}
}

/* Warstwa sceny. Tlo obrazkowe to plakat: widac go zanim WebGL wystartuje
   i zostaje na stale tam, gdzie WebGL nie dziala albo animacje sa wylaczone. */
.nova-tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: 62% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Film lezy dokladnie na plakacie (to samo kadrowanie), wiec przejscie
   plakat -> pierwsza klatka jest niewidoczne. */
.nova-tlo__wideo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	opacity: 0;
	transition: opacity 600ms ease-out;
}

.nova-tlo.jest-gotowe .nova-tlo__wideo {
	opacity: 1;
}

/* Oslona czytelnosci - tekst zawsze lezy na ciemnym. */
.nova-tlo__oslona {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(10, 10, 15, 0.93) 0%, rgba(10, 10, 15, 0.8) 30%, rgba(10, 10, 15, 0.35) 55%, rgba(10, 10, 15, 0) 78%),
		linear-gradient(180deg, rgba(10, 10, 15, 0.7) 0%, rgba(10, 10, 15, 0) 22%),
		linear-gradient(0deg, rgba(10, 10, 15, 0.8) 0%, rgba(10, 10, 15, 0) 30%);
}

.nova-hero__wnetrze {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.nova-hero__tresc {
	max-width: min(700px, 100%);
}

.nova-hero__nad {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nova-hero__nad::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.nova-hero__tytul {
	margin: 0 0 clamp(1rem, 2vw, 1.6rem);
	font-size: clamp(2.2rem, 1rem + 3.1vw, 3.7rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
}

.nova-hero__lead {
	margin: 0;
	max-width: 52ch;
	color: #bcbcc8;
	line-height: 1.62;
}

.nova-hero__cta {
	gap: 0.75rem;
}

.nova-hero__zaufanie {
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
	color: #9c9caa;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.02em;
}

@media (max-width: 781px) {
	/* Na waskim ekranie scena jest przesunieta w gore (patrz view.js), a tresc
	   siada nizej - na mocnej oslonie. */
	.nova-hero {
		align-items: flex-end;
	}

	.nova-tlo__wideo {
		object-position: 72% 50%;
	}

	.nova-tlo {
		background-position: 72% 50%;
	}

	.nova-tlo__oslona {
		background:
			linear-gradient(180deg, rgba(10, 10, 15, 0.66) 0%, rgba(10, 10, 15, 0) 24%),
			linear-gradient(0deg, rgba(10, 10, 15, 0.97) 0%, rgba(10, 10, 15, 0.95) 42%, rgba(10, 10, 15, 0.6) 58%, rgba(10, 10, 15, 0) 88%);
	}
}

@media (max-width: 560px) {
	.nova-hero__nad {
		letter-spacing: 0.12em;
		line-height: 1.5;
	}

	.nova-hero__nad::before {
		display: none;
	}
}

/* Podglad w edytorze - bez shadera, zeby nie zjadac GPU przy pisaniu. */
.nova-tlo--edytor {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 300px;
	border: 1px dashed var(--nova-obrys-mocny);
	border-radius: var(--nova-promien-l);
	padding: var(--wp--preset--spacing--50);
	background: radial-gradient(60% 70% at 62% 50%, rgba(255, 166, 8, 0.22) 0%, rgba(10, 10, 15, 0) 70%);
}

.nova-tlo__podglad {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #04040a 0 42%, rgba(255, 198, 26, 0) 43%),
		conic-gradient(from 200deg, #ef7d0b, #ffc61a, #ffecb0, #ffc61a, rgba(255, 198, 26, 0.15), #ef7d0b);
	box-shadow: 0 0 46px -6px rgba(255, 198, 26, 0.5);
}

.nova-tlo__etykieta {
	color: var(--wp--preset--color--tekst-cichy);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   9. Rytm sekcji i wspolne elementy
   ------------------------------------------------------------------------- */
.nova-sekcja {
	padding-block: var(--wp--preset--spacing--80);
}

.nova-sekcja__glowa {
	max-width: 780px;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Nadtytul jako AKAPIT, nie naglowek - nie zabiera miejsca w konspekcie H2/H3. */
.nova-nadtytul {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nova-nadtytul::before {
	content: "";
	flex: none;
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.nova-sekcja__glowa h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-wrap: balance;
}

.nova-sekcja__lead {
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--tekst-cichy);
	line-height: 1.62;
}

/* -------------------------------------------------------------------------
   10. Pasek liczb
   ------------------------------------------------------------------------- */
.nova-liczby {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--nova-obrys);
	border-bottom: 1px solid var(--nova-obrys);
}

.nova-liczby__siatka {
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-bottom: 0;
}

.nova-liczby__wartosc {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	/* Cyfry tej samej szerokosci - licznik nie skacze podczas odliczania. */
	font-variant-numeric: tabular-nums;
}

.nova-liczby__opis {
	margin: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--tekst-cichy);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.nova-liczby__siatka {
		gap: var(--wp--preset--spacing--50);
	}

	.nova-liczby__opis {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   11. Realizacje
   ------------------------------------------------------------------------- */
.nova-projekty {
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.nova-projekt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 0 var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--powierzchnia);
	border: 1px solid var(--nova-obrys);
	border-radius: var(--nova-promien-l);
	overflow: hidden;
	transition: border-color var(--nova-przejscie), transform var(--nova-przejscie),
		box-shadow var(--nova-przejscie);
}

.nova-projekt:hover,
.nova-projekt:focus-within {
	border-color: rgba(255, 198, 26, 0.45);
	box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.95);
}

@media (prefers-reduced-motion: no-preference) {
	.nova-projekt:hover,
	.nova-projekt:focus-within {
		transform: translateY(-4px);
	}
}

.nova-projekt__obraz {
	margin: 0 0 var(--wp--preset--spacing--40);
	overflow: hidden;
	border-bottom: 1px solid var(--nova-obrys);
	background-color: #0d0d14;
}

.nova-projekt__obraz img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.nova-projekt:hover .nova-projekt__obraz img {
		transform: scale(1.035);
	}
}

.nova-projekt__branza,
.nova-projekt__tytul,
.nova-projekt__opis {
	padding-inline: var(--wp--preset--spacing--50);
}

.nova-projekt__branza {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nova-projekt__tytul {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--xl);
}

.nova-projekt__tytul a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.nova-projekt__tytul a:hover {
	color: var(--wp--preset--color--akcent);
	text-decoration: none;
}

/* Cala karta klikalna: niewidzialna warstwa rozciagnieta z odnosnika w tytule.
   Dzieki temu nie ma zagniezdzonych odnosnikow i klawiatura dostaje jeden cel. */
.nova-projekt__tytul a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.nova-projekt__obraz a {
	position: relative;
	z-index: 1;
	display: block;
}

.nova-projekt__opis {
	margin: 0;
	color: var(--wp--preset--color--tekst-cichy);
	line-height: 1.55;
}

/* Data powstania projektu - stopka karty. Odcieta linia oddziela ja od opisu,
   zeby czytalo sie jak metryka, a nie jak dalszy ciag zdania. */
.nova-projekt__data {
	margin: auto 0 0;
	padding: 0.9rem var(--wp--preset--spacing--50) 0;
	border-top: 1px solid var(--nova-obrys);
	color: var(--wp--preset--color--tekst-cichy);
	font-family: var(--wp--preset--font-family--naglowki);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Kafelek CTA na koncu siatki realizacji - domyka rzad i niesie dostepnosc. */
.nova-projekt--cta {
	justify-content: center;
	padding: var(--wp--preset--spacing--60) 0;
	background: linear-gradient(160deg, rgba(255, 198, 26, 0.09) 0%, rgba(255, 198, 26, 0) 60%),
		var(--wp--preset--color--powierzchnia);
	border-color: rgba(255, 198, 26, 0.32);
}

.nova-projekt--cta .nova-projekt__tytul {
	margin-bottom: 0.8rem;
}

.nova-projekt__strzalka {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-inline: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   12. Wlasne serwisy
   ------------------------------------------------------------------------- */
.nova-redakcja {
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3rem);
	margin-bottom: 0;
	border-top: 1px solid var(--nova-obrys);
}

.nova-redakcja:first-of-type {
	border-top: 0;
}

.nova-redakcja__obraz {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--nova-obrys);
	border-radius: var(--nova-promien-l);
	background-color: #0d0d14;
}

.nova-redakcja__obraz img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.nova-redakcja:hover .nova-redakcja__obraz img {
		transform: scale(1.03);
	}
}

.nova-redakcja__temat {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nova-redakcja__tytul {
	margin: 0 0 0.8rem;
	font-size: clamp(1.6rem, 1rem + 1.6vw, 2.3rem);
}

.nova-redakcja__tytul a {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.nova-redakcja__tytul a:hover {
	color: var(--wp--preset--color--akcent);
	text-decoration: none;
}

.nova-redakcja__opis {
	margin: 0;
	max-width: 56ch;
	color: var(--wp--preset--color--tekst-cichy);
	line-height: 1.6;
}

/* Metryka: liczba artykulow i adres - dowod, ze serwis realnie zyje. */
.nova-redakcja__metryka {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0.45rem 0.9rem;
	background-color: rgba(255, 198, 26, 0.09);
	border: 1px solid rgba(255, 198, 26, 0.24);
	border-radius: 999px;
	color: var(--wp--preset--color--akcent);
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

@media (max-width: 781px) {
	.nova-redakcja {
		padding-block: var(--wp--preset--spacing--60);
	}
}