/* ============================================================================
   Strefa wiedzy — publiczna lista artykułów i karta artykułu.
   Ładowane RAZEM z styles/landing.css i styles/public-page.css przez
   templates/public/_layout.html.twig (blok head_extra).

   Podział odpowiedzialności (bez duplikatów):
   - landing.css      → nagłówek, stopka, .container, .btn-primary, font Plus Jakarta Sans,
   - public-page.css  → --legal-* (paleta), .page-hero, .page-body, „prose" .legal-content,
   - knowledge.css    → WYŁĄCZNIE elementy specyficzne dla Strefy wiedzy.

   Świadoma decyzja o tokenach: projekt referencyjny podstrony miał własną paletkę
   (navy #0e1e38, green #2fae4d, steel #3a6ea5) i fonty Poppins/Inter. Użyto zamiast
   nich ISTNIEJĄCYCH tokenów landingu ContentDeliver (--legal-navy #092439,
   --legal-green #0ba00b, --legal-blue #436e99, Plus Jakarta Sans) — wymóg spójności
   z landingiem wygrywa z odwzorowaniem makiety co do wartości HEX. Układ, hierarchia
   i wszystkie komponenty makiety są odwzorowane 1:1.

   Wszystkie reguły są zagnieżdżone pod .kz-* / .public-page, więc nic tu nie zmienia
   wyglądu panelu ani strony głównej.
   ============================================================================ */

:root {
  /* Druga barwa gradientu ciemnej karty filaru (rozjaśniony granat landingu). */
  --kz-navy-2: #16294a;
  --kz-radius: 18px;
  --kz-card-bg: #f3f5f7;
  --kz-line-soft: #e3e7ec;
}

/* ===== Hero listy Strefy wiedzy — wyrownanie z trescia (2a) =====
   Domyslny .page-hero__inner ma max-width: var(--page-measure) (980px) i jest
   wysrodkowany, bo podstrony prawne maja WEZSZA kolumne tekstu. Na liscie artykulow
   tresc (.kz-pillar, .kz-grid) wypelnia caly .container, wiec ta sama miara w hero
   przesuwala H1 do srodka i lewa krawedz naglowka nie licowala sie z karta filaru.

   Rozwiazanie: na tej jednej stronie hero rezygnuje z wlasnej miary i uzywa DOKLADNIE
   tego samego kontenera co tresc (ten sam .container, ten sam padding poziomy).
   Dlugosc wiersza opisu ograniczamy na SAMYM elemencie, nie wcieciem kontenera —
   inaczej wrocilaby ta sama niezgodnosc krawedzi.

   Od 30.09 ten sam wariant ma strona ARTYKULU: jej tresc tez wypelnia caly .container
   (patrz „Karta artykulu” nizej), wiec hero licuje sie z nia tak samo. */
.kz-hero__inner {
  max-width: none;
  margin-inline: 0;
}
.kz-hero__inner .page-hero__lead {
  max-width: 640px;
}

/* ===== Eyebrow („Strefa wiedzy") ===== */
.kz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--legal-green);
  margin-bottom: .5rem;
}
.kz-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--legal-green);
  flex: 0 0 auto;
}

/* ===== Filtry kategorii (chipsy) ===== */
.kz-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.kz-chip {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--legal-line);
  color: var(--legal-muted);
  background: #fff;
  text-decoration: none;
  transition: color .15s, border-color .15s, background-color .15s;
}
.kz-chip:hover { border-color: var(--legal-green); color: var(--legal-green); }
.kz-chip:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 2px; }
/* Aktywny filtr jest rozpoznawalny nie tylko kolorem — nosi też aria-current="page". */
.kz-chip[aria-current="page"] {
  background: var(--legal-navy);
  border-color: var(--legal-navy);
  color: #fff;
}

/* ===== Artykuł-filar (duża ciemna karta) ===== */
.kz-pillar {
  display: grid;
  grid-template-columns: 7fr 5fr;
  background: linear-gradient(155deg, var(--legal-navy), var(--kz-navy-2));
  border-radius: var(--kz-radius);
  overflow: hidden;
  color: #fff;
  margin-bottom: 2.75rem;
}
.kz-pillar__main { padding: 2rem 2rem 1.85rem; min-width: 0; }
/* Filar BEZ listy zajawkowej (brak H2 i brak listy ręcznej) — karta musi przejść
   w jedną kolumnę, inaczej siatka 7fr/5fr zostawia pustą przestrzeń po prawej (A4). */
