/* Blog: lista /blog/ (app/widoki/blog.php) i artykuł (app/widoki/blog-artykul.php). Świat strony z DESIGN.md: biel, grafit w treści,
   tusz w nagłówkach, linie 1px zamiast pudełek, czerwień tylko na akcji i wybranym temacie. Typografia czytania według projektu Astry
   (08.10): treść 18/29 na telefonie, zdanie podsumowania rozdziału 19/29 600 w tuszu, kolumna tekstu 680 px, od 1100 px spis obok. */
.bl-strona {
  --bl-czerwien: #DC2626; --bl-czerwien-ciemna: #B91C1C;
  --bl-tusz: #111827; --bl-tekst: #374151; --bl-drugi: #4B5563; --bl-trzeci: #6B7280;
  --bl-linia: #E5E7EB; --bl-linia-mocna: #D1D5DB; --bl-cieply: #F7F7F5; --bl-zdjecie: #EFEFEC;
  --bl-wyjazd: cubic-bezier(.16, 1, .3, 1);
  --bl-pasek: 52px; /* pasek bieżącego rozdziału (telefon i tablet) */
  background: #fff; accent-color: var(--bl-czerwien);
}
.bl-strona ::selection { background: var(--bl-czerwien); color: #fff; }
.bl { font: 400 18px/1.6 "DM Sans", system-ui, sans-serif; color: var(--bl-tekst); -webkit-font-smoothing: antialiased; }
.bl *, .bl *::before, .bl *::after, .bl-pasek, .bl-pasek * { box-sizing: border-box; }
.bl [hidden] { display: none !important; }
.bl :focus-visible, .bl-pasek :focus-visible { outline: 3px solid var(--bl-czerwien); outline-offset: 2px; border-radius: 4px; }
.bl h1, .bl h2, .bl h3, .bl p, .bl ul, .bl ol, .bl figure { margin: 0; }
.bl h2, .bl h3 { color: var(--bl-tusz); font-family: inherit; letter-spacing: -0.02em; text-wrap: balance; }
.bl img { display: block; max-width: 100%; height: auto; }
.bl figcaption { font-style: normal; }
.bl table, .bl tr, .bl th, .bl td { background: none !important; }

.bl { max-width: 1320px; margin: 0 auto; padding: 0 20px 64px; }

/* ---------- nagłówek artykułu i listy ---------- */
.bl-glowa { padding: 12px 0 0; }
.bl-okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; line-height: 22px; color: var(--bl-drugi); }
.bl-okruszki a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.bl-okruszki a:hover { color: var(--bl-tusz); text-decoration: underline; text-underline-offset: 3px; }
.bl-okruszki span { color: var(--bl-linia-mocna); }
.bl .bl-tytul {
  margin-top: 4px; color: var(--bl-tusz); font: 700 clamp(30px, 8.2vw, 44px)/1.12 "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.03em; text-wrap: balance;
}
.bl-meta { margin-top: 14px !important; font-size: 15px; line-height: 24px; color: var(--bl-drugi); }
.bl-meta span { white-space: nowrap; }
.bl .bl-meta--daty { margin-top: 2px !important; }
.bl-meta span + span::before { content: "·"; margin: 0 8px; color: var(--bl-trzeci); }
@media (max-width: 399px) { .bl-meta--daty span { display: block; } .bl-meta--daty span + span::before { content: none; } }
.bl-meta a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--bl-linia-mocna); }

/* stan prawny artykułów o przepisach (BLOG_PRAWO) */
.bl-prawo { margin-top: 14px !important; padding: 12px 14px; border: 1px solid var(--bl-linia-mocna); border-radius: 12px; font-size: 15px; line-height: 22px; color: var(--bl-drugi); }

/* ---------- odpowiedź w skrócie ---------- */
.bl-skrot { margin-top: 22px; }
.bl-skrot p { color: var(--bl-tusz); font-size: 19px; line-height: 29px; font-weight: 500; }
.bl-skrot p + p { margin-top: 12px; }
.bl-skrot strong { font-weight: 700; }

/* ---------- zdjęcie realizacji: na telefonie od krawędzi do krawędzi ---------- */
.bl-glowne { margin: 26px -20px 0 !important; }
.bl-glowne img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bl-zdjecie); }
.bl-glowne figcaption { margin-top: 10px; padding: 0 20px; font-size: 15px; line-height: 22px; color: var(--bl-drugi); }
.bl figcaption a { color: var(--bl-tusz); font-weight: 500; text-decoration: underline; text-decoration-color: var(--bl-linia-mocna); text-underline-offset: 3px; }
.bl figcaption a:hover { color: var(--bl-czerwien-ciemna); text-decoration-color: currentColor; }

