/* ShapePart - baza wiedzy (/baza-wiedzy): strona wejściowa z grupami
   rozdziałów i układ rozdziału. Układ: makieta Design „ShapePart baza wiedzy”
   (decyzja Michała 2026-10-14). Wchodzi PO landing.css (baza, nav, stopka,
   primitives, klasy kolorów rysunków .lp-rys) i tylko na stronach bazy
   wiedzy. Kolory wyłącznie z tokenów (shapepart-tokens.css) - pilnuje
   test/assets/shapepart_tokens_test.rb; tło bloku "Uwaga" to miedź
   rozcieńczona bielą przez color-mix, bo w tokenach nie ma miedzi-100.

   Bloki treści (.kb-skrot, .kb-standard, .kb-dobrze-zle, .kb-uwaga,
   .kb-kroki, .kb-obok, .kb-galeria, .kb-tabela) składa z markdownu Marketing::KnowledgeBase
   - składnia w config/marketing/baza_wiedzy/README.md. */

/* ------------------------------------------------------------------ */
/* Strona wejściowa: nagłówek z wyszukiwarką                            */
/* ------------------------------------------------------------------ */

.kb { background: var(--sp-biel); }

.kb-naglowek { padding: 72px 0 56px; }

.kb-naglowek .mw-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-24);
}

.kb-okruszki {
  display: flex;
  gap: var(--sp-space-8);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  color: var(--sp-tekst-2);
}

.kb-okruszki a:hover { color: var(--sp-niebieski-600); }
.kb-okruszki span:last-child { color: var(--sp-atrament); }

.kb-naglowek h1 {
  font-size: var(--sp-text-60);
  line-height: var(--sp-lh-60);
  letter-spacing: -0.025em;
}

.kb-lead {
  max-width: 720px;
  font-size: var(--sp-text-20);
  line-height: 1.5;
}

.kb-szukaj {
  display: flex;
  gap: var(--sp-space-8);
  max-width: 640px;
  margin-top: var(--sp-space-8);
}

.kb-szukaj-pole {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-space-12);
  height: 52px;
  padding: 0 var(--sp-space-16);
  border: 1.5px solid var(--sp-linia);
  border-radius: var(--sp-radius-8);
  background: var(--sp-biel);
  color: var(--sp-tekst-2);
  transition: border-color 150ms ease-out;
}

.kb-szukaj-pole:focus-within { border-color: var(--sp-niebieski-600); }

.kb-szukaj-pole input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--sp-text-16);
  color: var(--sp-atrament);
}

.kb-szukaj-btn {
  height: 52px;
  padding: 0 22px;
  border-color: var(--sp-atrament);
  background: var(--sp-atrament);
  color: var(--sp-biel);
  font-weight: 600;
}

.kb-szukaj-btn:hover { background: var(--sp-niebieski-800); border-color: var(--sp-niebieski-800); }

/* ------------------------------------------------------------------ */
/* Strona wejściowa: wyniki wyszukiwania                                */
/* ------------------------------------------------------------------ */

.kb-wyniki { padding: 0 0 56px; }

.kb-wyniki h2 {
  font-size: var(--sp-text-32);
  line-height: var(--sp-lh-32);
  letter-spacing: -0.02em;
}

.kb-wyniki-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-16);
  max-width: 760px;
  margin-top: var(--sp-space-24);
}

.kb-wynik {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px var(--sp-space-24);
  border: 1px solid var(--sp-linia);
  border-radius: var(--sp-radius-12);
}

.kb-wynik-grupa { font-size: 13px; color: var(--sp-niebieski-600); }
.kb-wynik-tytul { font-size: 21px; line-height: 1.25; font-weight: 700; }
.kb-wynik-tytul:hover { color: var(--sp-niebieski-600); }
.kb-wynik p { color: var(--sp-tekst-2); }

.kb-wynik-naglowki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-8) var(--sp-space-16);
  margin-top: var(--sp-space-4);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
}

.kb-wynik-naglowki a { color: var(--sp-niebieski-600); text-decoration: underline; text-underline-offset: 3px; }

.kb-wyniki-pusto {
  max-width: 640px;
  margin-top: var(--sp-space-16);
  color: var(--sp-tekst-2);
}

/* ------------------------------------------------------------------ */
/* Strona wejściowa: grupy i karty rozdziałów                           */
/* ------------------------------------------------------------------ */

