/* ==========================================================================
   BLOG - czytelnia i lista wpisow
   Ladowany tylko na wpisach, archiwach i wyszukiwarce (functions.php).

   Decyzja prowadzaca: cialo artykulu idzie na krem, nie na granat.
   Ksiega marki rezerwuje krem dla "kart formularzy i dokumentow", a poradnik
   na osiem tysiecy znakow jest dokumentem. Bialy tekst na granacie wyglada
   dobrze przez dwa akapity i meczy przez dwadziescia - przy tekstach, ktore
   maja pracowac na pozycjonowanie, przeczytanie do konca jest cala stawka.
   Granat zostaje tam, gdzie ma prowadzic: naglowek, wtret CTA, pas powiazanych.

   Nazwy klas po polsku - jak w reszcie motywu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Zmienne lokalne
   -------------------------------------------------------------------------- */
:root{
  /* 70 px paska naglowka + oddech. Ta sama liczba w sticky spisu tresci
     i w scroll-margin naglowkow - inaczej kotwica laduje pod paskiem. */
  --blog-top: 92px;
  /* 68 znakow. Powyzej ~75 oko gubi poczatek nastepnego wiersza, ponizej ~45
     tekst zaczyna skakac. To nie jest gust, to jest tempo czytania. */
  --blog-kolumna: 68ch;
}

/* --------------------------------------------------------------------------
   1. Pasek postepu czytania
   -------------------------------------------------------------------------- */
.czytnik-pasek{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:70;
  background:transparent; pointer-events:none;
}
.czytnik-pasek span{
  display:block; height:100%; width:0;
  background:var(--grad-cta);
  transform-origin:left center;
  transition:width .1s linear;
}

/* --------------------------------------------------------------------------
   3. Naglowek wpisu
   -------------------------------------------------------------------------- */
.wpis-hero{ background:var(--bg); padding-block:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,4vw,2.6rem); }
.wpis-hero__tresc{ max-width:min(100%, 62ch); }
.wpis-hero h1{
  margin:0;
  /* Naglowki wpisow bywaja dlugie ("Awaria centralnego ogrzewania - pekniety
     grzejnik..."). Skala z front-page rozbijalaby je na siedem wierszy. */
  font-size:clamp(1.85rem,3.6vw,2.9rem);
  line-height:1.14;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.wpis-hero__lead{ margin:1rem 0 0; max-width:60ch; }

/* Kategoria wpisu.
   Nie korzysta z `.eyebrow` - ta klasa jest w motywie wygaszona globalna
   regula `.eyebrow{display:none}` (kickery sekcji wylaczone decyzja klienta),
   wiec kategoria byla niewidoczna. Tu nie chodzi zreszta o kicker sygnaturowy
   z ukosnikiem, tylko o etykiete nawigacyjna - stad pigulka. */
.wpis-kat{
  display:inline-flex; align-items:center;
  margin-bottom:1rem; padding:.42rem .95rem; min-height:36px;
  border:1px solid var(--card-line); border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  font-family:var(--font-head); font-weight:800; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--orange-2); text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.wpis-kat:hover{ border-color:var(--orange-2); color:#fff; }

.wpis-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem;
  margin-top:1.2rem; font-size:.86rem; color:var(--text-muted);
}
.wpis-meta > *{ display:inline-flex; align-items:center; gap:.4rem; }
.wpis-meta > * + *::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }
.wpis-meta__akt{ color:var(--green); }
.wpis-meta__czas{ color:var(--orange-2); font-weight:600; }

/* --------------------------------------------------------------------------
   4. Kadr wyrozniajacy
   -------------------------------------------------------------------------- */
.wpis-kadr{ margin:0; background:linear-gradient(to bottom, var(--bg) 55%, var(--cream) 55%); }

.wpis-kadr__img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.wpis-kadr figcaption{
  margin-top:.7rem; font-size:.82rem; color:var(--ink-soft); text-align:center;
}

/* --------------------------------------------------------------------------
   5. Uklad czytelni
   -------------------------------------------------------------------------- */
.wpis-cialo{ padding-block:clamp(2.2rem,5vw,3.4rem) clamp(3rem,6vw,4.5rem); }

