/* ─────────────────────────────────────────────────────────────────
   block-compare-table — feature comparison matrix.
   Section title and typography inherit from design-system.css.
   Note: blueprint authors set per-column background_color via inline
   style="background-color: ...". This CSS handles only typography,
   rules, sticky header, icons.
   ───────────────────────────────────────────────────────────────── */

.block-compare-table {
  position: relative;
}

.block-compare-table .table-responsive {
  border-radius: var(--ds-radius);
  overflow: hidden;
  box-shadow: var(--ds-shadow-md);
  background: var(--scheme-card-bg);
  -webkit-overflow-scrolling: touch;
}

.block-compare-table .table-compare {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--scheme-card-fg);
}

.block-compare-table .table-compare thead th {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 2px solid var(--scheme-rule);
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: middle;
}

.block-compare-table .table-compare tbody th {
  font-weight: 600;
  font-size: var(--ds-fs-body);
  color: var(--scheme-card-fg);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--scheme-rule);
  text-align: left;
  vertical-align: middle;
  background: var(--scheme-card-bg);
}

.block-compare-table .table-compare tbody td {
  padding: var(--ds-space-4) var(--ds-space-3);
  border-bottom: 1px solid var(--scheme-rule);
  vertical-align: middle;
  font-size: var(--ds-fs-body);
  color: var(--scheme-card-fg);
}

.block-compare-table .table-compare tbody tr:last-child th,
.block-compare-table .table-compare tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping using scheme tokens */
.block-compare-table .table-compare tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--scheme-rule) 25%, transparent);
}

/* Check / X icons (block-unique circle treatment for table cells) */
.block-compare-table .t-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
}

.block-compare-table .t-check-circle { background: var(--ds-trust); }
.block-compare-table .t-check-circle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.block-compare-table .t-x-circle {
  background: var(--scheme-fg-mute);
  opacity: 0.55;
}
.block-compare-table .t-x-circle::before,
.block-compare-table .t-x-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2.5px;
  background: #fff;
  transform-origin: center;
}
.block-compare-table .t-x-circle::before { transform: translate(-50%, -50%) rotate(45deg); }
.block-compare-table .t-x-circle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 600px) {
  .block-compare-table .table-compare thead th,
  .block-compare-table .table-compare tbody th,
  .block-compare-table .table-compare tbody td {
    padding: var(--ds-space-3);
    font-size: var(--ds-fs-body-sm);
  }
}