/* Arkusz podstawowy vbm-sprint.pl.
 *
 * Zasada rozłączności: w tym pliku nie ma ani jednej wartości koloru, czasu
 * ani stopnia pisma. Wszystkie pochodzą z tokenów wytworzonych z projekt/*.json.
 * Jeżeli musisz tu wpisać wartość heksadecymalną, to znaczy, że brakuje tokena.
 */

/* Lokalne kroje. Manrope jest plikiem zmiennym; rozdzielenie na latin i
 * latin-ext ogranicza transfer, zachowując pełny polski zestaw znaków. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonty/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonty/manrope-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;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonty/plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonty/plex-mono-500.woff2") format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--krój-tekst);
  font-size: var(--stopien-base);
  line-height: var(--interlinia-base);
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------- rama */

.rama { width: 100%; max-width: var(--szer-srodek); margin-inline: auto; padding-inline: var(--szer-margines); }
.rama--pelna { max-width: var(--szer-pelna); }

/* --------------------------------------------------------- typografia */

h1, h2, h3 { margin: 0 0 var(--skok-4); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--stopien-2xl); line-height: var(--interlinia-2xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--stopien-xl); line-height: var(--interlinia-xl); margin-top: var(--skok-16); }
h3 { font-size: var(--stopien-l); line-height: var(--interlinia-l); margin-top: var(--skok-12); }

p, ul, ol, blockquote { margin: 0 0 var(--skok-4); max-width: var(--miara-proza); }
ul, ol { padding-left: var(--skok-6); }
li { margin-bottom: var(--skok-2); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--signal-lime); }
:focus-visible { outline: 2px solid var(--data-cyan); outline-offset: 3px; }

code { font-family: var(--krój-mono); font-size: 0.9em; color: var(--data-cyan); }

blockquote {
  border-left: 2px solid var(--signal-lime);
  padding-left: var(--skok-4);
  color: var(--ink-soft);
}

.etykieta, .nadtytul, .okruszek {
  font-family: var(--krój-mono);
  font-size: var(--stopien-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  max-width: var(--miara-etykieta);
}

.lead { font-size: var(--stopien-m); line-height: var(--interlinia-m); color: var(--ink-soft); max-width: var(--miara-lead); }
.drobne { font-size: var(--stopien-s); color: var(--ink-dim); }

/* Materiał naukowy: metodyka, monografia, artykuły. Trzeci krój ma rolę,
   nie ozdobę — dlatego włącza się klasą, a nie w szablonie. */
.naukowy { font-family: var(--krój-naukowy); }

/* -------------------------------------------------------------- układ */

.pomin {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: var(--skok-3) var(--skok-4); z-index: var(--warstwa-nakladka);
}
.pomin:focus { left: var(--skok-4); top: var(--skok-4); }

.naglowek {
  position: sticky; top: 0; z-index: var(--warstwa-nawigacja);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}
.naglowek__rzad { display: flex; align-items: center; gap: var(--skok-6); min-height: 4rem; }
.nawigacja { display: none; gap: var(--skok-6); margin-left: auto; }
.nawigacja a { text-decoration: none; font-size: var(--stopien-s); color: var(--ink-soft); }
@media (min-width: 48rem) { .nawigacja { display: flex; } }

.znak { text-decoration: none; font-weight: 700; letter-spacing: -0.02em; }
.znak strong { color: var(--signal-lime); }
.znak sup { font-size: 0.55em; }

.przycisk {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--skok-2);
  padding: var(--skok-2) var(--skok-4);
  border: 1px solid var(--linia); border-radius: var(--promien-m);
  font-size: var(--stopien-s); text-decoration: none;
  transition: background var(--czas-signal) var(--krzywa-wyjscie),
              border-color var(--czas-signal) var(--krzywa-wyjscie);
}
@media (min-width: 48rem) { .przycisk { margin-left: 0; } }
.przycisk--sygnal:hover { background: var(--signal-lime); border-color: var(--signal-lime); color: var(--paper-deep); }