.wpis-uklad{
  display:grid;
  /* Bok pierwszy w siatce, ale drugi w DOM (order) - czytnik ekranu i
     klawiatura dostaja najpierw tresc, a nie spis i reklame kalkulatora. */
  grid-template-columns:minmax(220px,276px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
/* Kolumna boczna nie moze byc wyzsza od okna.
   ------------------------------------------------------------------
   `position:sticky` przykleja wylacznie GORNA krawedz - co nie miesci sie
   w oknie, wisi pod nim i jest nieosiagalne, bo strona przewija wtedy artykul,
   nie kolumne. Zmierzone na wpisie o pozarze domu: kolumna 895 px przy 808 px
   dostepnych, czyli karta CTA konczyla sie 87 px pod krawedzia ekranu i nikt
   jej nie widzial.
   Stad kolumna jako flex z twardym sufitem wysokosci: karta CTA ma staly
   rozmiar i jest zawsze widoczna, a spis tresci bierze reszte i przewija sie
   wewnatrz siebie (blog.js dosuwa do niego biezacy rozdzial). */
.wpis-bok{
  order:1;
  position:sticky; top:var(--blog-top);
  display:flex; flex-direction:column; gap:1.1rem;
  max-height:calc(100vh - var(--blog-top) - 1.5rem);
}
.wpis-glowna{ order:2; min-width:0; max-width:var(--blog-kolumna); }

/* --------------------------------------------------------------------------
   6. Spis tresci
   -------------------------------------------------------------------------- */
.spis{
  background:rgba(20,34,74,.04);
  border:1px solid var(--cream-line);
  border-radius:var(--r-md);
  padding:1.1rem 1.15rem;
  /* `min-height:0` jest tu obowiazkowe: element flex domyslnie nie kurczy sie
     ponizej swojej tresci, wiec bez tego spis rozpycha kolumne mimo sufitu
     i CTA znow ucieka pod ekran. */
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto;
}
.spis__tytul{
  margin:0 0 .7rem; font-family:var(--font-head); font-weight:800;
  /* --ink-soft, nie --orange: pomarancz w tym rozmiarze daje 2,6:1 na kremie.
     Pomarancz zostaje w grafice (kreska nad H2, romby list, obwodka bloku
     "W skrocie"), gdzie prog kontrastu tekstu go nie dotyczy. */
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.spis__lista{
  list-style:none; margin:0; padding:0;
  /* Bierze cala reszte kolumny i przewija sie w sobie, zamiast wypychac CTA. */
  flex:1 1 auto; min-height:0; overflow-y:auto;
  scrollbar-width:thin;
}
.spis__poz a{
  display:block; padding:.34rem .55rem .34rem .7rem;
  font-size:.86rem; line-height:1.35; color:var(--ink-soft); text-decoration:none;
  border-left:2px solid transparent; border-radius:0 6px 6px 0;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.spis__poz a:hover{ color:var(--ink); background:rgba(20,34,74,.05); }
/* Stan aktywny ustawia blog.js (scrollspy). */
.spis__poz.is-akt > a{
  color:var(--ink); font-weight:700;
  border-left-color:var(--orange); background:var(--orange-soft);
}

/* Podpunkty rozdzialu: zwiniete, rozwijane pod rozdzialem czytanym w tej
   chwili. Czytelnik widzi 12 rozdzialow zamiast 54 pozycji, a szczegoly
   pojawiaja sie dokladnie tam, gdzie sa mu potrzebne.
   Bez JavaScriptu zostaje czysta lista rozdzialow - to dziala, a nie psuje. */
.spis__pod{ list-style:none; margin:0; padding:0; display:none; }
.spis__poz--h2.is-otwarta > .spis__pod{ display:block; }
.spis__pod .spis__poz a{
  /* --ink-soft, nie --ink-mute: ten drugi daje na tle spisu 2,63:1.
     Poziom podpunktu niesie wciecie i mniejszy stopien pisma, nie przygaszony
     kolor - to samo rozroznienie, bez schodzenia pod prog czytelnosci. */
  padding-left:1.5rem; font-size:.81rem; line-height:1.3;
  color:var(--ink-soft);
}
.spis__pod .spis__poz a:hover{ color:var(--ink); }
.spis__pod .spis__poz.is-akt > a{ color:var(--ink); font-weight:700; }
/* Rozdzial otwarty zostaje czytelny nawet wtedy, gdy aktywny jest jego podpunkt. */
.spis__poz--h2.is-otwarta > a{ color:var(--ink); font-weight:700; }

/* Wariant mobilny - zwijany, nad trescia. */
.spis--mobi{ display:none; margin:0 0 1.6rem; }
.spis--mobi summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-head); font-weight:800; font-size:.8rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  min-height:var(--tap, 44px);
}
.spis--mobi summary::-webkit-details-marker{ display:none; }
.spis--mobi summary::after{ content:"+"; font-size:1.3rem; line-height:1; color:var(--orange-700); }
.spis--mobi[open] summary::after{ content:"–"; }
.spis__ile{
  font-size:.72rem; background:var(--orange-soft); color:var(--ink);
  border-radius:var(--r-pill); padding:.1rem .5rem; letter-spacing:0;
}
.spis--mobi .spis__lista{ margin-top:.8rem; max-height:none; overflow:visible; }

/* --------------------------------------------------------------------------
   8. "W skrocie" - blok odpowiedzi
   -------------------------------------------------------------------------- */
/* Ten blok jest celem `speakable` w danych strukturalnych: to stad model
   jezykowy i wyszukiwarka biora odpowiedz. Dlatego stoi nad trescia i jest
   jedynym elementem artykulu z pelnym kolorem marki. */
.artykul__skrot{
  position:relative;
  background:#fff;
  border:1px solid var(--cream-line);
  border-left:4px solid var(--orange);
  border-radius:var(--r-md);
  padding:1.25rem 1.4rem 1.35rem;
  margin:0 0 2.2rem;
  box-shadow:0 10px 30px rgba(20,34,74,.07);
}
.artykul__skrot-tytul{
  margin:0 0 .8rem !important;
  font-family:var(--font-head); font-weight:800;
  font-size:.76rem !important; letter-spacing:.14em; text-transform:uppercase;
  /* Jawnie --ink. Wczesniej wychodzil granatowy przypadkiem - przez regule
     `.section--light h2` z main.css, ktora bila selektor tej klasy. */
  color:var(--ink);
}
.artykul__skrot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.artykul__skrot li{
  position:relative; padding-left:1.6rem;
  font-size:1rem; line-height:1.6; color:var(--ink); font-weight:500;
}
.artykul__skrot li::before{
  content:""; position:absolute; left:.15rem; top:.55em;
  width:8px; height:8px; border-radius:2px;
  background:var(--orange); transform:rotate(45deg);
}

/* --------------------------------------------------------------------------
   9. Typografia artykulu
   -------------------------------------------------------------------------- */
.artykul__tresc{
  color:var(--ink-soft);
  font-size:1.075rem;
  line-height:1.75;
  overflow-wrap:break-word;
}
.artykul__tresc > *:first-child{ margin-top:0; }
/* Kolor akapitu przez dziedziczenie, nie regula `.artykul__tresc p{color}`.
   Wtret CTA i callouty siedza WEWNATRZ tresci, wiec taka regula (specyficznosc
   0,1,1) wygrywala z ich wlasnymi klasami (0,1,0) i malowala bialy tekst na
   granatowej karcie kolorem tekstu na kremie. Dziedziczenie pozwala kazdemu
   wtretowi ustawic swoj kolor raz, na kontenerze. */
.artykul__tresc p{ margin:0 0 1.25em; }

/* Pierwszy akapit prowadzi - wieksza skala oddziela wstep od reszty i daje
   oku miejsce startu. */
.artykul__tresc > p:first-of-type{
  font-size:1.16rem; line-height:1.62; color:var(--ink);
}

/* Biale na kremie - zabezpieczenie przed dziura w kaskadzie motywu.
   ------------------------------------------------------------------
   `main.css:116` maluje `h1,h2,h3,h4` na bialo, `strong` i `a` tak samo.
   `.section--light` (main.css:151) przestawia z tego **tylko h2-h4**, wiec
   w artykule na kremie zostawalo bialo na bialym:
     - <h1> w tresci trzech wpisow (redakcja zaczynala nim artykul),
     - <strong> w osmiu odpowiedziach FAQ w pieciu wpisach.
   Enumeracja pojemnikow, a nie jedna szeroka regula na `.wpis-cialo` -
   w tej samej sekcji siedza ciemne wyspy (karta CTA, wtret), gdzie bialy
   tekst jest poprawny. */
.artykul__tresc :is(h1,h5,h6),
.artykul__skrot :is(h1,h2,h3,h4,h5,h6),
.artykul__pytania > :is(h1,h2,h3,h4),
.artykul__zrodla :is(h1,h2,h3,h4){ color:var(--ink); }

.faq--artykul .faq__a :is(strong,b),
.artykul__zrodla :is(strong,b),
.artykul__skrot :is(strong,b),
.artykul__autor :is(strong,b){ color:var(--ink); }

.artykul__tresc h2,
.artykul__tresc h3,
.artykul__tresc h4{
  color:var(--ink); font-family:var(--font-head); letter-spacing:-.01em;
  text-wrap:balance;
  /* Kotwica ma zatrzymac sie pod paskiem naglowka, nie za nim. */
  scroll-margin-top:var(--blog-top);
}
.artykul__tresc h2{
  position:relative;
  margin:2.6em 0 .75em; font-size:clamp(1.45rem,2.5vw,1.85rem); font-weight:800; line-height:1.22;
  padding-top:1.4rem;
}
/* Kreska nad H2 zamiast linii przez cala szerokosc: dzieli tekst na rozdzialy,
   nie na tabelke. */
.artykul__tresc h2::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:3px; border-radius:2px; background:var(--orange);
}
.artykul__tresc h3{ margin:2em 0 .6em; font-size:clamp(1.14rem,1.8vw,1.32rem); font-weight:700; line-height:1.3; }
.artykul__tresc h4{ margin:1.7em 0 .5em; font-size:1.04rem; font-weight:700; }

/* Link w tresci: tekst granatowy, pomarancz w podkresleniu.
   ------------------------------------------------------------------
   Zmierzone na tym tle: --orange daje 2,82:1, a --orange-700 4,22:1 przy
   wymaganych 4,5:1 (WCAG AA, tekst ponizej 18,66 px). Pomaranczowy link
   w akapicie jest wiec dla marki nie do uratowania. Przeniesienie koloru
   do podkreslenia rozwiazuje to bez strat: podkreslenie jest elementem
   nietekstowym i nie podlega progowi 4,5:1, a link nadal czyta sie jako
   pomaranczowy. Tekst siedzi na 14,5:1.
   `:not(.btn)` - inaczej regula przemalowuje tekst przycisku CTA
   wstawionego w srodek artykulu (0,2,1 kontra 0,1,0). */
.artykul__tresc a:not(.btn){
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
  text-decoration-color:var(--orange);
  border-radius:3px;
  transition:text-decoration-color .18s ease, background .18s ease;
}
.artykul__tresc a:not(.btn):hover{
  text-decoration-color:var(--orange-700);
  background:var(--orange-soft);
  box-shadow:0 0 0 3px var(--orange-soft);
}

.artykul__tresc strong,
.artykul__tresc b{ color:var(--ink); font-weight:700; }

/* Listy: znacznik pomaranczowy, wciecie stale niezaleznie od liczby pozycji. */
.artykul__tresc ul,
.artykul__tresc ol{ margin:0 0 1.35em; padding:0; list-style:none; }
.artykul__tresc li{ position:relative; padding-left:1.75rem; margin-bottom:.6em; }
.artykul__tresc li:last-child{ margin-bottom:0; }
.artykul__tresc ul > li::before{
  content:""; position:absolute; left:.42rem; top:.72em;
  width:7px; height:7px; border-radius:2px; background:var(--orange); transform:rotate(45deg);
}
.artykul__tresc ol{ counter-reset:ksz-li; }
.artykul__tresc ol > li{ counter-increment:ksz-li; }
.artykul__tresc ol > li::before{
  content:counter(ksz-li);
  position:absolute; left:0; top:.06em;
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--orange-soft); color:var(--orange-700);
  font-family:var(--font-head); font-weight:800; font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
}
.artykul__tresc li > ul,
.artykul__tresc li > ol{ margin:.55em 0 0; }

