/*
 * The two lines a property gets — the ones it has, or the ones that are wanted.
 *
 * A listing states its facts; a search states its specification. They are the
 * same sentence in two tenses, so one component draws both: identical by
 * construction rather than by two stylesheets agreeing for a while.
 *
 * Price and marks both hold the right edge, one above the other, so prices line
 * up under prices and marks under marks — and a search card sits at the head of
 * the column its listings form beneath it.
 */

.summary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Name against price. The header is the line a reader lands on, so it gets the
 * two things that decide whether to look further. */
.summary__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.summary__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.summary__trailing {
  flex: none;
  font-weight: 700;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.summary__name {
  min-width: 0;
  font-weight: 600;
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary__where {
  font-weight: 400;
  color: var(--ink-muted);
}

.summary__facts {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}


/* A state the advert declares about itself, not a criterion anyone asked for.
 * Drawn as a label rather than a badge so it sits inside the sentence: the
 * house is still in the list, it is simply no longer available. */
.summary__tag {
  margin-left: var(--space-1);
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: var(--label-weight);
  color: var(--ink-muted);
  white-space: nowrap;
  vertical-align: middle;
}