/* ==================================================================
 * AGC · 文章系统样式
 * 路径：/public/css/articles.css
 *
 * 覆盖范围：
 *   · 文章编辑器（/publish/article）
 *   · 文章列表页头（/articles）
 *   · 文章详情页（/articles/:id）
 *
 * v2.0.0 整理：
 *   · 删除 .articles-page__header / .articles-page__title（已由 global.css 的
 *     .page-header 统一承担）
 *   · 删除 .articles-empty（与 home.css 的重名冲突实现，统一为 .empty-box）
 *   · 删除 .article-detail__not-found（统一为 .not-found-box）
 * ================================================================== */

/* ── 1. 文章编辑器 ── */
.article-editor {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.article-editor__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.article-editor__section { margin-bottom: var(--space-md); }

.article-editor__section--center { text-align: center; }
.article-editor__section--right  { text-align: right; }

.article-editor__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
}

.article-editor__textarea {
  width: 100%;
  min-height: 400px;
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  background: var(--color-white);
  outline: none;
  transition: border-color 0.15s;
}

.article-editor__textarea:focus { border-color: var(--color-yellow); }

.article-editor__hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-muted);
}

.article-editor__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 2px dashed var(--color-black);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.article-editor__preview img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.article-editor__submit { min-width: 140px; }

/* ── 2. 文章列表 ── */
/* 卡片与网格复用 content.css 的 .articles-grid / .article-card；
   页头复用 global.css 的 .page-header。此处仅补充列表页特有的行为。 */

/* ── 3. 文章详情 ── */
.article-detail {
  max-width: 800px;
  margin: 0 auto;
}

.article-detail__cover {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border: var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
  background: var(--color-surface);
}

.article-detail__header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border);
}

.article-detail__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

.article-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--color-muted);
  flex-wrap: wrap;
}

/* 作者信息行（由 components.renderAuthorLine 输出，文章与视频详情共用） */
.article-detail__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.article-detail__author-avatar {
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  object-fit: cover;
}

.article-detail__tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.article-detail__body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-black);
  word-break: break-word;
}

.article-detail__body p { margin-bottom: var(--space-md); }

.article-detail__body a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border);
}

/* ── 4. 响应式 ── */
@media (max-width: 767px) {
  .article-editor {
    max-width: none;
    margin: 0;
    border: none;
    padding: var(--space-md);
  }

  .article-editor__textarea { min-height: 300px; }

  .article-detail { padding: 0 var(--space-sm); }

  /* 移动端封面通栏出血，视觉上更贴近新闻类阅读体验 */
  .article-detail__cover {
    max-height: 240px;
    border: none;
    border-radius: 0;
    margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-sm)) var(--space-md);
    width: calc(100% + 2 * var(--space-sm));
  }

  .article-detail__title { font-size: 22px; }
}