/* TRD — baza wiedzy. Dokladka do /style.css.
   ZASADA: zadnych wlasnych kolorow ani fontow. Wszystko z zmiennych strony:
   --k (ciemny) --p (jasny) --a (akcent) --su (separator) --mono --sans --serif --pad-v
   Definiujemy wylacznie to, czego strona jeszcze nie ma: typografie tresci artykulu,
   tabele, checkliste, FAQ i liste wpisow. Nav, hero, CTA i stopka sa juz w style.css. */

/* Layout (nav, hero, CTA, stopka) bierzemy z body.page-iso — dokladnie ten sam,
   co na podstronach TRD. Ponizsze klasy dodaja wylacznie specyfike bazy wiedzy. */
.post, .blog { background: var(--p); color: var(--k); }

/* ── PODGLAD ROBOCZY ─────────────────────────────────────── */
.draft-banner {
  position: sticky; top: 0; z-index: 60;
  background: var(--a); color: var(--p);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  text-align: center; padding: 10px 16px;
}

/* ── TYTUL WPISU ─────────────────────────────────────────────
   .page-hero-h1 ze style.css zaklada 1-2 slowa (ph-serif/ph-sans).
   Tytul artykulu jest zdaniem, wiec potrzebuje wlasnej skali — reszta bez zmian. */
.page-hero h1.post-h1 {
  font: 300 clamp(28px, 4.2vw, 58px)/1.08 var(--sans);
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--p);
  max-width: 20ch;
}

/* czlon kursywny tytulu — ten sam zabieg co .ph-serif na podstronach */
.page-hero h1.post-h1 .post-h1-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ── TRESC ───────────────────────────────────────────────── */
.post-body { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.post-body .container { max-width: 820px; }

.post-body h2 {
  font: 500 clamp(23px, 2.7vw, 33px)/1.2 var(--sans);
  letter-spacing: -0.025em; color: var(--k);
  margin: 2.4em 0 .7em; scroll-margin-top: 90px;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h2::before {
  content: ""; display: block; width: 32px; height: 2px;
  background: var(--a); margin-bottom: 20px;
}
.post-body h3 {
  font: 500 clamp(18px, 1.9vw, 22px)/1.35 var(--sans);
  letter-spacing: -0.01em; color: var(--k); margin: 2em 0 .55em;
}

.post-body p,
.post-body li {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.72;
  color: var(--k); opacity: .78;
}
.post-body p { margin-bottom: 1.3em; }
.post-body strong { font-weight: 600; opacity: 1; }

/* pierwszy akapit to bezposrednia odpowiedz na pytanie z tytulu — ma sie wyroznic */
.post-body > .container > p:first-of-type {
  font-size: clamp(17px, 1.4vw, 20px);
  opacity: .9;
  padding-left: 20px;
  border-left: 2px solid var(--a);
}

.post-body a {
  color: var(--a); opacity: 1;
  border-bottom: 1px solid rgba(26, 92, 255, .3);
  transition: border-color .2s;
}
.post-body a:hover { border-bottom-color: var(--a); }

.post-body ul, .post-body ol { margin: 0 0 1.5em; padding-left: 0; }
.post-body ul li {
  position: relative; padding-left: 24px; margin-bottom: .6em; list-style: none;
}
.post-body ul li::before {
  content: ""; position: absolute; left: 2px; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--a);
}
.post-body ol { counter-reset: li; }
.post-body ol li {
  position: relative; padding-left: 34px; margin-bottom: .6em;
  list-style: none; counter-increment: li;
}
.post-body ol li::before {
  content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; top: .3em;
  font: 500 11px/1 var(--mono); color: var(--a); opacity: 1;
}

/* tabela porownawcza */
.post-body .table-wrap { overflow-x: auto; margin: 2em 0; }
.post-body table { width: 100%; border-collapse: collapse; min-width: 520px; }
.post-body th {
  text-align: left; font: 500 10px/1.3 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--k); opacity: .5;
  padding: 13px 16px; border-bottom: 1px solid var(--su);
}
.post-body td {
  padding: 14px 16px; border-bottom: 1px solid var(--su);
  font-size: 15px; line-height: 1.6; color: var(--k); opacity: .78;
  vertical-align: top;
}
.post-body tbody tr:hover td { opacity: 1; }