.kb-grupa { padding: 64px 0 72px; }
.kb-grupa-szron { background: var(--sp-szron); }

.kb-grupa .mw-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kb-grupa-naglowek { display: flex; flex-direction: column; gap: var(--sp-space-8); }

.kb-grupa-naglowek h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.kb-grupa-naglowek p { font-size: 17px; line-height: 1.5; color: var(--sp-tekst-2); }

.kb-karty { display: grid; gap: 20px; }
.kb-karty-pionowe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb-karty-poziome { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Karta jest białą płaszczyzną na szronie i szronem na bieli. */
.kb-karta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-space-24);
  border-radius: var(--sp-radius-12);
  background: var(--sp-szron);
  color: var(--sp-atrament);
  transition: box-shadow 150ms ease-out;
}

.kb-grupa-szron .kb-karta { background: var(--sp-biel); }
.kb-karta:hover { box-shadow: var(--sp-shadow); }
.kb-karta-rysunek { display: block; }
.kb-karta-tekst { display: flex; flex-direction: column; gap: var(--sp-space-8); }
.kb-karta-tytul { font-size: 21px; line-height: 1.25; font-weight: 700; }
.kb-karta-lead { font-size: 15px; line-height: 1.5; color: var(--sp-tekst-2); }

.kb-karty-poziome .kb-karta {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-space-24);
  align-items: center;
}

.kb-nota { margin-top: var(--sp-space-12); color: var(--sp-tekst-2); }
.kb-nota a { color: var(--sp-niebieski-600); font-weight: 600; }
.kb-nota p + p { margin-top: var(--sp-space-8); }

/* ------------------------------------------------------------------ */
/* Rozdział: pasek mobilny, spis, układ                                 */
/* ------------------------------------------------------------------ */

.kb-pasek { display: none; }

.kb-uklad {
  display: grid;
  grid-template-columns: 284px minmax(0, 760px);
  gap: var(--sp-space-48);
  align-items: start;
  padding-top: var(--sp-space-48);
  padding-bottom: 96px;
}

.kb-wstecz {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  font-weight: 600;
  color: var(--sp-niebieski-600);
}

.kb-wstecz:hover { color: var(--sp-niebieski-700); }
.kb-wstecz .sp-icon { width: 16px; height: 16px; }

/* Spis: trzy bloki rozdziałów (grupy) bez tytułów grup, rozdzielone samym
   odstępem (decyzja Michała z kanwy 2026-10-14, wersja 46). */
.kb-spis {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: var(--sp-space-8);
}

.kb-spis-grupa { display: flex; flex-direction: column; gap: 2px; }

.kb-spis-rozdzial {
  padding: 6px var(--sp-space-12);
  margin: 0 calc(-1 * var(--sp-space-12));
  border-radius: var(--sp-radius-8);
  font-size: 15px;
  line-height: 1.5;
  transition: background-color 150ms ease-out;
}

.kb-spis-rozdzial:hover { background: var(--sp-szron); }

.kb-spis-aktywny {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--sp-space-12);
  margin: 0 calc(-1 * var(--sp-space-12));
  border-radius: var(--sp-radius-8);
  background: var(--sp-szron);
}

.kb-spis-aktywny-tytul { font-size: 15px; line-height: 1.5; font-weight: 700; }

.kb-spis-naglowek {
  padding-left: var(--sp-space-12);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  color: var(--sp-tekst-2);
}

.kb-spis-naglowek:hover { color: var(--sp-niebieski-600); }

/* ------------------------------------------------------------------ */
/* Rozdział: treść                                                      */
/* ------------------------------------------------------------------ */

/* Treść z markdownu to płaski ciąg h2 / p / bloków - odstępy daje
   "owl": 20 px między sąsiadami, 48 px przed każdym nagłówkiem sekcji. */
.kb-tresc > * + * { margin-top: 20px; }
.kb-tresc > h2 { margin-top: var(--sp-space-48); }
.kb-tresc > .kb-tresc-naglowek + * { margin-top: 40px; }

/* Nad h1 nie ma nadtytułu grupy (decyzja Michała z kanwy 2026-10-14): grupę
   widać w spisie po lewej i pod przyciskiem "Rozdziały" na telefonie. */
.kb-tresc-naglowek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-space-16);
}

.kb-tresc h1 {
  font-size: var(--sp-text-48);
  line-height: var(--sp-lh-48);
  letter-spacing: -0.025em;
}

