/* Pair Grid Component
 * 2-column grid for label/value pairs
 * Based on mockup: carespective_card_detail_1200.html
 */

.pairs {
  column-gap: 3rem; /* 48px - generous inner gutter */
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.125rem; /* 18px - consistent vertical rhythm */
}

/* One column, for a container too narrow for two: the record page's facts rail. */
.pairs--single {
  column-gap: 0;
  grid-template-columns: 1fr;
}

/* Pairs flowing inline — as many per row as fit, wrapping when narrow. */
.pairs--row {
  display: flex;
  flex-wrap: wrap;
}

.pair {
  display: flex;
  flex-direction: column;
}

.pair__label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm); /* 13px */
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.375rem; /* 6px - space between label and value */
}

.pair__value {
  font-size: var(--text-base); /* 16px */
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 1.5;
  max-width: 72ch;
  word-break: break-word;
}

/* A change of value: before and after in side-by-side columns, however long
   the values, with the arrow between them. */
.pair__value--change {
  align-items: baseline;
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.pair__before {
  color: var(--color-text-subtle);
}

/* Mobile: collapse to single column */
@media (max-width: 980px) {
  .pairs {
    column-gap: 0;
    grid-template-columns: 1fr;
  }
}