/*
 * VINspektor — arkusz glowny. Kierunek „Przyrzad" (B), wybrany przez wlasciciela 27.10.2026.
 *
 * Swiat: jasny produkt. Narzedzie i jego odczyt prowadza strone; glebia powstaje
 * z warstw i swiatla, nie ze szkla i gradientow.
 *
 * Prawa, ktorych pilnuje ten arkusz:
 *  - niebieski (--vs-brand) wylacznie tam, gdzie dziala uzytkownik,
 *  - zielen (--vs-free) wylacznie przy tym, co bezplatne i dostepne,
 *  - tlenek (--vs-warn) wylacznie przy danych niepotwierdzonych i granicach raportu,
 *  - kazdy cien ma przesuniecie i rozmycie; zero poswiat i zero twardych cieni,
 *  - kolumny tabel nie zmieniaja sie miedzy stanami - zmienia sie wiersz.
 *
 * @package vinspektor
 */

/* ---------------------------------------------------------------- 1. Kroje */

@font-face {
	font-family: 'Schibsted Grotesk';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/schibsted-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Schibsted Grotesk';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/schibsted-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Subset bez malych liter i bez polskich znakow - unicode-range oddaje reszte krojowi tekstowemu. */
@font-face {
	font-family: 'VS Codes';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/martianmono-codes.woff2') format('woff2');
	unicode-range: U+20, U+23, U+28-29, U+2B-3A, U+3D, U+41-5A;
}

/* --------------------------------------------------------------- 2. Tokeny */

:root {
	--vs-canvas: #f4f7fb;
	--vs-canvas-2: #e9eef6;
	--vs-surface: #ffffff;
	--vs-ink: #0b1220;
	--vs-ink-2: #1c2635;
	--vs-muted: #5b6878;
	--vs-muted-2: #5f6c7e;
	--vs-line: #e0e7f0;
	--vs-line-2: #cdd7e4;

	/* Powierzchnie, ktore maja zostac ciemne takze w nocy. */
	--vs-deep: #0b1220;
	--vs-on-deep: #e8eef6;
	--vs-on-deep-soft: #a9bac6;

	--vs-brand: #1f3fd4;
	--vs-brand-ink: #16309f;
	--vs-free: #0d7a58;
	--vs-free-soft: #e6f5ef;
	--vs-warn: #a8341a;
	--vs-warn-soft: #fcece7;

	/* Jeden modul 4 px. */
	--vs-1: 0.25rem;
	--vs-2: 0.5rem;
	--vs-3: 0.75rem;
	--vs-4: 1rem;
	--vs-6: 1.5rem;
	--vs-8: 2rem;
	--vs-12: 3rem;
	--vs-16: 4rem;
	--vs-24: 6rem;

	--vs-wrap: 76rem;
	--vs-prose: 44rem;
	--vs-plate: 58rem;

	--vs-r: 14px;
	--vs-r-sm: 9px;
	--vs-r-pill: 999px;

	--vs-sh-1: 0 1px 2px rgba(11, 18, 32, 0.06), 0 2px 6px -2px rgba(11, 18, 32, 0.08);
	--vs-sh-2: 0 2px 4px rgba(11, 18, 32, 0.05), 0 12px 24px -12px rgba(11, 18, 32, 0.22);
	--vs-sh-3: 0 4px 8px rgba(11, 18, 32, 0.05), 0 32px 64px -28px rgba(11, 18, 32, 0.35);

	--vs-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--vs-mono: 'VS Codes', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	--vs-ease: cubic-bezier(0.16, 0.84, 0.44, 1);

	color-scheme: light dark;
}

/* Noc: ta sama konstrukcja, inne materialy. Te same trzy prawa koloru. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--vs-canvas: #0c1118;
		--vs-canvas-2: #121926;
		--vs-surface: #151d2a;
		--vs-ink: #e9eef5;
		--vs-ink-2: #cfd8e4;
		--vs-muted: #9aa7b8;
		--vs-muted-2: #7d8b9d;
		--vs-line: #243044;
		--vs-line-2: #31405a;

		--vs-deep: #070b12;
		--vs-on-deep: #e8eef6;
		--vs-on-deep-soft: #9aa7b8;

		--vs-brand: #7e9bff;
		--vs-brand-ink: #a3b8ff;
		--vs-free: #46c79a;
		--vs-free-soft: #10281f;
		--vs-warn: #f08c68;
		--vs-warn-soft: #2a1a14;

		--vs-sh-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
		--vs-sh-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 24px -12px rgba(0, 0, 0, 0.8);
		--vs-sh-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 32px 64px -28px rgba(0, 0, 0, 0.9);
	}
}

:root[data-theme='dark'] {
	--vs-canvas: #0c1118;
	--vs-canvas-2: #121926;
	--vs-surface: #151d2a;
	--vs-ink: #e9eef5;
	--vs-ink-2: #cfd8e4;
	--vs-muted: #9aa7b8;
	--vs-muted-2: #7d8b9d;
	--vs-line: #243044;
	--vs-line-2: #31405a;
	--vs-deep: #070b12;
	--vs-on-deep: #e8eef6;
	--vs-on-deep-soft: #9aa7b8;
	--vs-brand: #7e9bff;
	--vs-brand-ink: #a3b8ff;
	--vs-free: #46c79a;
	--vs-free-soft: #10281f;
	--vs-warn: #f08c68;
	--vs-warn-soft: #2a1a14;
}

/* ------------------------------------------------------------- 3. Podstawy */

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

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--vs-line-2) var(--vs-canvas);
}

body {
	margin: 0;
	background: var(--vs-canvas);
	color: var(--vs-ink);
	font-family: var(--vs-sans);
	font-size: 1.0625rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
	body {
		font-size: 1.125rem;
	}
}

::selection {
	background: var(--vs-brand);
	color: #fff;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.12;
	text-wrap: balance;
	color: var(--vs-ink);
}

h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem);
	letter-spacing: -0.036em;
}

h3 {
	font-size: 1.25rem;
	letter-spacing: -0.026em;
}

h4 {
	font-size: 1.0625rem;
	letter-spacing: -0.018em;
}

p,
ul,
ol,
dl,
figure,
table {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.17em;
	text-decoration-color: var(--vs-line-2);
	transition: color 0.14s linear, text-decoration-color 0.14s linear;
}

a:hover {
	color: var(--vs-brand);
	text-decoration-color: currentColor;
}

code,
kbd {
	font-family: var(--vs-mono);
	font-size: 0.9em;
}

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

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