.kb-tresc h2 {
  font-size: var(--sp-text-32);
  line-height: var(--sp-lh-32);
  letter-spacing: -0.02em;
  scroll-margin-top: 88px;
}

.kb-tresc h3 { font-size: var(--sp-text-20); line-height: var(--sp-lh-20); font-weight: 700; }
.kb-tresc p { font-size: 17px; line-height: 1.6; }

/* Typografia (szlif z kanwy 2026-10-14): lead pod h1 i akapity treści w
   kolumnie 760 px wyjustowane, bez dzielenia wyrazów. Akapity treści to
   bezpośrednie dzieci kolumny, więc wąskie bloki (W skrócie, rubryki przy
   rysunku, Dobrze/Źle, kroki, uwaga, tabela, pager, spis, karty i opisy
   grup na stronie wejściowej) zostają do lewej same z siebie. Na telefonie
   wszystko do lewej (media query niżej). */
.kb-lead,
.kb-tresc > p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.kb-tresc a:not(.kb-wstecz):not(.kb-pager-link) { color: var(--sp-niebieski-600); font-weight: 600; }
.kb-tresc a:not(.kb-wstecz):not(.kb-pager-link):hover { color: var(--sp-niebieski-700); }

.kb-tresc > ul,
.kb-tresc > ol {
  padding-left: var(--sp-space-24);
  font-size: 17px;
  line-height: 1.6;
}

.kb-tresc > ul { list-style: disc; }
.kb-tresc > ol { list-style: decimal; }
.kb-tresc > ul li + li,
.kb-tresc > ol li + li { margin-top: 6px; }

.kb-tresc code {
  padding: 0 var(--sp-space-4);
  border-radius: var(--sp-radius-8);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  background: var(--sp-szron);
}

.kb-rubryka {
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  font-weight: 700;
  color: var(--sp-tekst-2);
}

/* Blok "W skrócie": szron, lista z niebieskim numerem. */
.kb-skrot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-12);
  padding: var(--sp-space-24) 28px;
  border-radius: var(--sp-radius-12);
  background: var(--sp-szron);
}

.kb-skrot ol,
.kb-skrot ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-8);
  counter-reset: skrot;
}

.kb-skrot li {
  display: flex;
  gap: var(--sp-space-12);
  font-size: var(--sp-text-16);
  line-height: var(--sp-lh-16);
  counter-increment: skrot;
}

.kb-skrot ol li::before { content: counter(skrot); color: var(--sp-niebieski-600); font-weight: 800; }
.kb-skrot ul li::before { content: "•"; color: var(--sp-niebieski-600); font-weight: 800; }

/* Blok "Standard": rysunek po lewej, rubryki na szronie po prawej. */
.kb-standard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  border: 1px solid var(--sp-linia);
  border-radius: var(--sp-radius-12);
  overflow: hidden;
}

.kb-standard .kb-rys { background: var(--sp-biel); }

.kb-standard-opis {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--sp-space-24);
  border-left: 1px solid var(--sp-linia);
  background: var(--sp-szron);
}

.kb-standard-rubryka { display: flex; flex-direction: column; gap: 6px; }
.kb-tresc .kb-standard-rubryka p { font-size: 15px; line-height: 1.5; }

/* Blok "Obok": dwie figury w rzędzie (zdjęcie + rysunek). */
.kb-obok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.kb-figura { display: flex; flex-direction: column; gap: 10px; }
.kb-figura figcaption { font-size: var(--sp-text-14); line-height: var(--sp-lh-14); color: var(--sp-tekst-2); }

.kb-foto-kadr {
  height: 260px;
  border-radius: var(--sp-radius-12);
  background: var(--sp-linia);
  overflow: hidden;
}

.kb-foto-kadr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* Zdjęcie samo w treści (poza blokiem): kadr 3:2 na całą szerokość kolumny. */
.kb-tresc > .kb-foto .kb-foto-kadr { height: auto; aspect-ratio: 3 / 2; }
.kb-tresc > .kb-foto .kb-foto-kadr img { object-position: 50% 50%; }

/* Blok "Galeria": trzy zdjęcia 4:3 w rzędzie (góra, spód, krawędź blachy).
   Nagłówek karty to h3 nad blokiem, werdykt to akapit pod nim. */
.kb-tresc > h3 { margin-top: 40px; }
.kb-tresc > h3 + * { margin-top: 12px; }
.kb-tresc > .kb-galeria + p { margin-top: 12px; }

