/* comparison — auto-split from content-blocks.css */

/* ── Comparison Table
   Usage: <table class="comparison-table"><thead><tr><th>Feature</th><th>Option A</th><th>Option B</th></tr></thead><tbody>...
── */

.article-body .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.article-body .comparison-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
}

.article-body .comparison-table thead th:first-child {
  border-radius: 6px 0 0 0;
}

.article-body .comparison-table thead th:last-child {
  border-radius: 0 6px 0 0;
}

.article-body .comparison-table thead th.col-highlight {
  background: var(--color-emerald-600);
  color: #fff;
}

.article-body .comparison-table thead th.col-highlight--amber {
  background: var(--color-amber-500);
  color: var(--color-text-primary);
}

.article-body .comparison-table thead th.col-highlight--red {
  background: var(--color-accent);
  color: #fff;
}

.article-body .comparison-table tbody tr {
  border-bottom: 1px solid var(--color-neutral-100);
}

.article-body .comparison-table tbody tr:nth-child(even) {
  background: var(--color-neutral-50);
}

.article-body .comparison-table tbody tr:hover {
  background: var(--color-neutral-100);
}

.article-body .comparison-table tbody td {
  padding: 0.75rem 1rem;
  color: var(--color-text-body);
  vertical-align: middle;
}

.article-body .comparison-table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.article-body .comparison-table tbody td.col-highlight {
  background: var(--color-emerald-25);
}

.article-body .comparison-table tbody tr:nth-child(even) td.col-highlight {
  background: var(--color-emerald-50);
}

.article-body .comparison-table tbody tr:hover td.col-highlight {
  background: var(--color-emerald-100);
}

.article-body .comparison-table tbody td.col-highlight--amber {
  background: var(--color-amber-25);
}

.article-body .comparison-table tbody tr:nth-child(even) td.col-highlight--amber {
  background: var(--color-amber-50);
}

.article-body .comparison-table tbody tr:hover td.col-highlight--amber {
  background: var(--color-amber-100);
}

.article-body .comparison-table tbody td.col-highlight--red {
  background: var(--color-accent-25);
}

.article-body .comparison-table tbody tr:nth-child(even) td.col-highlight--red {
  background: var(--color-accent-50);
}

.article-body .comparison-table tbody tr:hover td.col-highlight--red {
  background: var(--color-accent-100);
}

.article-body .cmp-yes {
  color: #059669;
  font-weight: 700;
}

.article-body .cmp-no {
  color: var(--color-neutral-400);
}

.article-body .cmp-part {
  color: #b45309;
  font-weight: 600;
}

@media (max-width: 640px) {
  .article-body .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}