/* checklista wdrozeniowa z markdown "- [ ] zadanie" */
.post-body li.task { padding-left: 30px; }
.post-body li.task::before { content: none; }
.post-body li.task .task-box {
  position: absolute; left: 0; top: .3em;
  width: 15px; height: 15px; border-radius: 3px;
  border: 1.5px solid var(--su);
}
.post-body li.task.done .task-box { background: var(--a); border-color: var(--a); }
.post-body li.task.done .task-box::after {
  content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px; border: solid var(--p);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.post-body blockquote {
  margin: 2em 0; padding: 2px 0 2px 24px;
  border-left: 2px solid var(--a);
  font: italic 400 clamp(17px, 1.5vw, 21px)/1.6 var(--serif);
  color: var(--k); opacity: .8;
}
.post-body code {
  font: 500 14px/1 var(--mono);
  background: var(--su); padding: 3px 7px; border-radius: 2px;
}
.post-body hr { border: 0; height: 1px; background: var(--su); margin: 2.8em 0; }

/* ── RAMKA EKSPERCKA — CTA w polowie drogi, zanim czytelnik odejdzie ─────
   Linki wplecione w akapity gina; to jest element, ktory widac. */
.post-expert { padding: 0 0 clamp(48px, 6vw, 80px); }
.post-expert .container { max-width: 820px; }
.expert-box {
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: center;
  background: var(--k); color: var(--p);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 2px;
}
.expert-text { flex: 1 1 320px; }
.expert-box .accent-kicker { margin-bottom: 14px; }
.expert-lead {
  font: 500 clamp(19px, 2vw, 24px)/1.3 var(--sans);
  letter-spacing: -0.02em; color: var(--p); margin-bottom: 10px;
}
.expert-desc {
  font-size: 15px; line-height: 1.65;
  color: var(--p); opacity: .6; max-width: 48ch; margin: 0;
}
.expert-actions {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 auto; min-width: 0;
}
.expert-actions a { white-space: nowrap; text-align: center; }

/* ── FAQ (wspiera fragmenty rozszerzone w Google) ─────────── */
.post-faq { padding: 0 0 clamp(48px, 6vw, 80px); }
.post-faq .container { max-width: 820px; }
.post-faq dl { margin: 0; }
.post-faq dt {
  font: 500 clamp(17px, 1.6vw, 20px)/1.4 var(--sans);
  letter-spacing: -0.015em; color: var(--k);
  padding-top: 22px; border-top: 1px solid var(--su);
}
.post-faq dd {
  margin: 10px 0 22px;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;
  color: var(--k); opacity: .74;
}

/* ── ZRODLA + nota autora (E-E-A-T) ──────────────────────── */
/* iso.html rezerwuje 38vh pod efekt nasuwania CTA sterowany przez iso.js.
   Baza wiedzy tego efektu nie ma, wiec bufor bylby pusta dziura na koncu strony. */
.post .iso-note,
.blog .iso-note { padding: clamp(40px, 5vw, 64px) 0; }
.post-sources .container { max-width: 820px; }
.post-sources ul { list-style: none; padding: 0; margin: 0 0 26px; }
.post-sources li { margin-bottom: 8px; }
.post-sources a {
  font: 400 13px/1.5 var(--mono);
  color: var(--k); opacity: .5; word-break: break-all;
}
.post-sources a:hover { color: var(--a); opacity: 1; }
.post-author-note {
  padding-top: 22px; border-top: 1px solid var(--su);
  font-size: 15px; line-height: 1.7; color: var(--k); opacity: .6; max-width: 62ch;
}

/* ── LISTA WPISOW /blog/ ─────────────────────────────────── */
.blog-list { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 110px); }
.blog-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: 30px 0; border-bottom: 1px solid var(--su);
  transition: opacity .25s;
}
.blog-item:first-child { border-top: 1px solid var(--su); }
.blog-item:hover { opacity: .6; }
.blog-item-num {
  font: 500 12px/1 var(--mono); color: var(--a);
  letter-spacing: .1em; padding-top: 6px;
}
.blog-item-title {
  font: 500 clamp(19px, 2.2vw, 27px)/1.25 var(--sans);
  letter-spacing: -0.02em; color: var(--k); margin-bottom: 10px; max-width: 30ch;
}
.blog-item-lead {
  font-size: 15px; line-height: 1.68; color: var(--k); opacity: .62; max-width: 68ch;
}
.blog-item-meta {
  margin-top: 12px; font: 500 10px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--k); opacity: .4;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.blog-empty {
  padding: 48px 0 80px; font-size: 17px; line-height: 1.72;
  color: var(--k); opacity: .6; max-width: 56ch;
}
.blog-empty a { color: var(--a); }

@media (max-width: 860px) {
  /* pionowy uklad ramki: przyciski na pelna szerokosc, zeby nie wychodzily poza box */
  .expert-box { flex-direction: column; align-items: stretch; gap: 22px; }
  .expert-actions { width: 100%; }
  .expert-actions a {
    display: block; width: 100%; box-sizing: border-box;
    padding-left: 16px; padding-right: 16px;
    white-space: normal;
  }
  .expert-desc { max-width: none; }
}

@media (max-width: 640px) {
  .page-hero h1.post-h1 { max-width: none; }
  .blog-item { grid-template-columns: 1fr; gap: 10px; }
  .blog-item-num { padding-top: 0; }
  .post-body > .container > p:first-of-type { padding-left: 16px; }
}