/* ==========================================================================
   BAZA WIEDZY
   ==========================================================================
   Lista wpisów i widok artykułu. Przeniesione z zatwierdzonej makiety
   docs/makiety/baza-wiedzy.html - przy zmianie wyglądu poprawiamy OBA
   miejsca albo żadne.

   Kafelek wpisu to .post z powłoki - ten sam co na stronie głównej i na
   karcie produktu. Tutaj jest wyłącznie to, co na liście bazy wiedzy
   dochodzi ponad tamtą wersję: wiersz metadanych, równa wysokość kart
   i pasmo dotyku na tytule. Osobny komponent znaczyłby, że klientka klika
   "Wszystkie artykuły" i trafia na kafelki, które wyglądają inaczej.
   ========================================================================== */

/* ---------- nagłówek listy ---------- */

/* max-width NIE moze stac na tym samym elemencie co .wrap: .wrap ma
   margin-inline:auto, wiec wezszy blok zostaje wysrodkowany na stronie
   zamiast trzymac sie lewej krawedzi tresci. */
.bw__naglowek{padding-block-end:var(--s3)}
.bw__naglowek h1{margin-top:.2rem;max-width:20ch}
.bw__lead{margin-top:var(--s2)}

/* ---------- wstep dzialu ----------
   Opis kategorii bywa calym blokiem: akapit i lista. Pierwszy akapit czyta sie
   jak lid, reszta jak tresc - dlatego stopien pisma schodzi dopiero od drugiego
   akapitu, a nie jest jeden dla calosci. */
.dzial-wstep > p:first-of-type{font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.6;color:var(--ink-soft);max-width:68ch;text-wrap:pretty}
.dzial-wstep > * + *{margin-top:var(--s3)}
.dzial-wstep p{color:var(--ink-soft);max-width:68ch;text-wrap:pretty}
.dzial-wstep h2{
  font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:300;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.3;
}

/* Lista technologii: nazwa wersalikami w kroju naglowkowym, opis pod nia.
   BEZ RAMEK. Pierwsza wersja miala linie wlosowe wokol i miedzy pozycjami -
   przy czterech krotkich hasłach na pelnej szerokosci wygladalo to jak tabelka
   z pustymi polami, a nie jak tekst. Zamiast kresek dziela: swiatlo miedzy
   kolumnami i sam krój nazwy. */
