/* ARGADO - blog publiczny (/blog, /blog/<slug>). Ładowany PO site.css przez blok head szablonów
   templates/blog/*; korzysta z tokenów i komponentów site.css (--bg, --oak, --bark, .wrap, .btn,
   .sheet-head). Identyfikacja v3: papier, kora, dąb, Zilla Slab w nagłówkach, Source Sans 3 w treści,
   radius 0, bez kart w kartach, bez ikon z bibliotek. Bloki @media NA KOŃCU pliku. */

.blog { padding-bottom: clamp(2rem, 5vw, 4rem); }

/* --- Lista wpisów ----------------------------------------------------------- */

.blog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.blog-head h1 small { display: block; font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; color: var(--mute); margin-top: .35rem; letter-spacing: 0; }
.blog-head .rss { font-size: .875rem; font-weight: 600; letter-spacing: .06em; color: var(--mute); text-decoration: none; border: 1px solid var(--line); padding: .3rem .5rem; line-height: 1; }
.blog-head .rss:hover { color: var(--ink); border-color: var(--ink); }

.post-list { list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; }
.post-list > li { border-top: 1px solid var(--concrete); padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.post-list > li:last-child { border-bottom: 1px solid var(--concrete); }

.post-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.post-card.no-img { grid-template-columns: minmax(0, 1fr); }
.post-card-img { display: block; background: var(--img); }
.post-card-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card-img:hover img { opacity: .9; }
.post-card-img:focus-visible { outline-offset: -3px; }

.post-card time, .post-head time { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--oak-dark); font-variant-numeric: tabular-nums; }
.post-card h2 { margin-top: .45rem; font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 30ch; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--oak-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.post-card p { margin-top: .75rem; color: var(--mute); max-width: var(--text); }
.post-card .more { display: inline-block; margin-top: 1rem; font-weight: 600; }

.post-pages { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.post-pages > span { color: var(--mute); font-size: .9375rem; }
.blog-empty { margin-top: 2rem; color: var(--mute); max-width: var(--text); }

/* --- Wpis ---------------------------------------------------------------------- */

.post { padding-top: clamp(2rem, 5vw, 4rem); }
.post-head { max-width: 56rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9375rem; color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--concrete); }
.post-head time { margin-top: 1.5rem; }
.post-head h1 { margin-top: .5rem; font-size: clamp(2rem, 4vw, 3.125rem); }
.post-head .lead { margin-top: 1rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--mute); max-width: var(--text); }
.post-lang { margin-top: 1rem; font-size: .9375rem; }
.post-preview-note { margin-top: 1.25rem; padding: .6rem 1rem; background: var(--sand); border-left: 4px solid var(--oak); font-size: .9375rem; max-width: var(--text); }

.post-cover { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; background: var(--img); }
.post-cover img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }

/* Treść z Markdown: akapity, h2/h3/h4, listy, cytat, obraz z podpisem, tabela, kod. */
.post-body { max-width: 66ch; margin-top: clamp(1.75rem, 3.5vw, 3rem); font-size: 1.125rem; line-height: 1.6; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.9em; max-width: 30ch; }
.post-body h3 { font-size: 1.375rem; margin-top: 1.6em; }
.post-body h4 { font-family: var(--sans); font-weight: 600; font-size: 1.125rem; margin-top: 1.4em; }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: .6em; }
.post-body p { max-width: var(--text); }
.post-body ul, .post-body ol { padding-left: 1.4em; max-width: var(--text); }
.post-body li + li { margin-top: .35em; }
.post-body li > ul, .post-body li > ol { margin-top: .35em; }
.post-body a { overflow-wrap: anywhere; }
.post-body strong { font-weight: 600; }
.post-body blockquote { margin: 1.5em 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--oak); color: var(--oak-dark); font-family: var(--slab); font-size: 1.3125rem; line-height: 1.4; }
.post-body blockquote p + p { margin-top: .75em; }
.post-body hr { border: 0; border-top: 1px solid var(--concrete); margin: 2em 0; }
.post-body figure.post-fig { margin: 2em 0; }
.post-body figure.post-fig img { width: 100%; height: auto; }
.post-body figcaption { margin-top: .5rem; font-size: .9375rem; color: var(--mute); }
.post-body p > img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1rem; margin: 1.5em 0; font-variant-numeric: tabular-nums; }
.post-body th, .post-body td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-body th { background: var(--sand); color: var(--oak-dark); font-weight: 600; white-space: nowrap; }
.post-body th[align="right"], .post-body td[align="right"] { text-align: right; }
.post-body th[align="center"], .post-body td[align="center"] { text-align: center; }
.post-body code { font-family: ui-monospace, Consolas, "Liberation Mono", monospace; font-size: .92em; background: var(--sand); padding: 0 .3em; }
.post-body pre { margin: 1.5em 0; padding: 1rem; background: #fff; border: 1px solid var(--line); overflow: auto; font-size: .9375rem; line-height: 1.5; }
.post-body pre code { background: none; padding: 0; }

.post-foot { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--concrete); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }

/* --- Wąskie ekrany: na końcu pliku ---------------------------------------------- */

@media (max-width: 767px) {
  .post-card, .post-card.no-img { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .post-card-img img { aspect-ratio: 3 / 2; }
  .post-cover img { aspect-ratio: 4 / 3; }
  .post-body { font-size: 1.0625rem; }
  .post-body blockquote { font-size: 1.1875rem; }
}

@media (max-width: 479px) {
  .post-pages { flex-direction: column; align-items: stretch; text-align: center; }
  .post-pages .btn { width: 100%; }
}