/**
 * Styling for the site-owned `comparison` section (design/sections/comparison.section.json).
 *
 * Colour and rule values come from the template's semantic tokens only — never a
 * literal hex — so a vibe change restyles this table with everything else.
 */

.kr-band--compare {
  padding-block: var(--kr-section-y);
}

.kr-compare__scroll {
  overflow-x: auto;
  /* The table is the one thing on this site allowed to be wider than the
     reading measure; the page itself must never scroll sideways. */
  max-width: 100%;
}

.kr-compare__scroll:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.kr-compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  /* Body face, not the mono one: IBM Plex Sans has true tabular figures, so
     digits line up column-to-column without adding a third family to the page. */
  font-family: var(--wp--preset--font-family--body, inherit);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  text-align: left;
}

.kr-compare th,
.kr-compare td {
  padding: 0.625rem 0.875rem;
  border-bottom: var(--kr-rule);
  vertical-align: baseline;
}

.kr-compare thead th {
  border-bottom: var(--kr-rule-strong);
  color: var(--wp--preset--color--muted);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The first cell of each row is the product; it carries the row's identity. */
.kr-compare tbody th {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
}

.kr-compare tbody tr:last-child th,
.kr-compare tbody tr:last-child td {
  border-bottom: 0;
}

.kr-compare__note {
  margin-top: 0.75rem;
  color: var(--wp--preset--color--muted);
  font-size: 0.875rem;
}

@media (max-width: 40rem) {
  .kr-compare {
    font-size: 0.875rem;
  }
}