/* ---------- najważniejsze fakty ---------- */
.bl-punkty { margin-top: 48px; padding: 20px 20px 22px; border-radius: 18px; background: var(--bl-cieply); }
.bl-punkty h2, .bl-spis h2 { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.bl-punkty ul { margin-top: 12px; padding: 0; list-style: none; }
.bl-punkty li { position: relative; padding-left: 30px; color: var(--bl-tusz); font-size: 17px; line-height: 26px; }
.bl-punkty li + li { margin-top: 10px; }
.bl-punkty li::before { /* znacznik: narysowany „ptaszek” */
  content: ""; position: absolute; left: 3px; top: 7px; width: 13px; height: 7px;
  border-left: 2px solid var(--bl-tusz); border-bottom: 2px solid var(--bl-tusz); transform: rotate(-45deg);
}

/* ---------- spis rozdziałów ---------- */
.bl-spis { margin-top: 22px; }
.bl-spis ol { margin-top: 6px; padding: 0; list-style: none; counter-reset: none; border-top: 1px solid var(--bl-linia); }
.bl-spis li { border-bottom: 1px solid var(--bl-linia); }
.bl-spis a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 0; color: var(--bl-tusz);
  font-size: 17px; line-height: 23px; font-weight: 500; text-decoration: none; transition: color .2s;
}
.bl-spis-nr {
  flex: 0 0 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--bl-linia-mocna); border-radius: 999px;
  color: var(--bl-drugi); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s, color .2s;
}
.bl-spis a:hover { color: var(--bl-czerwien-ciemna); }
.bl-spis a:hover .bl-spis-nr { border-color: currentColor; color: inherit; }
.bl-spis a[aria-current="true"] .bl-spis-nr { border-color: var(--bl-tusz); background: var(--bl-tusz); color: #fff; }

/* ---------- rozdział: zdanie podsumowania, potem rozwinięcie ---------- */
.bl-rozdzial { margin-top: 44px; scroll-margin-top: calc(var(--bl-pasek) + 16px); }
.bl-rozdzial > h2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; }
.bl-wstep { margin-top: 12px !important; color: var(--bl-tusz); font-size: 19px; line-height: 29px; font-weight: 600; letter-spacing: -0.005em; }
.bl-wstep a { color: inherit; }
.bl-tresc { margin-top: 16px; font-size: 18px; line-height: 29px; }
.bl-tresc > * + * { margin-top: 16px !important; }
.bl-tresc strong { color: var(--bl-tusz); font-weight: 600; }
.bl-tresc h3 { margin-top: 28px !important; font-size: 21px; line-height: 28px; font-weight: 700; }
.bl-tresc ul, .bl-tresc ol { padding-left: 24px; }
.bl-tresc li { padding-left: 4px; }
.bl-tresc li + li { margin-top: 10px; }
.bl-tresc li::marker { color: var(--bl-trzeci); }
.bl-tresc ol li::marker { color: var(--bl-tusz); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-tresc a, .bl-wstep a, .bl-skrot a, .bl-punkty a {
  color: var(--bl-tusz); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgb(17 24 39 / .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
}
.bl-tresc a:hover, .bl-wstep a:hover, .bl-skrot a:hover, .bl-punkty a:hover { color: var(--bl-czerwien-ciemna); text-decoration-color: currentColor; }
.bl-tresc blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 18px; border-left: 1px solid var(--bl-linia-mocna); color: var(--bl-tusz); font-style: italic; }
.bl-tresc .bl-uwaga { padding: 16px 18px; border-radius: 14px; background: var(--bl-cieply); font-size: 17px; line-height: 27px; }
.bl-tresc .bl-uwaga strong:first-child { color: var(--bl-tusz); font-weight: 700; }

/* zdjęcia w treści i galerie (dotknięcie powiększa: public/js/blog.js) */
.bl-foto img { width: auto; max-width: 100%; border-radius: 14px; background: var(--bl-zdjecie); } /* małe obrazy (wzornik 227 px) bez rozciągania */
.bl-powieksz { width: fit-content; max-width: 100%; }
.bl-foto figcaption { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--bl-drugi); }
.bl-powieksz { display: block; border-radius: 14px; cursor: zoom-in; }
.bl-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.bl-galeria .bl-powieksz { width: auto; }
.bl-galeria .bl-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bl-cieply); }
.bl-galeria .bl-foto figcaption { font-size: 15px; line-height: 21px; }

