/* =====================================================================
   PrestigeCar – BAZA: zmienne, motyw jasny/ciemny, typografia, przyciski, elementy wspólne
   (1:1 z makiety szablon.html; sekcje strony głównej – etap 4, bloki)
   ===================================================================== */

/* ---------- zmienne: kolory, fonty (Chakra Petch + REM) ---------- */
:root {
	--czerwony: #e3262b; --czerwony-2: #af0202; --czerwony-3: #630000;
	--font-h: "Chakra Petch", sans-serif; --h-waga: 700;
	--font-t: "REM", system-ui, sans-serif;
	--szer: 1400px; --bok: max(20px, 5vw);
}
html[data-theme="dark"] {
	color-scheme: dark;
	--tlo: #05090d; --tekst: #fff; --tekst-2: #c3ced8; --tekst-3: #8796a4;
	--karta: rgba(255, 255, 255, .035); --karta-b: rgba(255, 255, 255, .09); --karta-hover: rgba(255, 255, 255, .06);
	--linia: rgba(255, 255, 255, .1); --kropka: #9fb3c5; --kropki-op: .28;
	--nag-tlo: rgba(6, 11, 16, .74); --cien: 0 24px 60px rgba(0, 0, 0, .45);
	--pole: rgba(255, 255, 255, .05); --pole-b: rgba(255, 255, 255, .16);
	--kontur: rgba(255, 255, 255, .2);
}
html[data-theme="light"] {
	color-scheme: light;
	--tlo: #f2f4f7; --tekst: #0a131b; --tekst-2: #3b4855; --tekst-3: #67737f;
	--karta: #fff; --karta-b: rgba(9, 19, 27, .08); --karta-hover: #fff;
	--linia: rgba(9, 19, 27, .1); --kropka: #7d8fa1; --kropki-op: .4;
	--nag-tlo: rgba(255, 255, 255, .82); --cien: 0 18px 44px rgba(9, 19, 27, .09);
	--pole: #f5f7f9; --pole-b: rgba(9, 19, 27, .16);
	--kontur: rgba(9, 19, 27, .2);
}

