/* Softineo: blog. Wspólny arkusz dla blog.html (wykaz wpisów) i blog/*.html (wpis).
   Ładowanie: css/softineo.css + css/blog.css (z podfolderu blog/: ../css/…).

   WYKAZ WPISÓW (blog.html)
   section.sheet.blog-sheet > .sheet-body > div.tb (tabliczka: h1, .tb-lead, dl.stamp)
     + section.reg > h2.reg-h + ol.reg-list > li.reg-row > article:
       h3.reg-title > a (cały wiersz klikalny), p.reg-meta (time + span.tag), p.reg-ex (zajawka),
       span.reg-photo > picture/img (miniatura w ramce, opcjonalnie)
     + p.reg-empty (widoczny tylko, gdy lista nie ma wierszy)
   WPIS (blog/*.html)
   article.post > header.sheet.post-sheet (tabliczka na całą szerokość: h1, .tb-lead, dl.stamp)
     + div.prose (h2, h3, p, ul, ol, blockquote, figure.print.post-fig, .post-table > table)
     + nav.post-nav (poprzedni / następny, „Wróć do bloga”) + aside.post-cta (kontakt)
   Bez pełnych żółtych pól: żółty tylko jako znacznik (podkreślenia, przycisk kontaktu). */

/* ---------- znacznik działu (liternictwo rysunkowe) ---------- */
.tag {
  display: inline-block; padding: 3px 7px 3px;
  font: 12px/1 var(--tech); letter-spacing: .06em; color: var(--ink);
  border: 1px solid var(--ink); background: var(--paper-hi);
  white-space: nowrap;
}

/* ==========================================================================
   WYKAZ WPISÓW
   ========================================================================== */
