/* HYPERPART: item */
/*
 * Generic list row: optional media + title/description + trailing actions.
 * Compose into lists, menus, and search results. State-free presentation;
 * interactive children (links/buttons) own their own exchanges.
 *
 * PLACEHOLDER — shadcn parity (HMC-033).
 */

.dz-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--colour-text);
  text-align: start;
  width: 100%;
  box-sizing: border-box;
}

.dz-item[data-dz-variant="outline"] {
  border-color: var(--colour-border);
  background: var(--colour-surface);
}

.dz-item[data-dz-variant="muted"] {
  background: var(--colour-surface-muted);
}

a.dz-item {
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

a.dz-item:hover,
button.dz-item:hover {
  background: var(--colour-surface-muted);
}

.dz-item:focus-visible {
  outline: 2px solid var(--colour-brand);
  outline-offset: 2px;
}

.dz-item__media {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--colour-brand-soft);
  color: var(--colour-brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
}

.dz-item__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dz-item__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dz-item__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-item__description {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-item__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.dz-item-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}