.vs-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--vs-brand);
	color: #fff;
	padding: var(--vs-2) var(--vs-4);
	border-radius: var(--vs-r-sm);
	text-decoration: none;
	font-weight: 500;
}

.vs-skip:focus {
	left: var(--vs-2);
	top: var(--vs-2);
}

.vs-wrap {
	max-width: var(--vs-wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/*
 * Kolumna tresci jest wyrownana do lewej krawedzi naglowka, nie wysrodkowana:
 * elementy danych moga wyjsc w prawo. Zwykly tekst trzymamy w mierze czytania.
 */
.vs-wrap--narrow {
	max-width: var(--vs-wrap);
}

.vs-wrap--narrow > p,
.vs-wrap--narrow > ul,
.vs-wrap--narrow > ol,
.vs-wrap--narrow > .vs-breadcrumbs,
.vs-wrap--narrow > .vs-search {
	max-width: var(--vs-prose);
}

.vs-wrap--narrow > .vs-cards,
.vs-wrap--narrow > .vs-index,
.vs-wrap--narrow > .pagination {
	max-width: var(--vs-plate);
}

.vs-main {
	display: block;
	min-height: 50vh;
}

/* --------------------------------------------------------- 4. Pasek pracy */

.vs-devbar {
	margin: 0;
	padding: var(--vs-2) var(--vs-4);
	background: var(--vs-warn);
	color: #fff;
	font-size: 0.8125rem;
	text-align: center;
}

.vs-devbar code {
	color: #fff;
}

/* ------------------------------------------------------------ 5. Naglowek */

.vs-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--vs-canvas) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vs-line);
}

@supports not (backdrop-filter: blur(1px)) {
	.vs-header {
		background: var(--vs-canvas);
	}
}

.vs-header__main {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2.5vw, 2rem);
	min-height: 4.5rem;
	flex-wrap: wrap;
}

.vs-brand {
	margin: 0;
	margin-right: auto;
	font-size: 1.1875rem;
	line-height: 1;
}

.vs-brand a {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: -0.032em;
}

.vs-brand__mark {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background: var(--vs-deep);
	color: var(--vs-on-deep);
	font-family: var(--vs-mono);
	font-size: 0.6rem;
	letter-spacing: 0.02em;
}

.vs-brand img {
	max-height: 2.5rem;
	width: auto;
}

.vs-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(0.9rem, 1.8vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--vs-muted);
}

.vs-nav__list a {
	display: block;
	padding: var(--vs-3) 0;
	text-decoration: none;
}

.vs-nav__list a:hover {
	color: var(--vs-ink);
}

.vs-nav__list .current-menu-item > a,
.vs-nav__list .current-page-ancestor > a {
	color: var(--vs-ink);
	font-weight: 500;
}

.vs-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--vs-2) var(--vs-3);
	font-size: 0.875rem;
}

.vs-navtoggle {
	display: none;
	align-items: center;
	gap: var(--vs-2);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r-pill);
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	padding: var(--vs-2) var(--vs-4);
	cursor: pointer;
	box-shadow: var(--vs-sh-1);
}

.vs-navtoggle__bars,
.vs-navtoggle__bars::before,
.vs-navtoggle__bars::after {
	display: block;
	width: 1.05rem;
	height: 1.5px;
	border-radius: var(--vs-r-pill);
	background: currentColor;
}

.vs-navtoggle__bars {
	position: relative;
}

.vs-navtoggle__bars::before,
.vs-navtoggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.vs-navtoggle__bars::before {
	top: -5px;
}

.vs-navtoggle__bars::after {
	top: 5px;
}

@media (max-width: 62rem) {
	.vs-navtoggle {
		display: inline-flex;
	}

	.vs-nav {
		flex-basis: 100%;
		display: none;
		padding-bottom: var(--vs-3);
	}

	.vs-nav.is-open {
		display: block;
	}

	.vs-nav__list {
		display: block;
		font-size: 1.0625rem;
	}

	.vs-nav__list > li + li {
		border-top: 1px solid var(--vs-line);
	}

	.vs-nav__list a {
		padding: var(--vs-3) 0;
	}
}

/* ---------------------------------------------------------------- 6. Hero */

.vs-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(2.25rem, 6vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Jedno pole swiatla. Nie tapeta. */
.vs-hero::before {
	content: '';
	position: absolute;
	top: -32%;
	left: 50%;
	width: min(120rem, 165%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--vs-surface) 100%, transparent) 0%, color-mix(in srgb, var(--vs-surface) 72%, transparent) 26%, transparent 64%),
		radial-gradient(ellipse at 20% 16%, color-mix(in srgb, var(--vs-brand) 7%, transparent) 0%, transparent 55%);
	pointer-events: none;
}

.vs-hero > * {
	position: relative;
}

.vs-hero__title {
	font-size: clamp(2.3rem, 1rem + 5.4vw, 4.5rem);
	letter-spacing: -0.042em;
	line-height: 1.04;
	max-width: 19ch;
}

.vs-hero__lead {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	max-width: 52ch;
	color: var(--vs-muted);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
}

.vs-hero__lead strong {
	color: var(--vs-ink-2);
	font-weight: 500;
}

.vs-hero__actions {
	margin-top: var(--vs-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vs-3) var(--vs-6);
	font-size: 0.9375rem;
}

/* ------------------------------------------------- 7. Przyrzad: pole VIN */

.vs-vin {
	margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-2);
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

.vs-vin__form {
	display: block;
}

.vs-vin__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--vs-muted);
	margin-bottom: var(--vs-3);
}

.vs-vin__row {
	display: grid;
	gap: var(--vs-3);
}

@media (min-width: 56rem) {
	.vs-vin__row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: stretch;
		gap: var(--vs-4);
	}
}

.vs-vin__field {
	position: relative;
}

.vs-vin__input {
	display: block;
	width: 100%;
	font-family: var(--vs-mono);
	font-size: clamp(0.95rem, 0.6rem + 1.4vw, 1.375rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vs-ink);
	background: var(--vs-canvas);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r-sm);
	padding: var(--vs-3) var(--vs-4);
	min-height: 3.5rem;
	caret-color: var(--vs-brand);
}

.vs-vin__input::placeholder {
	color: var(--vs-muted-2);
}

/* Z JS: 17 komorek nad polem; samo pole zostaje w DOM i trzyma fokus. */
.vs-vin__field.is-cells .vs-vin__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	z-index: 2;
}

