/* One reusable listing anatomy: Events, Opportunities and Places. */
.ui-v2 .listing-card {
  display: grid;
  /* Strip, 16:9 media, then the text at its own height: no empty space under the text. */
  grid-template-rows: 26px auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: .6px solid var(--color-border-active);
  border-radius: var(--radius-thumb);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  position: relative;
}
/* Hovered, highlighted (its map dot is hovered, or last viewed) and selected cards share one accent: a yellow strip
   and a full 1.5px black outline. The outline is an overlay above the strip and image, so it surrounds the whole
   card, and it never re-lays out the grid. */
.ui-v2 .listing-card::after { content: ''; position: absolute; z-index: 1; inset: 0; border: 1.5px solid var(--color-border-active); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
.ui-v2 .listing-card.is-hovered::after, .ui-v2 .listing-card.is-selected::after { opacity: 1; }
.ui-v2 .listing-card:focus-visible { outline: 2px solid var(--color-border-active); outline-offset: 2px; }
.ui-v2 .listing-card__strip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; font: 9px/11px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.ui-v2 .listing-card__strip { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ui-v2 .listing-card.is-selected .listing-card__strip,
.ui-v2 .listing-card.is-hovered .listing-card__strip { background: var(--color-status); color: var(--color-accent-text); }
.ui-v2 .listing-card__number { display: grid; place-items: center; flex: none; width: 17px; height: 17px; border-radius: var(--radius-pill); background: var(--color-inverse); color: var(--color-text-inverse); font: 700 10px/11px var(--font-mono); letter-spacing: normal; }
.ui-v2 .listing-card__category { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-v2 .listing-card__strip-meta { min-width: 0; margin-left: auto; overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
/* The image fills the media row and crops around its centre, whatever its aspect ratio. */
.ui-v2 .listing-card__media { position: relative; display: grid; place-items: center; min-height: 0; aspect-ratio: 16 / 9; background: var(--color-surface-selected); overflow: hidden; }
.ui-v2 .listing-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ui-v2 .listing-image__empty { padding: 12px; color: var(--color-text-muted); font: 12px/16px var(--font-sans); text-align: center; }
.ui-v2 .listing-card__opportunity { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 0; padding: 12px; background: var(--color-surface-selected); }
.ui-v2 .listing-card__logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-thumb); background: var(--color-surface); color: var(--color-text); font: 700 13px/19px var(--font-name); }
.ui-v2 .listing-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.ui-v2 .listing-card__terms { display: flex; flex-direction: column; max-width: 100%; color: var(--color-text-muted); font: 10px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ui-v2 .listing-card__terms span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-v2 .listing-card__details { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 10px 10px 12px 11px; color: var(--color-text-muted); font: 12px/16px var(--font-sans); }
.ui-v2 .listing-card__title { flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text); font: 13px/16px var(--font-sans); }
.ui-v2 .listing-card--places .listing-card__title { font-family: var(--font-name); }
.ui-v2 .listing-card__venue { margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-name); }
.ui-v2 .listing-card__date { margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-v2 .listing-card__location { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-v2 .listing-card__people { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: var(--color-text); font: 9px/11px var(--font-mono); }
.ui-v2 .listing-card__avatar-stack { display: flex; align-items: center; }
.ui-v2 .listing-card__avatar-stack > * { border: .5px solid var(--color-bg); }
.ui-v2 .listing-card__avatar-stack > * + * { margin-left: -3px; }
.ui-v2 .listing-card-skeleton { width: 100%; aspect-ratio: 221.4 / 210; border-radius: var(--radius-thumb); background: var(--color-surface-selected); }
.ui-v2 .listing-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--color-text-muted); text-align: center; }
.ui-v2 .listing-empty h2, .ui-v2 .listing-empty h3 { margin: 0; color: var(--color-text); font: 700 20px/26px var(--font-sans); }
.ui-v2 .listing-empty p { margin: 0; max-width: 36ch; font: 14px/20px var(--font-sans); }
@media (hover: hover) {
  .ui-v2 .listing-card:hover::after { opacity: 1; }
  .ui-v2 .listing-card:hover .listing-card__strip { background: var(--color-status); color: var(--color-accent-text); }
}
@media (prefers-reduced-motion: reduce) { .ui-v2 .listing-card, .ui-v2 .listing-card::after, .ui-v2 .listing-card__strip { transition: none; } }