/* tabele: na telefonie każdy wiersz to karta „cecha, potem wartości z nazwą kolumny” */
.bl-tabela table { width: 100%; border: 0; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.bl-tabela caption { margin-bottom: 8px; text-align: left; color: var(--bl-drugi); font-size: 15px; }
.bl-tabela th, .bl-tabela td { padding: 12px; border: 0; border-bottom: 1px solid var(--bl-linia); text-align: left; vertical-align: top; font-weight: 400; }
.bl-tabela thead th { padding-top: 0; color: var(--bl-tusz); font-weight: 700; border-bottom: 1.5px solid var(--bl-tusz); }
.bl-tabela tbody th { color: var(--bl-tusz); font-weight: 600; }
.bl-tabela th:first-child { padding-left: 0; }
@media (max-width: 639px) {
  .bl-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bl-tabela table, .bl-tabela tbody, .bl-tabela tr, .bl-tabela th, .bl-tabela td { display: block; }
  .bl-tabela tr { padding: 14px 0; border-bottom: 1px solid var(--bl-linia); }
  .bl-tabela tbody tr:first-child { border-top: 1.5px solid var(--bl-tusz); }
  .bl-tabela tbody th { margin-bottom: 6px; padding: 0; border: 0; font-size: 17px; }
  .bl-tabela td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
  .bl-tabela td::before { content: attr(data-kol); color: var(--bl-drugi); font-size: 15px; font-weight: 500; }
}

/* ---------- częste pytania ---------- */
.bl-faq > h2 { margin-bottom: 8px; }
.bl-pytanie { border-bottom: 1px solid var(--bl-linia); }
.bl-pytanie:first-of-type { border-top: 1px solid var(--bl-linia); }
.bl-pytanie summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0;
  color: var(--bl-tusz); font-size: 18px; line-height: 26px; font-weight: 600; cursor: pointer; list-style: none;
}
.bl-pytanie summary::-webkit-details-marker { display: none; }
.bl-pytanie summary svg { flex: none; color: var(--bl-drugi); transition: transform .3s var(--bl-wyjazd); }
.bl-pytanie[open] summary svg { transform: rotate(180deg); }
.bl-pytanie summary:hover { color: var(--bl-czerwien-ciemna); }
.bl-pytanie .bl-tresc { margin: 0 0 18px; }

/* ---------- akcja na końcu ---------- */
.bl-akcja { margin-top: 56px; padding: 24px 20px; border-radius: 18px; background: var(--bl-cieply); }
.bl-akcja h2 { font-size: 23px; line-height: 29px; font-weight: 700; letter-spacing: -0.02em; }
.bl-akcja p { margin-top: 8px; font-size: 17px; line-height: 26px; }
.bl-akcja-przyciski { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.bl .bl-przycisk, .bl .bl-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; transition: background-color .2s, border-color .2s, transform .15s;
}
.bl .bl-przycisk { background: var(--bl-czerwien); color: #fff; box-shadow: 0 6px 16px rgb(220 38 38 / .28); }
.bl .bl-przycisk:hover { background: var(--bl-czerwien-ciemna); }
.bl .bl-tel { border: 1.5px solid var(--bl-linia-mocna); background: #fff; color: var(--bl-tusz); font-variant-numeric: tabular-nums; }
.bl .bl-tel svg { color: var(--bl-czerwien); }
.bl .bl-tel:hover { border-color: var(--bl-tusz); }
.bl .bl-przycisk:active, .bl .bl-tel:active { transform: scale(.97); }

/* ---------- karty artykułów: powiązane i lista ---------- */
.bl-powiazane { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bl-linia); }
.bl-powiazane > h2, .bl-polecane > h2, .bl-wszystkie-lista > h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.bl-karty { margin-top: 12px !important; padding: 0; list-style: none; }
.bl-karta a { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 20px 0; color: inherit; text-decoration: none; }
.bl-karta + .bl-karta a { border-top: 1px solid var(--bl-linia); }
.bl-karta img { grid-row: 1 / span 3; width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--bl-zdjecie); }
.bl-karta-tytul { color: var(--bl-tusz); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; text-wrap: pretty; transition: color .2s; }
.bl-karta-opis { display: none; }
.bl-karta-meta { margin-top: 4px; color: var(--bl-drugi); font-size: 15px; line-height: 22px; }
.bl-karta a:hover .bl-karta-tytul { color: var(--bl-czerwien-ciemna); }
.bl-wszystkie { margin-top: 8px !important; }
.bl-wszystkie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bl-tusz); font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bl-linia-mocna); }

