/* ==========================================================================
   ATLANTIS INGREDIENTS — MEGAMENU "WIEDZA", WARIANT A: "WYDANIE"
   --------------------------------------------------------------------------
   ZASADA KOMPOZYCJI
   Menu jest zbudowane jak pierwsza strona dzialu redakcyjnego, a nie jak
   katalog. Uwaga czytelnika ma jedno wejscie: JEDEN wyrozniony artykul ze
   zdjeciem po lewej (~1/3 panelu), a obok INDEKS pozostalych polecanych
   pozycji zlozony wylacznie typograficznie — bez miniatur, bez kafli, bez
   wypelnien. Cala hierarchia wynika z rozmiaru pisma i cienkich linii,
   nie z koloru ani efektow. Na dole jeden pasek: cztery przewodniki po
   rodzinach surowca + wejscie do hubu, zeby menu nie bylo slepa uliczka.

   CZYM SIE ROZNI OD POZOSTALYCH TRZECH MEGAMENU
   - Produkty (.mega .mega-cols): symetryczna siatka 6 rownych kolumn
     z miniatura w kazdym naglowku. Tu: uklad ASYMETRYCZNY 1 + N i tylko
     JEDNO zdjecie w calym panelu.
   - Zastosowania (.mega-app): szesc kafli-zdjec z ciemnym gradientem
     i bialym tekstem NA obrazie. Tu: zdjecie jest osobnym blokiem,
     tekst zawsze na bieli — czytelnosc karty technicznej.
   - O firmie (.mega-about): waski panel z kolumna wstepu i siatka 2x2
     jednakowych kart tekstowych. Tu: nie ma zadnej karty ani kafla —
     lista jest ciagiem wierszy rozdzielonych wlosowa kreska.

   ZALEZNOSCI: tokeny z assets/styles.css (--navy, --ink, --gray, --muted,
   --line, --soft, --wine). Kolory rodzin przekazuje inline --fam
   (te same wartosci co na wiedza.html: #2b3a9e / #8e2f6d / #0f855f /
   #d9821c / #17156d dla artykulow wielolinijnych).
   Arkusz doladowywany PO concept8.css i fluid.css.
   ========================================================================== */

/* --- 1. Panel -------------------------------------------------------------
   Weszy niz Produkty (1360) i Zastosowania — inna proporcja to pierwszy
   sygnal, ze to inny dzial. Selektor ma dwa czlony .mega.c8-kb-menu, wiec
   bije `nav.main .mega{width:min(1360px,...)}` z concept8.css.            */
nav.main .mega.c8-kb-menu {
  width: min(1040px, calc(100vw - 32px));
  padding: 0;
  border-radius: 16px;
  /* overflow-x:hidden przycina rogi do promienia, overflow-y:auto zostawia
     przewijanie na niskich ekranach (laptop 768p): panel nie moze urwac
     tresci. Reguly z concept8.css (max-height calc(100dvh-128px)) same by
     nie zadzialaly, bo `overflow:hidden` z tego bloku by je ubilo. */
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100dvh - 128px);
  overscroll-behavior: contain;
}
.c8-kb-menu {
  display: grid;
  grid-template-columns: 356px minmax(0, 1fr);
  grid-template-areas:
    "lead list"
    "foot foot";
  column-gap: 34px;
}

/* --- 2. Etykiety sekcji ---------------------------------------------------
   Jedyny "ozdobnik" w calym menu: wersalik 11px z rozstrzeleniem
   i wlosowa kreska ciagnaca sie do konca wiersza.                          */
.c8-kb-menu .c8kb__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray, #565b6b);
  margin: 0 0 14px;
}
/* Kreska ma rozdzielac etykiete od linku "Wszystkie 15", a nie konczyc
   wiersz — dlatego kolejnosc ustawia `order`, nie pozycja w DOM. */