.strona { padding-block: var(--skok-16) var(--skok-24); }
.strona__wstep { margin-bottom: var(--skok-12); }
.strona__wstep h1 { margin-top: var(--skok-3); }
.jezyki { display: flex; flex-wrap: wrap; gap: var(--skok-4); padding-block: var(--skok-4); font-size: var(--stopien-s); }
.jezyki a { padding-block: var(--skok-2); }
.jezyki [aria-current="page"] { font-weight: 700; text-decoration: none; }
.jezyki + .strona { padding-top: var(--skok-8); }
.international .naglowek__rzad { flex-wrap: wrap; padding-block: var(--skok-3); }
.international .nawigacja { display: flex; flex-wrap: wrap; order: 3; flex-basis: 100%; gap: var(--skok-2) var(--skok-4); margin-left: 0; }
.international .nawigacja a { padding-block: var(--skok-2); }
@media (max-width: 63.999rem) {
  .international .naglowek { position: static; }
}
@media (min-width: 64rem) {
  .international .nawigacja { order: initial; flex-basis: auto; margin-left: auto; }
}
.strona .proza { font-size: var(--stopien-m); line-height: var(--interlinia-m); }
.strona .proza p { margin-bottom: var(--skok-6); }
.strona__wstep .okruszek:empty { display: none; }
@media (max-width: 35rem) {
  .strona__wstep h1 { font-size: clamp(2rem, 8vw, var(--stopien-2xl)); }
}

.stopka { border-top: 1px solid var(--linia); padding-block: var(--skok-12); margin-top: var(--skok-24); }
.stopka__siatka { display: grid; gap: var(--skok-8); }
.stopka__siatka nav { display: grid; gap: var(--skok-2); font-size: var(--stopien-s); }
@media (min-width: 48rem) { .stopka__siatka { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------------------------------------------------------------- ruch */

/* Tło jest warstwą pod treścią i nigdy jej nie przesłania. Bez JavaScriptu
   pozostaje pustym elementem — strona jest wtedy kompletna, tylko cicha. */
.tlo {
  position: fixed; inset: 0;
  z-index: var(--warstwa-tlo);
  pointer-events: none;
}
.tlo canvas { display: block; width: 100%; height: 100%; }

/* Profil utility nie rysuje tła: formularz i strona pod wyszukiwarkę nie mają
   demonstrować technologii. Reguła z brandbooka, karta „Profile wdrożenia”. */
body[data-ruch="utility"] .tlo,
body[data-ruch="editorial"] .tlo { display: none; }

[data-odslon] {
  opacity: 0;
  transform: translateY(var(--skok-3));
  transition:
    opacity var(--odslon-czas, var(--czas-reveal)) var(--odslon-krzywa, var(--krzywa-wyjscie)) var(--odslon-zwloka, 0ms),
    transform var(--odslon-czas, var(--czas-reveal)) var(--odslon-krzywa, var(--krzywa-wyjscie)) var(--odslon-zwloka, 0ms);
}
[data-odslon="gotowe"] { opacity: 1; transform: none; }

/* Ograniczona animacja. Postęp równy 1 bez transformacji — znaczenie zostaje
   w tekście, a wezwanie nie czeka na animację. WCAG 2.1 SC 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  [data-odslon] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Zasłona bezpieczeństwa: gdy skrypt nie wystartuje, treść i tak jest widoczna.
   Klasa dodawana przez silnik; jej brak oznacza pełną widoczność. */
html:not(.ruch-gotowy) [data-odslon] { opacity: 1; transform: none; }

/* Tabela zachowuje relacje kolumn; na wąskim ekranie przewija się jej region. */
.tabela-przewijana {
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto;
  margin-block: var(--skok-6);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
}
.tabela-przewijana table { width: 100%; min-width: 36rem; border-collapse: collapse; }
.tabela-przewijana th, .tabela-przewijana td {
  padding: var(--skok-3) var(--skok-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linia);
}
.tabela-przewijana th { font-weight: 700; background: var(--surface); }
.tabela-przewijana tbody tr:last-child td { border-bottom: 0; }