.artykul__tresc blockquote{
  margin:1.9em 0; padding:.2rem 0 .2rem 1.5rem;
  border-left:3px solid var(--orange);
  font-size:1.16rem; line-height:1.6; color:var(--ink); font-style:normal; font-weight:500;
}
.artykul__tresc blockquote p:last-child{ margin-bottom:0; }
.artykul__tresc blockquote cite{ display:block; margin-top:.6rem; font-size:.86rem; color:var(--ink-mute); font-style:normal; }

.artykul__tresc img{
  max-width:100%; height:auto; display:block;
  border-radius:var(--r-md); margin:1.8em 0;
}

/* Emoji zapisane w tresci jako <img>.
   ------------------------------------------------------------------
   WordPress zamienia znaki emoji na obrazki z s.w.org i czasem zapisuje je
   w tresci BEZ klasy `emoji` - wtedy nie lapie ich zadna regula rozmiaru.
   Regula obrazka artykulu robila z takiego znaku blok na cala szerokosc
   kolumny: znak ostrzegawczy w poradniku o SKD mial 771 x 771 px przy
   naturalnych 150 x 150. SVG nie ma wlasnych wymiarow w pikselach, wiec
   `display:block` + `max-width:100%` rozciaga go do szerokosci rodzica.
   Stad dopasowanie po adresie, nie po klasie - klasy tu po prostu nie ma. */