.kz-pillar--single { grid-template-columns: 1fr; }
.kz-pillar__badge {
  display: inline-block;
  background: var(--legal-green);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.kz-pillar__title {
  color: #fff;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.32;
  margin: 0 0 .7rem;
  max-width: 30ch;
}
.kz-pillar__title a { color: inherit; text-decoration: none; }
.kz-pillar__title a:hover { text-decoration: underline; }
.kz-pillar__excerpt {
  color: #c4ccd8;
  font-size: .9rem;
  max-width: 52ch;
  margin: 0 0 1.15rem;
}
.kz-pillar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .75rem;
  font-size: .78rem;
  color: #8f9aab;
  margin: 0;
}
.kz-pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--legal-green);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  margin-top: 1.35rem;
  text-decoration: none;
  transition: background-color .15s;
}
.kz-pillar__cta:hover { background: #098909; color: #fff; }
.kz-pillar__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kz-pillar__cta svg { transition: transform .18s; flex: 0 0 auto; }
.kz-pillar__cta:hover svg { transform: translateX(3px); }

/* Spis treści filaru — sygnatura sekcji */
.kz-toc {
  background: rgba(255, 255, 255, .06);
  border-left: 1px solid rgba(255, 255, 255, .1);
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.kz-toc__label {
  color: #8f9aab;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
}
.kz-toc__list { list-style: none; margin: 0; padding: 0; }
.kz-toc__item { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.kz-toc__item:last-child { border-bottom: none; }
.kz-toc__link {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: .5rem 0;
  font-size: .84rem;
  color: #dde3ea;
  text-decoration: none;
  transition: color .15s;
}
.kz-toc__link:hover { color: #5fd97f; }
.kz-toc__link:focus-visible { outline: 2px solid #5fd97f; outline-offset: 2px; border-radius: 4px; }
.kz-toc__num { font-weight: 700; font-size: .76rem; color: var(--legal-green); flex: 0 0 auto; }
/* Pozycja z listy RĘCZNEJ nie jest linkiem (nie zna kotwicy sekcji) — zachowuje
   układ, ale nie udaje elementu klikalnego. */
.kz-toc__link--static { cursor: default; }
.kz-toc__link--static:hover { color: #dde3ea; }

/* ===== Siatka artykułów =====
   auto-fit + minmax zamiast sztywnych `repeat(3, 1fr)`: przy 1 i 2 artykułach karty
   nie rozciągają się na całą szerokość, a przy 20 układ zwija się sam na wąskim ekranie. */
.kz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
/* Powyżej 3 kolumn nie rośniemy — makieta zakłada maksymalnie trzy. */
@media (min-width: 992px) {
  .kz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kz-card {
  display: flex;
  flex-direction: column;
  background: var(--kz-card-bg);
  border: 1px solid transparent;
  border-radius: var(--kz-radius);
  padding: 1.35rem;
  height: 100%;
  min-width: 0;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kz-card:hover {
  border-color: #cfe8d6;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(9, 36, 57, .08);
}
.kz-card:focus-within { border-color: var(--legal-blue); }
.kz-card__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  margin-bottom: .6rem;
}
.kz-card__tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: #e3f3e7;
  color: #0a7f0a;
}
.kz-card__time { font-size: .72rem; color: var(--legal-muted); }
.kz-card__title {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.42;
  color: var(--legal-navy);
  margin: 0 0 .5rem;
}
.kz-card__title a { color: inherit; text-decoration: none; }
.kz-card__title a:hover { color: var(--legal-blue-dark); text-decoration: underline; }
.kz-card__title a:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 2px; border-radius: 3px; }
.kz-card__excerpt {
  font-size: .82rem;
  color: var(--legal-muted);
  margin: 0;
  flex: 1 1 auto;
  /* Trzy linijki zajawki; -webkit-line-clamp jest dziś wspierane wszędzie, a bez
     wsparcia tekst po prostu nie jest ucinany (degradacja bez utraty treści). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* „Czytaj →" jest odnosnikiem (element <a>), a nie samym tekstem. align-self trzyma
   obszar klikalny przy tresci — bez tego element rozciagalby sie na cala szerokosc
   karty jako niewidoczny pas. */
.kz-card__more {
  align-self: flex-start;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--legal-blue-dark);
  text-decoration: none;
}
.kz-card__more:hover { text-decoration: underline; }
.kz-card:hover .kz-card__more { color: var(--legal-green); }

/* ===== Pusta lista ===== */
.kz-empty {
  border: 2px dashed var(--legal-line);
  border-radius: var(--kz-radius);
  text-align: center;
  color: var(--legal-muted);
  font-size: .92rem;
  padding: 2.5rem 1.25rem;
  margin: 0 0 2.5rem;
}

/* ===== Pasek zapisu do newslettera ===== */
.kz-notify {
  background: var(--kz-card-bg);
  border-radius: var(--kz-radius);
  padding: 1.85rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.kz-notify__text { flex: 1 1 260px; min-width: 0; }
.kz-notify__title { font-size: 1.1rem; font-weight: 700; color: var(--legal-navy); margin: 0 0 .3rem; }
.kz-notify__lead { font-size: .86rem; color: var(--legal-muted); margin: 0; }
.kz-notify__form { flex: 1 1 300px; min-width: 0; }
.kz-notify__row { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.kz-notify__field { flex: 1 1 180px; min-width: 0; }
.kz-notify__input {
  width: 100%;
  border: 1.5px solid var(--legal-line);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-size: .9rem;
  background: #fff;
  color: var(--legal-ink);
}
.kz-notify__input:focus { border-color: var(--legal-green); outline: none; box-shadow: 0 0 0 .2rem rgba(11, 160, 11, .15); }
.kz-notify__input[aria-invalid="true"] { border-color: #dc2626; background: #fff7f7; }
.kz-notify__submit {
  border: none;
  border-radius: 12px;
  background: var(--legal-navy);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .7rem 1.35rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s;
}
.kz-notify__submit:hover { background: var(--kz-navy-2); }
.kz-notify__submit:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 2px; }
.kz-notify__note { font-size: .74rem; color: var(--legal-muted); margin: .6rem 0 0; }
.kz-notify__note a { color: var(--legal-blue-dark); }
/* Etykieta pola jest obowiązkowa, ale w tym pasku wizualnie zbędna — ukrywamy ją
   dostępnie (nie display:none), placeholder NIE jest jedyną etykietą. */
.kz-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Honeypot: obecny w DOM dla botów, poza ekranem dla ludzi (jak .contact-hp). */
.kz-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ===== Karta artykułu =====
   Szerokość = `.container` landingu (styles/landing.css) — TO SAMO źródło co strona główna i lista /wiedza.
   Artykuł nie ma własnej miary: nagłówek (.kz-hero__inner), meta, spis treści, treść z cytatami/ramkami,
   „Czytaj także”, prezentacja i newsletter kończą się na tej samej krawędzi. Wspólna miara --page-measure
   (public-page.css) zostaje dla dokumentów prawnych; tu ją jawnie zdejmujemy z .legal-content. */
.kz-article,
.kz-article .legal-content { max-width: none; margin-inline: 0; }
.kz-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .85rem;
  font-size: .8rem;
  color: var(--legal-muted);
  margin: 0 0 1.5rem;
}
.kz-article__meta .kz-card__tag { margin: 0; }
.kz-article__toc {
  background: var(--kz-card-bg);
  border: 1px solid var(--kz-line-soft);
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  margin: 0 0 2rem;
}
.kz-article__toc-label {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--legal-muted);
  margin: 0 0 .6rem;
}
.kz-article__toc ol { margin: 0; padding-left: 1.25rem; }
.kz-article__toc li { margin: 0 0 .3rem; font-size: .88rem; }
.kz-article__toc a { color: var(--legal-blue-dark); text-decoration: none; }
.kz-article__toc a:hover { text-decoration: underline; color: var(--legal-green); }
.kz-article__toc a:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 2px; border-radius: 3px; }
/* Cel skoku ze spisu treści nie może schować się pod przyklejonym nagłówkiem mobilnym. */
/* Cel skoku ze spisu treści nie może schować się pod przyklejonym nagłówkiem mobilnym.
   TA LICZBA WYGLADA NA TE SAMA USTERKE, ALE NIA NIE JEST — sprawdzone.
   100 px odnosi sie tu do naglowka STRONY PUBLICZNEJ, a nie do paska panelu,
   a ten szablon NIE LADUJE `tokens.css` (robia to tylko trzy powloki panelu).
   Podpiecie tego pod `--cd-header-h` dalo by `calc()` z nieznana zmienna, czyli
   deklaracje odrzucona i `scroll-margin-top: 0` — cicha regresja w zamian za
   pozorne ujednolicenie. Zostaje liczba, zostaje powod. */
.kz-article .legal-content h2 { scroll-margin-top: 100px; }
.kz-article .legal-content h2:focus { outline: none; }
.kz-article .legal-content h2:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 4px; }

/* Banner podglądu szkicu — musi być niemożliwy do przeoczenia. */
.kz-preview-banner {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 12px;
  color: #92400e;
  font-size: .88rem;
  padding: .85rem 1.1rem;
  margin: 0 0 1.5rem;
}

/* ===== Paginacja ===== */
.kz-pager { display: flex; justify-content: center; margin: 0 0 2.75rem; }

/* ===== Responsywność =====
   Punkt załamania 991.98px jest zgodny z breakpointem lg Bootstrapa używanym
   przez nawigację landingu — dzięki temu układ zmienia się w jednym miejscu. */
@media (max-width: 991.98px) {
  .kz-pillar { grid-template-columns: 1fr; }
  .kz-toc { border-left: none; border-top: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 575.98px) {
  .kz-pillar__main { padding: 1.5rem 1.25rem 1.35rem; }
  .kz-toc { padding: 1.35rem 1.25rem; }
  .kz-notify { padding: 1.35rem; }
  .kz-notify__row { flex-direction: column; align-items: stretch; }
  .kz-notify__submit { width: 100%; }
  .kz-card { padding: 1.15rem; }
  /* Karty i tak są jednokolumnowe — dodatkowe ucinanie zajawki nie jest potrzebne. */
  .kz-card__excerpt { -webkit-line-clamp: 4; line-clamp: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-card, .kz-pillar__cta, .kz-pillar__cta svg, .kz-chip, .kz-notify__submit { transition: none; }
  .kz-card:hover { transform: none; }
}

/* ============================================================================
   Zajawka Strefy wiedzy na GŁÓWNYM LANDINGU.

   Świadomie w tym samym arkuszu, a nie w nowym pliku: sekcja używa tych samych
   komponentów co pełna Strefa wiedzy (.kz-card, .kz-eyebrow). Tutaj są WYŁĄCZNIE:
   nagłówek sekcji, ciemna karta filaru i wariant karty „plain”.

   Kontener, przyciski i skala odstępów (mt-50/mt-md-75/mt-lg-100) pochodzą
   z landing.css i Bootstrapa. Kolumny robi grid Bootstrapa (row + col-lg-5/7),
   więc nie definiujemy własnego systemu kolumn.
   ============================================================================ */

:root {
  /* Gradient karty filaru — jedyne miejsce, gdzie makieta referencyjna narzuca
     konkretne wartości HEX. Trzymamy je w tokenach obok pozostałych .kz-*. */
  --kz-pillar-from: #0e1e38;
  --kz-pillar-to: #16294a;
}

.kz-teaser__head {
  max-width: 60ch;
  margin: 0 0 1.75rem;
}
.kz-teaser__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  color: var(--legal-navy);
  line-height: 1.25;
  margin: 0 0 .6rem;
}
.kz-teaser__lead {
  font-size: .95rem;
  color: var(--legal-muted);
  margin: 0;
}

/* ===== Karta ARTYKUŁU-FILARU — gwiazda sekcji ===== */
.kz-teaser-pillar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, var(--kz-pillar-from), var(--kz-pillar-to));
  border-radius: var(--kz-radius);
  padding: 2rem 1.85rem;
  color: #fff;
  min-width: 0;
}
.kz-teaser-pillar__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--legal-green);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .32rem .8rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.kz-teaser-pillar__title {
  color: #fff;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .75rem;
}
.kz-teaser-pillar__title a { color: inherit; text-decoration: none; }
.kz-teaser-pillar__title a:hover { text-decoration: underline; }
.kz-teaser-pillar__title a:focus-visible { outline: 2px solid #5fd97f; outline-offset: 3px; border-radius: 4px; }
.kz-teaser-pillar__excerpt {
  color: #c4ccd8;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.kz-teaser-pillar__meta {
  font-size: .78rem;
  color: #8f9aab;
  margin: 0;
}
/* margin-top:auto przykleja CTA do dołu karty — przy różnej długości zajawek
   przycisk filaru i karty obok pozostają w jednej linii wzrokowej. */
.kz-teaser-pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: auto;
  background: var(--legal-green);
  border-radius: 999px;
  padding: .7rem 1.25rem;
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background-color .15s;
}
.kz-teaser-pillar__cta:hover { background: #098909; color: #fff; }
.kz-teaser-pillar__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.kz-teaser-pillar__cta svg { flex: 0 0 auto; transition: transform .18s; }
.kz-teaser-pillar__cta:hover svg { transform: translateX(3px); }

/* ===== Kolumna zwykłych kart obok filaru ===== */
.kz-teaser__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
/* Bez filaru sekcja degraduje się gracko do trzech równych kolumn (jak na /wiedza). */
@media (min-width: 992px) {
  .kz-teaser__list--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Wariant karty dla landingu: bez tagów i czasu czytania (A2), więc tytuł
   zaczyna kartę i treść jest wyśrodkowana w pionie. */
.kz-card--plain { justify-content: center; }

/* ===== Link „Przejdź do Strefy wiedzy” ===== */
.kz-teaser__cta { margin-top: 1.5rem; }
.kz-teaser__cta-link {
  font-weight: 600;
  font-size: .95rem;
  color: var(--legal-blue-dark);
  text-decoration: none;
}
.kz-teaser__cta-link:hover { color: var(--legal-green); text-decoration: underline; }
.kz-teaser__cta-link:focus-visible { outline: 2px solid var(--legal-blue); outline-offset: 3px; border-radius: 4px; }

/* ===== Responsywność zajawki ===== */
@media (max-width: 575.98px) {
  .kz-teaser__head { margin-bottom: 1.35rem; }
  .kz-teaser-pillar { padding: 1.5rem 1.25rem; }
  /* CTA filaru na pełną szerokość — wygodniejszy cel dotyku (≤480 px). */
  .kz-teaser-pillar__cta { align-self: stretch; justify-content: center; }
}

/* ============================================================================
   Komponent newslettera osadzony na landingu.
   Sam pasek (.kz-notify) jest wspólny z /wiedza — tu tylko odstęp sekcyjny,
   bo na landingu stoi między zajawką wiedzy a sekcją CTA.
   ============================================================================ */
.kz-newsletter-band { margin-top: 2rem; }
@media (min-width: 992px) {
  .kz-newsletter-band { margin-top: 2.5rem; }
}

/* ===== „Czytaj także” pod artykułem =====
   Jeden rząd trzech kompaktowych kafelków (.kz-card--compact — ta sama karta co siatka /wiedza, bez zajawki).
   Na telefonie poziomy pas ze snapem: sekcja zajmuje jedną wysokość kafelka zamiast trzech. Przewija się
   SAMA lista (overflow-x na <ul>), więc dokument nie dostaje poziomego scrolla. */
.kz-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--legal-line); }
.kz-related__title { font-size: 1.1rem; font-weight: 700; color: var(--legal-navy); margin: 0 0 1rem; }
.kz-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.kz-related__item { min-width: 0; }
@media (max-width: 767.98px) {
  .kz-related__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: .5rem;
  }
  .kz-related__item { scroll-snap-align: start; }
}

/* Karta w wariancie compact: kategoria + czas, tytuł do 3 linii, cała karta klikalna (link tytułu
   rozciągnięty pseudo-elementem — jeden cel dla klawiatury i czytnika ekranu). */
.kz-card--compact { position: relative; padding: 1rem 1.1rem; }
.kz-card--compact .kz-card__tags { margin-bottom: .4rem; }
.kz-card--compact .kz-card__title {
  margin: 0;
  font-size: .92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kz-card--compact .kz-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kz-card--compact:focus-within { outline: 2px solid var(--legal-blue); outline-offset: 2px; }
.kz-card--compact .kz-card__title a:focus-visible { outline: none; }