.vs-vin__field.is-cells .vs-vin__input::placeholder {
	color: transparent;
}

.vs-vin__cells {
	display: grid;
	grid-template-columns: repeat(17, minmax(0, 1fr));
	gap: 5px;
}

.vs-vin__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(2.5rem, 4.6vw, 3.6rem);
	background: var(--vs-canvas);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r-sm);
	font-family: var(--vs-mono);
	font-size: clamp(0.7rem, 0.3rem + 1.15vw, 1.2rem);
	line-height: 1;
	color: var(--vs-ink);
	transition: border-color 0.14s linear, box-shadow 0.2s var(--vs-ease), background-color 0.14s linear;
}

.vs-vin__cell.is-on {
	background: var(--vs-surface);
	border-color: var(--vs-line-2);
}

.vs-vin__cell.is-active {
	background: var(--vs-surface);
	border-color: var(--vs-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-brand) 16%, transparent);
}

@media (max-width: 40rem) {
	/*
	 * Na telefonie numer lamie sie tam, gdzie lamie go sama norma:
	 * znaki 1-9 to kraj, producent i suma kontrolna, znaki 10-17 to
	 * opis egzemplarza. Komorki zostaja jednakowe, a krotszy drugi
	 * wiersz jest wysrodkowany, zeby nie wygladal jak wybity zab.
	 */
	.vs-vin__cells {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.vs-vin__cell {
		flex: 0 0 calc((100% - 8 * 4px) / 9);
		font-size: 1rem;
		min-height: 2.55rem;
	}
}

/*
 * Stany przyrzadu. Pole ma cztery: puste, w trakcie pisania, odczytane
 * i do poprawy. Kolor trzyma prawo: niebieski to miejsce, w ktorym dzialasz,
 * tlenek to znak, ktorego nie da sie potwierdzic.
 */
.vs-vin__field.is-focus .vs-vin__cells {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vs-brand) 8%, transparent);
	border-radius: var(--vs-r-sm);
}

/* Kursor: w pustej aktywnej komorce miga belka, tak jak w polu tekstowym. */
.vs-vin__cell.is-active:empty::after {
	content: '';
	width: 2px;
	height: 1.15em;
	border-radius: 1px;
	background: var(--vs-brand);
	animation: vs-caret 1.1s steps(1, end) infinite;
}

.vs-vin__cell.is-bad {
	border-color: color-mix(in srgb, var(--vs-warn) 55%, transparent);
	background: var(--vs-warn-soft);
	color: var(--vs-warn);
}

.vs-vin__cell.is-bad.is-active {
	border-color: var(--vs-warn);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-warn) 16%, transparent);
}

/* Numer domkniety i bez zastrzezen: komorki osiadaja na bialym. */
[data-state='ok'] .vs-vin__cell.is-on {
	background: var(--vs-surface);
	border-color: var(--vs-line-2);
}

/* Znak, ktory wlasnie wpadl. Odpowiedz na ruch palca, nie efekt. */
.vs-vin__cell.is-new {
	animation: vs-vin-in 0.14s var(--vs-ease);
}

@keyframes vs-vin-in {
	from {
		opacity: 0;
		transform: translateY(-3px) scale(0.92);
	}
}

@keyframes vs-caret {
	0%,
	45% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0.15;
	}
}

/*
 * Moment odczytu: jedyna zaplanowana animacja w serwisie. Rusza raz, kiedy
 * numer sie domyka - przebiega po komorkach od lewej i odslania pola odczytu.
 */
.vs-vin.is-decoding .vs-vin__cell {
	animation: vs-vin-settle 0.4s var(--vs-ease) backwards;
	animation-delay: calc(var(--vs-i, 0) * 20ms);
}

@keyframes vs-vin-settle {
	0% {
		border-color: var(--vs-line);
	}
	40% {
		border-color: var(--vs-brand);
		transform: translateY(-2px);
	}
	100% {
		transform: none;
	}
}

.vs-vin.is-decoding .vs-vin__fields .vs-field {
	animation: vs-vin-reveal 0.38s var(--vs-ease) backwards;
}

.vs-vin.is-decoding .vs-vin__fields .vs-field:nth-child(1) {
	animation-delay: 0.34s;
}

.vs-vin.is-decoding .vs-vin__fields .vs-field:nth-child(2) {
	animation-delay: 0.4s;
}

.vs-vin.is-decoding .vs-vin__fields .vs-field:nth-child(3) {
	animation-delay: 0.46s;
}

.vs-vin.is-decoding .vs-vin__fields .vs-field:nth-child(4) {
	animation-delay: 0.52s;
}

.vs-vin.is-decoding .vs-vin__result {
	animation: vs-vin-reveal 0.38s var(--vs-ease) 0.58s backwards;
}

@keyframes vs-vin-reveal {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
}

.vs-vin__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.25rem;
	margin-top: var(--vs-2);
	font-size: 0.75rem;
	color: var(--vs-muted-2);
}

/* Na telefonie akcja stoi tuz pod komorkami, wiec legenda potrzebuje oddechu. */
@media (max-width: 56rem) {
	.vs-vin__legend {
		margin-top: var(--vs-4);
	}
}

.vs-vin__fields {
	display: grid;
	margin: var(--vs-4) 0 0;
	border-top: 1px solid var(--vs-line);
}

@media (min-width: 30rem) {
	.vs-vin__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--vs-6);
	}
}

@media (min-width: 58rem) {
	.vs-vin__fields {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vs-field {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: var(--vs-3) var(--vs-4) var(--vs-3) 0;
	border-bottom: 1px solid var(--vs-line);
}

@media (min-width: 58rem) {
	.vs-field {
		border-bottom: 0;
	}
}

.vs-field__key {
	margin: 0;
	font-size: 0.75rem;
	color: var(--vs-muted-2);
}

.vs-field__val {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

/* Cyfry tabelaryczne tylko tam, gdzie wartosc jest liczba lub kodem. */
.vs-vin__fields .vs-field__val,
.vs-table .vs-num,
.vs-sample__v,
time {
	font-variant-numeric: tabular-nums;
}

.vs-field__val--code {
	font-family: var(--vs-mono);
	letter-spacing: 0.04em;
}

.vs-field__val--wait {
	color: var(--vs-muted-2);
	font-weight: 400;
}

.vs-vin__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vs-3) var(--vs-6);
	margin-top: var(--vs-4);
}

.vs-vin__help {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--vs-muted);
	max-width: 56ch;
}