.artykul__tresc img.emoji,
.artykul__tresc img[src*="/core/emoji/"]{
  display:inline-block;
  width:1em; height:1em;
  margin:0 .05em 0 .1em;
  vertical-align:-.1em;
  border-radius:0; box-shadow:none; background:none;
}
.artykul__tresc figure{ margin:1.8em 0; }
.artykul__tresc figure img{ margin:0; }
.artykul__tresc figcaption{ margin-top:.6rem; font-size:.84rem; color:var(--ink-mute); text-align:center; }

.artykul__tresc hr{
  border:0; height:1px; background:var(--cream-line); margin:2.6em 0;
}

/* Tekst preformatowany.
   ------------------------------------------------------------------
   W tym serwisie <pre> to nie kod, tylko wzor pisma do przepisania
   (odwolanie, wezwanie do zaplaty). Stad wyglad dokumentu - jasne tlo
   i obrys - a nie ciemny blok konsoli.
   `pre-wrap` zamiast poziomego przewijania: pismo ma sie zawijac, bo czyta
   sie je w calosci. Bez tego blok wychodzil poza ekran i rozpychal cala
   strone w poziomie (zmierzone przy oknie 1100 px: dokument 1170 px). */
.artykul__tresc pre{
  margin:1.8em 0; padding:1.1rem 1.25rem;
  background:#fff;
  border:1px solid var(--cream-line); border-left:4px solid var(--ink-soft);
  border-radius:var(--r-md);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.86rem; line-height:1.65; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:break-word;
  max-width:100%; overflow-x:auto;
}
.artykul__tresc code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.9em; overflow-wrap:break-word;
  background:rgba(20,34,74,.06); color:var(--ink);
  padding:.1em .35em; border-radius:4px;
}
.artykul__tresc pre code{ background:none; padding:0; font-size:inherit; }

