/* Martia — the article experience, in the draft's vocabulary.

   The five files loaded before this one are the draft (apps/web-v2) plus the
   Next bridge. Everything the draft already answered is used as-is:
   `.post-hero`, `.post-tag`, `.post-title`, `.post-meta`, `.prose`,
   `.post-body`, `.post-intro`, `blockquote`, `.post-insight`, `.post-cta`,
   `.post-foot` (wpis-*.html) and `.page-hero`, `.page-title`, `.page-lead`,
   `.tile-grid`, `.tile`, `.filter-bar`, `.filter-pill` (blog.html).

   What lives here is only what the draft has no answer for, because its ten
   example posts are short essays and ours are 15-minute SEO guides: an
   on-this-page rail, a summary card (TL;DR / key takeaways / quick
   recommendation), a note box, a stats block, a comparison table, an author
   card, and the subtitle line the wpis hero never needed.

   Rules, same as the draft's: colors and gradients only through tokens
   (`var(--…)`), no raw hex; radii from `--radius-*`; easing from `--ease-*`;
   hover changes background or text, never a border color. */

/* ── Wpis: kolumna treści plus szyna spisu treści ───────────── */
/* The draft centres `.prose` (42rem) in `.container` (74rem). Keeping that
   exact column means the rail has to live in the left gutter, so the body text
   sits where the draft put it and the hero above it stays centred. */
.post-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
}

.post-shell > .post-body {
  grid-column: 2;
}

.post-toc {
  grid-column: 1;
  position: sticky;
  top: 6.5rem;
  justify-self: end;
  width: 11rem;
}

.post-toc-title {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}

.post-toc a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.85rem;
  border-left: 2px solid var(--stone-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.post-toc a:hover {
  color: var(--ink);
}

.post-toc a.is-active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--status-green);
}

@media (max-width: 64rem) {
  .post-shell {
    display: block;
  }

  .post-toc {
    display: none;
  }
}

/* ── Wpis: nagłówek ─────────────────────────────────────────── */
/* The draft's post-hero is tag → title → meta. Our articles also carry a lead
   sentence (it is content, not chrome), so it goes between title and meta at
   the weight the subpage `.page-lead` uses. */
.post-lead {
  max-width: 40rem;
  margin: 0 auto 1.1rem;
  font-size: 1.0625rem;
  color: var(--ink-muted);
}

.post-hero .post-tag {
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.post-hero a.post-tag:hover {
  background: var(--status-green);
  color: var(--cream-on-dark);
}

/* ── Wpis: treść ────────────────────────────────────────────── */
/* Every article page sets `font-family: var(--font-source-serif), Georgia,
   serif` inline on its sub-headings (740 of them, all article content we do
   not touch). Redefining the variable inside the body — rather than fighting
   740 inline styles with !important — hands those headings the draft's serif. */
.post-body {
  --font-source-serif: var(--font-serif);
}

/* The first paragraph of a post is its intro in the draft; ours cannot carry
   the class because it lives in the article page. */
.post-body > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--ink);
}

.post-body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2rem 0 0.6rem;
}

.post-body b,
.post-body strong {
  font-weight: 600;
  color: var(--ink);
}

.post-body ol {
  margin: 1rem 0;
  padding-left: 1.25rem;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-body ol li {
  color: var(--ink-soft);
}

/* ── Wpis: karta podsumowania (W skrócie, Najważniejsze, Szybka rekomendacja) ── */
.post-summary {
  margin: 2.25rem 0;
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.post-body .post-summary-label {
  display: block;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.9rem;
}

.post-body .post-summary-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.post-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.post-body .post-summary li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.post-summary li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-bottom: 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--status-green);
}

.post-summary--arrow li::before {
  content: "→";
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-muted);
}

.post-summary-key {
  color: var(--ink-muted);
}

.post-body .post-summary-pick {
  color: var(--ink);
  font-weight: 600;
}

/* ── Wpis: wtrącenie z tytułem (InfoBox) ────────────────────── */
/* `.post-insight` is the draft's untitled aside; these carry a heading, so the
   surface is the same and only the title line is added. */
.post-note {
  margin: 2.25rem 0;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.post-body .post-note-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.post-body .post-note p {
  font-size: 0.9375rem;
}

.post-note--highlight {
  background: var(--bg-tint);
}

/* The founder aside is a person speaking — the draft gives that job to the
   green-ruled blockquote, so this variant borrows its rule instead of a card. */
.post-note--founder {
  background: none;
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 3px solid var(--status-green);
}

.post-body .post-note-eyebrow {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--status-green-text);
  margin: 0 0 0.35rem;
}

/* ── Wpis: blok danych (StatsBanner) ────────────────────────── */
.post-stats {
  margin: 2.5rem 0;
  padding: 1.8rem;
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
}

.post-body .post-stats-title {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.4rem;
}

.post-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
}

.post-stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.post-stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.post-body .post-stats-sources {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--stone-soft);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

@media (max-width: 40rem) {
  .post-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Wpis: tabela porównawcza ───────────────────────────────── */
.post-table-wrap {
  margin: 2.5rem 0;
  overflow-x: auto;
}

.post-body .post-table-caption {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.post-table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--stone);
}

.post-table td {
  padding: 0.75rem 0.9rem;
  vertical-align: top;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--stone-soft);
}

.post-table td:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* 144 of the SEO articles write a table straight into the page, with the old
   design's utility classes on it — article markup this phase does not edit.
   Giving `.post-body table` the same skin means those tables read as the
   draft's without touching a page: a class-plus-element selector outranks a
   utility class, so the greys and borders resolve to the tokens above. The
   pages already wrap their tables in a horizontally scrollable div, which is
   what `.post-table-wrap` does for the component. */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.post-body table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--stone);
}

.post-body table td {
  padding: 0.75rem 0.9rem;
  vertical-align: top;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--stone-soft);
}

.post-body table tr {
  border: 0;
}

/* ── Wpis: zamknięcie ───────────────────────────────────────── */
.post-cta-body {
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

.post-body .post-cta-body p {
  color: var(--ink-muted);
}

.post-author {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.post-body .post-author-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
  margin: 0;
}

.post-body .post-author p {
  font-size: 0.9375rem;
}

.post-author-entry + .post-author-entry {
  margin-top: 1rem;
}

.post-related {
  margin-top: 3rem;
}

.post-body .post-related-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

/* A tile is a link and `.prose a` would underline it. */
.prose .tile,
.prose .tile:hover {
  text-decoration: none;
}

/* ── Hub: siatka kafli ──────────────────────────────────────── */
/* blog.html puts the topic pills above a three-column `.tile-grid`; both are
   the draft's. The only addition is the grouping label the changelog needs. */
.tile-group + .tile-group {
  margin-top: 3rem;
}

.tile-group-label {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
}