/* The listing card (views/html/home/_card.php) and the ribbon a slide
   or a card wears when its practice is pending or sold. Moved out of
   home.css on 1 Oct so the practice search shows the same card without
   the home page's styles (plan docs/ai/2026/10/2026-10-01-practice-search) */

.ribbon {
  position: absolute;
  left: 0;
  top: 12px;
  z-index: 3;
  background: rgba(130, 72, 124, 0.9);
  color: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 600;
  letter-spacing: var(--po-ls-caps);
  text-transform: uppercase;
  padding: var(--po-sp-1) var(--po-sp-2) var(--po-sp-1) var(--po-sp-2);
  border-radius: 0 4px 4px 0;
}

.ribbon.pend {
  background: rgba(138, 98, 6, 0.9);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--po-line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 150ms, border-color 150ms;
}

.card:hover,
.card.hl {
  box-shadow: 0 2px 8px -2px rgba(30, 40, 50, 0.16);
  border-color: var(--po-line-2);
}

.card.hl {
  border-color: #c9d0d6;
}

.card-ph {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  border-bottom: 1px solid var(--po-line);
  background: var(--po-bg-3);
}

.card-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-b {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--po-sp-4);
}

.card-l {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 600;
  color: #2f373e;
  letter-spacing: var(--po-ls-tight);
  line-height: 1.25;
}

.card-m {
  font-size: var(--po-fs-base);
  color: var(--po-muted);
  margin-top: 2px;
}

.card-stats {
  margin-top: var(--po-sp-3);
  padding-top: var(--po-sp-2);
  border-top: 1px solid var(--po-line);
}

.card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--po-sp-3);
  padding: 2px 0;
  font-size: var(--po-fs-base);
  color: var(--po-muted);
}

.card-row b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  color: var(--po-ink-soft);
  font-variant-numeric: tabular-nums;
}

.tile-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--po-sp-2);
  margin-top: auto;
  padding-top: var(--po-sp-3);
  min-height: 30px;
}

.tile-foot img {
  height: 26px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
  display: block;
}

.tf-by {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.byline {
  font-size: var(--po-fs-md);
  font-weight: 600;
  color: var(--po-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-who {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  align-self: flex-end;
}

.tf-agent {
  font-size: var(--po-fs-sm);
  color: var(--po-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tf-id {
  font-family: var(--po-font-mono);
  font-size: var(--po-fs-xs);
  letter-spacing: var(--po-ls-caps);
  color: var(--po-muted);
}

/* Cards and slides are links to the practice page */
a.card,
a.card:hover {
  color: inherit;
  text-decoration: none;
}

.card-sold {
  margin-top: var(--po-sp-2);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-md);
  font-weight: 600;
  color: var(--po-plum);
}