.kb-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.kb-galeria .kb-figura { gap: 8px; }
.kb-galeria .kb-foto-kadr { height: auto; aspect-ratio: 4 / 3; }
.kb-galeria .kb-foto-kadr img { object-position: 50% 50%; }
.kb-galeria figcaption { font-size: 13px; line-height: 1.4; }

.kb-rys-przekroj {
  height: 260px;
  border-radius: var(--sp-radius-12);
  background: var(--sp-szron);
}

/* Blok "Dobrze / Źle": dwie ramki, niebieska i miedziana. */
.kb-dobrze-zle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.kb-dobrze,
.kb-zle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--sp-niebieski-600);
  border-radius: var(--sp-radius-12);
}

.kb-zle { border-color: var(--sp-akcent-600); }

.kb-werdykt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-8);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  font-weight: 700;
  color: var(--sp-niebieski-600);
}

.kb-zle .kb-werdykt { color: var(--sp-akcent-600); }
.kb-werdykt .sp-icon { width: 18px; height: 18px; }
.kb-tresc .kb-dobrze p,
.kb-tresc .kb-zle p { font-size: 15px; line-height: 1.5; color: var(--sp-tekst-2); }

/* Blok "Kroki": numer w atramentowym kółku, tytuł kroku pogrubiony. */
.kb-kroki ol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  counter-reset: kroki;
}

.kb-kroki li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-space-16);
  align-items: start;
  counter-increment: kroki;
  font-size: var(--sp-text-16);
  line-height: var(--sp-lh-16);
  color: var(--sp-tekst-2);
}

.kb-kroki li::before {
  content: counter(kroki);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sp-atrament);
  color: var(--sp-biel);
  font-size: var(--sp-text-18);
  font-weight: 800;
}

.kb-krok { padding-top: 6px; }

.kb-krok strong {
  display: block;
  margin-bottom: var(--sp-space-4);
  font-size: var(--sp-text-18);
  line-height: var(--sp-lh-18);
  font-weight: 700;
  color: var(--sp-atrament);
}

/* Blok "Uwaga": miedziany callout. */
.kb-uwaga {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-space-16);
  align-items: start;
  padding: 22px var(--sp-space-24);
  border-radius: var(--sp-radius-12);
  background: color-mix(in srgb, var(--sp-akcent-600) 9%, var(--sp-biel));
}

.kb-uwaga-znak {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sp-biel);
}

.kb-uwaga-ikona { width: 40px; height: 40px; color: var(--sp-akcent-600); }
.kb-uwaga-tresc { display: flex; flex-direction: column; gap: 6px; }
.kb-uwaga-tytul { font-size: 17px; line-height: 1.5; font-weight: 700; }
.kb-tresc .kb-uwaga-tresc p { font-size: var(--sp-text-16); line-height: 1.55; }

/* Tabela z markdownu i tabela materiałów: ramka z promieniem, przewijanie
   w poziomie na wąskim ekranie, wartości w `code` jako mono bez tła. */
.kb-tabela {
  border: 1px solid var(--sp-linia);
  border-radius: var(--sp-radius-12);
  overflow-x: auto;
}

.kb-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.kb-tabela th,
.kb-tabela td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--sp-linia);
  text-align: left;
  vertical-align: top;
}

.kb-tabela thead tr { background: var(--sp-szron); }
.kb-tabela th { font-weight: 700; }
.kb-tabela tbody tr:last-child td { border-bottom: 0; }
.kb-tresc .kb-tabela code { padding: 0; background: transparent; font-size: var(--sp-text-14); }

.kb-na-stronie { display: none; }

/* ------------------------------------------------------------------ */
/* Rozdział: pomoc, data, pager                                          */
/* ------------------------------------------------------------------ */

/* Pomoc i pager oddziela od treści sam odstęp, bez kreski (kanwa 2026-10-14). */
.kb-tresc-stopka {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-24);
  margin-top: var(--sp-space-48);
}

.kb-pomoc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-space-24);
  color: var(--sp-tekst-2);
}

.kb-pomoc > span:first-child { flex: 1 1 360px; }
.kb-pomoc .sp-link { font-weight: 600; }
.kb-aktualizacja { flex: none; font-size: 13px; color: var(--sp-ui); }

.kb-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-16);
}

.kb-pager-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
  padding: 18px 20px;
  border: 1px solid var(--sp-linia);
  border-radius: var(--sp-radius-12);
  color: var(--sp-atrament);
  transition: border-color 150ms ease-out;
}