.vs-vin__result:empty {
	display: none;
}

.vs-vin__result {
	margin-top: var(--vs-4);
	padding: var(--vs-3) var(--vs-4);
	background: var(--vs-canvas);
	border-radius: var(--vs-r-sm);
	font-size: 0.9375rem;
}

/*
 * Werdykt jest atramentowy, nie zielony: zielen w tym swiecie znaczy
 * „bezplatne", a nie „udalo sie". Problem zostaje tlenkiem.
 */
.vs-vin__verdict {
	display: flex;
	align-items: baseline;
	gap: var(--vs-2);
	margin: 0;
	font-weight: 600;
	color: var(--vs-ink);
}

.vs-vin__verdict::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--vs-ink-2);
	flex: none;
	transform: translateY(-0.1em);
}

.vs-vin__verdict.is-bad {
	color: var(--vs-warn);
}

.vs-vin__verdict.is-bad::before {
	background: var(--vs-warn);
}

[data-state='bad'] .vs-vin__result {
	background: var(--vs-warn-soft);
}

.vs-vin__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--vs-3);
	font-size: 0.9375rem;
}

.vs-vin__table th,
.vs-vin__table td {
	text-align: left;
	padding: var(--vs-2) 0;
	border-bottom: 1px solid var(--vs-line);
	font-weight: 400;
	vertical-align: top;
}

.vs-vin__table th {
	color: var(--vs-muted);
	width: 45%;
}

.vs-vin__table tr:last-child th,
.vs-vin__table tr:last-child td {
	border-bottom: 0;
}

/* ------------------------------------------- 8. Przykladowy odczyt (karta) */

.vs-sample {
	position: relative;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.vs-sample::before {
	content: '';
	position: absolute;
	inset: auto 2.5rem -0.75rem 2.5rem;
	height: 3rem;
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	z-index: -1;
}

.vs-sample__card {
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-3);
	overflow: hidden;
}

.vs-sample__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vs-3) var(--vs-4);
	padding: var(--vs-3) clamp(1rem, 2.5vw, 1.75rem);
	background: var(--vs-deep);
	color: var(--vs-on-deep);
}

.vs-sample__vin {
	font-family: var(--vs-mono);
	font-size: clamp(0.75rem, 0.5rem + 0.7vw, 1rem);
	letter-spacing: 0.1em;
}

.vs-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-1);
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: var(--vs-r-pill);
	background: color-mix(in srgb, var(--vs-canvas) 18%, transparent);
	color: inherit;
}

.vs-sample__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	.vs-sample__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vs-sample__cell {
	padding: clamp(0.85rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 1.75rem);
	border-right: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-sample__cell:nth-child(2n) {
	border-right: 0;
}

@media (min-width: 48rem) {
	.vs-sample__cell {
		border-bottom: 0;
	}

	.vs-sample__cell:nth-child(2n) {
		border-right: 1px solid var(--vs-line);
	}

	.vs-sample__cell:last-child {
		border-right: 0;
	}
}

.vs-sample__k {
	font-size: 0.75rem;
	color: var(--vs-muted-2);
}

.vs-sample__v {
	margin-top: 0.1rem;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: 500;
	letter-spacing: -0.022em;
}

.vs-sample__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-2) var(--vs-6);
	align-items: center;
	padding: var(--vs-3) clamp(1rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--vs-line);
	background: var(--vs-canvas);
	font-size: 0.875rem;
	color: var(--vs-muted);
}

.vs-dot {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
}

.vs-dot::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--vs-free);
	flex: none;
}

.vs-dot--paid::before {
	background: var(--vs-muted-2);
}

/* ------------------------------------------------------- 9. Akcje i linki */

.vs-cta-wrap {
	display: inline-flex;
	flex-direction: column;
	gap: var(--vs-1);
	align-items: flex-start;
}

.vs-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vs-2);
	background: var(--vs-brand);
	color: #fff;
	border: 0;
	border-radius: var(--vs-r-pill);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	padding: var(--vs-3) var(--vs-6);
	min-height: 3.1rem;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12), 0 8px 20px -10px color-mix(in srgb, var(--vs-brand) 65%, transparent);
	transition: background-color 0.14s linear, transform 0.14s var(--vs-ease), box-shadow 0.2s var(--vs-ease);
}

.vs-cta:hover {
	background: var(--vs-brand-ink);
	color: #fff;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.14), 0 12px 26px -10px color-mix(in srgb, var(--vs-brand) 70%, transparent);
}

.vs-cta:active {
	transform: translateY(1px);
}

.vs-cta svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.vs-cta--compact {
	font-size: 0.875rem;
	padding: var(--vs-2) var(--vs-4);
	min-height: 2.5rem;
	white-space: nowrap;
}

.vs-cta--quiet {
	background: var(--vs-surface);
	color: var(--vs-ink);
	border: 1px solid var(--vs-line-2);
	box-shadow: var(--vs-sh-1);
}

.vs-cta--quiet:hover {
	background: var(--vs-canvas-2);
	color: var(--vs-ink);
	box-shadow: var(--vs-sh-1);
}

.vs-cta__tag {
	font-size: 0.75rem;
	color: var(--vs-muted);
}

.vs-link {
	font-weight: 500;
	color: var(--vs-brand);
	text-decoration-color: color-mix(in srgb, var(--vs-brand) 35%, transparent);
}

/* --------------------------------------------------------- 10. Sekcje */

.vs-section {
	padding-block: clamp(2.75rem, 7vw, 5.5rem);
}

.vs-section--tight {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.vs-section__head {
	max-width: 46ch;
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.vs-section__intro {
	margin-top: var(--vs-3);
	color: var(--vs-muted);
}

/*
 * Nie kazda sekcja otwiera sie tak samo: szeroki wariant stawia naglowek
 * i wprowadzenie obok siebie, a tytul moze isc o stopien wyzej.
 */
.vs-section__head--wide {
	max-width: none;
}

@media (min-width: 62rem) {
	.vs-section__head--wide {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--vs-12);
		align-items: start;
	}

	.vs-section__head--wide .vs-section__intro {
		margin-top: 0;
		padding-top: 0.45rem;
	}
}

.vs-section__title--big {
	font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.25rem);
	letter-spacing: -0.04em;
	line-height: 1.04;
}

.vs-section--sunken {
	background: var(--vs-canvas-2);
}

.vs-section--dark {
	background: var(--vs-deep);
	color: var(--vs-on-deep);
}

.vs-section--dark h2,
.vs-section--dark h3 {
	color: #fff;
}

