/* ============================================================================
   SIRO Comparison Table.
   ============================================================================ */

.siro-comparison-table {
  width: 100%;
  background: var(--siro-surface);
  border-radius: var(--siro-radius-lg);
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: var(--siro-shadow-ambient);
  font-family: var(--siro-font-body);
}

.siro-comparison-table th,
.siro-comparison-table td {
  padding: var(--siro-space-5) var(--siro-space-6);
  text-align: left;
  border-bottom: 1px solid var(--siro-outline-dark);
  font-size: var(--siro-fs-sm);
}

.siro-comparison-table thead th {
  background: var(--siro-color-primary);
  color: var(--siro-text-inverse);
  font-family: var(--siro-font-display);
  font-size: var(--siro-fs-lg);
  font-weight: 700;
}

.siro-comparison-table tbody th {
  font-weight: 600;
  color: var(--siro-text);
  font-family: var(--siro-font-body);
  font-size: var(--siro-fs-sm);
}

.siro-comparison-table .siro-table__winner {
  background: rgba(253, 212, 0, 0.10);
  color: var(--siro-color-primary-dark);
  font-weight: 700;
  border-left: 4px solid var(--siro-color-yellow);
}

.siro-comparison-table .siro-table__winner-col {
  background: var(--siro-color-yellow);
  color: var(--siro-color-primary-dark);
}

.siro-comparison-table tr:last-child th,
.siro-comparison-table tr:last-child td {
  border-bottom: none;
}

.siro-table__caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: var(--siro-fs-base);
  margin-bottom: var(--siro-space-3);
  color: var(--siro-text);
}

@media (max-width: 720px) {
  .siro-comparison-table th,
  .siro-comparison-table td {
    padding: 14px 16px;
    font-size: var(--siro-fs-xs);
  }
  .siro-comparison-table thead th {
    font-size: var(--siro-fs-base);
  }
}