/* =========================================================================
   Zostaje w głowie — arkusz bloga.
   Wcześniej te same reguły siedziały wklejone w <style> każdego artykułu.
   Jeden plik = jedna poprawka na wszystkie teksty i jeden pobrany zasób
   na całą sesję czytelnika. Generator (narzedzia/blog.js) dopisuje do adresu
   skrót pliku, więc podmiana arkusza dociera też do stałych czytelników.
   ========================================================================= */

.okruszki-blog { font-size: .84rem; opacity: .7; margin: 0 0 1rem; }
.okruszki-blog a { color: inherit; }

.artykul p  { line-height: 1.85; font-size: 1.03rem; }
.artykul h2 { margin-top: 2.4rem; scroll-margin-top: 1.5rem; }
.artykul h3 { margin-top: 1.8rem; }
.artykul li { line-height: 1.8; margin: .35rem 0; }

/* cytat blokowy = zdanie, które ma zostać w pamięci po przewinięciu strony */
.artykul blockquote,
.wyroznik { font-size: 1.12rem; line-height: 1.75; border-left: 4px solid var(--akcent, #b5893f);
            padding: 2px 0 2px 20px; margin: 1.6rem 0; font-style: italic; }

/* Tabele w artykułach idą klasą .tabela-opak — tą samą, co w lekcjach kursu.
   Styl siedzi w assets/styl-nowy.css; nie powielamy go tutaj, żeby wygląd
   tabeli w tekście i w lekcji nie rozjechał się przy pierwszej poprawce. */

.rysunek { margin: 1.8rem 0; }
.rysunek svg { width: 100%; height: auto; display: block; }
.rysunek figcaption { font-size: .86rem; opacity: .75; margin-top: .6rem; }

.cta { margin: 2.4rem 0; padding: 26px 28px; border-radius: 18px;
       background: linear-gradient(135deg, #2f4a6b, #5a7fb0); color: #fff; }
.cta h3 { margin: 0 0 .5rem; color: #fff; }
.cta p  { margin: 0 0 1rem; color: #eaf1f8; line-height: 1.7; }
.cta .btn { background: #fff; color: #22384f; border-color: #fff; }
.cta .btn + .btn { background: transparent; color: #fff; }

.faq details { border: 1px solid var(--kreska, #dfd8c8); border-radius: 12px; padding: 14px 18px; margin: .7rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .7rem 0 0; }

.spis-tresci { border: 1px solid var(--kreska, #dfd8c8); border-radius: 14px; padding: 16px 22px; margin: 1.8rem 0; }
.spis-tresci p { margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; }
.spis-tresci ol { margin: 0; padding-left: 1.2rem; }
.spis-tresci li { margin: .25rem 0; line-height: 1.6; }

.powiazane { margin-top: 2.4rem; }
.powiazane h2 { margin-bottom: .8rem; }

.autor { display: flex; gap: 14px; align-items: center; margin-top: 2.6rem; padding-top: 1.4rem;
         border-top: 1px solid var(--kreska, #dfd8c8); font-size: .92rem; opacity: .85; }
.autor-znak { width: 44px; height: 44px; border-radius: 50%; background: #2f4a6b; color: #fff;
              display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }

/* --- spis artykułów (blog.html) --- */
.wpisy { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 900px) { .wpisy { grid-template-columns: 1fr 1fr; } }
.wpis { display: block; text-decoration: none; color: inherit; border: 1px solid var(--kreska, #dfd8c8);
        border-radius: 18px; overflow: hidden; background: var(--karta, #fff);
        transition: transform .15s ease, box-shadow .15s ease; }
.wpis:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(38, 32, 25, .10); }
.wpis-obraz { height: 118px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.wpis-tresc { padding: 18px 22px 22px; }
.wpis h2 { font-size: 1.16rem; margin: .1rem 0 .5rem; line-height: 1.35; }
.wpis p { margin: 0 0 .9rem; line-height: 1.65; }
.wpis-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .82rem; opacity: .75; }
.tag { border: 1px solid var(--kreska, #dfd8c8); border-radius: 999px; padding: 2px 10px; font-size: .76rem; }