/* ============================================================
   blog.css — typografia a layout pre /blog (mikroblog)
   Reuse Mercury tokenov z styles.css (:root). Načítané AŽ za styles.css.
   Svetlé „telo" (rovnaký kontext ako sekcie one-pagera).
   ============================================================ */

.blogmain {
  background: var(--c-bg);
  color: var(--c-fg);
  padding-block: clamp(48px, 8vw, 104px);
  min-height: 70vh;
}

.blog__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.blog__title {
  font-size: var(--fs-heading-lg);
  font-weight: var(--w-head);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
}
.blog__lead {
  margin-top: 18px;
  font-size: var(--fs-subheading);
  color: var(--c-fg-muted);
  max-width: 60ch;
  line-height: 1.6;
}

/* ---- zoznam postov ---- */
.bloglist { list-style: none; margin: 0; padding: 0; }
.bloglist__item {
  padding-block: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--c-line);
}
.bloglist__item:last-child { border-bottom: 1px solid var(--c-line); }
.bloglist__link { text-decoration: none; color: inherit; display: block; }
.bloglist__link:hover .bloglist__title { color: var(--accent); }
.bloglist__meta {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.bloglist__title {
  font-size: var(--fs-heading);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  margin: 8px 0 6px;
  transition: color .2s var(--ease, ease);
}
.bloglist__desc { color: var(--c-fg-muted); max-width: 68ch; line-height: 1.6; margin: 0; }

.bloglist__empty { color: var(--c-fg-muted); }

/* ---- jeden post ---- */
.post { max-width: 720px; }
.post__meta {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.post__title {
  font-size: var(--fs-heading-lg);
  font-weight: var(--w-head);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 12px 0 0;
}
.post__lead {
  margin-top: 16px;
  font-size: var(--fs-subheading);
  color: var(--c-fg-muted);
  line-height: 1.6;
}
.post__hr { border: 0; border-top: 1px solid var(--c-line); margin: clamp(28px, 4vw, 40px) 0; }

.post__back {
  display: inline-block;
  margin-top: clamp(40px, 6vw, 64px);
  font-size: var(--fs-body);
  color: var(--c-fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.post__back:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- prose (renderované MD telo) ---- */
.prose { font-size: var(--fs-body); line-height: 1.75; color: var(--c-fg); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: var(--fs-heading);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 1.9em;
}
.prose h3 {
  font-size: var(--fs-card);
  font-weight: var(--w-medium);
  margin-top: 1.6em;
}
.prose p { color: var(--c-fg); }
.prose a {
  color: var(--c-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color .2s ease;
}
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { font-weight: 620; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li { padding-left: .2em; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 20px;
  color: var(--c-fg-muted);
  font-size: var(--fs-subheading);
}
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 1px 6px;
}
.prose pre {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 2em 0; }