/* --------------------------------------------------------------------------
   10. Callouty (skladane w inc/blog.php z akapitow "Uwaga:", "Wskazowka:"...)
   -------------------------------------------------------------------------- */
.artykul__callout{
  margin:1.8em 0; padding:1.05rem 1.25rem 1.05rem 3.1rem;
  border-radius:var(--r-md);
  border:1px solid var(--cream-line);
  background:#fff;
  position:relative;
  color:var(--ink);
}
.artykul__callout p{ margin:0; font-size:1.01rem; line-height:1.62; }
.artykul__callout p + p{ margin-top:.7em; }
.artykul__callout::before{
  position:absolute; left:1.1rem; top:1.05rem;
  width:1.35rem; height:1.35rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:.82rem; color:#fff;
}
/* Ksiega marki nie ma czerwieni - ostrzezenie niesie ciemny pomarancz.
   To jest ten sam wybor, co --danger: var(--orange-700). */
.artykul__callout--uwaga{ border-left:4px solid var(--orange-700); }
.artykul__callout--uwaga::before{ content:"!"; background:var(--orange-700); }
.artykul__callout--wskazowka{ border-left:4px solid var(--green-700); }
.artykul__callout--wskazowka::before{ content:"✓"; background:var(--green-700); font-size:.72rem; }
.artykul__callout--pamietaj{ border-left:4px solid var(--orange); }
.artykul__callout--pamietaj::before{ content:"★"; background:var(--orange); font-size:.7rem; }
.artykul__callout--przyklad{ border-left:4px solid var(--ink-soft); }
.artykul__callout--przyklad::before{ content:"§"; background:var(--ink-soft); }

/* --------------------------------------------------------------------------
   11. Tabele
   -------------------------------------------------------------------------- */
.artykul__tabela{
  margin:1.9em 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--cream-line); border-radius:var(--r-md); background:#fff;
}
.artykul__tabela:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
.artykul__tresc table{
  width:100%; border-collapse:collapse; font-size:.95rem; min-width:34rem;
}
.artykul__tresc thead th{
  background:var(--bg-3); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase;
  text-align:left; padding:.8rem 1rem; white-space:nowrap;
}
.artykul__tresc td,
.artykul__tresc tbody th{
  padding:.75rem 1rem; border-top:1px solid var(--cream-line);
  color:var(--ink-soft); vertical-align:top; text-align:left;
}
.artykul__tresc tbody th{ color:var(--ink); font-weight:700; }
.artykul__tresc tbody tr:nth-child(even){ background:rgba(20,34,74,.025); }

/* --------------------------------------------------------------------------
   12. Wtret CTA w srodku artykulu
   -------------------------------------------------------------------------- */
