/* ============================================================
   Simpletools — Blog Stylesheet
   Ładowany tylko na single/archive/home (artykuły blogowe)
   ============================================================ */

/* ---------- Prose (treść artykułu) ---------- */
.prose {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-10); scroll-margin-top: 80px; }
.prose h3 { font-size: var(--text-xl);  margin-top: var(--space-8);  scroll-margin-top: 80px; }
.prose h4 { font-size: var(--text-lg);  margin-top: var(--space-6);  scroll-margin-top: 80px; }
.prose ul, .prose ol { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-5);
  font-style: italic;
  color: var(--color-text-secondary);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-serif); font-size: var(--text-lg);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--color-surface-2); padding: 2px 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.prose pre { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }
.prose pre code { background: none; border: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); text-align: left; }
.prose th { background: var(--color-surface-2); font-weight: 600; }
.prose img { max-width: 100%; border-radius: var(--radius-md); }
.prose a { color: var(--color-primary); }

/* ---------- Post Meta ---------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0;
}
.post-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.post-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.post-meta .material-symbols-rounded { font-size: 16px; flex-shrink: 0; }

/* ---------- Social Sharing ---------- */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.share-buttons__label {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  width: 100%;
}
.share-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}
.share-btn--facebook { background: #1877F2; color: white; }
.share-btn--twitter  { background: #000; color: white; }
.share-btn--linkedin { background: #0A66C2; color: white; }
.share-btn--copy     { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); }
.share-btn:hover { opacity: 0.85; }
.share-btn--copy:hover { border-color: var(--color-border-strong); }
.share-btn svg { width: 16px; height: 16px; }
.share-btn .material-symbols-rounded { font-size: 16px; }

/* ---------- Author Box ---------- */
.author-box {
  display: flex;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}
.author-box__avatar img { width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
.author-box__avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700;
}
.author-box__content { display: flex; flex-direction: column; gap: var(--space-2); }
.author-box__label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); }
.author-box__name  { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 600; color: var(--color-text); }
.author-box__bio   { font-size: 14px; color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ---------- Related Posts ---------- */
.related-posts { margin: var(--space-10) 0; }
.related-posts__title { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 600; margin: 0 0 var(--space-5); }

@media (max-width: 768px) {
  .author-box { flex-direction: column; }
  .share-buttons { flex-direction: column; }
}