.blog-sheet { height: auto; min-height: 0; max-height: none; }
.blog-sheet .sheet-body { height: auto; }
/* tabliczka jest pierwsza w kodzie (h1 przed h2), a stoi po prawej, jak na innych arkuszach */
.blog-sheet .tb { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.blog-sheet .tb-head { flex: none; justify-content: flex-start; }
.blog-sheet .stamp { margin-top: auto; }
.blog-sheet .tb-lead { max-width: 34ch; margin-bottom: 0; }

.reg { grid-column: 1; grid-row: 1; min-width: 0; padding: var(--sheet-pad) var(--sheet-pad) calc(var(--sheet-pad) - 8px); }
.reg-h { font-size: clamp(22px, 1.7vw, 28px); line-height: 1.05; letter-spacing: -.02em; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.reg-list { list-style: none; margin: 0; padding: 0; }
.reg-row { position: relative; border-bottom: 1px solid var(--line-2); transition: background-color .25s var(--ease-out); }
.reg-row:last-child { border-bottom: 0; }
.reg-row article {
  display: grid; column-gap: clamp(18px, 2vw, 32px);
  grid-template-columns: 124px minmax(0, 1fr) clamp(150px, 15vw, 232px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "meta title photo" "meta ex photo";
  padding: 22px 0 24px;
}
.reg-title { grid-area: title; font-size: clamp(21px, 1.55vw, 27px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; }
.reg-title a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color .2s var(--ease-out); }
/* cały wiersz prowadzi do wpisu */
.reg-title a::after { content: ""; position: absolute; inset: 0; }
.reg-row:hover { background-color: rgba(237, 241, 244, .75); }
.reg-row:hover .reg-title a, .reg-title a:focus-visible { text-decoration-color: var(--y-deep); }
.reg-title a:focus-visible { box-shadow: none; outline-offset: 4px; }
.reg-row:focus-within { background-color: rgba(237, 241, 244, .75); }
.reg-meta { grid-area: meta; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding-top: 4px; }
.reg-meta time { font: 15px/1 var(--tech); letter-spacing: .03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.reg-ex { grid-area: ex; margin: 0; color: var(--ink-2); max-width: 62ch; }
.reg-photo { grid-area: photo; align-self: start; display: block; padding: 6px; background: var(--paper-hi); border: 1px solid var(--ink); }
.reg-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92) contrast(1.02); outline: 1px solid var(--line); }
/* wiersz bez miniatury: tekst zajmuje też kolumnę zdjęcia */
.reg-row article:not(:has(.reg-photo)) { grid-template-areas: "meta title title" "meta ex ex"; }

/* pusty wykaz: pusta ramka szczegółu zamiast listy */
.reg-empty { display: none; margin: 22px 0 8px; padding: 28px 20px; border: 1.4px dashed var(--ink); background: rgba(237, 241, 244, .7); font: 17px/1.35 var(--tech); color: var(--ink-2); text-align: center; }
.reg-list:empty, .reg-list:not(:has(.reg-row)) { display: none; }
.reg-list:empty + .reg-empty, .reg-list:not(:has(.reg-row)) + .reg-empty { display: block; }

/* ==========================================================================
   WPIS
   ========================================================================== */
.post-sheet { height: auto; min-height: 0; max-height: none; }
.post-sheet .sheet-body { height: auto; grid-template-columns: minmax(0, 1fr); }
.post-sheet .tb { border-left: 0; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 540px); }
.post-sheet .tb-head { padding-top: clamp(20px, 2vw, 32px); padding-bottom: clamp(18px, 1.8vw, 28px); }
.post-sheet h1 { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.08; letter-spacing: -.02em; max-width: 30ch; margin-bottom: .4em; }
.post-sheet .tb-lead { max-width: 64ch; font-size: clamp(16px, 1.1vw, 18px); margin-bottom: 0; }
.post-sheet .stamp { border-top: 0; border-left: 1.5px solid var(--ink); grid-auto-rows: 1fr; }
.post-sheet .stamp > div { display: flex; flex-direction: column; justify-content: flex-end; }
/* stempel wpisu nie ma wiersza na całą szerokość: dzielnik kolumn po lewych polach, bez podwójnej kreski u góry */
.post-sheet .stamp > div:nth-child(even) { border-right: 0; }
.post-sheet .stamp > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.post-sheet .stamp > div:nth-child(2) { border-top: 0; }
.post-sheet .stamp dd .tag { font-size: 13px; }

/* treść i boczna legenda: kolumny jak w arkuszu powyżej (legenda pod stemplem) */
.post-body {
  margin: 0 var(--g); padding: 0 25.5px;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 540px); align-items: start;
}
/* treść: kolumna czytania (65–75 znaków) wyrównana do tytułu; zdjęcia i tabele na całą kolumnę */
.prose {
  grid-column: 1; grid-row: 1;
  padding: clamp(44px, 5vw, 84px) clamp(20px, 2.2vw, 36px) 0;
  font-size: 18px; line-height: 1.6;
}
/* miara czytania liczona od tekstu akapitu, więc nagłówki i ich kreski kończą się tam, gdzie akapity */
.prose { --measure: 36em; }   /* ok. 70 znaków przy każdym rozmiarze tekstu */
.prose > * { max-width: var(--measure); }
.prose > .post-fig, .prose > .post-table { max-width: min(100%, 980px); }
.prose h2[id] { scroll-margin-top: calc(var(--head-h) + 20px); }
.prose h2 {
  font-size: clamp(26px, 2.1vw, 36px); line-height: 1.08; letter-spacing: -.025em;
  margin: 2.1em 0 .6em; padding-top: .7em; border-top: 1px solid var(--ink);
}
.prose h3 { font-size: clamp(20px, 1.4vw, 24px); line-height: 1.15; letter-spacing: -.015em; margin: 1.7em 0 .5em; }
.prose h2 + h3 { margin-top: .9em; }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 34px; margin: 0 0 .5em; }
.prose ul > li::before { content: ""; position: absolute; left: 8px; top: .72em; width: 12px; height: 0; border-top: 1.5px solid var(--ink); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n); position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-hi);
  font: 13px/21px var(--tech); text-align: center; color: var(--ink);
}
.prose blockquote {
  margin: 1.6em 0 1.8em; padding: 20px 0 20px 34px; position: relative;
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-size: clamp(20px, 1.5vw, 24px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em;
}
/* kropka odnośnika, jak na końcu linii odniesienia na planie */
.prose blockquote::before { content: ""; position: absolute; left: 6px; top: 30px; width: 9px; height: 9px; border-radius: 50%; background: var(--y); border: 1.2px solid var(--ink); }
.prose blockquote p { margin: 0 0 .5em; }
.prose blockquote footer { font: 14px/1.3 var(--tech); letter-spacing: .03em; color: var(--ink-2); }
.prose strong { font-weight: 700; }

.post-fig { margin: 2em 0 2.2em; }
.post-fig img { width: 100%; }

.post-table { margin: 1.8em 0 2em; overflow-x: auto; }
.post-table table { width: 100%; border-collapse: collapse; border: 1.5px solid var(--ink); background: var(--paper-hi); font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }
.post-table caption { caption-side: top; text-align: left; font: 15px/1.3 var(--tech); letter-spacing: .03em; color: var(--ink); padding: 0 0 8px; }
.post-table th, .post-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--ink); }
.post-table td + td, .post-table th + th { border-left: 1px solid var(--line-2); }
.post-table thead th { font: 13px/1.2 var(--tech); letter-spacing: .04em; color: var(--ink-2); font-weight: 400; background: var(--paper); border-top: 0; border-bottom: 1.5px solid var(--ink); }
.post-table tbody th { font-weight: 700; }
.post-table .r { text-align: right; }

