@charset "UTF-8";

/* ===== ARTICLE LAYOUT ===== */
.article-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.article-header h1 { font-size: 26px; color: var(--primary); margin-bottom: 12px; line-height: 1.4; }
.article-meta { font-size: 13px; color: var(--text-light); }
.article-meta span { margin-right: 15px; }
.article-meta .tag { display: inline-block; padding: 2px 10px; background: var(--primary); color: var(--white); border-radius: 3px; font-size: 12px; margin-right: 5px; }

/* ===== ARTICLE BODY ===== */
.article-body { font-size: 16px; line-height: 1.8; color: var(--text); }
.article-body h2 { font-size: 22px; color: var(--primary); margin: 35px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.article-body h3 { font-size: 18px; color: var(--primary); margin: 25px 0 12px; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px 25px; }
.article-body ul li { list-style: disc; margin-bottom: 6px; }
.article-body ol li { list-style: decimal; margin-bottom: 6px; }
.article-body a { color: var(--primary); text-decoration: underline; }
.article-body a:hover { color: var(--secondary); }
.article-body strong { color: var(--primary); }
.article-body blockquote { margin: 20px 0; padding: 15px 20px; background: #f0ebe4; border-left: 4px solid var(--secondary); font-style: italic; }
.article-body table { margin: 20px 0; font-size: 14px; }
.article-body th, .article-body td { padding: 10px 15px; border: 1px solid var(--border); }
.article-body th { background: var(--primary); color: var(--white); }
.article-body td { background: var(--white); }

/* ===== TAGS ===== */
.article-tags { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); }
.article-tags span { font-size: 14px; color: var(--text-light); margin-right: 10px; }
.article-tags a { display: inline-block; padding: 4px 12px; background: var(--white); border: 1px solid var(--border); border-radius: 3px; font-size: 13px; color: var(--text); margin-right: 8px; margin-bottom: 8px; }
.article-tags a:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* ===== RELATED ARTICLES ===== */
.related-section { margin-top: 40px; }
.related-section h3 { font-size: 20px; color: var(--primary); margin-bottom: 20px; }
.related-list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; }
.related-item { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 10px; }
.related-item a { display: block; padding: 12px 15px; background: var(--white); border-radius: 4px; font-size: 14px; color: var(--text); border-left: 3px solid var(--secondary); }
.related-item a:hover { background: var(--primary); color: var(--white); }

@media (max-width: 768px) {
  .article-header h1 { font-size: 22px; }
  .article-body { font-size: 15px; }
  .article-body h2 { font-size: 20px; }
  .related-item { -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}