/*
 * One listing per row: the photograph, a rule, then the summary it shares with
 * a search card. Everything about how those two lines look lives in
 * summary.css — this file owns only what a listing has and a search does not.
 */

.listing-row {
  display: flex;
  align-items: center;
  background: var(--surface);
  transition: background 0.12s;
}

.listing-row + .listing-row {
  border-top: 1px solid var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .listing-row:hover {
    background: var(--raised, var(--surface-raised));
  }
}

.listing-row--selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.listing-row__select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  text-decoration: none;
  color: inherit;
}

.listing-row__thumbnail {
  flex: none;
  width: 4.75rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  display: block;
}

.listing-row__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The rule that sets the photograph apart from the words. It belongs to the
 * listing, not to the summary: a search card has no thumbnail to separate.
 *
 * `--line` is the colour for a rule *between* rows, read against a long
 * horizontal edge. Stood on end and one row tall it vanished, so this one is
 * drawn a shade stronger. */
.listing-row .summary {
  padding-left: var(--space-4);
  border-left: 1px solid var(--line-strong);
}