.vs-section--dark .vs-section__intro {
	color: var(--vs-on-deep-soft);
}

.vs-section--dark a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.vs-section--dark a:hover {
	color: #bcccff;
}

/* ------------------------------------------- 11. Bezplatne kontra platne */

.vs-split {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 62rem) {
	.vs-split {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: 0;
		align-items: start;
	}
}

.vs-panel {
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.vs-panel--free {
	box-shadow: var(--vs-sh-3);
	z-index: 2;
}

.vs-panel--paid {
	background: var(--vs-canvas-2);
	box-shadow: var(--vs-sh-1);
}

@media (min-width: 62rem) {
	.vs-panel--paid {
		margin-top: 3.25rem;
		margin-left: -2.5rem;
		padding-left: 4.25rem;
	}
}

.vs-label {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-2);
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.25rem 0.7rem;
	border-radius: var(--vs-r-pill);
	background: var(--vs-free-soft);
	color: var(--vs-free);
}

.vs-label--neutral {
	background: var(--vs-line);
	color: var(--vs-ink-2);
}

.vs-label--warn {
	background: var(--vs-warn-soft);
	color: var(--vs-warn);
}

.vs-panel__title {
	margin-top: var(--vs-3);
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
}

.vs-panel__note {
	margin-top: var(--vs-2);
	font-size: 0.875rem;
	color: var(--vs-muted);
}

.vs-panel__list {
	list-style: none;
	margin: var(--vs-6) 0 0;
	padding: 0;
}

.vs-panel__list li {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	gap: var(--vs-1) var(--vs-3);
	padding: var(--vs-3) 0;
	border-top: 1px solid var(--vs-line);
}

.vs-panel--paid .vs-panel__list li {
	border-top-color: var(--vs-line-2);
}

.vs-panel__list svg {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.22rem;
	color: var(--vs-free);
}

.vs-panel--paid .vs-panel__list svg {
	color: var(--vs-muted-2);
}

.vs-panel__list b {
	font-weight: 500;
}

.vs-panel__list span {
	grid-column: 2;
	color: var(--vs-muted);
	font-size: 0.9375rem;
}

.vs-panel__foot {
	margin-top: var(--vs-6);
	font-size: 0.8125rem;
	color: var(--vs-muted);
}

.vs-panel figure {
	margin: var(--vs-6) 0 0;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--vs-4);
	align-items: center;
}

.vs-panel figure img {
	width: 5.5rem;
	height: 5.5rem;
	object-fit: cover;
	border-radius: var(--vs-r-sm);
}

.vs-panel figcaption {
	font-size: 0.8125rem;
	color: var(--vs-muted);
}

/* -------------------------------------------------- 12. Dzialy (huby) */

.vs-hubs {
	display: grid;
	gap: clamp(1rem, 2vw, 1.25rem);
}

/* Karta wiodaca na calej szerokosci, pod nia szesc rownych - bez pustego pola. */
@media (min-width: 48rem) {
	.vs-hubs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.vs-hubs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vs-hub {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vs-2);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	box-shadow: var(--vs-sh-1);
	transition: box-shadow 0.2s var(--vs-ease), transform 0.2s var(--vs-ease), border-color 0.15s linear;
}

.vs-hub:hover {
	box-shadow: var(--vs-sh-2);
	border-color: var(--vs-line-2);
	transform: translateY(-2px);
}

.vs-hub__title {
	font-size: 1.1875rem;
}

.vs-hub__title a {
	text-decoration: none;
}

/* Caly kafel klikalny, ale w DOM zostaje jeden link. */
.vs-hub__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--vs-r);
}

.vs-hub__desc {
	color: var(--vs-muted);
	font-size: 0.9375rem;
}

.vs-hub__meta {
	margin-top: auto;
	padding-top: var(--vs-3);
	font-size: 0.8125rem;
	color: var(--vs-muted-2);
}

/* Pierwszy dzial dostaje zdjecie i cala szerokosc - rytm sekcji nie jest rowny. */
.vs-hub--lead {
	padding: 0;
	overflow: hidden;
	box-shadow: var(--vs-sh-2);
}

@media (min-width: 48rem) {
	.vs-hub--lead {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: stretch;
		gap: 0;
	}
}

.vs-hub--lead .vs-hub__body {
	display: flex;
	flex-direction: column;
	gap: var(--vs-2);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.vs-hub--lead .vs-hub__title {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

.vs-hub--lead .vs-hub__desc {
	font-size: 1rem;
	max-width: 44ch;
}

.vs-hub__media {
	position: relative;
	min-height: 13rem;
	background: var(--vs-canvas-2);
}

.vs-hub__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 42%;
}

.vs-hub__credit {
	position: absolute;
	right: var(--vs-2);
	bottom: var(--vs-2);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(11, 18, 32, 0.6);
	padding: 0.15rem 0.5rem;
	border-radius: var(--vs-r-pill);
}

/* ------------------------------------------------------------ 13. Tabele */

.vs-table-wrap {
	margin-block: var(--vs-6);
	overflow-x: auto;
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
}

.vs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 34rem;
}

.vs-table caption {
	caption-side: bottom;
	text-align: left;
	padding: var(--vs-3) clamp(1rem, 2.5vw, 1.5rem);
	font-size: 0.8125rem;
	color: var(--vs-muted);
	border-top: 1px solid var(--vs-line);
	background: var(--vs-canvas);
}

.vs-table thead th {
	text-align: left;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--vs-ink-2);
	padding: var(--vs-3) clamp(1rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--vs-line-2);
	white-space: nowrap;
}

.vs-table tbody th,
.vs-table tbody td {
	padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--vs-line);
	text-align: left;
	vertical-align: middle;
}

/*
 * Porownanie cen to moment handlowy strony: nazwa dostawcy i kwota maja
 * skale, a nie wielkosc przypisu.
 */
.vs-table tbody tr:hover {
	background: var(--vs-canvas);
}

.vs-table--compare tbody th {
	font-size: 1.0625rem;
}

.vs-table--compare .vs-num {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--vs-ink);
	/* Przy tej skali cyfry tabelaryczne rozpychaja przecinek - kolumna i tak jest jedna. */
	font-variant-numeric: normal;
}

.vs-table tbody tr:last-child th,
.vs-table tbody tr:last-child td {
	border-bottom: 0;
}

.vs-table tbody th {
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.vs-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 500;
}

.vs-na {
	color: var(--vs-muted-2);
}

