/* Compare car models.

   A real table, styled to the design's grid. Attribute labels pinned left, one
   column per vehicle, zebra rows, a vertical hairline between columns, and a
   CTA at the foot of each column.

   The horizontal scroll below 1024 lives in tokens/responsive.css with the
   other structural breakpoints. */

.kssk-compare__heading { margin-bottom: var(--space-40); }

.kssk-compare__table {
  width: 100%;
  border-collapse: collapse;
  /* Equal columns whatever the content length, so a long feature list cannot
     make one vehicle's column dominate. */
  table-layout: fixed;
}

/* The label column is wider than the vehicle columns, and never shrinks below
   a readable width when the table scrolls. */
.kssk-compare__table th[scope="row"],
.kssk-compare__corner { width: 30%; min-width: 200px; }

.kssk-compare__head,
.kssk-compare__value,
.kssk-compare__cta { min-width: 160px; }

/* Column header: cutout, name, class. */

.kssk-compare__head {
  padding: var(--space-24) var(--space-16);
  text-align: center;
  vertical-align: bottom;
  background: var(--surface-page);
}

.kssk-compare__figure {
  display: grid;
  place-items: center;
  height: 96px;
  margin-bottom: var(--space-8);
}

.kssk-compare__cutout {
  width: 100%;
  max-width: 200px;
  height: 96px;
  object-fit: contain;
}

.kssk-compare__cutout-missing {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 200px;
  height: 96px;
  background: var(--surface-subtle);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kssk-compare__name {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-primary);
}

.kssk-compare__class {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-muted);
}

/* Rows */

.kssk-compare__label {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-16) var(--space-16) 0;
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-primary);
}

.kssk-compare__value {
  padding: var(--space-16);
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

.kssk-compare__table tbody tr:nth-child(odd) { background: var(--surface-subtle); }

/* The one vertical rule in the system, separating vehicles from each other and
   from their labels. */
.kssk-compare__head + .kssk-compare__head,
.kssk-compare__value + .kssk-compare__value,
.kssk-compare__cta + .kssk-compare__cta { border-left: var(--divider-strong); }

.kssk-compare__cta {
  padding: var(--space-24) var(--space-16);
  text-align: center;
}

.kssk-compare__notice { margin-top: var(--space-32); }

@media (max-width: 767px) {
  .kssk-compare__label { font-size: var(--text-sm); }
  .kssk-compare__value { font-size: var(--text-sm); }
}