/* =============================================================================
   BAZA — reset, typografia, dostępność
   Zależy od tokens.css (musi być wczytany wcześniej).
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Płynne przewijanie do kotwic, ale nie wbrew preferencji użytkownika */
  scroll-behavior: smooth;
  /* Sticky nav ma 4.5rem — offset, żeby kotwica nie chowała się pod nagłówkiem */
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Zapobiega poziomemu przewijaniu przy sekcjach pełnoszerokościowych */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

/* Reguła wyżej nadpisuje domyślne `display: none` przeglądarki dla atrybutu
   hidden — bez tego ukryte ikony SVG (np. druga ikona w przycisku pauzy)
   byłyby widoczne. Atrybut hidden musi działać zawsze. */
[hidden] { display: none !important; }

input, button, textarea, select { font: inherit; color: inherit; }

/* Łamanie długich słów (norweskie i polskie potrafią być długie) */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;   /* nie zostawia sierot w nagłówkach */
}

h1 { font-size: var(--step-6); line-height: var(--lh-tight); font-weight: var(--weight-black); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

strong, b { font-weight: var(--weight-semibold); }

/* Cyfry o stałej szerokości wszędzie, gdzie liczby stoją w kolumnie
   (kalendarz, miary, cennik) — inaczej „skaczą” przy zmianie wartości */
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Focus -------------------------------------------------------------- */
/* Podwójny pierścień: kolorowy + kontrastowa obwódka. Dzięki temu jest
   widoczny zarówno na jasnym tle, jak i na zdjęciu w hero. */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--color-bg);
}

/* Na ciemnym tle (hero, stopka) pierścień potrzebuje jasnej obwódki */
.na-ciemnym :focus-visible {
  outline-color: var(--fv-stone-100);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--fv-teal-900);
}

/* ---- Dostępność --------------------------------------------------------- */

/* Treść tylko dla czytników ekranu */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link „przejdź do treści” — widoczny dopiero po sfokusowaniu */
.pomin-do-tresci {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius-s);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pomin-do-tresci:focus-visible {
  transform: translateY(0);
  color: var(--color-on-brand);
}

/* ---- Układ podstawowy --------------------------------------------------- */

/* Szerokość treści: 90% na telefonie, 80% od tabletu w górę.
   Marginesy robimy szerokością, nie paddingiem — dzięki temu procent odnosi
   się do rzeczywistej szerokości okna i jest taki sam w każdej sekcji. */
.kontener {
  width: 90%;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .kontener { width: 80%; }
}

/* Warianty zachowują tę samą szerokość zewnętrzną — różnią się tylko
   ograniczeniem długości wiersza w środku (patrz .proza i --measure),
   bo tekst czyta się źle w bardzo długich liniach niezależnie od tego,
   ile miejsca jest na ekranie. */
.kontener--tekst > * { max-width: var(--container-text); }

/* Odstęp między sekcjami — jedno miejsce, żeby nie walczyć ze specyficznością */
.sekcja { padding-block: var(--space-3xl); }
.sekcja--waska { padding-block: var(--space-2xl); }
.sekcja--bez-gory { padding-block-start: 0; }
.sekcja--bez-dolu { padding-block-end: 0; }

/* Tło naprzemienne, żeby sekcje się od siebie odcinały bez ramek */
.sekcja--tlo { background: var(--color-bg-subtle); }
.sekcja--biala { background: var(--fv-white); }
.sekcja--ciemna {
  background: var(--fv-teal-900);
  color: var(--fv-stone-100);
}
.sekcja--ciemna h1, .sekcja--ciemna h2, .sekcja--ciemna h3 { color: var(--fv-white); }

/* Kolumna czytelnicza — długie teksty (regulamin, o nas) */
.proza > * + * { margin-block-start: var(--space-s); }
.proza { max-width: var(--measure); }
.proza h2 { margin-block-start: var(--space-xl); }
.proza h3 { margin-block-start: var(--space-l); }
.proza ul, .proza ol { padding-inline-start: 1.25em; }
.proza li + li { margin-block-start: var(--space-2xs); }

/* ---- Nagłówek sekcji ---------------------------------------------------- */

.naglowek-sekcji { max-width: 46rem; margin-block-end: var(--space-xl); }
/* Nagłówek na pełną szerokość kolumny — dla zdań, które mają zostać
   w jednej linii zamiast łamać się na dwie tuż przed końcem. */
.naglowek-sekcji--pelny { max-width: none; }
.naglowek-sekcji--pelny .naglowek-sekcji__lead { text-wrap: pretty; }
.naglowek-sekcji__nadtytul {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-2xs);
}
.naglowek-sekcji__lead {
  margin-block-start: var(--space-s);
  font-size: var(--step-1);
  color: var(--color-text-muted);
  /* Ta sama szerokość co nagłówek — inaczej lead „wystawał” i psuł
     wyrównanie lewej kolumny sekcji */
  max-width: 100%;
}

/* ---- Stos — jednolity rytm pionowy ---------------------------------------
   Zamiast dopisywać margines przy każdym akapicie z osobna, odstęp nadaje
   rodzic. Dzięki temu wszystkie bloki treści mają identyczny rytm, a zmiana
   jednej wartości przestawia całą stronę.
   -------------------------------------------------------------------------- */