/* Dane niepotwierdzone: jeden stan, jeden kolor. */
.vs-todo {
	display: inline-block;
	color: var(--vs-warn);
	background: var(--vs-warn-soft);
	border-radius: var(--vs-r-pill);
	padding: 0.1em 0.6em;
	font-size: 0.8125rem;
}

.vs-sources-inline {
	margin: calc(var(--vs-6) * -1 + var(--vs-2)) 0 var(--vs-6);
	padding: var(--vs-3) var(--vs-4);
	background: var(--vs-canvas-2);
	border-radius: var(--vs-r-sm);
	font-size: 0.8125rem;
}

.vs-sources-inline summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--vs-muted);
}

.vs-sources-inline ul {
	margin-top: var(--vs-3);
	padding-left: 1.1em;
	color: var(--vs-muted);
	overflow-wrap: anywhere;
}

.vs-sources-inline li + li {
	margin-top: var(--vs-2);
}

/* ------------------------------------------------------------- 14. Boksy */

.vs-box {
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	margin-block: var(--vs-6);
	max-width: var(--vs-plate);
}

.vs-box__label {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.25rem 0.7rem;
	border-radius: var(--vs-r-pill);
	background: var(--vs-line);
	color: var(--vs-ink-2);
	margin-bottom: var(--vs-3);
}

.vs-box p + p,
.vs-box p + ul,
.vs-box p + ol,
.vs-box ul + p {
	margin-top: var(--vs-3);
}

.vs-box ul,
.vs-box ol {
	padding-left: 1.2em;
}

.vs-box li + li {
	margin-top: var(--vs-2);
}

.vs-box--limits {
	background: var(--vs-warn-soft);
	border-color: color-mix(in srgb, var(--vs-warn) 22%, transparent);
	box-shadow: none;
}

.vs-box--limits .vs-box__label {
	background: color-mix(in srgb, var(--vs-warn) 14%, transparent);
	color: var(--vs-warn);
}

.vs-box--free .vs-box__label {
	background: var(--vs-free-soft);
	color: var(--vs-free);
}

.vs-box--sponsored,
.vs-box--partner {
	background: var(--vs-canvas-2);
	box-shadow: none;
}

.vs-box__partner-name {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.024em;
}

/* Ujawnienie afiliacji: jedna linia, czytelna, nie drugi boks nad tekstem. */
.vs-box--disclosure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vs-1) var(--vs-3);
	background: transparent;
	border: 0;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
	border-radius: 0;
	box-shadow: none;
	padding: var(--vs-3) 0;
	font-size: 1rem;
	max-width: var(--vs-prose);
}

.vs-box--disclosure .vs-box__label {
	margin-bottom: 0;
	flex: none;
}

.vs-box--disclosure p {
	margin: 0;
	max-width: 66ch;
	color: var(--vs-muted);
}

/* ------------------------------------------------------------ 15. Tresc */

.vs-content {
	max-width: var(--vs-prose);
}

.vs-content > * + * {
	margin-top: var(--vs-4);
}

.vs-content h2 {
	margin-top: var(--vs-12);
}

.vs-content h3 {
	margin-top: var(--vs-8);
}

.vs-content h2 + *,
.vs-content h3 + * {
	margin-top: var(--vs-3);
}

.vs-content ul,
.vs-content ol {
	padding-left: 1.3em;
}

.vs-content li + li {
	margin-top: var(--vs-2);
}

.vs-content strong {
	font-weight: 600;
}

.vs-content blockquote {
	margin: var(--vs-6) 0;
	padding: var(--vs-4) var(--vs-6);
	background: var(--vs-canvas-2);
	border-radius: var(--vs-r);
	color: var(--vs-ink-2);
}

.vs-content a {
	color: var(--vs-brand);
	text-decoration-color: color-mix(in srgb, var(--vs-brand) 32%, transparent);
}

/* Przycisk w tresci nie jest linkiem tekstowym - nie dziedziczy koloru linku. */
.vs-content a.vs-cta,
.vs-content a.vs-cta:hover {
	color: #fff;
	text-decoration: none;
}

.vs-content a.vs-cta--quiet,
.vs-content a.vs-cta--quiet:hover {
	color: var(--vs-ink);
}

/* Elementy danych moga wyjsc szerzej niz kolumna tekstu. */
.vs-content .vs-table-wrap,
.vs-content .vs-ranking,
.vs-content .vs-country,
.vs-content .vs-vin,
.vs-content .vs-box {
	max-width: var(--vs-plate);
	width: min(100%, var(--vs-plate));
}

@media (min-width: 76rem) {
	.vs-content .vs-table-wrap,
	.vs-content .vs-ranking,
	.vs-content .vs-country {
		width: min(calc(100% + 9rem), var(--vs-plate));
	}
}

.vs-list {
	padding-left: 1.3em;
}

.vs-list li + li {
	margin-top: var(--vs-2);
}

.vs-list--check {
	list-style: none;
	padding-left: 0;
}

.vs-list--check li {
	position: relative;
	padding-left: 1.75em;
}

.vs-list--check li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7em;
	height: 0.38em;
	border-left: 2px solid var(--vs-free);
	border-bottom: 2px solid var(--vs-free);
	transform: rotate(-45deg);
}

.vs-note {
	font-size: 0.875rem;
	color: var(--vs-muted);
	margin-block: var(--vs-4);
}

.vs-muted {
	color: var(--vs-muted);
}

.vs-answer {
	margin-block: var(--vs-6);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	max-width: var(--vs-prose);
	font-size: 1.0625rem;
}

@media (min-width: 48rem) {
	.vs-answer {
		font-size: 1.1875rem;
	}
}



.vs-answer p + p {
	margin-top: var(--vs-3);
}

/* ---------------------------------------------------------- 16. Artykul */

.vs-article__head {
	padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--vs-4);
	max-width: var(--vs-plate);
}

.vs-article__head h1,
.vs-page-title {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem);
	letter-spacing: -0.04em;
	line-height: 1.06;
	max-width: 24ch;
}

.vs-page-title {
	margin-block: clamp(1.5rem, 4vw, 2.5rem) var(--vs-6);
}

.vs-breadcrumbs {
	padding-top: var(--vs-4);
	font-size: 0.8125rem;
	color: var(--vs-muted);
}

.vs-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vs-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vs-breadcrumbs li + li::before {
	content: '›';
	color: var(--vs-muted-2);
	margin-right: var(--vs-2);
}

