/* ==========================================================================
   Wpis bazy wiedzy. Typografię treści daje .prose z site.css; tu nagłówek
   wpisu, zdjęcie, udostępnianie i drobne uzupełnienia treści z edytora.
   Karty „Innych artykułów" są w blog.css.
   ========================================================================== */

.post-header{padding:64px 0 40px}
.post-header-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--muted)}
.post-header-meta .post-category{color:var(--gold-ink)}
.post-header-meta a.post-category:hover{text-decoration:underline}
.post-reading{display:inline-flex;align-items:center;gap:7px}
.post-reading .icon{width:16px;height:16px}
.post-header h1{margin:20px 0 32px;font-size:clamp(34px,4.2vw,54px);line-height:1.12;letter-spacing:-.045em}
.post-header .post-author{padding-top:24px;border-top:1px solid var(--line)}

.post-cover{max-width:1040px;margin-bottom:56px}
.post-cover img{width:100%;height:auto;max-height:620px;object-fit:cover;border-radius:24px}

/* Treść przychodzi z edytora wpisów: bloki kodu i zdjęcia bywają szersze niż
   kolumna, a na telefonie nie mogą rozpychać strony w poziomie. */
.post-body .prose{max-width:none}
.post-body .prose pre{overflow-x:auto;padding:16px 18px;background:var(--surface);border-radius:12px;font-size:14px}
.post-body .prose pre code{padding:0;background:none}
.post-body .prose table{display:block;overflow-x:auto}
.post-body .prose img{margin:2em 0}
.post-body .prose th{background:var(--surface);font-weight:600;color:var(--ink)}
/* Ilustracje sekcji: zrzut lub grafika z podpisem. Obramowanie odcina jasne
   zrzuty panelu od białego tła strony. */
.post-body .prose figure{margin:2.4em 0}
.post-body .prose figure img{display:block;width:100%;margin:0;border:1px solid var(--line)}
.post-body .prose figcaption{margin-top:10px;font-size:13px;line-height:1.6;color:var(--muted)}
.post-body .prose ul{list-style:disc}
.post-body .prose ol{list-style:decimal}

.post-share{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:64px 0 96px;padding-top:28px;border-top:1px solid var(--line)}
.post-share p{font-size:13px;font-weight:500}
.post-share ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.post-share a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--navy);transition:background-color .16s,border-color .16s}
.post-share a:hover{background:var(--surface);border-color:#c6d0d8}
.post-share svg{width:18px;height:18px;fill:currentColor}

.post-related .section-heading{align-items:flex-end}

@media(max-width:900px){
  .post-header{padding:48px 0 32px}
  .post-cover{margin-bottom:40px}
  .post-share{margin-bottom:72px}
}
@media(max-width:640px){
  .post-header{padding:36px 0 28px}
  .post-header h1{margin:16px 0 26px}
  .post-cover img{border-radius:16px}
  .post-body .prose{font-size:15px}
  .post-share{margin:48px 0 56px}
  .post-related .section-heading .text-link{margin-top:14px}
}