/* blog-spis-tresci.css — wygląd spisu treści artykułu. WSPÓLNY dla trzech portali.
   Utworzony 2026-08-04. Skrypt: /var/www/shared/blog-spis-tresci.js

   ZASADA: zero własnych kolorów marki. Wszystko na zmiennych, których używa już strona
   artykułu, z rozsądnym zejściem awaryjnym. Dzięki temu spis wygląda tak samo „u siebie"
   na pomarańczowym 1g.pl, granatowym osiedlo.pl i na otoauta.pl. */

/* UKŁAD — poprawione 2026-08-04. Pierwsza wersja robiła z pojemnika artykułu siatkę
   dwukolumnową i rozbijała gotową stronę: okładka i tekst zjeżdżały w wąską kolumnę.
   Teraz spis wchodzi do ISTNIEJĄCEJ prawej kolumny strony artykułu i nie rusza niczego
   poza sobą. Zero zmian w układzie treści. */
@media (min-width: 992px) {
  /* PRZYKLEJAMY CAŁĄ KOLUMNĘ, NIE POJEDYNCZĄ KARTĘ.
     Poprzednia wersja robiła `sticky` na samej karcie spisu. Karta wychodziła wtedy
     z normalnego układu i jechała w dół sama, a karty pod nią — powiązane artykuły,
     ramka z wyszukiwarką — zostawały tam, gdzie stały. Efekt: spis zjeżdżał, reszta nie,
     i jedno wchodziło na drugie. Właściciel zgłosił to dwa razy i miał rację.

     Gdy przyklejona jest kolumna, wszystko w środku jedzie razem i zachowuje swoje
     odstępy. Spis zostaje pierwszą kartą i po prostu jest na górze tej kolumny. */
  .post-sidebar, #articleSidebar, .article-sidebar {
    position: sticky;
    top: 96px;                      /* tyle, ile odejmuje skrypt przy przewijaniu */
    align-self: start;              /* bez tego element rozciąga się i nie ma gdzie się przykleić */
    z-index: 5;                     /* nad treścią, która przewija się obok */

    /* BEZ `max-height` i `overflow-y` — usunięte 2026-08-04 po uwadze właściciela.
       Dawały pasek przewijania wewnątrz kolumny, a to na blogu wygląda jak usterka:
       człowiek widzi drugi suwak obok suwaka strony i nie wie, którym jechać.
       Kolumna (spis + powiązane + ramka) mieści się w ekranie, więc nie ma czego
       przewijać. Gdyby kiedyś urosła ponad wysokość okna, lepszym wyjściem jest
       skrócić jej zawartość niż dokładać drugi suwak. */
  }
  /* Karta spisu nie jest już przyklejana osobno — jedzie razem z kolumną. */
  .bst--bok { position: static; }
}

/* Na telefonie spis w bocznej kolumnie i tak ląduje nad powiązanymi artykułami —
   zwijamy go do rozsądnej wysokości, żeby nie spychał ich poza ekran. */
@media (max-width: 991.98px) {
  .bst--bok .bst__lista { max-height: 240px; overflow-y: auto; }
}

.bst {
  background: var(--surface, #fff);
  border: 1px solid var(--line, var(--border-color, #e4e8f0));
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: .88rem;
  line-height: 1.5;
}

.bst__tytul {
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted, #6b7681);
  margin: 0 0 10px;
}

.bst__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bst;
}

.bst__poz { margin: 0; }
.bst__poz--pod { padding-left: 14px; }
.bst__poz--pod .bst__link { font-size: .84rem; opacity: .88; }

.bst__link {
  display: block;
  padding: 6px 10px 6px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  color: var(--ink-2, var(--ink, #33404f));
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  /* Długie nagłówki przycinamy do dwóch wierszy — pełne brzmienie i tak siedzi
     w atrybucie `title`, więc nic się nie gubi. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bst__link:hover {
  background: var(--bg-2, #f6f8fb);
  color: var(--ink, #1a2530);
}

/* Bieżąca sekcja. Kolor bierzemy z akcentu portalu — na 1g.pl pomarańcz,
   na osiedlo.pl i otoauta.pl ich własny. */
.bst__link.jest-tu {
  border-left-color: var(--o-orange, var(--orange-500, #e57d1a));
  background: var(--bg-2, #f6f8fb);
  color: var(--ink, #1a2530);
  font-weight: 700;
}

.bst__link:focus-visible {
  outline: 2px solid var(--o-orange, var(--orange-500, #e57d1a));
  outline-offset: 1px;
}

/* Odnośnik do sekcji przy nagłówku — pojawia się dopiero po najechaniu na nagłówek,
   żeby nie zaśmiecał tekstu. Na dotyku (brak najechania) zostaje widoczny słabo. */
.bst__kotwica {
  margin-left: .4em;
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  color: var(--muted-2, #8a93a5);
  transition: opacity .15s;
}
h2:hover > .bst__kotwica,
h3:hover > .bst__kotwica,
.bst__kotwica:focus-visible { opacity: 1; }
@media (hover: none) {
  .bst__kotwica { opacity: .35; }
}

/* Nagłówki, do których przewija skrypt, dostają zapas u góry — inaczej przyklejony
   pasek portalu przykrywa pierwszą linijkę. */
.article-body h2, .article-body h3,
.post-body h2, .post-body h3 { scroll-margin-top: 96px; }

@media (prefers-color-scheme: dark) {
  .bst { background: #17191d; border-color: #2c3038; }
  .bst__link { color: #c8cfd8; }
  .bst__link:hover, .bst__link.jest-tu { background: #1f232a; color: #f1f5f9; }
}