.vs-breadcrumbs a {
	text-decoration: none;
	color: var(--vs-muted);
}

.vs-breadcrumbs a:hover {
	color: var(--vs-brand);
}

.vs-kw {
	font-size: 0.8125rem;
	color: var(--vs-muted);
	margin-top: var(--vs-2);
}

.vs-author {
	margin-top: var(--vs-4);
	padding-top: var(--vs-3);
	border-top: 1px solid var(--vs-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-1) var(--vs-6);
	align-items: baseline;
	font-size: 0.875rem;
	max-width: var(--vs-plate);
}

.vs-author__name {
	font-weight: 500;
}

.vs-author__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vs-4);
	color: var(--vs-muted);
}

.vs-article__image {
	margin-block: var(--vs-6);
	max-width: var(--vs-plate);
}

.vs-article__image img {
	width: 100%;
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
}

.vs-article__image figcaption {
	margin-top: var(--vs-2);
	font-size: 0.8125rem;
	color: var(--vs-muted);
}

.vs-sources {
	margin-top: var(--vs-12);
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	background: var(--vs-canvas-2);
	border-radius: var(--vs-r);
	max-width: var(--vs-plate);
	font-size: 0.9375rem;
}

.vs-sources h2 {
	font-size: 1.1875rem;
	margin-bottom: var(--vs-3);
}

.vs-sources ol {
	padding-left: 1.4em;
	color: var(--vs-muted);
	overflow-wrap: anywhere;
}

.vs-sources li + li {
	margin-top: var(--vs-2);
}

/* --------------------------------------------------------------- 17. FAQ */

.vs-faq {
	margin-top: var(--vs-12);
	max-width: var(--vs-plate);
}

.vs-faq h2 {
	margin-bottom: var(--vs-4);
}

.vs-faq dl {
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	padding: var(--vs-2) clamp(1rem, 2.5vw, 1.75rem);
}

.vs-faq dt {
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.022em;
	padding-top: var(--vs-4);
	border-top: 1px solid var(--vs-line);
}

.vs-faq dt:first-of-type {
	border-top: 0;
}

.vs-faq dd {
	margin: var(--vs-2) 0 var(--vs-4);
	color: var(--vs-muted);
	max-width: 70ch;
}

/* ------------------------------------------------ 18. Indeksy i listy */

.vs-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vs-3);
}

@media (min-width: 56rem) {
	.vs-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vs-index__row {
	position: relative;
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	transition: box-shadow 0.2s var(--vs-ease), transform 0.2s var(--vs-ease);
}

.vs-index__row:hover {
	box-shadow: var(--vs-sh-2);
	transform: translateY(-2px);
}

.vs-index__row a {
	display: flex;
	flex-direction: column;
	gap: var(--vs-2);
	padding: clamp(1rem, 2.2vw, 1.5rem);
	text-decoration: none;
}

.vs-index__title {
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.022em;
}

.vs-index__desc {
	color: var(--vs-muted);
	font-size: 0.9375rem;
}

.vs-index__count {
	font-size: 0.8125rem;
	color: var(--vs-muted-2);
}

.vs-children {
	margin-top: var(--vs-12);
	max-width: var(--vs-plate);
}

.vs-children h2 {
	margin-bottom: var(--vs-4);
}

.vs-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vs-3);
}

@media (min-width: 56rem) {
	.vs-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vs-card {
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
	padding: clamp(1rem, 2.2vw, 1.5rem);
}

.vs-card__title {
	font-size: 1.0625rem;
}

.vs-card__title a {
	text-decoration: none;
}

.vs-card__meta {
	font-size: 0.8125rem;
	color: var(--vs-muted-2);
	margin-top: var(--vs-1);
}

.vs-card__desc {
	margin-top: var(--vs-2);
	color: var(--vs-muted);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------- 19. Ranking */

.vs-ranking {
	margin-block: var(--vs-8);
}

.vs-ranking__list {
	list-style: none;
	margin: var(--vs-6) 0 0;
	padding: 0;
	counter-reset: vs-rank;
	display: grid;
	gap: var(--vs-3);
}

.vs-ranking__item {
	counter-increment: vs-rank;
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: var(--vs-2) var(--vs-4);
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-1);
}

.vs-ranking__item::before {
	content: counter(vs-rank);
	grid-row: 1 / span 6;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--vs-canvas-2);
	color: var(--vs-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.vs-ranking__item > * {
	grid-column: 2;
}

/* Pozycja oplacona: zmienia sie wiersz, nie uklad kolumn. */
.vs-ranking__item.is-paid {
	border-color: var(--vs-line-2);
	box-shadow: var(--vs-sh-2);
}

.vs-ranking__item.is-paid::before {
	background: var(--vs-line);
	color: var(--vs-ink-2);
}

.vs-ranking__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vs-2) var(--vs-3);
}

.vs-ranking__name {
	font-size: 1.25rem;
}

.vs-ranking__desc {
	margin-top: var(--vs-2);
	color: var(--vs-muted);
}

.vs-ranking__price {
	margin-top: var(--vs-2);
}

.vs-ranking__item .vs-cta-wrap {
	margin-top: var(--vs-3);
}

.vs-ranking__updated {
	margin-top: var(--vs-2);
	font-size: 0.8125rem;
}

.vs-tag {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.2rem 0.65rem;
	border-radius: var(--vs-r-pill);
	background: var(--vs-canvas-2);
	color: var(--vs-muted);
	white-space: nowrap;
}

.vs-tag--paid {
	background: var(--vs-line);
	color: var(--vs-ink-2);
	font-weight: 600;
}

.vs-tag--unpaid {
	background: transparent;
	border: 1px dashed var(--vs-line-2);
}

/* -------------------------------------------------------------- 20. Kraje */

.vs-country {
	margin-block: var(--vs-6);
}

.vs-country h3 {
	margin-top: var(--vs-8);
	margin-bottom: var(--vs-3);
}

/* ------------------------------------------------- 21. Szukanie, 404, strony */

.vs-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--vs-2);
	align-items: end;
	max-width: 36rem;
	margin-block: var(--vs-6);
}

.vs-search__label {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--vs-muted);
}

.vs-search__input {
	font: inherit;
	font-size: 1rem;
	padding: var(--vs-3) var(--vs-4);
	min-height: 3rem;
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r-sm);
	background: var(--vs-surface);
	color: var(--vs-ink);
	caret-color: var(--vs-brand);
}