.dzial-wstep ul{
  display:grid;gap:var(--s3) var(--s5);padding-left:0;list-style:none;
  margin-top:var(--s4);max-width:60rem;
}
@media(min-width:760px){.dzial-wstep ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dzial-wstep li{
  font-size:.9rem;line-height:1.55;color:var(--muted);text-wrap:pretty;min-width:0;
}
/* Nazwa zostaje w wierszu opisu - Klientka pisze te pozycje jako zdania
   z polpauza, wiec zlamanie po nazwie zostawiloby myslnik na poczatku
   nastepnego wiersza. Odroznia ja krój i wersaliki, nie kreska. */
.dzial-wstep li strong,
.dzial-wstep li b{
  font-family:var(--font-display);font-weight:400;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}

/* ---------- działy ---------- */

/* Otwarty dzial poznaje sie po tle ORAZ po aria-current. Sam kolor nie moze
   niesc informacji (WCAG 1.4.1). */
.bw__dzialy{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding-bottom:var(--s4);border-bottom:1px solid var(--line);
}
.bw__dzial{display:inline-flex;align-items:center}
.bw__dzial[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- wyróżniony wpis ---------- */

.bw-hero{display:grid;gap:var(--s3);padding-block:var(--s5)}
@media(min-width:900px){
  .bw-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
}
.bw-hero__foto{aspect-ratio:4/3;background:var(--porcelain);overflow:hidden;position:relative}
.bw-hero__foto img{width:100%;height:100%;object-fit:cover}
.bw-hero__tresc{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.bw-hero h2{line-height:1.25;text-wrap:balance}
.bw-hero h2 a{display:block}
.bw-hero p{color:var(--ink-soft);max-width:56ch}

/* Caly kafelek wpisu (.wpis, .wpis-meta) stoi w powloce (style.css): ten sam kafelek
   wchodzi takze na strone glowna i w wyniki wyszukiwania, gdzie arkusz bazy
   wiedzy sie nie laduje - bez tego data i czas czytania sklejaly sie w jeden
   ciag "Badania naukowe2 sierpnia 20261 min czytania". */

/* ---------- lista wpisów ---------- */

.bw-lista{padding-block:var(--s5)}
@media(max-width:619px){
  .bw-hero{padding-bottom:var(--s3)}
  .bw-lista{padding-block:var(--s3) var(--s4)}
  .bw-lista.posts{gap:var(--s4)}
}

/* ---------- widok wpisu ---------- */

.artykul{padding-block-end:var(--s6)}
.artykul__grid{display:grid;gap:var(--s5)}
@media(min-width:1000px){
  .artykul__grid{grid-template-columns:minmax(0,1fr) 17rem;gap:var(--s6);align-items:start}
}
/* Zapas na wypadek adresu wklejonego w tresc wpisu. break-word, nie anywhere:
   lamie dopiero wtedy, gdy slowo faktycznie sie nie miesci. */
.artykul__tresc{max-width:66ch;overflow-wrap:break-word}
.artykul h1{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;
  line-height:1.15;text-wrap:balance;margin-block:.3rem var(--s3);
}
.artykul__lead{font-size:1.05rem;color:var(--ink-soft);margin-bottom:var(--s4);text-wrap:pretty}
.artykul__foto{aspect-ratio:16/9;background:var(--porcelain);overflow:hidden;margin-bottom:var(--s4)}
.artykul__foto img{width:100%;height:100%;object-fit:cover}
.artykul__tresc h2{
  font-family:var(--font-display);font-size:1.2rem;font-weight:400;letter-spacing:.02em;
  margin-top:var(--s5);margin-bottom:var(--s2);
}
/* PODTYTUL MUSI BYC MNIEJSZY OD TYTULU ROZDZIALU.
   Tresc artykulu ma wlasna, mniejsza skale niz strona (h2 = 1,2 rem zamiast
   globalnych 1,25-1,75 rem). Dla h3 takiej reguly nie bylo, wiec podtytul
   bral wielkosc globalna - do 1,5 rem - i na szerokim ekranie wychodzil
   WIEKSZY od naglowka nad nim. Zglosila to Klientka 03.09.2026.
   Skala w tresci: h2 1,2 rem -> h3 1,02 rem -> h4 .95 rem. */
.artykul__tresc h3{
  font-family:var(--font-display);font-size:1.02rem;font-weight:400;letter-spacing:.02em;
  margin-top:var(--s4);margin-bottom:var(--s1);
}
.artykul__tresc h4{
  font-family:var(--text);font-size:.95rem;font-weight:600;letter-spacing:0;
  margin-top:var(--s3);margin-bottom:var(--s1);
}
.artykul__tresc p + p{margin-top:var(--s2)}
.artykul__tresc ul{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--s2);padding-left:0;list-style:none}
.artykul__tresc ul li{position:relative;padding-left:1.6rem}
.artykul__tresc ul li::before{
  content:"";position:absolute;left:0;top:.42em;width:11px;height:7px;
  border-left:1.6px solid var(--navy);border-bottom:1.6px solid var(--navy);rotate:-45deg;
}

/* Cytat z badania - wyroznienie merytoryczne, nie ozdobne. Styl dostaje
   KAZDY cytat z edytora (decyzja Klienta z 31.08.2026), wiec redaktorka
   nie uczy sie zadnego nowego narzedzia. */
.artykul__tresc blockquote{
  margin-top:var(--s4);padding:var(--s3);border-left:2px solid var(--navy);
  background:var(--porcelain);font-size:.95rem;
}
.artykul__tresc blockquote p{margin:0}
.artykul__tresc blockquote p + p{margin-top:var(--s2)}
.artykul__tresc blockquote cite,
.artykul__tresc blockquote footer{
  display:block;margin-top:.5rem;font-size:.8rem;color:var(--muted);font-style:normal;
}

/* ---------- źródła ---------- */

/* Przy marce opartej na badaniach to nie dodatek, tylko dowod. */
.zrodla{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.zrodla h2{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);
}
/* Bibliografia zawiera DOI i adresy publikacji - dlugie ciagi bez spacji,
   ktore nie maja gdzie sie zlamac. Bez tego jeden odnosnik rozpychal strone
   z 390 na 468 px i telefon dostawal poziome przewijanie. */
.zrodla ol{display:flex;flex-direction:column;gap:.6rem;font-size:.85rem;color:var(--ink-soft);padding-left:1.2rem}
.zrodla li{overflow-wrap:anywhere;padding-left:.3rem}
/* Odnosnik do publikacji jest tekstem w liscie, nie przyciskiem - ale przy
   samym rozmiarze wiersza (20 px) trafienie w niego kciukiem bylo loteria.
   Odstep w pionie podnosi cel do ~30 px, nie ruszajac rytmu listy. */
.zrodla a{
  display:inline-block;padding-block:.25rem;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
}

/* ---------- panel boczny ---------- */

.artykul__bok{display:flex;flex-direction:column;gap:var(--s4)}
@media(min-width:1000px){
  .artykul__bok{
    position:sticky;top:calc(var(--head-h) + var(--s3));
    max-height:calc(100vh - var(--head-h) - var(--s5));overflow:auto;
  }
}
.bok-blok{border:1px solid var(--line);padding:var(--s3)}
.bok-blok--akcent{background:var(--porcelain);border-color:transparent}
.bok-blok h2{
  font-family:var(--font-display);font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);font-weight:400;
}
.bok-blok p{font-size:.86rem;color:var(--ink-soft);margin:0}
.bok-produkt{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.bok-produkt img{width:56px;height:56px;object-fit:cover;background:#fff;flex:0 0 auto}
.bok-produkt b{display:block;font-family:var(--font-display);font-size:.88rem;font-weight:400}
.bok-produkt span{font-size:.8rem;color:var(--muted)}

/* ---------- powiązane i powrót ---------- */

.powiazane{padding-block:var(--s5);border-top:1px solid var(--line);margin-top:var(--s5)}
.powiazane .posts{gap:var(--s4)}
.powiazane h2{font-family:var(--font-display);font-size:1.05rem;font-weight:400;margin-bottom:var(--s3)}

.wroc{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.85rem;color:var(--muted)}
.wroc:hover{color:var(--ink)}
.wroc .ikona{width:15px;height:15px}