/* ============================================================================
   baza.css — reset, typografia, siatka, przyciski, plakietki, fokus, ruch.
   Mobile-first. Zero !important poza wyłączeniem ruchu.
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--c-pow-3) var(--c-noc);
  scrollbar-width: thin;
  hanging-punctuation: first last;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--c-noc);
  color: var(--c-tekst-2);
  font-family: var(--font-tekst);
  font-size: var(--t-base);
  line-height: var(--lh-tekst);
  font-variation-settings: "wdth" 100, "wght" 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ziarno maskujące banding gradientów na tanich matrycach — jedna stała warstwa. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-tlo);
  background-image: var(--tlo-ziarno);
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@media (prefers-reduced-data: reduce) {
  body::before { display: none; }
}

main { position: relative; z-index: var(--z-tresc); }
main:focus { outline: none; }

::selection { background: var(--c-zloto); color: var(--c-noc); }

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }

/* ——— Typografia ——— */

h1, h2, h3, .h3, .cytat {
  font-family: var(--font-display);
  color: var(--c-tekst);
  letter-spacing: var(--ls-ciasny);
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
}

h1 { font-size: var(--t-3xl); font-weight: 700; line-height: var(--lh-ciasna); }
h2 { font-size: var(--t-2xl); font-weight: 700; line-height: var(--lh-ciasna); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96; }
h3, .h3 { font-size: var(--t-lg); font-weight: 600; line-height: var(--lh-naglowek); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36; letter-spacing: 0; }

.cytat {
  font-size: var(--t-lg);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-luzna);
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 72;
}

p { max-width: var(--maks-czytanie); text-wrap: pretty; }

.lead {
  font-size: var(--t-md);
  line-height: var(--lh-luzna);
  color: var(--c-tekst-2);
}

.dopisek {
  font-size: var(--t-sm);
  color: var(--c-tekst-3);
}

.liczba, time, .cena, td { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }

/* Etykieta nadsekcji — zawsze ze złotą kreską 24 px, zawsze obok nagłówka. */
.etykieta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--t-2xs);
  font-variation-settings: "wdth" 86, "wght" 600;
  letter-spacing: var(--ls-etykieta);
  text-transform: uppercase;
  color: var(--c-zloto);
  line-height: 1.2;
}

.etykieta::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  flex: none;
}

a {
  color: var(--c-tekst);
  text-decoration-color: var(--c-krawedz);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--ruch-szybki) var(--krzywa-wyjscia), text-decoration-color var(--ruch-szybki);
}

@media (hover: hover) {
  a:where(:not(.btn)):hover { color: var(--c-swiatlo); text-decoration-color: var(--c-zloto); }
}

.link-mocny {
  color: var(--c-tekst);
  font-variation-settings: "wdth" 100, "wght" 600;
  text-decoration-color: var(--c-zloto);
}

.link-przycisk {
  text-decoration: underline;
  text-decoration-color: var(--c-krawedz);
  text-underline-offset: 0.18em;
  color: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ——— Tekst ciągły (artykuł, polityka) ——— */

.tresc > * + * { margin-top: var(--s-5); }
.tresc h2 { font-size: var(--t-xl); margin-top: var(--s-8); }
.tresc h3 { margin-top: var(--s-6); }
.tresc h2 + *, .tresc h3 + * { margin-top: var(--s-3); }
.tresc ul, .tresc ol { max-width: var(--maks-czytanie); padding-left: 1.25em; }
.tresc ul { list-style: square; }
.tresc ol { list-style: decimal; }
.tresc li + li { margin-top: var(--s-2); }
.tresc li::marker { color: var(--c-zloto); }
.tresc blockquote { border-left: 1px solid var(--c-zloto); padding-left: var(--s-5); color: var(--c-tekst); font-style: italic; }
.tresc hr { border: 0; height: 1px; background: var(--c-hairline); }
.tresc strong { color: var(--c-tekst); font-variation-settings: "wdth" 100, "wght" 600; }

/* ——— Dostępność ——— */

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

.skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skiplink);
  padding: var(--s-3) var(--s-5);
  background: var(--c-swiatlo);
  color: var(--c-noc);
  font-variation-settings: "wdth" 100, "wght" 600;
  text-decoration: none;
  border-radius: var(--r-1);
  transform: translateY(calc(-100% - var(--s-6)));
  transition: transform var(--ruch-szybki) var(--krzywa-wyjscia);
}

.skip:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--c-zloto);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.plyta :focus-visible { outline-color: var(--c-plyta-czerwien); }

[id] { scroll-margin-top: calc(var(--h-naglowek) + var(--s-4)); }