.vs-search__submit {
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	min-height: 3rem;
	padding: var(--vs-3) var(--vs-6);
	border: 0;
	border-radius: var(--vs-r-pill);
	background: var(--vs-brand);
	color: #fff;
	cursor: pointer;
}

.vs-search__submit:hover {
	background: var(--vs-brand-ink);
}

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-2);
	margin-top: var(--vs-8);
	font-size: 0.9375rem;
}

.pagination .page-numbers {
	padding: var(--vs-2) var(--vs-4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r-pill);
	background: var(--vs-surface);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.pagination .page-numbers.current {
	background: var(--vs-brand);
	border-color: var(--vs-brand);
	color: #fff;
}

/* ------------------------------------------------------------ 22. Stopka */

.vs-footer {
	margin-top: var(--vs-24);
	background: var(--vs-deep);
	color: var(--vs-on-deep-soft);
	font-size: 0.9375rem;
}

.vs-main:has(> .vs-section--dark:last-child) + .vs-footer {
	margin-top: 0;
}

.vs-footer a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.vs-footer a:hover {
	color: #bcccff;
}

.vs-footer__grid {
	display: grid;
	gap: var(--vs-8);
	padding-block: clamp(2.5rem, 6vw, 4rem) var(--vs-8);
}

@media (min-width: 56rem) {
	.vs-footer__grid {
		grid-template-columns: 1fr 1fr 1.6fr;
		gap: var(--vs-12);
	}
}

.vs-footer__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: var(--vs-3);
}

.vs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vs-footer__list li + li {
	margin-top: var(--vs-2);
}

.vs-footer__list a {
	text-decoration: none;
}

.vs-footer__list a:hover {
	text-decoration: underline;
}

.vs-footer__col p + p {
	margin-top: var(--vs-3);
}

.vs-footer .vs-muted {
	color: #8b9aa8;
}

.vs-footer p,
.vs-section--dark p {
	color: inherit;
}

/* Na ciemnej stopce tlenek bierzemy z tokenu, zeby prawo koloru mialo jedno zrodlo. */
.vs-footer .vs-todo {
	background: color-mix(in srgb, var(--vs-warn) 18%, transparent);
	color: color-mix(in srgb, var(--vs-warn) 72%, #ffffff);
}

.vs-footer__legal {
	padding-block: var(--vs-4) var(--vs-8);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.8125rem;
}

.vs-footer__legal p + p {
	margin-top: var(--vs-2);
}

.vs-fields {
	display: grid;
	border-top: 1px solid var(--vs-line);
}

@media (min-width: 48rem) {
	.vs-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--vs-12);
	}
}

.vs-fields--footer {
	border-top: 0;
	margin-bottom: var(--vs-3);
}

.vs-fields--footer .vs-field {
	font-size: 0.8125rem;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.vs-section--dark .vs-field,
.vs-fields--footer .vs-field {
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.vs-section--dark .vs-field__key,
.vs-fields--footer .vs-field__key {
	color: #8b9aa8;
}

.vs-section--dark .vs-field__val {
	color: var(--vs-on-deep);
	font-weight: 400;
}

/* -------------------------------------- 23. Naglowek dzialu ze zdjeciem */

.vs-banner {
	position: relative;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.vs-banner__media {
	position: relative;
	height: clamp(11rem, 26vw, 20rem);
	background: var(--vs-canvas-2);
	overflow: hidden;
}

.vs-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 45%;
}

.vs-banner__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 18, 32, 0.45) 0%, rgba(11, 18, 32, 0) 55%);
}

.vs-banner__credit {
	position: absolute;
	right: var(--vs-2);
	top: var(--vs-2);
	z-index: 1;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(11, 18, 32, 0.6);
	padding: 0.15rem 0.5rem;
	border-radius: var(--vs-r-pill);
}

/* Karta wchodzi na kadr - ten sam chwyt, co na stronie glownej. */
.vs-banner__card {
	position: relative;
	margin-top: clamp(-4.5rem, -6vw, -2.5rem);
	max-width: var(--vs-plate);
	background: var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	box-shadow: var(--vs-sh-3);
	padding: clamp(1.1rem, 2.8vw, 2rem);
}

.vs-banner__card .vs-breadcrumbs {
	padding-top: 0;
	margin-bottom: var(--vs-2);
}

.vs-banner__card h1 {
	font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
	letter-spacing: -0.04em;
	line-height: 1.06;
	max-width: 22ch;
}

.vs-banner__lead {
	margin-top: var(--vs-3);
	color: var(--vs-muted);
	max-width: 60ch;
}

.vs-article__head--banner {
	padding-block: 0 var(--vs-4);
}

.vs-article__head--banner .vs-author {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

/* ------------------------------------------- 23b. Formularz kontaktowy */

.vs-form {
	max-width: 36rem;
	margin-block: var(--vs-6);
}

.vs-form__row {
	display: grid;
	gap: var(--vs-2);
	margin-block: 0 var(--vs-5);
}

.vs-form__row label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--vs-ink-2);
}

.vs-form input[type='email'],
.vs-form input[type='text'],
.vs-form textarea {
	font: inherit;
	font-size: 1rem;
	padding: var(--vs-3) var(--vs-4);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r-sm);
	background: var(--vs-surface);
	color: var(--vs-ink);
	width: 100%;
	transition: border-color 0.14s linear, box-shadow 0.2s var(--vs-ease);
}

.vs-form input[type='email'],
.vs-form input[type='text'] {
	min-height: 3rem;
}

.vs-form textarea {
	resize: vertical;
	min-height: 9rem;
	line-height: 1.6;
}

.vs-form input:focus-visible,
.vs-form textarea:focus-visible {
	outline: none;
	border-color: var(--vs-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vs-brand) 16%, transparent);
}

.vs-form__row--submit {
	margin-bottom: var(--vs-4);
}

.vs-form__note {
	font-size: 0.875rem;
	margin: 0;
}

/* Pole-pulapka na boty: niewidoczne, ale nie przez display:none,
   zeby prosty bot go nie pominal. */
.vs-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------- 24. Ruch i wydruk */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.vs-hub:hover,
	.vs-index__row:hover {
		transform: none;
	}
}

@media print {
	.vs-header,
	.vs-footer,
	.vs-navtoggle,
	.vs-skip,
	.vs-devbar,
	.vs-cta,
	.vs-search,
	.vs-hero::before {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.vs-table-wrap,
	.vs-box,
	.vs-panel,
	.vs-card {
		box-shadow: none;
		overflow: visible;
	}

	a::after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		color: #444;
	}
}