/* ============================================================
   detail.css — 文章详情页专用样式
   文章头部 + 编辑点评 + 正文排版 + 相关推荐
   ============================================================ */

.detail-layout { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 769px) {
  .detail-layout { flex-direction: row; }
  .detail-main { flex: 1; min-width: 0; }
  .detail-aside { width: 300px; flex-shrink: 0; }
}

/* Article Header */
.article-header { margin-bottom: var(--space-4); }
.article-header__category {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.article-header__title { font-size: var(--text-display-sm); font-weight: var(--weight-semibold); color: var(--color-text-base); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
/* 标题里的三态徽章用列表卡那一份 heat_badge 片段与那一套配色，这里只修行内位置：
   另配一套颜色或强弱档位就是第二套口径（spec §4.5-4「列表是爆、详情是无」的错位）。 */
.article-header__title .news-card__heat { vertical-align: 0.35em; white-space: nowrap; }
.article-header__subtitle { font-size: var(--text-md); color: var(--color-text-secondary); line-height: var(--leading-body); margin-bottom: var(--space-3); }
.article-header__meta {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.article-meta__source {
  display: flex; align-items: center; gap: var(--feed-gap, 8px);
}
.article-meta__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-hover); flex-shrink: 0;
}
.article-meta__source-name {
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text);
}
.article-meta__info {
  display: flex; align-items: center; gap: var(--feed-gap, 8px);
  font-size: var(--text-xs); color: var(--color-text-quaternary);
}
.article-meta__separator {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-border);
}

/* Article Action Bar (Desktop) */
.article-actions { display: none; }
.article-actions__btn {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  font-family: inherit; white-space: nowrap;
}
.article-actions__btn:hover {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
}
.article-actions__btn--bookmark:hover {
  color: var(--color-warning);
  border-color: var(--qdw-orange-100);
  background: var(--qdw-orange-100);
}
.article-actions__btn--bookmark.is-active {
  color: var(--color-warning);
  border-color: var(--qdw-orange-100);
  background: var(--qdw-orange-100);
}
.article-actions__btn--bookmark.is-active .bookmark-icon {
  fill: var(--color-warning);
}

/* Editor Pick */
.editor-pick {
background: var(--qdw-mint-50); border: 1px solid var(--qdw-mint-200);
border-radius: var(--radius-lg); padding: var(--space-4);
margin-bottom: var(--space-5); position: relative;
}
.editor-pick__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--space-2);
}
.editor-pick__icon {
display: flex; align-items: center; gap: var(--feed-gap, 8px);
color: var(--color-primary-hover);
}
.editor-pick__label {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
color: var(--color-primary-hover); text-transform: uppercase; letter-spacing: 0.05em;
}
.editor-pick__score {
font-size: 20px; font-weight: 700; color: var(--color-primary-hover);
line-height: 1;
}
.editor-pick__text {
font-size: var(--text-md); color: var(--color-text);
line-height: var(--leading-body); font-style: italic;
}

/* Article Body */
.article-body { font-size: var(--text-md); color: var(--color-text); line-height: var(--leading-body); }
.article-body h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-text-base); margin: var(--space-5) 0 var(--space-3); }
.article-body h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-base); margin: var(--space-4) 0 var(--space-2); }
.article-body p { margin-bottom: var(--space-3); }
.article-body a { color: var(--color-primary-hover); text-decoration: underline; }
.article-body img { max-width: 100%; border-radius: var(--radius-md); margin: var(--space-3) 0; }
.article-body blockquote { border-left: 3px solid var(--color-border); padding-left: var(--space-3); color: var(--color-text-secondary); margin: var(--space-3) 0; }

/* Summary Block (below article body) */
.article-summary {
  background: var(--qdw-mint-50); border: 1px solid var(--qdw-mint-200);
  border-radius: var(--radius-lg); padding: var(--space-4);
  margin-top: var(--space-5);
}
.article-summary__label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-primary-hover); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.article-summary__text {
  font-size: var(--text-md); color: var(--color-text);
  line-height: var(--leading-body); margin: 0;
}

/* Read Original Link Button */
.article-origin-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--qdw-white); background: var(--color-primary);
  border-radius: var(--radius-md); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.article-origin-link:hover { background: var(--color-primary-hover); text-decoration: none; }