/* Strażnik dla IntersectionObserver nagłówka — niewidoczny 1 px na szczycie dokumentu. */
.straznik { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ——— Siatka ——— */

.wnetrze {
  width: min(100% - 2 * var(--margines-bok), var(--maks-tresc));
  margin-inline: auto;
}

.sekcja { padding-block: var(--s-sekcja); }
.sekcja--pow-1 { background: var(--c-pow-1); box-shadow: var(--krawedz-gorna); }

.sekcja--granat {
  position: relative;
  background: var(--tlo-pas-granatowy);
  color: var(--c-granat-tekst-2);
}
.sekcja--granat .lead, .sekcja--granat .dopisek, .sekcja--granat p { color: var(--c-granat-tekst-2); }
.sekcja--granat h2, .sekcja--granat h3, .sekcja--granat strong { color: var(--c-swiatlo); }
.sekcja--granat .link-mocny { color: var(--c-swiatlo); }

.plyta {
  background: var(--c-plyta);
  color: var(--c-plyta-tekst-2);
  padding-block: var(--s-sekcja);
}
.plyta h1, .plyta h2, .plyta h3, .plyta strong { color: var(--c-plyta-tekst); }
.plyta .lead { color: var(--c-plyta-tekst-2); }
.plyta .dopisek { color: var(--c-plyta-tekst-3); }
.plyta .etykieta { color: var(--c-plyta-czerwien); }
.plyta a { color: var(--c-plyta-tekst); text-decoration-color: var(--c-plyta-czerwien); }
.plyta ::selection { background: var(--c-plyta-czerwien); color: #fff; }

.uklad-4-7, .uklad-5-7, .uklad-6-5 { display: grid; gap: var(--s-6) var(--rynna); }

.naglowek-sekcji { margin-bottom: var(--s-7); }
.naglowek-sekcji--z-linkiem { display: grid; gap: var(--s-4); align-items: end; }
.naglowek-sekcji .lead { margin-top: var(--s-4); }

@media (min-width: 1024px) {
  .uklad-4-7, .uklad-5-7, .uklad-6-5 { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .uklad-4-7 > .uklad__lewa { grid-column: 1 / span 4; }
  .uklad-4-7 > .uklad__prawa { grid-column: 6 / -1; }
  .uklad-5-7 > .uklad__lewa { grid-column: 1 / span 5; }
  .uklad-5-7 > .uklad__prawa { grid-column: 7 / -1; }
  .uklad-6-5 > .uklad__lewa { grid-column: 1 / span 6; }
  .uklad-6-5 > .uklad__prawa { grid-column: 8 / -1; }
  .uklad__lewa { position: sticky; top: calc(var(--h-naglowek) + var(--s-6)); }
  .naglowek-sekcji--z-linkiem { grid-template-columns: minmax(0, 1fr) auto; }
}

.uklad__lewa > .lead, .uklad__lewa > .dopisek { margin-top: var(--s-4); }
.uklad__lewa > .btn { margin-top: var(--s-5); }
.uklad__prawa > h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.uklad__prawa > h3:first-child { margin-top: 0; }
.uklad__prawa > .dopisek { margin-top: var(--s-5); }
.uklad__prawa > .lead + * { margin-top: var(--s-5); }

/* ——— Przyciski ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-1);
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-variation-settings: "wdth" 100, "wght" 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ruch-szybki) var(--krzywa-wyjscia),
              color var(--ruch-szybki) var(--krzywa-wyjscia),
              border-color var(--ruch-szybki) var(--krzywa-wyjscia),
              box-shadow var(--ruch-bazowy) var(--krzywa-wyjscia),
              transform var(--ruch-bazowy) var(--krzywa-wyjscia);
}

.btn .ikona { flex: none; }
.btn--duzy { min-height: 56px; padding-inline: var(--s-6); font-size: var(--t-base); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; color: var(--c-tekst-wyl); background: var(--c-pow-3); border-color: var(--c-pow-3); box-shadow: none; }

.btn--glowny { background: var(--c-swiatlo); color: var(--c-noc); }
.btn--czerwony { background: var(--c-czerwien); color: var(--c-noc); }
.btn--ghost { background: transparent; color: var(--c-tekst); border-color: var(--c-krawedz); }
.btn--tekstowy { background: transparent; color: var(--c-zloto); padding-inline: var(--s-2); min-height: 44px; }
.btn--na-plycie, .plyta .btn--na-plycie { background: var(--c-plyta-czerwien); color: #fff; }
.btn--zloty { background: var(--c-zloto); color: var(--c-noc); }
.btn--rowny { background: var(--c-pow-3); color: var(--c-tekst); border-color: var(--c-krawedz); }
.plyta .btn--ghost { color: var(--c-plyta-tekst); border-color: var(--c-plyta-tekst-3); }
.plyta .btn--tekstowy { color: var(--c-plyta-czerwien); }

@media (hover: hover) {
  .btn--glowny:hover { background: #fff; box-shadow: var(--poswiata-cel); transform: translateY(-1px); }
  .btn--czerwony:hover { background: var(--c-czerwien-jasna); box-shadow: var(--poswiata-cta); }
  .btn--ghost:hover { border-color: var(--c-krawedz-mocna); background: rgb(255 255 255 / 0.04); color: var(--c-swiatlo); }
  .btn--tekstowy:hover { color: var(--c-swiatlo); }
  .btn--tekstowy:hover .ikona { transform: translateX(4px); }
  .btn--na-plycie:hover { background: #9E1F0E; }
  .btn--zloty:hover { background: #E6C47E; }
  .btn--rowny:hover { background: var(--c-pow-3-hover); border-color: var(--c-krawedz-mocna); }
  .plyta .btn--ghost:hover { background: rgb(28 36 47 / 0.06); color: var(--c-plyta-tekst); }
  .plyta .btn--tekstowy:hover { color: var(--c-plyta-tekst); }
}

.btn--czerwony:active { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.3); }
.btn .ikona { transition: transform var(--ruch-bazowy) var(--krzywa-wyjscia); }

/* ——— Ikony ——— */

.ikona { width: 1.25em; height: 1.25em; flex: none; }
.ikona--mala { width: 1em; height: 1em; }

/* ——— Plakietki — kolor nigdy sam, zawsze z tekstem ——— */

.plakietka {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.2em 0.6em;
  border: 1px solid var(--c-krawedz);
  border-radius: var(--r-1);
  font-size: var(--t-2xs);
  font-variation-settings: "wdth" 86, "wght" 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-tekst-2);
  text-decoration: none;
  white-space: nowrap;
}

.plakietka--zloto { color: var(--c-zloto); border-color: var(--c-zloto-cien); background: rgb(214 179 106 / 0.08); }
.plakietka--czerwona { color: var(--c-czerwien-jasna); border-color: var(--c-czerwien-cien); background: rgb(243 63 39 / 0.1); }
.plakietka--nowe { color: var(--c-czerwien-jasna); border-color: var(--c-czerwien-cien); background: var(--c-czerwien-cien); }
.plakietka--zapisy { color: var(--c-noc); background: var(--c-zloto); border-color: var(--c-zloto); min-height: 44px; padding-inline: var(--s-4); white-space: normal; }
.plakietka--kategoria[data-kategoria="zawody"] { color: var(--c-zloto); border-color: var(--c-zloto-cien); }
.plakietka--kategoria[data-kategoria="wyniki"] { color: var(--c-czerwien-jasna); border-color: var(--c-czerwien-cien); }
.plakietka--kategoria[data-kategoria="klub"] { color: var(--c-tekst); border-color: var(--c-krawedz); }
.plakietka--kategoria[data-kategoria="strzelnica"] { color: var(--c-otwarte); border-color: #2B5A3A; }
.plakietka--naped[data-naped="sprezynowy"] { color: var(--c-tekst-2); border-color: var(--c-tekst-3); }
.plakietka--naped[data-naped="lamana"] { color: var(--c-tekst-2); border-color: var(--c-tekst-3); }
.plakietka--naped[data-naped="pca"] { color: var(--c-zloto); border-color: var(--c-zloto); }
.plakietka--naped[data-naped="pcp"] { color: var(--c-czerwien-jasna); border-color: var(--c-czerwien-jasna); }
.plakietka--naped[data-naped="brak"] { color: var(--c-tekst-3); border-color: var(--c-hairline); text-transform: none; letter-spacing: 0; }

@media (hover: hover) {
  .plakietka--zapisy:hover { background: #E6C47E; color: var(--c-noc); }
}

/* ——— Stany puste i sloty ——— */

.stan-pusty {
  position: relative;
  padding: var(--s-7) var(--s-6);
  border: 1px dashed var(--c-krawedz);
  border-radius: var(--r-3);
  overflow: hidden;
  color: var(--c-tekst-2);
}

.stan-pusty__tarcza {
  position: absolute;
  right: -8%;
  top: 50%;
  width: clamp(160px, 30%, 320px);
  height: auto;
  transform: translateY(-50%);
  color: var(--c-zloto);
  opacity: 0.35;
  pointer-events: none;
}

.stan-pusty--lewy { padding: var(--s-5); }
.stan-pusty--maly { padding: var(--s-5); }


/* ——— Listy cech ——— */

.lista-cech { display: grid; gap: var(--s-3); max-width: var(--maks-czytanie); }
.lista-cech li { position: relative; padding-left: var(--s-5); }
.lista-cech li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 8px;
  border-radius: var(--r-kolo);
  border: 1.5px solid var(--c-tekst-3);
}
.lista-cech--zloto li::before { border-color: var(--c-zloto); background: var(--c-zloto); }
.lista-cech--opisowa { gap: var(--s-4); }

/* ——— Ujawnianie przy scrollu — tylko z JS, bez JS wszystko widać od razu ——— */

html.js [data-odslon] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--ruch-reveal) var(--krzywa-wyjscia), transform var(--ruch-reveal) var(--krzywa-wyjscia);
  transition-delay: var(--opoznienie, 0ms);
}

html.js [data-odslon].widoczne { opacity: 1; transform: none; }

/* ——— Ruch ograniczony — wyłączamy jawnie, nie tylko skracamy ——— */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-odslon] { opacity: 1; transform: none; }
}