/* lista /blog/ */
.bl-lead { margin-top: 12px !important; max-width: 60ch; font-size: 18px; line-height: 28px; }
.bl-skok a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; color: var(--bl-tusz); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--bl-linia-mocna); text-underline-offset: 3px; }
.bl-skok a:hover { color: var(--bl-czerwien-ciemna); }
.bl-wszystkie-lista > h2 { scroll-margin-top: 16px; }
.bl-polecane { margin-top: 28px; }
.bl-karty--duze { display: grid; gap: 28px; margin-top: 16px !important; }
.bl-karta--duza a { display: flex; flex-direction: column; padding: 0; }
.bl-karta--duza + .bl-karta--duza a { border-top: 0; }
.bl-karta--duza img { width: 100%; border-radius: 14px; }
.bl-karta--duza .bl-karta-tytul { margin-top: 14px; font-size: 21px; line-height: 27px; }
.bl-karta--duza .bl-karta-opis { display: -webkit-box; margin-top: 6px; color: var(--bl-tekst); font-size: 16px; line-height: 24px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-karta--duza .bl-karta-meta { margin-top: 8px; font-size: 15px; }
.bl-wszystkie-lista { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bl-linia); }
.bl-licznik { color: var(--bl-trzeci); font-weight: 500; font-variant-numeric: tabular-nums; }
.bl-tematy {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.bl-tematy a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--bl-linia-mocna); border-radius: 999px;
  color: var(--bl-tusz); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s;
}
.bl-tematy a:hover { border-color: var(--bl-tusz); }
.bl-tematy a[aria-current="true"] { border-color: var(--bl-czerwien); background: var(--bl-czerwien); color: #fff; }
.bl-lista .bl-karty--lista { margin-top: 8px !important; }

/* ---------- pasek bieżącego rozdziału (telefon i tablet; tworzy public/js/blog.js) ---------- */
.bl-pasek {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #fff; border-bottom: 1px solid var(--bl-linia);
  box-shadow: 0 6px 24px rgb(17 24 39 / .08); font: 400 15px/1.4 "DM Sans", system-ui, sans-serif; color: var(--bl-tusz);
  transform: translateY(-100%); visibility: hidden; transition: transform .35s var(--bl-wyjazd), visibility 0s .35s;
}
.bl-pasek.bl-pasek--widoczny { transform: none; visibility: visible; transition: transform .35s var(--bl-wyjazd); }
.bl-pasek-przycisk {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--bl-pasek); padding: 6px 16px 6px 20px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bl-pasek-nr { flex: none; color: var(--bl-drugi); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-pasek-tytul { flex: 1; min-width: 0; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-pasek-przycisk svg { flex: none; color: var(--bl-drugi); transition: transform .3s var(--bl-wyjazd); }
.bl-pasek-przycisk[aria-expanded="true"] svg { transform: rotate(180deg); }
.bl-pasek-postep { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--bl-tusz); transform-origin: 0 50%; transform: scaleX(0); }
.bl-pasek-lista { max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 20px 8px; list-style: none; border-top: 1px solid var(--bl-linia); }
.bl-pasek-lista a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--bl-linia);
  color: var(--bl-tusz); font-size: 16px; line-height: 22px; font-weight: 500; text-decoration: none;
}
.bl-pasek-lista li:last-child a { border-bottom: 0; }
.bl-pasek-lista a[aria-current="true"] { font-weight: 700; }
.bl-pasek-lista .bl-spis-nr { flex-basis: 26px; height: 26px; font-size: 13px; }
.bl-pasek-lista a[aria-current="true"] .bl-spis-nr { border-color: var(--bl-tusz); background: var(--bl-tusz); color: #fff; }

/* ---------- powiększone zdjęcie ---------- */
.bl-okno { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(17 24 39 / .94); }
.bl-okno::backdrop { background: rgb(17 24 39 / .6); }
.bl-okno img { width: 100%; height: 100%; object-fit: contain; }
.bl-okno-zamknij {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer;
}

/* ---------- od 640 px ---------- */
@media (min-width: 640px) {
  .bl { padding: 0 32px 80px; }
  .bl-glowne { margin: 28px 0 0 !important; }
  .bl-glowne img { border-radius: 18px; }
  .bl-glowne figcaption { padding: 0; }
  .bl-akcja { padding: 32px; }
  .bl-akcja-przyciski { flex-direction: row; flex-wrap: wrap; }
  .bl-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .bl-galeria:has(> :nth-child(4):last-child), .bl-galeria:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-karty--duze { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .bl-karty--lista, .bl-powiazane .bl-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .bl-karty--lista .bl-karta a, .bl-powiazane .bl-karta a { display: flex; flex-direction: column; padding: 0; border-top: 0 !important; }
  .bl-karty--lista .bl-karta img, .bl-powiazane .bl-karta img { width: 100%; border-radius: 14px; }
  .bl-karty--lista .bl-karta-tytul, .bl-powiazane .bl-karta-tytul { margin-top: 12px; font-size: 19px; line-height: 25px; }
  .bl-karty--lista .bl-karta-opis { display: -webkit-box; margin-top: 6px; color: var(--bl-tekst); font-size: 16px; line-height: 24px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bl-karty--lista .bl-karta-meta, .bl-powiazane .bl-karta-meta { margin-top: 8px; font-size: 15px; }
  .bl-tematy { margin-top: 16px; }
  .bl-lista .bl-karty--lista { margin-top: 24px !important; }
}

/* ---------- od 760 px: kolumna czytania 680 px ---------- */
@media (min-width: 760px) {
  .bl-artykul .bl-glowa, .bl-uklad, .bl-artykul ~ .bl-powiazane { max-width: 680px; margin-left: auto; margin-right: auto; }
  .bl-glowa { padding-top: 24px; }
  .bl .bl-tytul { font-size: 44px; line-height: 49px; }
  .bl-rozdzial { margin-top: 56px; }
  .bl-rozdzial > h2 { font-size: 32px; line-height: 39px; }
  .bl-wstep { font-size: 20px; line-height: 31px; }
  .bl-tresc { font-size: 19px; line-height: 31px; }
  .bl-tresc h3 { font-size: 23px; line-height: 30px; }
  .bl-skrot p { font-size: 20px; line-height: 31px; }
}

/* ---------- od 1024 px: lista w trzech kolumnach ---------- */
@media (min-width: 1024px) {
  .bl-lista .bl-glowa, .bl-polecane, .bl-wszystkie-lista, .bl-lista .bl-akcja { max-width: 1104px; margin-left: auto; margin-right: auto; }
  .bl-lista .bl-glowa { padding-top: 32px; }
  .bl-karty--duze, .bl-karty--lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .bl-lista .bl-akcja { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding: 36px 40px; }
  .bl-lista .bl-akcja-przyciski { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- od 1100 px: spis obok tekstu, przyklejony ---------- */
@media (min-width: 1100px) {
  .bl-strona { --bl-pasek: 0px; }
  .bl-pasek { display: none; }
  .bl-artykul .bl-glowa, .bl-artykul ~ .bl-powiazane { max-width: 976px; }
  .bl-artykul .bl-glowa > * { max-width: 680px; }
  .bl-uklad { display: grid; grid-template-columns: minmax(0, 680px) 240px; column-gap: 56px; max-width: 976px; align-items: start; }
  .bl-uklad > * { grid-column: 1; }
  .bl-uklad > .bl-spis {
    grid-column: 2; grid-row: 1 / span 60; position: sticky; top: 24px; margin-top: 26px;
    max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bl-linia-mocna) transparent;
  }
  .bl-spis h2 { font-size: 15px; line-height: 22px; color: var(--bl-drugi); font-weight: 600; letter-spacing: 0; }
  .bl-spis ol { border-top: 0; }
  .bl-spis li { border-bottom: 0; }
  .bl-spis a { min-height: 40px; padding: 6px 0; gap: 12px; font-size: 15px; line-height: 21px; color: var(--bl-drugi); }
  .bl-spis a[aria-current="true"] { color: var(--bl-tusz); font-weight: 600; }
  .bl-spis-nr { flex-basis: 24px; height: 24px; font-size: 12px; }
  .bl-glowne { margin-top: 32px !important; }
  .bl-powiazane .bl-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (hover: none) { .bl-karta a:hover .bl-karta-tytul, .bl-spis a:hover { color: inherit; } }
@media (prefers-reduced-motion: reduce) { .bl *, .bl-pasek, .bl-pasek * { transition: none !important; } }