.kb-pager-link:hover { border-color: var(--sp-niebieski-600); }
.kb-pager-link span { font-size: 13px; line-height: var(--sp-lh-14); color: var(--sp-tekst-2); }
.kb-pager-link strong { font-size: 17px; line-height: 1.5; font-weight: 700; }
.kb-pager-next { text-align: right; }

/* ------------------------------------------------------------------ */
/* Responsywność                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
  .kb-naglowek h1 { font-size: var(--sp-text-48); line-height: var(--sp-lh-48); }
  .kb-karty-pionowe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-karty-poziome { grid-template-columns: minmax(0, 1fr); }

  /* Spis pod przyciskiem "Rozdziały" w pasku; klasa `open` z marketing.js. */
  .kb-pasek {
    display: block;
    border-bottom: 1px solid var(--sp-linia);
    background: var(--sp-szron);
  }

  .kb-pasek-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-space-12);
    padding-top: var(--sp-space-12);
    padding-bottom: var(--sp-space-12);
  }

  .kb-pasek-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-8);
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--sp-linia);
    border-radius: var(--sp-radius-8);
    background: var(--sp-biel);
    font-size: var(--sp-text-14);
    font-weight: 600;
    color: var(--sp-atrament);
    cursor: pointer;
  }

  .kb-pasek-btn .sp-icon { width: 16px; height: 16px; transition: transform 150ms ease-out; }
  .open .kb-pasek-btn .sp-icon { transform: rotate(180deg); }

  .kb-uklad {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-space-32);
    padding-top: var(--sp-space-32);
    padding-bottom: var(--sp-space-48);
  }

  .kb-spis {
    display: none;
    padding: 20px 20px 20px 32px;
    border: 1px solid var(--sp-linia);
    border-radius: var(--sp-radius-12);
  }

  .open .kb-spis { display: flex; }
  .kb-spis-wstecz { display: none; }

  .kb-na-stronie { display: flex; flex-direction: column; gap: var(--sp-space-8); }
  .kb-na-stronie a { font-size: 15px; line-height: 1.5; color: var(--sp-niebieski-600); }

  .kb-tresc h1 { font-size: var(--sp-text-40); line-height: var(--sp-lh-40); }
  .kb-tresc h2 { font-size: var(--sp-text-24); line-height: var(--sp-lh-24); }
  .kb-standard { grid-template-columns: minmax(0, 1fr); }
  .kb-standard-opis { border-left: 0; border-top: 1px solid var(--sp-linia); }
  .kb-obok,
  .kb-dobrze-zle { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .kb-naglowek { padding: var(--sp-space-32) 0; }
  .kb-naglowek h1 { font-size: var(--sp-text-40); line-height: var(--sp-lh-40); }
  .kb-lead { font-size: 17px; }
  .kb-szukaj { flex-direction: column; }
  .kb-szukaj-btn { width: 100%; }
  .kb-wyniki h2 { font-size: var(--sp-text-24); line-height: var(--sp-lh-24); }
  .kb-grupa { padding: 40px 0 48px; }
  .kb-grupa-naglowek h2 { font-size: var(--sp-text-24); line-height: var(--sp-lh-24); }
  .kb-karty-pionowe { grid-template-columns: minmax(0, 1fr); }
  .kb-karty-poziome .kb-karta { grid-template-columns: minmax(0, 1fr); }
  .kb-karta-rysunek { max-width: 260px; }

  .kb-lead,
  .kb-tresc > p { text-align: start; }
  .kb-tresc h1 { font-size: 36px; line-height: 1.08; }
  .kb-tresc p { font-size: var(--sp-text-16); line-height: 1.55; }
  .kb-tresc > * + * { margin-top: var(--sp-space-16); }
  .kb-tresc > h2 { margin-top: var(--sp-space-32); }
  .kb-tresc > .kb-tresc-naglowek + * { margin-top: var(--sp-space-32); }
  .kb-skrot { padding: 18px 20px; }
  .kb-foto-kadr,
  .kb-rys-przekroj { height: 220px; }
  .kb-galeria { grid-template-columns: minmax(0, 1fr); }
  .kb-tresc > h3 { margin-top: var(--sp-space-32); }
  .kb-pager { grid-template-columns: minmax(0, 1fr); }
  .kb-pager-next { text-align: left; }
}