/* Mobile-only top-right share button */
.article-share-mobile { display: none; }

/* Share Poster Modal */
.share-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); padding: var(--space-4);
}
.share-modal[hidden] { display: none; }
.share-modal__dialog {
  background: var(--color-bg-container); border-radius: var(--radius-xl);
  padding: var(--space-4); max-width: 360px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.share-modal__canvas {
  width: 100%; height: auto; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-tertiary);
}
.share-modal__hint { font-size: var(--text-xs); color: var(--color-text-quaternary); text-align: center; margin: 0; }
.share-modal__actions { display: flex; gap: var(--space-2); width: 100%; }
.share-modal__btn {
  flex: 1; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  border-radius: var(--radius-md); cursor: pointer; font-family: inherit;
  border: 1px solid var(--color-border-tertiary); background: var(--color-bg-container);
  color: var(--color-text-secondary); text-align: center; text-decoration: none;
}
.share-modal__btn--primary { background: var(--color-primary); color: var(--qdw-white); border-color: var(--color-primary); }
.share-modal__btn--primary:hover { background: var(--color-primary-hover); }

/* Related Articles Sidebar */
.detail-aside .sidebar-section {
  background: var(--color-bg-container); border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-xl); padding: var(--space-3);
}
.sidebar-section__list { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-card {
  display: flex; gap: var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-md); transition: background var(--duration-fast);
}
.sidebar-card:hover { background: var(--color-bg-elevated); }
.sidebar-card__body { flex: 1; min-width: 0; }
.sidebar-card__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-base); line-height: var(--leading-ui); margin-bottom: 2px; }
.sidebar-card__meta { display: flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--color-text-quaternary); }

/* Related Articles — Mobile (horizontal card layout) */
.related-mobile {
  display: none; /* hidden on desktop by default */
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-tertiary);
}
.related-mobile__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-base);
  margin-bottom: var(--space-3);
}
.related-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.related-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.related-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}
.related-card__cover {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-elevated);
}
.related-card__cover img,
.related-card__cover svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.related-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: var(--leading-ui);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-1);
}
.related-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-quaternary);
  display: flex;
  align-items: center;
  gap: var(--feed-gap, 8px);
}

/* Mobile-only components: hidden on desktop */
.mobile-action-bar { display: none; }
.mobile-action-spacer { display: none; }

/* Desktop-only components */
@media (min-width: 769px) {
  .article-header { position: relative; }
  .article-actions {
    display: flex; align-items: center;
    gap: var(--feed-gap, 8px);
    position: absolute; top: 0; right: 0;
  }
  .article-header__meta { gap: var(--space-4); }
  .article-meta__avatar { width: 32px; height: 32px; }
}

/* Mobile Action Bar */
@media (max-width: 768px) {
  .article-actions { display: none; }
  .article-header { position: relative; padding-right: 44px; }
  .article-share-mobile {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; z-index: 2;
    width: 36px; height: 36px; padding: 0;
    color: var(--color-text-secondary);
    background: var(--color-bg-container);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--radius-md); cursor: pointer;
  }
  /* 移动端隐藏桌面侧栏，只显示 related-mobile */
  .detail-aside { display: none; }
  .related-mobile { display: block; }
  .mobile-action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--color-bg-container); border-top: 1px solid var(--color-border-tertiary);
    display: flex; height: 52px;
  }
  .mobile-action-bar__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: var(--text-sm); color: var(--color-text-secondary);
    border: none; background: none; cursor: pointer;
  }
  .mobile-action-bar__btn--primary { background: var(--color-primary); color: var(--qdw-white); font-weight: var(--weight-medium); }
  .mobile-action-spacer { display: block; height: 56px; }
  /* 移动端详情页布局优化：单列、面包屑导航不错位 */
  .detail-layout { gap: var(--space-3); }
  .breadcrumb { flex-wrap: wrap; gap: 2px; padding: var(--space-2) 0; }
  .breadcrumb__link { white-space: nowrap; }
  .article-header__title { font-size: var(--text-xl); }
  .article-header__meta { gap: var(--space-2); }
  .article-meta__info { flex-wrap: wrap; gap: var(--space-1); }
}