/* Dokladka 12PM do arkusza Task Managera (blog-shell.css).
 *
 * Kolejnosc ladowania na stronach bloga:
 *   1. blog-shell.css           - KOPIA site-shell.css z Task Managera (uklad bloga)
 *   2. blog-12pm.css            - TEN plik: tylko kolor marki
 *   3. blog-naglowek-stopka.css - GENEROWANY z CSS landinga przy kazdym budowaniu
 *
 * Zasada: jesli cos da sie zostawic arkuszowi TM albo landingowi - zostawiamy. Kazda regula
 * tutaj to miejsce, w ktorym blog moze sie rozjechac z pierwowzorem.
 *
 * USUNIETE 2026-10-01: reguly naglowka i stopki pisane pod moj WLASNY, uproszczony naglowek.
 * Po przejsciu na prawdziwy naglowek i stopke z landinga byly nie tylko zbedne, ale szkodliwe -
 * `.shell-footer .shell-container { padding-block: 28px 36px }` robilo stopke bloga o 60 px
 * wyzsza niz na landingu (zmierzone).
 */

:root {
  /* Kolor marki 12PM z landinga (assets/css/base.css). Arkusz TM uzywa swoich zmiennych
     na akcenty - podmieniamy je, zeby linki i akcenty w TRESCI bloga byly w kolorze 12PM.
     Naglowek i stopka biora kolory z wlasnych regul landinga (arkusz nr 3). */
  --shell-teal: #635bff;
  --shell-teal-deep: #5048d9;
  --teal: #635bff;
  --teal-deep: #5048d9;
}

/* Strona podziekowania: w Task Managerze prawa polowa hero to zdjecie osoby, dlatego tekst
   jest tam ograniczony do 52vw. Tutaj zdjecia nie ma, wiec bez tej reguly polowa ciemnego
   pasa zostaje pusta. Jedyna regula ukladu w tym pliku - reszta zostaje arkuszowi TM. */
body.content-page .thx-hero .listing-hero-copy { max-width: 940px; }

/* Znacznik AI przy obrazach w treści artykułu. `.ai-mark` jest pozycjonowany absolutnie,
   a `.blog-figure` zawiera też podpis - bez tego opakowania znacznik siadałby na podpisie
   zamiast na zdjęciu. Druga i ostatnia reguła układu w tym pliku. */
.blog-figure-obraz { position: relative; display: block; }

/* Mapa strony. Arkusz Task Managera nie ma takiej strony, więc układ listy jest tutaj.
   Wiersz = link i opis obok siebie, rozdzielone hairline'em - ten sam język, co „Warto
   przeczytać także" w artykule. Bez tego link i opis sklejały się w jeden ciąg znaków. */
.mapa-lista { list-style: none; margin: 0; padding: 0; }
.mapa-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.mapa-lista li:last-child { border-bottom: 0; }
.mapa-lista a { font-weight: 600; text-decoration: none; }
.mapa-lista a:hover { text-decoration: underline; }
.mapa-lista span { color: var(--muted, #6e6e73); font-size: 15px; line-height: 1.5; }
body.mapa-strony .article-body section + section { margin-top: 44px; }
body.mapa-strony .article-body h2 { margin-bottom: 4px; }