.stos > * + * { margin-block-start: var(--stos-odstep, var(--space-m)); }
.stos--ciasny  { --stos-odstep: var(--space-s); }
.stos--luzny   { --stos-odstep: var(--space-l); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--glowny {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--glowny:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

.btn--marka {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.btn--marka:hover { background: var(--color-brand-hover); color: var(--color-on-brand); }

.btn--obrys {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: transparent;
}
.btn--obrys:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-subtle);
}
/* Na ciemnej sekcji domyślny --color-text jest granatowy, więc przycisk
   znikał w tle i pojawiał się dopiero po najechaniu. */
.na-ciemnym .btn--obrys {
  border-color: color-mix(in oklab, var(--fv-white) 46%, transparent);
  color: var(--fv-white);
}
.na-ciemnym .btn--obrys:hover {
  border-color: var(--fv-white);
  color: var(--fv-white);
  background: color-mix(in oklab, var(--fv-white) 14%, transparent);
}

/* Wariant na zdjęciu — półprzezroczyste szkło, czytelne na dowolnym tle */
.btn--szklo {
  background: color-mix(in oklab, var(--fv-white) 16%, transparent);
  backdrop-filter: blur(10px);
  border-color: color-mix(in oklab, var(--fv-white) 42%, transparent);
  color: var(--fv-white);
}
.btn--szklo:hover {
  background: color-mix(in oklab, var(--fv-white) 26%, transparent);
  color: var(--fv-white);
}

.btn--maly { padding: 0.6em 1.1em; font-size: var(--step--1); }

/* ---- Miara — sygnatura projektu ----------------------------------------- */
/* Duży numerał + mikroskopijna jednostka wersalikami. Język tablicy
   przyrządów i mapy morskiej: pozycja, odległość, głębokość, sezon.
   Używane wszędzie, gdzie treść podaje realny pomiar. */

.miara {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.miara__wartosc {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.miara__jednostka {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.miara--duza .miara__wartosc { font-size: var(--step-5); }
.miara--mala  .miara__wartosc { font-size: var(--step-1); }

/* Przedrostek „od” przy cenie — mniejszy i lżejszy, z odstępem */
.miara__od {
  font-family: var(--font-body);
  font-size: 0.4em;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  margin-inline-end: 0.35em;
  color: var(--color-text-muted);
  vertical-align: 0.35em;
}

/* ---- Pas miar ------------------------------------------------------------
   Trzy–cztery pomiary w rzędzie, rozdzielone włoskowatą kreską. Bez kart,
   bez cieni — ta sama forma co legenda pod hero, więc sygnatura się powtarza
   zamiast rozmywać w kolejnym kafelku.
   -------------------------------------------------------------------------- */

.pas-miar {
  display: grid;
  gap: var(--space-l);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-xl);
}
@media (min-width: 48rem) {
  .pas-miar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .pas-miar > * + * {
    padding-inline-start: var(--space-xl);
    border-inline-start: 1px solid var(--color-border);
  }
  .pas-miar > * { padding-inline-end: var(--space-xl); }
}
.pas-miar__opis {
  margin-block-start: var(--space-s);
  color: var(--color-text-muted);
  font-size: var(--step--1);
  max-width: 34ch;
}

/* Na ciemnym tle */
.na-ciemnym .miara__wartosc { color: var(--fv-white); }
.na-ciemnym .miara__jednostka { color: color-mix(in oklab, var(--fv-stone-100) 72%, transparent); }

/* ---- Etykieta / plakietka ----------------------------------------------- */

.plakietka {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* ---- Animacje wejścia --------------------------------------------------- */
/* Klasę .reveal dodaje JS dopiero po sprawdzeniu IntersectionObserver.
   Bez JS treść jest po prostu widoczna — to nie jest progressive enhancement
   na słowo honoru, tylko domyślny stan w CSS. */

.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.reveal.jest-widoczny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Drobiazgi ---------------------------------------------------------- */

hr.linia {
  border: 0;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-xl);
}

.tekst-przygaszony { color: var(--color-text-muted); }
.tekst-srodek { text-align: center; }
.nowrap { white-space: nowrap; }

/* Proza na pełną szerokość kontenera.
   Treść Zasad to w większości krótkie punkty listy, które czyta się skanując
   wzrokiem — długi wiersz przeszkadza tam mniej niż w ciągłym akapicie.
   Szerokość i tak ogranicza kontener (80% okna). */
.proza--pelna { max-width: none; }

/* Regulamin porządkowy: śródtytuł tej samej wielkości co wyróżnione akapity
   nad nim i pod nim. Domyślny h2 był od nich wyraźnie większy i rozbijał
   dokument na dwie części, choć to jedna ciągła lista zasad. */
.proza--rowne h2 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  /* Ta sama grubość co <strong> w akapitach obok — inaczej przy równym
     stopniu pisma śródtytuł i tak odstawał. */
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  margin-block-start: var(--space-l);
}

/* ---- Dokument prawny (polityka prywatności, regulamin) ------------------- */
/* Czyta się go rzadko i wyrywkowo — zwykle szukając jednego punktu. Stąd
   numerowane sekcje z wyraźnymi odstępami zamiast ciągłego tekstu: łatwiej
   powiedzieć „patrz punkt 6” i łatwiej ten punkt znaleźć wzrokiem. */

.proza--dokument { max-width: 46rem; }

.dokument__data {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.dokument__wstep {
  margin-block-start: var(--space-l);
  font-size: var(--step-1);
  line-height: 1.55;
}
.dokument__sekcja { margin-block-start: var(--space-xl); }
.dokument__sekcja h2 {
  font-size: var(--step-1);
  margin-block-end: var(--space-s);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-border);
}
.dokument__sekcja ul { margin-block: var(--space-s); }
.dokument__sekcja li { margin-block-end: var(--space-2xs); }