/* ---------- podstawy ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 16px/1.65 var(--font-t); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* jedno tło dla całej strony (osobny element – skrypt zmienia tylko jego przezroczystość, bez przeliczania stylów strony) */
.tlo { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* ciemny motyw: tło ściemnia się przy przewijaniu – will-change trzyma je na własnej warstwie, więc zmiana przezroczystości
   to tylko składanie gotowego obrazu (bez tego przeglądarka malowała gradienty na cały ekran od nowa w każdej klatce przewijania) */
html[data-theme="dark"] .tlo { will-change: opacity; }
html[data-theme="dark"] .tlo {
	background: radial-gradient(ellipse 70% 75% at 14% 30%, rgba(42, 70, 94, .9), rgba(42, 70, 94, 0) 70%),
		radial-gradient(ellipse 60% 70% at 92% 72%, rgba(34, 57, 76, .65), rgba(34, 57, 76, 0) 70%),
		linear-gradient(180deg, #102030, #0b1620);
}
html[data-theme="light"] .tlo {
	opacity: 1 !important;
	background: radial-gradient(ellipse 70% 60% at 10% 10%, #ffffff, rgba(255, 255, 255, 0) 70%),
		radial-gradient(ellipse 60% 60% at 95% 60%, #e3e9f0, rgba(227, 233, 240, 0) 70%), #eef1f5;
}
img { max-width: 100%; height: auto; display: block; }
/* napis konturem w tle pierwszej sekcji (strona główna .st__napis, podstrony .ph__napis): po najechaniu myszą (komputery,
   klasa .zar z wspolne.js) czerwony, lekko świecący obrys – kopia napisu z data-tekst, mocniej u góry, z zachowanym wygaszaniem */
:is(.st__napis, .ph__napis)[data-tekst]::after { content: attr(data-tekst); position: absolute; inset: 0; padding: inherit; color: transparent;
	-webkit-text-stroke: 1.2px rgba(255, 70, 50, .85); filter: drop-shadow(0 0 4px rgba(255, 50, 35, .8)) drop-shadow(0 0 16px rgba(227, 38, 43, .45));
	-webkit-mask-image: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, .45) 45%, transparent 80%); mask-image: linear-gradient(180deg, #000 5%, rgba(0, 0, 0, .45) 45%, transparent 80%);
	opacity: 0; transition: opacity .7s ease; }
:is(.st__napis, .ph__napis).zar::after { opacity: 1; }
html[data-theme="light"] :is(.st__napis, .ph__napis)[data-tekst]::after { -webkit-text-stroke-color: rgba(220, 30, 30, .8); filter: drop-shadow(0 0 6px rgba(227, 38, 43, .3)); }
@media (prefers-reduced-motion: reduce) { :is(.st__napis, .ph__napis)[data-tekst]::after { transition: none; } }
a { color: inherit; }
.w { position: relative; max-width: var(--szer); margin: 0 auto; padding: 0 var(--bok); }
/* duże monitory: treść lekko powiększona w całości (≥2200 px o 8%, ≥2500 px o 14%) */
@media (min-width: 2200px) { html { --zoom: 1.08; } }
@media (min-width: 2500px) { html { --zoom: 1.14; } }
.w, .nag__w { zoom: var(--zoom, 1); }
.sekcja { position: relative; padding: 96px 0; }

/* fokus z klawiatury zawsze widoczny */
:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 3px; }
/* tekst tylko dla czytnika ekranu */
.screen-reader-text, .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* „Przejdź do treści” – widoczne po Tab */
.pomin { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--czerwony-2); color: #fff; font-weight: 600; text-decoration: none; }
.pomin:focus { top: 16px; }

/* kropki: wzór SVG + miękki owalny zanik; kolor z --kropka (oba motywy) */
.kropki { --kropki-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3C/svg%3E");
	position: absolute; width: 380px; height: 340px; opacity: var(--kropki-op); pointer-events: none; background: var(--kropka);
	-webkit-mask-image: var(--kropki-svg), radial-gradient(closest-side, #000 45%, transparent); -webkit-mask-size: 18px 18px, 100% 100%; -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in;
	mask-image: var(--kropki-svg), radial-gradient(closest-side, #000 45%, transparent); mask-size: 18px 18px, 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; }
.kropki--l { left: max(-90px, calc(50% - var(--szer) * var(--zoom, 1) / 2 - 300px)); }
.kropki--p { right: max(-90px, calc(50% - var(--szer) * var(--zoom, 1) / 2 - 300px)); }
/* kropki wystają poza ekran – sekcja je przycina (strona nie szersza od ekranu) */
.sekcja:has(> .kropki) { overflow-x: clip; }

/* ---------- nagłówki sekcji ---------- */
.h { margin: 0; font-family: var(--font-h); font-weight: var(--h-waga); text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; }
.h em { font-style: italic; color: var(--czerwony); }
/* czerwone wyróżnienie w tytule pierwszej sekcji podstron (nagłówek .ph, 404): co 7 s przelatuje połysk – 3 razy, jak na stronie głównej (blok Start) */
.ph .h--1 em, .b404__tresc .h--1 em { width: fit-content; padding-right: .12em; color: transparent; -webkit-background-clip: text; background-clip: text;
	background-image: linear-gradient(105deg, rgba(255, 236, 228, 0) 42%, rgba(255, 236, 228, .8) 50%, rgba(255, 236, 228, 0) 58%), linear-gradient(var(--czerwony), var(--czerwony));
	background-size: 300% 100%, 100% 100%; background-position: 200% 0, 0 0; background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference) {
	.ph .h--1 em, .b404__tresc .h--1 em { animation: em-polysk 7s ease-in-out 1.8s 3; }
}
@keyframes em-polysk { 0% { background-position: 90% 0, 0 0; } 24%, 100% { background-position: 10% 0, 0 0; } }
.h--1 { font-size: clamp(34px, 3.9vw, 62px); }
.h--2 { font-size: clamp(30px, 3.4vw, 52px); }
.h--3 { font-size: 21px; line-height: 1.25; }
.etykieta { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--czerwony); font: 600 13px/1.4 var(--font-t); letter-spacing: 3px; text-transform: uppercase; }
/* dwie równoległe czerwone smugi jak w logo */
.etykieta::before { content: ""; width: 36px; height: 10px; flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath d='M10 0H36L32.25 3.75H6.25Z M3.75 6.25H29.75L26 10H0Z' fill='%23e3262b'/%3E%3C/svg%3E") center / contain no-repeat; }
.wstep { margin: 20px 0 0; max-width: 640px; color: var(--tekst-2); font-size: 18px; line-height: 1.7; }
.gora-sekcji { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 56px; }

/* ---------- przyciski ---------- */
.przycisk { position: relative; display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px;
	background: linear-gradient(to right, var(--czerwony-3), var(--czerwony-2)); border: 1px solid var(--czerwony-2); color: #fff;
	font: var(--h-waga) 16px/1.2 var(--font-h); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: filter .3s, box-shadow .3s, border-color .3s; }
.przycisk:hover, .przycisk:focus-visible { filter: brightness(1.15); box-shadow: 0 10px 30px rgba(227, 38, 43, .45), 0 0 18px rgba(255, 40, 30, .35); }
.przycisk--maly { min-height: 44px; padding: 0 22px; font-size: 14px; }
.przycisk--obrys { background: transparent; border-color: var(--pole-b); color: var(--tekst); }
.przycisk--obrys:hover { border-color: var(--czerwony); filter: none; box-shadow: 0 0 18px rgba(227, 38, 43, .3); }
/* link ze strzałką: po najechaniu czerwona kreska pod tekstem, strzałka odskakuje i świeci */
.link-strzalka { --strz: 28px; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; color: var(--tekst); font-weight: 600; text-decoration: none;
	background: linear-gradient(90deg, #ff3b2a, var(--czerwony-2)) 0 100% / 0 2px no-repeat; transition: gap .35s cubic-bezier(.2, .8, .2, 1), background-size .45s cubic-bezier(.2, .8, .2, 1); }
.link-strzalka::after { content: ""; flex: none; width: var(--strz); height: 14px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5h3.2v2H0z M5.2 5h9.6L11.6.6h3.9L21.4 6l-5.9 5.4h-3.9L14.8 7H5.2z' fill='%23e3262b'/%3E%3C/svg%3E") center / contain no-repeat; }
.link-strzalka:hover, .link-strzalka:focus-visible, .wpis:hover .link-strzalka, .wyroznik:hover .link-strzalka { gap: 18px; background-size: calc(100% - var(--strz) - 18px) 2px; }
.link-strzalka:hover::after, .link-strzalka:focus-visible::after, .wpis:hover .link-strzalka::after, .wyroznik:hover .link-strzalka::after { transform: translateX(3px); filter: drop-shadow(0 0 5px rgba(255, 59, 42, .95)) drop-shadow(0 0 12px rgba(255, 59, 42, .5)); }

/* ikonka w kółku (nagłówek, stopka, udostępnianie) */
.ikonka { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--linia); background: transparent; color: var(--tekst); cursor: pointer; border-radius: 50%; transition: border-color .25s, color .25s; }
.ikonka:hover { border-color: var(--czerwony); color: var(--czerwony); }
.ikonka svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* flagi krajów (404, listy krajów) */
.flaga { display: inline-block; flex: none; width: 34px; height: 24px; border-radius: 2px; box-shadow: 0 0 0 1px var(--linia); }
.flaga--de { background: linear-gradient(#000 33.3%, #dd0000 0 66.6%, #ffce00 0); }
.flaga--be { background: linear-gradient(90deg, #000 33.3%, #fdda24 0 66.6%, #ef3340 0); }
.flaga--nl { background: linear-gradient(#ae1c28 33.3%, #fff 0 66.6%, #21468b 0); }
.flaga--lu { background: linear-gradient(#ea141d 33.3%, #fff 0 66.6%, #51add2 0); }
.flaga--pl { background: linear-gradient(#fff 50%, #dc143c 0); }

/* duża cyfra konturem; wypełnia się czerwienią od dołu */
.cyfra { font-family: var(--font-h); font-weight: 700; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--kontur);
	background: linear-gradient(180deg, #ff6a5c, #d2140f 55%, #7d0000) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text;
	transition: background-size .8s cubic-bezier(.2, .8, .2, 1), -webkit-text-stroke-color .5s, filter .5s; }

/* „podpis” strony: po najechaniu po obrysie krąży błysk (element z klasą .z-obrysem + SVG .obrys-svg) */
.z-obrysem { position: relative; }
.obrys-svg { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; opacity: 0; transition: opacity .45s; }
.obrys-svg rect { fill: none; vector-effect: non-scaling-stroke; }
.obrys-svg .kr { stroke: rgba(255, 120, 100, .5); stroke-width: 1px; }
.obrys-svg .bl { stroke: #ffd3c7; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 90 410; }
.obrys-svg .hl { stroke: #ff3b2a; stroke-width: 8px; stroke-linecap: round; stroke-dasharray: 90 410; opacity: .9; }
.z-obrysem:hover .obrys-svg, .z-obrysem:focus-within .obrys-svg, .z-obrysem:focus-visible .obrys-svg { opacity: 1; }
/* na czas najechania obrys ma własną warstwę – krążący błysk przemalowuje tylko ją, a nie całą kartę pod spodem */
.z-obrysem:hover .obrys-svg { will-change: opacity; }
@media (prefers-reduced-motion: no-preference) {
	/* błysk okrąża element 3 razy i staje w punkcie startu (wraca po ponownym najechaniu) – pętla bez końca zajmowała procesor przez cały czas, gdy kursor leżał na karcie */
	.z-obrysem:hover .obrys-svg .bl, .z-obrysem:hover .obrys-svg .hl { animation: obwod 3.2s linear 3; }
}
@media (prefers-reduced-motion: reduce) { .obrys-svg .bl, .obrys-svg .hl { display: none; } }

/* ---------- animacje wejścia ---------- */
/* tylko gdy działa JS (klasa js na <html>) – bez JS treść jest od razu widoczna */
@media (prefers-reduced-motion: no-preference) {
	html.js .pokaz { opacity: 0; }
	html.js .pokaz.widoczny { opacity: 1; animation: pokaz-wejscie .9s cubic-bezier(.2, .8, .2, 1) var(--opoznienie, 0s) backwards; }
}
@keyframes pokaz-wejscie { from { opacity: 0; transform: translateY(34px); } }
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }
@keyframes obwod { to { stroke-dashoffset: -1000; } }
@keyframes wgore { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes seo-tekst { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes napis-wejscie { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }

/* ---------- treść z edytora WordPressa (wyrównania, podpisy) ---------- */
.alignleft { float: left; margin: 6px 26px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 26px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption, figure.wp-block-image { max-width: 100%; margin: 26px 0; }
.wp-caption-text, figcaption { margin-top: 8px; color: var(--tekst-3); font-size: 13.5px; }

@media (max-width: 640px) {
	.sekcja { padding: 80px 0; }
	.alignleft, .alignright { float: none; margin: 20px 0; }
}