.artykul__wtret{
  margin:2.6em 0; padding:1.5rem 1.6rem;
  background:var(--bg-3); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  /* Kolor na kontenerze - akapity dziedzicza, wiec typografia artykulu
     nie ma czego nadpisac. */
  color:rgba(255,255,255,.7);
}
.artykul__wtret-tekst{ flex:1 1 20rem; min-width:0; }
.artykul__wtret p{ margin:0; }
.artykul__wtret-kicker{
  margin:0 0 .4rem !important; font-family:var(--font-head); font-weight:800;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-2);
}
.artykul__wtret-tytul{ margin:0 0 .35rem !important; font-family:var(--font-head); font-weight:800; font-size:1.16rem; line-height:1.3; color:#fff; }
.artykul__wtret-opis{ font-size:.92rem; line-height:1.55; }
.artykul__wtret-akcje{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
/* `a.` w selektorze, nie sama klasa: regula linku w tresci to `a:not(.btn)`,
   czyli specyficznosc 0,2,1 - selektor bez typu (0,2,0) by z nia przegral
   i numer zostalby ciemnopomaranczowy na granacie, ponizej progu kontrastu. */
.artykul__tresc a.artykul__wtret-tel{
  display:inline-flex; align-items:center; min-height:var(--tap, 44px);
  color:#fff; font-weight:700; text-decoration:none; white-space:nowrap;
}
.artykul__tresc a.artykul__wtret-tel:hover{ color:var(--orange-2); text-decoration:none; }

/* --------------------------------------------------------------------------
   13. Pytania pod artykulem
   -------------------------------------------------------------------------- */
.artykul__pytania{ margin-top:3rem; scroll-margin-top:var(--blog-top); }
.artykul__pytania > h2{
  position:relative; margin:0 0 1.2rem; padding-top:1.4rem;
  font-size:clamp(1.45rem,2.5vw,1.85rem); font-weight:800; color:var(--ink);
}
.artykul__pytania > h2::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:3px; border-radius:2px; background:var(--orange);
}
.faq--artykul{ max-width:none; margin-inline:0; }
.faq--artykul .faq__item{ background:#fff; border-color:var(--cream-line); }
.faq--artykul .faq__item summary{ color:var(--ink); font-size:1rem; line-height:1.4; align-items:flex-start; }
.faq--artykul .faq__item[open] summary{ color:var(--orange-700); }
.faq--artykul .faq__item summary::after{ color:var(--orange-700); margin-top:.1em; }
.faq--artykul .faq__a{ color:var(--ink-soft); }
.faq--artykul .faq__a p{ color:var(--ink-soft); margin:0 0 .8em; }
.faq--artykul .faq__a p:last-child{ margin-bottom:0; }
.faq--artykul .faq__a ul,
.faq--artykul .faq__a ol{ margin:0 0 .8em; padding-left:1.3rem; }
.faq--artykul .faq__a a{
  color:var(--ink); font-weight:600; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:.16em; text-decoration-color:var(--orange);
}
.faq--artykul .faq__a a:hover{ text-decoration-color:var(--orange-700); }

/* --------------------------------------------------------------------------
   14. Zrodla
   -------------------------------------------------------------------------- */
.artykul__zrodla{
  margin-top:2.8rem; padding:1.3rem 1.5rem;
  background:#fff; border-radius:var(--r-md);
  border:1px solid var(--cream-line);
}
.artykul__zrodla h2{
  margin:0 0 .8rem; font-family:var(--font-head); font-weight:800;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.artykul__zrodla ol{ margin:0; padding-left:1.2rem; display:grid; gap:.45rem; }
.artykul__zrodla li{ font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
.artykul__zrodla a{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:.16em; text-decoration-color:var(--orange);
}
.artykul__zrodla a:hover{ text-decoration-color:var(--orange-700); background:var(--orange-soft); }

/* --------------------------------------------------------------------------
   15. Podpis autora / eksperta
   -------------------------------------------------------------------------- */
.artykul__autor{
  margin-top:2.2rem; padding:1.3rem 1.5rem;
  background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-md);
  display:flex; gap:1.1rem; align-items:flex-start;
}
.artykul__autor-foto{
  flex:0 0 auto; width:72px; height:72px; border-radius:50%;
  object-fit:cover; border:2px solid var(--cream-line);
}
.artykul__autor-rola{
  margin:0 0 .2rem; font-family:var(--font-head); font-weight:800;
  /* --green-700 daje tu 4,09:1, ponizej progu. Zielen zostaje tam, gdzie
     pracuje na granacie (kicker karty CTA): tam ma ponad 7:1. */
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.artykul__autor-imie{ margin:0 0 .35rem; font-family:var(--font-head); font-weight:800; font-size:1.04rem; color:var(--ink); }
.artykul__autor-opis{ margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.artykul__autor-opis a{ color:var(--orange-700); font-weight:700; }

/* --------------------------------------------------------------------------
   16. Powiazane wpisy
   -------------------------------------------------------------------------- */
.wpis-dalej{ background:var(--bg-2); }
.wpis-dalej h2{ margin:0 0 1.8rem; }

/* --------------------------------------------------------------------------
   17. Lista wpisow
   -------------------------------------------------------------------------- */
.blog-hero{ background:var(--bg); padding-block:clamp(2.4rem,5.5vw,3.8rem) clamp(1.8rem,4vw,2.6rem); }
.blog-hero h1{ margin:0; font-size:clamp(2rem,4vw,3rem); line-height:1.12; text-wrap:balance; }
.blog-hero__lead{ margin:1rem 0 0; max-width:64ch; }

.blog-szukaj{
  margin-top:1.6rem; display:flex; gap:.6rem; flex-wrap:wrap;
  max-width:38rem;
}
.blog-szukaj input[type="search"]{
  flex:1 1 16rem; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid var(--card-line);
  border-radius:var(--r-pill); padding:.9rem 1.3rem;
  color:#fff; font-family:var(--font-body); font-size:.98rem;
  min-height:var(--tap, 44px);
}
.blog-szukaj input::placeholder{ color:var(--text-muted); }
.blog-szukaj input:focus{ outline:2px solid var(--orange-2); outline-offset:1px; border-color:transparent; }
.blog-szukaj .btn{ padding-inline:1.5rem; }

/* Pigulki kategorii */
.blog-filtry{ background:var(--bg); padding-bottom:.4rem; }
.blog-filtry__lista{
  list-style:none; margin:0; padding:.2rem 0 .9rem;
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.pigulka{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:var(--r-pill);
  border:1px solid var(--card-line); background:rgba(255,255,255,.04);
  font-family:var(--font-head); font-weight:700; font-size:.86rem;
  color:var(--text); text-decoration:none;
  min-height:36px;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.pigulka:hover{ border-color:var(--orange-2); color:#fff; }
.pigulka.is-akt{ background:var(--grad-cta); border-color:transparent; color:var(--ink); }
.pigulka__ile{ font-size:.74rem; font-weight:800; opacity:.65; }
.pigulka.is-akt .pigulka__ile{ opacity:.75; }

.blog-lista{ padding-top:clamp(1.6rem,4vw,2.6rem); }

/* Wpis wyrozniony */
.blog-wyrozniony{ margin-bottom:clamp(1.6rem,4vw,2.6rem); }
/* Dwie klasy w selektorze, nie jedna: regula bazowa `.post-card{display:flex}`
   stoi nizej w pliku i przy rownej specyficznosci wygrywala - karta wyrozniona
   skladala sie w jedna kolumne z obrazkiem na cala szerokosc. */
.post-card.post-card--duza{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch;
}
.post-card--duza .post-card__kadr{ height:100%; }
.post-card--duza .post-card__img{ height:100%; aspect-ratio:16/10; min-height:17rem; max-height:26rem; }
.post-card--duza .post-card__body{ padding:clamp(1.4rem,3vw,2.2rem); justify-content:center; }
.post-card--duza .post-card__tytul{ font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.2; }
.post-card--duza .post-card__zajawka{ font-size:1rem; -webkit-line-clamp:4; line-clamp:4; }
/* Bez `margin-top:auto` z karty zwyklej: przy wysokiej karcie wyroznionej
   stopka odjezdzala na sam dol i zostawiala dziure pod zajawka. */
.post-card--duza .post-card__stopka{ margin-top:1.1rem; }

/* Karta */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:stretch; }
.post-card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid var(--card-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-card:hover{ transform:translateY(-3px); border-color:var(--orange); box-shadow:var(--shadow-card); }
.post-card__kadr{ position:relative; display:block; overflow:hidden; }
.post-card__img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  background:var(--bg-3);
  transition:transform .5s var(--ease-ios, ease);
}
.post-card:hover .post-card__img{ transform:scale(1.04); }
.post-card__kat{
  position:absolute; left:.85rem; top:.85rem;
  background:rgba(15,33,66,.86); backdrop-filter:blur(6px);
  color:var(--orange-2);
  font-family:var(--font-head); font-weight:800; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:var(--r-pill);
}
.post-card__body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.post-card__tytul{
  margin:0; font-family:var(--font-head); font-weight:800;
  font-size:1.06rem; line-height:1.32; color:#fff;
}
.post-card__tytul a{ color:inherit; text-decoration:none; }
/* Cala karta klikalna, ale w DOM jest jeden link - bez pulapki "12 tabow
   na kafelek", ktora robi lista linkow w karcie. */
.post-card__tytul a::after{ content:""; position:absolute; inset:0; z-index:1; }
.post-card__tytul a:focus-visible{ outline:none; }
.post-card:has(a:focus-visible){ outline:3px solid var(--orange-2); outline-offset:3px; }
.post-card__zajawka{
  margin:0; font-size:.92rem; line-height:1.55; color:var(--text);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}
.post-card__stopka{
  margin-top:auto; padding-top:.4rem;
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  font-size:.79rem; color:var(--text-muted);
}
.post-card__kropka{ opacity:.5; }

/* Paginacja */
.blog-lista .pagination{ margin-top:clamp(2rem,5vw,3rem); }
.blog-lista .nav-links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.45rem;
}
.blog-lista .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap, 44px); min-height:var(--tap, 44px); padding-inline:.9rem;
  border-radius:var(--r-pill); border:1px solid var(--card-line);
  font-family:var(--font-head); font-weight:700; font-size:.92rem;
  color:var(--text); text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.blog-lista .page-numbers:hover{ border-color:var(--orange-2); color:#fff; }
.blog-lista .page-numbers.current{ background:var(--grad-cta); border-color:transparent; color:var(--ink); }
.blog-lista .page-numbers.dots{ border-color:transparent; }
.blog-lista .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Pustka */
.blog-pusto{ max-width:44rem; margin-inline:auto; text-align:center; padding-block:clamp(2rem,6vw,4rem); }
.blog-pusto h2{ margin:0 0 .7rem; }
.blog-pusto .lead{ margin-inline:auto; }
.blog-pusto__etykieta{ margin:2rem 0 .8rem; font-size:.86rem; color:var(--text-muted); }
.blog-pusto__tematy{ justify-content:center; }
.blog-pusto__akcje{ margin-top:1.8rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   18. Pomocnicze
   -------------------------------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   19. Motyw jasny
   Tokeny --cream / --ink przestawiaja sie same, wiec artykul dziala bez zmian.
   Poprawiamy tylko to, co bylo liczone na granatowe tlo strony.
   -------------------------------------------------------------------------- */

[data-theme="light"] .wpis-hero,
[data-theme="light"] .blog-hero,
[data-theme="light"] .blog-filtry{ background:var(--bg); }
[data-theme="light"] .wpis-hero h1,
[data-theme="light"] .blog-hero h1{ color:var(--text-strong); }
[data-theme="light"] .wpis-kat{ background:rgba(20,34,74,.05); border-color:var(--card-line); color:var(--orange-700); }
[data-theme="light"] .wpis-kat:hover{ border-color:var(--orange); color:var(--ink); }
[data-theme="light"] .wpis-meta{ color:var(--ink-mute); }
[data-theme="light"] .wpis-meta__akt{ color:var(--green-700); }
[data-theme="light"] .wpis-meta__czas{ color:var(--orange-700); }
[data-theme="light"] .wpis-kadr{ background:linear-gradient(to bottom, var(--bg) 55%, var(--cream) 55%); }

[data-theme="light"] .blog-szukaj input[type="search"]{
  background:#fff; border-color:var(--cream-line); color:var(--ink);
}
[data-theme="light"] .blog-szukaj input::placeholder{ color:var(--ink-mute); }

[data-theme="light"] .pigulka{ background:#fff; border-color:var(--cream-line); color:var(--ink-soft); }
[data-theme="light"] .pigulka:hover{ border-color:var(--orange); color:var(--ink); }
[data-theme="light"] .pigulka.is-akt{ color:var(--ink); }

[data-theme="light"] .post-card{ background:#fff; border-color:var(--cream-line); }
[data-theme="light"] .post-card__tytul{ color:var(--ink); }
[data-theme="light"] .post-card__zajawka{ color:var(--ink-soft); }
[data-theme="light"] .post-card__stopka{ color:var(--ink-mute); }
[data-theme="light"] .post-card__img{ background:var(--bg-2); }

[data-theme="light"] .blog-lista .page-numbers{ border-color:var(--cream-line); color:var(--ink-soft); }
[data-theme="light"] .blog-lista .page-numbers:hover{ border-color:var(--orange); color:var(--ink); }
[data-theme="light"] .wpis-dalej{ background:var(--bg-2); }

/* --------------------------------------------------------------------------
   20. Warstwa mobilna
   -------------------------------------------------------------------------- */
@media (max-width: 1080px){
  .wpis-uklad{ grid-template-columns:1fr; }
  /* Sticky w jednej kolumnie przyklejalby spis do gory na cala dlugosc
     artykulu i zajmowal pol ekranu - tu wraca zwijany wariant nad trescia. */
  .wpis-bok{ position:static; order:3; margin-top:2.4rem; }
  .wpis-bok .spis{ display:none; }
  .wpis-glowna{ order:1; max-width:none; }
  .spis--mobi{ display:block; }
  /* Spis na telefonie jest nawigacja kciukiem, nie lista do czytania -
     pozycje dostaja pelna wysokosc celu dotykowego. */
  .spis--mobi .spis__poz a{ min-height:var(--tap, 44px); display:flex; align-items:center; }
  .bok-cta{ max-width:34rem; }
}

@media (max-width: 900px){
  .posts{ grid-template-columns:repeat(2,1fr); }
  .post-card.post-card--duza{ grid-template-columns:1fr; }
  .post-card--duza .post-card__img{ min-height:0; max-height:none; aspect-ratio:16/9; }
}

@media (max-width: 620px){
  .posts{ grid-template-columns:1fr; }
  .wpis-hero{ padding-block:1.6rem 1.3rem; }
  .artykul__tresc{ font-size:1.04rem; line-height:1.72; }
  .artykul__tresc > p:first-of-type{ font-size:1.1rem; }
  .artykul__tresc h2{ margin-top:2.1em; }
  .artykul__wtret{ padding:1.25rem; }
  .artykul__wtret-akcje{ width:100%; }
  .artykul__wtret-akcje .btn{ flex:1 1 auto; }
  .artykul__autor{ flex-direction:column; gap:.9rem; }
  .artykul__skrot{ padding:1.1rem 1.15rem 1.2rem; }
  .artykul__callout{ padding:.95rem 1.1rem .95rem 2.9rem; }
  .blog-szukaj .btn{ width:100%; }
  /* Pigulki jako karuzela - dwanascie kategorii lamie sie na piec wierszy
     i spycha liste wpisow pod zagiecie. */
  .blog-filtry__lista{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-inline:clamp(1rem,4vw,2rem); margin-inline:calc(-1 * clamp(1rem,4vw,2rem));
    scroll-snap-type:x proximity;
  }
  .blog-filtry__lista::-webkit-scrollbar{ display:none; }
  .blog-filtry__lista > li{ flex:0 0 auto; scroll-snap-align:start; }
}

/* --------------------------------------------------------------------------
   21. Ruch ograniczony i druk
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .czytnik-pasek span{ transition:none; }
  .post-card,
  .post-card__img{ transition:none; }
  .post-card:hover{ transform:none; }
  .post-card:hover .post-card__img{ transform:none; }
}

@media print{
  .czytnik-pasek,
  .okruszki,
  .wpis-bok,
  .spis--mobi,
  .artykul__wtret,
  .wpis-dalej,
  .cta-band,
  .sticky-cta{ display:none !important; }
  .wpis-hero{ background:none; padding-block:0 1rem; }
  .wpis-hero h1{ color:#000; }
  .artykul__tresc{ color:#000; font-size:11pt; }
  .artykul__tresc a::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .faq--artykul .faq__item{ break-inside:avoid; }
  .faq--artykul .faq__a{ display:block !important; }
}