/* ============================================================
   Article detail — clean overrides (loads after app.css).
   Class names preserved (JS hooks on .article-body, .reaction-btn,
   .comment-form, .comment-delete must not be renamed).
   ============================================================ */

.article-detail { max-width: 760px; }
.article-title { letter-spacing: -.02em; }
.article-meta {
  margin: 14px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.article-hero { border-radius: 14px; margin: 0 0 26px; }
.article-body { font-size: 1.09rem; line-height: 1.85; white-space: normal; }
/* Sentence gap: <br> renders as a compact ~0.8em spacer — clearly
   visible, but smaller than a full empty line. Single <br> = sentence
   gap, double <br> = paragraph gap. */
.article-body br { content: ""; display: block; margin-top: 0.8em; line-height: 1; }
.article-body blockquote {
  border-radius: 10px;
  border-inline-start: 3px solid var(--primary);
}
.article-media-img img { border-radius: 14px; }
.reaction-btn { background: var(--card); border-radius: 10px; }

/* Comments as bordered cards */
.comment-list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card);
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.comment-form input,
.comment-form textarea { background: var(--background); border-radius: 10px; }
.comment-form .comment-submit { align-self: flex-start; }

/* Liveblog (logical properties — RTL-safe) */
.liveblog {
  margin: 16px 0;
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: 16px;
}
.liveblog h2 { font-size: 1.1rem; margin: 0 0 10px; }
.liveblog-entry { margin-bottom: 12px; }
.liveblog-entry time { opacity: .7; font-size: .85rem; }
.liveblog-entry p { margin: 2px 0 0; }