/* ====================================================================
   help_article_list.css — article rows (inside card-body-flush)
   ==================================================================== */

.article-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t) var(--ease);
  cursor: pointer;
}
.article-row:last-child { border-bottom: none; }
.article-row:hover { background: var(--surface-hover); }

.article-body { min-width: 0; }

.article-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.article-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.article-arrow {
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  display: inline-flex;
  flex-shrink: 0;
}
.article-row:hover .article-arrow { opacity: 1; transform: translateX(2px); }
.article-arrow svg { width: 16px; height: 16px; }

.article-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.article-badge.popular { background: var(--brand-soft); color: var(--brand); }
.article-badge.new { background: var(--success-soft); color: var(--success); }
.article-badge.updated { background: var(--info-soft); color: var(--info); }