.c8-kb-menu .c8kb__label::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #e3e5ee);
}
.c8-kb-menu .c8kb__label > a {
  order: 2;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy, #17156d);
  padding: 0;
}
.c8-kb-menu .c8kb__label > a .ar {
  font-style: normal;
  display: inline-block;
  transition: transform .2s ease;
}
.c8-kb-menu .c8kb__label > a:hover { color: var(--wine, #7c1b48); }
.c8-kb-menu .c8kb__label > a:hover .ar { transform: translateX(2px); }

/* --- 3. Artykul wyrozniony ------------------------------------------------ */
.c8-kb-menu .c8kb__lead {
  grid-area: lead;
  padding: 26px 0 26px 28px;
}
.c8-kb-menu .c8kb-feat {
  display: block;
  padding: 0;
  border-radius: 12px;
}
.c8-kb-menu .c8kb-feat__img {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft, #f6f7fb);
  border: 1px solid var(--line, #e3e5ee);
  margin-bottom: 16px;
}
.c8-kb-menu .c8kb-feat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.c8-kb-menu .c8kb-feat:hover .c8kb-feat__img img,
.c8-kb-menu .c8kb-feat:focus-visible .c8kb-feat__img img { transform: scale(1.028); }

.c8-kb-menu .c8kb-feat__k {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fam, #17156d);
  margin-bottom: 7px;
}
.c8-kb-menu .c8kb-feat__t {
  display: block;
  /* BEZ wlasnego font-family. concept8.css:23 wymusza na calym naglowku
     `body > header.nav { font-family:'Plus Jakarta Sans' !important }` z
     komentarzem "Typografia naglowka nie moze dziedziczyc kroju z tresci".
     Ustawienie tu var(--font-head) (= 'Inter' ze styles.css) wylamywalo ten
     jeden tytul z kroju calego serwisu i sciagalo dodatkowy plik
     inter-700-latin.woff2 (48 kB) przy pierwszym otwarciu menu. */
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--navy, #17156d);
  margin-bottom: 8px;
  text-wrap: balance;
}
.c8-kb-menu .c8kb-feat__d {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray, #565b6b);
  margin-bottom: 13px;
}
.c8-kb-menu .c8kb-feat__m {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray, #565b6b);
  font-variant-numeric: tabular-nums;
}
.c8-kb-menu .c8kb-feat__m i {
  font-style: normal;
  color: var(--line-d, #cfd2e0);
}
.c8-kb-menu .c8kb-feat__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--navy, #17156d);
  font-weight: 700;
}
.c8-kb-menu .c8kb-feat__go .ar {
  font-style: normal;
  display: inline-block;
  transition: transform .2s ease;
}
.c8-kb-menu .c8kb-feat:hover .c8kb-feat__go .ar { transform: translateX(3px); }
.c8-kb-menu .c8kb-feat:hover .c8kb-feat__t { color: var(--fam, #17156d); }

/* --- 4. Indeks pozostalych polecanych -------------------------------------
   Wiersze rozdzielone wlosowa kreska. Zero tla w stanie spoczynku; hover
   zmienia wylacznie kolor tytulu i wysuwa strzalke. Czas czytania stoi
   w prawej kolumnie w cyfrach tabelarycznych, wiec liczby ustawiaja sie
   w pion — to jest ten "spis tresci", ktorego nie ma w innych menu.       */
.c8-kb-menu .c8kb__list {
  grid-area: list;
  padding: 26px 28px 26px 0;
  min-width: 0;
}
.c8-kb-menu .c8kb-idx {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line, #e3e5ee);
}
.c8-kb-menu .c8kb-idx > li { border-bottom: 1px solid var(--line, #e3e5ee); }
.c8-kb-menu .c8kb-idx > li > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 18px;
  padding: 13px 0 13px 14px;
  position: relative;
  border-radius: 0;
}
/* Znacznik rodziny surowca: kreska przy lewej krawedzi wiersza.
   Na hover wydluza sie do pelnej wysokosci — jedyna animacja w liscie.
   2026-07-30: 2px/14px -> 3px/20px. Przy poprzednich wymiarach kolor rodziny
   byl praktycznie niezauwazalny, wiec kodowanie kolorem nie nioslo zadnej
   informacji, a piec wierszy czytalo sie jako piec identycznych pozycji. */
.c8-kb-menu .c8kb-idx > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--fam, #17156d);
  transition: height .22s cubic-bezier(.2, .7, .3, 1);
}
.c8-kb-menu .c8kb-idx > li > a:hover::before,
.c8-kb-menu .c8kb-idx > li > a:focus-visible::before { height: calc(100% - 14px); }

.c8-kb-menu .c8kb-idx b {
  grid-column: 1;
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--ink, #1e2030);
  transition: color .16s ease;
}
.c8-kb-menu .c8kb-idx__d {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.42;
  color: var(--gray, #565b6b);
  margin-top: 3px;
}
.c8-kb-menu .c8kb-idx__rt {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray, #565b6b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.c8-kb-menu .c8kb-idx > li > a:hover b,
.c8-kb-menu .c8kb-idx > li > a:focus-visible b { color: var(--fam, #17156d); }

/* --- 5. Stopka: przewodniki po rodzinach ---------------------------------- */
.c8-kb-menu .c8kb__foot {
  grid-area: foot;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 18px 28px;
  margin-top: 4px;
  background: var(--soft, #f6f7fb);
  border-top: 1px solid var(--line, #e3e5ee);
}
.c8-kb-menu .c8kb-guides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 18px;
}
.c8-kb-menu .c8kb-guides > a {
  display: block;
  padding: 4px 0 4px 11px;
  border-left: 2px solid var(--fam, #17156d);
  min-width: 0;
}
.c8-kb-menu .c8kb-guides b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink, #1e2030);
  transition: color .16s ease;
}
.c8-kb-menu .c8kb-guides small {
  display: block;
  font-size: 12px;
  color: var(--gray, #565b6b);
  margin-top: 1px;
}
.c8-kb-menu .c8kb-guides > a:hover b,
.c8-kb-menu .c8kb-guides > a:focus-visible b { color: var(--fam, #17156d); }

.c8-kb-menu .c8kb__hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--line-d, #cfd2e0);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #17156d);
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease;
}
.c8-kb-menu .c8kb__hub .ar { font-style: normal; display: inline-block; transition: transform .2s ease; }
.c8-kb-menu .c8kb__hub:hover { border-color: var(--navy, #17156d); background: #fff; }
.c8-kb-menu .c8kb__hub:hover .ar { transform: translateX(3px); }

/* --- 5a. Poprawki czytelnosci i wykonczenia (2026-07-30) ------------------
   Wlasciciel: „megamenu Wiedzy ma byc bardziej kontrastowe i ladniejsze".
   Pierwotny uklad jest celowo powsciagliwy — hierarchia wylacznie z rozmiaru
   pisma i wlosowych kresek — i ten charakter zostaje. Zmienione zostalo to,
   co bylo zmierzalnie zle albo niedokonczone.

   1) KONTRAST. Cztery elementy drugoplanowe siedzialy na tokenie --muted:
        etykiety sekcji        3,41:1
        meta wyroznionego      3,41:1
        czas czytania          3,41:1
        podpisy przewodnikow   3,18:1
      przy wymaganym progu 4,5:1. Tytuly mialy 15-17:1, wiec kontrast wewnatrz
      panelu byl skrajnie nierowny — to daje wrazenie „wyblaklosci" mimo
      mocnych naglowkow. Wszystkie cztery przestawione na --gray (7,4:1).

   2) PUSTE POLE. Piec wierszy indeksu konczylo sie okolo 130 px nad dolem
      kolumny, wiec prawa strona panelu urywala sie w polowie i uklad wygladal
      na niedokonczony. Wiersze rozkladaja sie teraz na cala wysokosc kolumny.
      To ta sama technika, ktora dziala juz w wariancie miedzynarodowym
      (sekcja 11) — tam trzy wiersze zostawialy jeszcze wiecej pustki.
      Wariant --intl wykluczony ze selektora, bo ma wlasne, ciasniejsze reguly.

   3) WIERSZ JAKO CEL. W spoczynku wiersze nie mialy zadnego tla, a na hover
      zmienial sie wylacznie kolor tytulu — trafienie kursorem nie dawalo
      odpowiedzi, ze cala szerokosc wiersza jest klikalna. Dolozone bardzo
      lekkie tlo i wciecie, bez cieni i bez gradientow.                        */
.c8-kb-menu:not(.c8-kb-menu--intl) .c8kb__list { display: flex; flex-direction: column; }
.c8-kb-menu:not(.c8-kb-menu--intl) .c8kb-idx {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.c8-kb-menu:not(.c8-kb-menu--intl) .c8kb-idx > li { flex: 1 1 0; display: flex; }
.c8-kb-menu:not(.c8-kb-menu--intl) .c8kb-idx > li > a {
  flex: 1 1 auto;
  align-content: center;
}

/* Tlo wiersza: 4% navy to na bieli odcien ledwie widoczny, ale wystarcza,
   zeby oko zlapalo obszar trafienia. Wciecie po lewej zostawia miejsce na
   znacznik rodziny, zeby tlo go nie zjadalo. */
.c8-kb-menu .c8kb-idx > li > a {
  border-radius: 0 6px 6px 0;
  transition: background-color .16s ease;
}
.c8-kb-menu .c8kb-idx > li > a:hover,
.c8-kb-menu .c8kb-idx > li > a:focus-visible {
  background: color-mix(in srgb, var(--fam, #17156d) 5%, transparent);
}

/* Przewodniki w stopce: kreska rodziny z 2 na 3 px, dla spojnosci z indeksem. */
.c8-kb-menu .c8kb-guides > a {
  border-left-width: 3px;
  transition: border-color .16s ease;
}

/* --- 5b. Kotwica kompozycji: ciemna kolumna wyroznionego (2026-07-30) ------
   Poprawki z 5a byly poprawne, ale niewidoczne z dwoch krokow od ekranu:
   wlasciciel po wdrozeniu napisal, ze nie widzi roznicy. Podniesienie kontrastu
   samych liter nie zmienia tego, ze CALY panel to jasnoszary tekst na bieli —
   oko nie ma sie o co zaczepic i kazde z czterech megamenu wyglada tak samo.

   Zamiast dokladac ozdobniki, zmieniona zostala kompozycja: lewa kolumna
   dostaje granatowe tlo, prawa zostaje biala. Asymetryczny podzial ciemne-jasne
   jest natychmiast czytelny, daje panelowi punkt wejscia i jest zgodny
   z reszta serwisu — ten sam granat nosi panel tekstowy w hero i przyciski.
   Zadnych gradientow, poswiat ani cieni: plaska plama koloru i typografia.

   Kolory rodzin surowca (--fam) sa ciemne (#2b3a9e, #8e2f6d, #0f855f, #17156d)
   i na granacie bylyby nieczytelne, wiec w tej kolumnie nadtytul idzie na biel,
   a kolor rodziny zostaje wylacznie jako kreska nad tytulem. W indeksie po
   prawej --fam dziala bez zmian, bo tam tlo jest biale.                       */
.c8-kb-menu .c8kb__lead {
  background: var(--navy, #17156d);
  padding: 26px 28px;
  border-radius: 16px 0 0 0;
}
.c8-kb-menu .c8kb__lead .c8kb__label { color: rgba(255, 255, 255, .72); }
.c8-kb-menu .c8kb__lead .c8kb__label::after { background: rgba(255, 255, 255, .22); }

.c8-kb-menu .c8kb-feat__img {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}
/* Kreska rodziny nad nadtytulem — jedyny nosnik koloru rodziny na ciemnym tle.
   Kolor MUSI byc rozjasniony: jeden z artykulow ma --fam #17156d, czyli dokladnie
   ten sam granat co tlo kolumny — surowe var(--fam) dawalo kreske niewidoczna
   (sprawdzone na zrzucie). Mieszanie z biela podnosi kazda z pieciu barw rodzin
   na poziom czytelny na granacie, zachowujac jej odcien. */
.c8-kb-menu .c8kb-feat__k {
  position: relative;
  padding-top: 12px;
  color: #fff;
}
.c8-kb-menu .c8kb-feat__k::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fam, #ffffff) 45%, #ffffff);
}
.c8-kb-menu .c8kb-feat__t { color: #fff; }
.c8-kb-menu .c8kb-feat__d { color: rgba(255, 255, 255, .78); }
.c8-kb-menu .c8kb__lead .c8kb-feat__m { color: rgba(255, 255, 255, .66); }
.c8-kb-menu .c8kb-feat__m i { color: rgba(255, 255, 255, .34); }
.c8-kb-menu .c8kb-feat__go { color: #fff; }
/* Na granacie tytul nie moze „rozjasniac sie" kolorem rodziny (te sa ciemne) —
   sygnalem najechania jest podkreslenie, nie zmiana barwy. */
.c8-kb-menu .c8kb-feat:hover .c8kb-feat__t {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Stopka styka sie teraz z ciemna kolumna. `margin-top:4px` z sekcji 5 zostawial
   4-pikselowy bialy pasek miedzy granatem a stopka — przy jasnym ukladzie byl
   niewidoczny, przy ciemnym rzucal sie w oczy (zmierzone i obejrzane). */
.c8-kb-menu .c8kb__foot {
  margin-top: 0;
  border-radius: 0 0 16px 16px;
}

@media (max-width: 1000px) {
  /* W jednej kolumnie ciemna plama zajmowalaby gore panelu — zaokraglenie
     gorne z obu stron, zeby nie odstawala od krawedzi. */
  .c8-kb-menu .c8kb__lead { border-radius: 16px 16px 0 0; padding: 22px 24px; }
}

/* --- 5c. Karuzela polecanych (2026-07-30) ---------------------------------
   Wlasciciel: „powiekszyc na pewno, po lewej przelaczajace sie artykuly
   polecane, sa 4, po prawej artykuly z opiskami, polecane to zdjecie i tytul
   na dole, jak najczysciej i najprosciej, nikt sciany tekstu nie bedzie czytac".

   Realizacja: lewa kolumna traci opis i metadane wyroznionego artykulu —
   zostaje SAM obraz z tytulem. Cztery karty jada w poziomie, przelaczane
   skryptem assets/wiedza-megamenu.js. Prawa kolumna dostaje piec INNYCH
   artykulow, zeby panel pokazywal osiem pozycji, a nie cztery dwa razy.
   Tempo i zatrzymanie na najechaniu opisane w pliku js.

   Reguly .c8kb-feat* NIE sa usuwane: wersje en/ i de/ zachowuja poprzedni
   uklad z jednym wyroznionym wpisem, bo wszystkie artykuly istnieja tylko
   po polsku i karuzela nie mialaby tam czego przelaczac.                     */
/* 2026-07-30 (druga iteracja): dwa kafle naraz zamiast jednego, wiec panel
   i lewa kolumna musza urosnac. 1400 px to nadal mniej niz zaden inny panel
   nie przekracza — Produkty maja 1360 — a kolumna 700 px miesci dwa kafle
   po 342 px z 16-pikselowym odstepem. */
nav.main .mega.c8-kb-menu { width: min(1400px, calc(100vw - 32px)); }
.c8-kb-menu { grid-template-columns: 700px minmax(0, 1fr); column-gap: 38px; }

/* Kolumna jest kolumna flex, a karuzela rosnie do jej wysokosci. Bez tego karta
   miala staly stosunek bokow i pod kropkami zostawalo okolo 100 px pustego
   granatu (zmierzone: kolumna 428 px, karuzela z kropkami 328 px). Rozciagniecie
   jest odporne na zmiane liczby wierszy po prawej — to prawa kolumna dyktuje
   wysokosc panelu, wiec lewa musi sie do niej dopasowac, a nie odwrotnie. */
.c8-kb-menu .c8kb__lead { display: flex; flex-direction: column; }
.c8-kb-menu .c8kb-car {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* `flex: 1 1 0`, NIE `auto`. Przy podstawie `auto` karuzela liczy wysokosc
     z tresci i rosnie zamiast wypelniac reszte — kropki wypadaly wtedy 10 px
     ponizej kolumny i panel je obcinal (zmierzone: kropki na 414 px przy
     kolumnie 428 px wysokosci). Podstawa 0 sprawia, ze karuzela bierze
     DOKLADNIE tyle, ile zostaje po etykiecie i kropkach. */
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
}
.c8-kb-menu .c8kb-car__track {
  display: flex;
  height: 100%;
  /* Odstep MUSI byc zgodny ze stala ODSTEP w assets/wiedza-megamenu.js —
     krok tasmy to polowa szerokosci plus polowa odstepu. */
  gap: 16px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.c8-kb-menu .c8kb-card {
  position: relative;
  /* Dwa kafle w kadrze: polowa szerokosci minus polowa odstepu. */
  flex: 0 0 calc(50% - 8px);
  display: block;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  /* Ogolna regula linkow w megamenu daje `padding: 6px 3px` — na karcie
     zostawialo to bialy margines wokol zdjecia (zmierzone: karta 374 px,
     obraz 368 px). Karta jest kafelkiem, nie linkiem tekstowym. */
  padding: 0;
  background: rgba(255, 255, 255, .06);
}
.c8-kb-menu .c8kb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tytul lezy NA zdjeciu, przy dolnej krawedzi. Zeby byl czytelny nad kazdym
   kadrem, pod nim idzie przyciemnienie — nie ozdobnik, tylko warunek
   czytelnosci: bez niego bialy tytul lezal na jasnych fiolkach (obejrzane).

   SELEKTOR MUSI BYC TAK DLUGI. styles.css:908 ma
   `nav.main :is(.mega,.drop,.flyout) a::after { content: none }` — regula
   powstala, zeby wylaczyc podkreslenia nawigacji wewnatrz rozwijanych paneli,
   i ma specyficznosc (0,2,3). Krotszy zapis `.c8-kb-menu .c8kb-card::after`
   ma (0,2,1) i PRZEGRYWA, przez co przyciemnienie w ogole nie powstawalo
   (zmierzone: content wychodzil `none`). Ten sam problem rozwiazano juz raz
   w styles.css:912 dla strzalki .mprod — stad ten sam wzorzec. */
nav.main .c8-kb-menu a.c8kb-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(9, 12, 40, 0) 0%, rgba(9, 12, 40, .82) 62%, rgba(9, 12, 40, .94) 100%);
  transform: none;
  pointer-events: none;
}
.c8-kb-menu .c8kb-card__t {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  font-size: 19px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
/* Kreska rodziny surowca — jedyny kolor na karcie, przy samej dolnej krawedzi. */
.c8-kb-menu .c8kb-card__t::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--fam, #ffffff) 45%, #ffffff);
}
.c8-kb-menu .c8kb-card:hover img,
.c8-kb-menu .c8kb-card:focus-visible img { transform: scale(1.03); }
.c8-kb-menu .c8kb-card img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }

/* Kropki lezą WEWNATRZ kadru, w prawym dolnym rogu, na przyciemnieniu.
   Powod jest praktyczny, nie estetyczny: jako osobny wiersz pod karuzela
   wypadaly poza kolumne i panel je obcinal — uklad rezerwowal na nie miejsce
   niezaleznie od tego, czy podstawa flex byla `auto` czy `0` (zmierzone:
   karuzela dostawala 344 px przy 308 px dostepnych). Wyjecie ich z przeplywu
   usuwa cala te klase problemu, a przy okazji oddaje karuzeli pelna wysokosc.
   Cel dotykowy 24 px, widoczny znacznik 8 px — sam znacznik bylby za malym
   celem dla myszy i palca. */
.c8-kb-menu .c8kb-car__dots {
  /* Przy dwoch kaflach kropki w rogu kadru wchodzilyby na tytul drugiego,
     wiec wracaja pod karuzele — miejsce jest, bo kolumna jest teraz szersza. */
  margin-top: 12px;
  display: flex;
  gap: 2px;
}
.c8-kb-menu .c8kb-car__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.c8-kb-menu .c8kb-car__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  transition: background-color .2s ease, transform .2s ease;
}
.c8-kb-menu .c8kb-car__dot.is-on::before { background: #fff; transform: scale(1.15); }
.c8-kb-menu .c8kb-car__dot:hover::before { background: rgba(255, 255, 255, .68); }

@media (prefers-reduced-motion: reduce) {
  .c8-kb-menu .c8kb-car__track,
  .c8-kb-menu .c8kb-card img { transition: none; }
}

/* --- 6. Otwieranie panelu: hover ORAZ klawiatura --------------------------
   concept8.css/styles.css otwieraja megamenu wylacznie na :hover, wiec
   pozycja byla niedostepna z klawiatury. Dokladamy :focus-within.         */
nav.main .hasmega.c8-kb:focus-within > .mega.c8-kb-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
nav.main .hasmega.c8-kb.is-kb-closed:focus-within > .mega.c8-kb-menu {
  opacity: 0;
  visibility: hidden;
}

/* --- 6a. Zamkniety panel nie pobiera zdjecia ------------------------------
   ZMIERZONE, NIE ZALOZONE. Samo loading="lazy" NIE wystarcza: zamkniete
   megamenu ma `visibility:hidden`, ale nadal LEZY W UKLADZIE tuz pod naglowkiem,
   czyli w polu widzenia — Chromium uznaje taki obraz za potrzebny i pobiera go
   od razu. Pomiar na kopii serwisu (Chromium 1440x950, index.html): przed
   otwarciem menu w liscie zadan siedzialo /assets/thumb/...-640.webp, a po
   najechaniu nie dochodzilo NIC. Czyli kazde wejscie na dowolna z 126 stron
   placilo za obrazek, ktorego uzytkownik moze nigdy nie zobaczyc.

   `content-visibility: hidden` pomija poddrzewo w renderowaniu, wiec obraz
   przestaje byc "potrzebny" i leniwe ladowanie wreszcie dziala. Pobranie
   nastepuje dopiero przy pierwszym otwarciu panelu (hover albo focus).
   Przegladarki bez obslugi wlasciwosci zachowuja sie jak dotad — nic sie
   nie psuje, po prostu nie ma oszczednosci.                                  */
nav.main .mega.c8-kb-menu { content-visibility: hidden; }
nav.main .hasmega.c8-kb:hover > .mega.c8-kb-menu,
nav.main .hasmega.c8-kb:focus-within > .mega.c8-kb-menu { content-visibility: visible; }
nav.main .hasmega.c8-kb.is-kb-closed:focus-within > .mega.c8-kb-menu { content-visibility: hidden; }

/* --- 7. Widoczny focus ---------------------------------------------------- */
.c8-kb-menu a:focus-visible {
  outline: 2px solid var(--navy, #17156d);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 8. Zawezanie ---------------------------------------------------------
   Ponizej ~1100px kolumna ze zdjeciem robi sie za waska na tytul w dwoch
   wierszach, wiec panel przechodzi w jedna kolumne: lead nad indeksem.    */
/* Desktopowa nawigacja zyje w zakresie >=1041px (nizej wchodzi drawer),
   wiec jedyne realne zwezenie to 1041-1120px: waza sie kolumna z lead-em
   i stopka, uklad dwukolumnowy zostaje. */
@media (max-width: 1120px) {
  .c8-kb-menu { grid-template-columns: 296px minmax(0, 1fr); column-gap: 26px; }
  .c8-kb-menu .c8kb__lead { padding-left: 24px; }
  .c8-kb-menu .c8kb__list { padding-right: 24px; }
  .c8-kb-menu .c8kb-feat__t { font-size: 20px; }
  .c8-kb-menu .c8kb__foot { padding: 16px 24px; }
  .c8-kb-menu .c8kb-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
}
/* Bezpiecznik dla nietypowych zoomow/ustawien, gdzie desktopowe menu
   moze pojawic sie ponizej 1000px. */
@media (max-width: 1000px) {
  .c8-kb-menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "list" "foot";
  }
  .c8-kb-menu .c8kb__lead { padding: 22px 24px 4px; }
  .c8-kb-menu .c8kb__list { padding: 12px 24px 20px; }
  .c8-kb-menu .c8kb-feat__img { max-width: 340px; }
  .c8-kb-menu .c8kb__foot { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .c8-kb-menu .c8kb__hub { justify-self: start; }
}

/* --- 9. Drawer mobilny ----------------------------------------------------
   Zachowanie identyczne jak dla pozostalych pozycji: w drawerze panel
   znika (styles.css: nav.main .mega{display:none!important}), a "Wiedza"
   jest zwyklym wierszem-linkiem do hubu. Dokladamy tylko pewnosc, ze
   grid nie przywroci wyswietlania.                                        */
@media (max-width: 1040px) {
  html.nav-open nav.main .mega.c8-kb-menu { display: none !important; }
}

/* --- 10. prefers-reduced-motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c8-kb-menu .c8kb-feat__img img,
  .c8-kb-menu .c8kb-idx > li > a::before,
  .c8-kb-menu .c8kb-feat__go .ar,
  .c8-kb-menu .c8kb__hub .ar { transition: none; }
}

/* --- 11. EN/DE: wariant miedzynarodowy (.c8-kb-menu--a.c8-kb-menu--intl) ---
   STAN FAKTYCZNY: w en/ i de/ istnieja tylko cztery przewodniki po rodzinach
   surowca. Wszystkie 15 artykulow technicznych jest wylacznie po polsku, wiec
   indeks artykulow z wersji PL nie ma tu czego pokazac.

   DECYZJA KOMPOZYCYJNA: panel NIE traci zdjecia i NIE zwe sie do waskiego
   pudelka z tekstem. Nawigacja jest tym samym elementem chrome na wszystkich
   126 stronach — gdyby na en/ i de/ pozycja "Wiedza" otwierala inny w typie
   komponent, kupiec z zagranicy dostalby wersje wyraznie ubozsza od polskiej.
   Zostaje wiec ten sam szkielet 1 + N: po lewej JEDEN wyrozniony wpis ze
   zdjeciem 16:9, obok typograficzny indeks reszty, na dole pasek na miekkim
   tle. Zmienia sie tylko material:
     lead  — zamiast polecanego ARTYKULU: wyrozniony PRZEWODNIK (TuriColl(TM),
             pierwszy w kolejnosci na hubie i najdluzszy z czterech),
     list  — zamiast piatki artykulow: trzy pozostale przewodniki,
     foot  — zamiast paska czterech przewodnikow (te sa juz wyzej): jedna
             szczera linia o tym, ze artykuly sa po polsku, + wejscie do
             polskiego hubu; przycisk hubu zostaje po prawej jak w PL.
   Panel jest wezszy (880 zamiast 1040), bo materialu jest mniej — to ta sama
   kompozycja w mniejszym formacie, nie inny komponent.                       */
nav.main .mega.c8-kb-menu.c8-kb-menu--intl { width: min(880px, calc(100vw - 32px)); }

/* Trzy wiersze indeksu zamiast pieciu zostawilyby pusta dolna polowe kolumny.
   Wiersze rozciagaja sie na wysokosc kolumny z lead-em, a tresc kazdego stoi
   w pionowym srodku — wlosowe kreski rozkladaja sie rowno i indeks czyta sie
   jak spis tresci, a nie jak urwana lista.                                   */
.c8-kb-menu--intl .c8kb__list { display: flex; flex-direction: column; }
.c8-kb-menu--intl .c8kb-idx { flex: 1 1 auto; display: flex; flex-direction: column; }
.c8-kb-menu--intl .c8kb-idx > li { flex: 1 1 0; display: flex; min-height: 62px; }
.c8-kb-menu--intl .c8kb-idx > li > a { flex: 1 1 auto; align-content: center; }

/* Stopka: lewa kolumna to nota jezykowa + odnosnik do polskich artykulow.
   Ta sama siatka co w PL (tresc | przycisk hubu), inna zawartosc lewej strony. */
.c8-kb-menu .c8kb-xlang {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.c8-kb-menu .c8kb-xlang > .lbl {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gray, #565b6b);
  max-width: 52ch;
}
.c8-kb-menu .c8kb-xlang > a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.006em;
  color: var(--navy, #17156d);
}
.c8-kb-menu .c8kb-xlang > a .ar {
  font-style: normal;
  display: inline-block;
  transition: transform .2s ease;
}
.c8-kb-menu .c8kb-xlang > a:hover { color: var(--wine, #7c1b48); }
.c8-kb-menu .c8kb-xlang > a:hover .ar { transform: translateX(3px); }

/* Ponizej ~1000px panel przechodzi w jedna kolumne (sekcja 8) — wtedy nota
   i przycisk staja jeden pod drugim, tak samo jak przewodniki w PL.          */
@media (prefers-reduced-motion: reduce) {
  .c8-kb-menu .c8kb-xlang > a .ar { transition: none; }
}