/* ---------- koniec wpisu: poprzedni / następny, powrót, kontakt ---------- */
.post-end { grid-column: 1; grid-row: 2; padding: clamp(48px, 6vw, 96px) clamp(20px, 2.2vw, 36px); }
.post-nav { max-width: 980px; }

/* ---------- boczna legenda wpisu ---------- */
.post-side {
  grid-column: 2; grid-row: 1 / span 2;
  position: sticky; top: calc(var(--head-h) + 16px);
  margin-top: clamp(44px, 5vw, 84px);
  max-height: calc(100svh - var(--head-h) - 32px); overflow-y: auto;
  border: 1.5px solid var(--ink); background: var(--paper-hi); font-size: 16px;
}
.ps-sec { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--ink); }
.ps-sec:first-child { border-top: 0; }
.ps-h { font: 13px/1 var(--tech); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.ps-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.ps-toc li { counter-increment: t; border-top: 1px solid var(--line-2); }
.ps-toc li:first-child { border-top: 0; }
.ps-toc a {
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline; padding: 7px 0 8px;
  font-weight: 600; line-height: 1.3; text-decoration: none;
}
.ps-toc a::before { content: counter(t); font: 13px/1 var(--tech); color: var(--ink-2); }
.ps-toc a { background-repeat: no-repeat; }
.ps-toc a:hover { text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
/* bieżąca sekcja: podkreślenie zakreślaczem, jak bieżąca strona w menu */
.ps-toc a.is-now { background-image: linear-gradient(var(--y), var(--y)); background-size: calc(100% - 26px) 5px; background-position: 26px calc(100% - 4px); }
.ps-toc a.is-now::before { color: var(--ink); }
.ps-rec dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.ps-rec dl > div { min-width: 0; padding-right: 10px; }
.ps-rec dl > div + div { border-left: 1px solid var(--line-2); padding-left: 10px; }
.ps-rec dt { font: 12px/1 var(--tech); letter-spacing: .04em; color: var(--ink-2); margin-bottom: 6px; }
.ps-rec dd { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3; }
.ps-see ul { list-style: none; margin: 0; padding: 0; }
.ps-see li + li { border-top: 1px solid var(--line-2); }
.ps-see a { display: block; padding: 7px 0 8px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.ps-see a span { text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.ps-see a:hover span { text-decoration-color: var(--ink); }
.ps-see small { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); margin-top: 3px; text-decoration: none; }
.ps-back { padding-top: 12px; padding-bottom: 14px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); background: var(--paper-hi); }
.pn > * { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; min-width: 0; }
.pn > * + * { border-left: 1px solid var(--ink); }
.pn-next { text-align: right; align-items: flex-end; }
.pn small { display: inline-flex; align-items: center; gap: 8px; font: 13px/1 var(--tech); letter-spacing: .04em; color: var(--ink-2); }
.pn b { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.2; letter-spacing: -.01em; }
.pn a { text-decoration: none; transition: background-color .2s var(--ease-out); }
.pn a b { text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.pn a:hover { background: rgba(255, 182, 0, .16); }
.pn a:hover b { text-decoration-color: var(--ink); }
.pn a small::before, .pn a small::after { width: 16px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pn-prev small::before { content: ""; transform: scaleX(-1); }
.pn-next small::after { content: ""; }
.pn-none { color: var(--ink-2); }
.pn-none b { font-weight: 500; color: var(--ink-2); }
.pn-back { margin: 18px 0 0; }

.post-cta {
  max-width: 980px; margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end;
  padding: clamp(20px, 2.2vw, 32px); border: 1.5px solid var(--ink); background: var(--paper-hi);
}
.post-cta h2 { font-size: clamp(24px, 2vw, 34px); letter-spacing: -.025em; margin-bottom: .4em; }
.post-cta p { margin: 0; color: var(--ink-2); max-width: 52ch; }

/* ---------- szerokie ekrany ---------- */
/* szerokie ekrany: większy tekst, a kolumna czytania stoi pośrodku wolnego miejsca obok legendy,
   więc papier rozkłada się po obu stronach zamiast jednej szerokiej pustej smugi */
@media (min-width: 1400px) {
  .prose { font-size: clamp(18px, calc(.55vw + 10px), 21px); }
  .prose { justify-self: center; width: min(100%, calc(var(--measure) + 2 * clamp(20px, 2.2vw, 36px))); }
  .prose > .post-fig, .prose > .post-table { max-width: 100%; }
}
/* ---------- tablety i telefony ---------- */
@media (max-width: 1000px) {
  .blog-sheet .tb { display: contents; }
  .blog-sheet .tb-head { justify-content: flex-start; }
  .blog-sheet .stamp { order: 1; margin-top: 12px; }
  .reg { grid-column: auto; grid-row: auto; padding: 22px 0 6px; }
  .post-sheet .tb-head { padding-top: 28px; }
  .post-sheet .stamp { border-left: 0; border-top: 1.5px solid var(--ink); grid-auto-rows: auto; margin-top: 0; }
  .post-body { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .prose, .post-end { padding-left: 14px; padding-right: 14px; }
  /* na węższych ekranach z legendy zostaje tylko spis treści, nad tekstem */
  .post-side { position: static; max-height: none; overflow: visible; margin: 28px 14px 0; }
  .post-side .ps-sec:not(.ps-toc) { display: none; }
  .prose { padding-top: 8px; }
}
@media (max-width: 760px) {
  .reg-row article {
    grid-template-columns: minmax(0, 1fr) clamp(88px, 28vw, 150px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title photo" "meta photo" "ex ex";
    padding: 18px 0 20px;
  }
  .reg-row article:not(:has(.reg-photo)) { grid-template-areas: "title title" "meta meta" "ex ex"; }
  .reg-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 0 12px; }
  .reg-photo { padding: 4px; }
  .reg-title { margin-bottom: 8px; }
  .pn { grid-template-columns: 1fr; }
  .pn > * + * { border-left: 0; border-top: 1px solid var(--ink); }
  .post-cta { grid-template-columns: 1fr; }
  .post-cta .btn { justify-self: start; }
}
@media (max-width: 680px) {
  .prose { font-size: 17px; padding-left: 2px; padding-right: 2px; }
  .post-side { margin-left: 2px; margin-right: 2px; }
  .post-end { padding-left: 0; padding-right: 0; }
  .prose li { padding-left: 30px; }
  .prose blockquote { padding-left: 28px; }
  .post-table th, .post-table td { padding: 8px 10px; }
  .post-table table { font-size: 15px; }
  .post-cta .btn { width: 100%; }
}

/* ---------- schematy we wpisach (HTML, nie obrazki: tekst się zawija na telefonie) ----------
   figure.post-flow > .pf-steps > .pf-step (b.pf-n numer, strong tytuł, span opis); .pf-y = decyzja systemu (żółty marker),
   .pf-warn = wyjątek; .pf-branch = dwie odnogi decyzji (TAK / NIE); figcaption jak przy zdjęciach */
.prose > .post-flow { max-width: min(100%, 980px); }
.post-flow { margin: 1.8em 0 2.2em; }
.pf-steps, .pf-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pf-branch { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pf-step { position: relative; padding: 14px 14px 16px; border: 1.5px solid var(--ink); background: var(--paper-hi); font-size: 15px; line-height: 1.4; }
.pf-step strong { display: block; margin: 6px 0 4px; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.pf-step span { color: var(--ink-2); }
.pf-n { display: inline-block; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--ink); border-radius: 12px; font: 13px/22px var(--tech); text-align: center; background: var(--paper); }
.pf-y { background: linear-gradient(var(--y), var(--y)) left top / 6px 100% no-repeat, var(--paper-hi); }
.pf-warn { border-style: dashed; }
.pf-step .pf-tag { float: right; font: 13px/24px var(--tech); letter-spacing: .04em; }
.post-flow figcaption { font: 14px/1.35 var(--tech); letter-spacing: .03em; color: var(--ink-2); margin-top: 10px; }