/*
 * Wine name cell component — pairs with app/views/shared/_wine_name_cell.html.erb
 * Always rendered inside the .wines-table cell shape.
 *
 * Layout: [ thumb ] [ name + meta (+ varietals) ]. The thumb itself (bottle
 * image or monogram-tile fallback) is the shared shared/_wine_thumb partial and
 * is styled in components/_wine_thumb.css.
 */
.wines-table .namecell {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.wines-table .namecell-body {
  min-width: 0; /* let long wine names wrap instead of stretching the row */
}

/* Wine title — serif for editorial warmth; meta stays sans for contrast. */
.wines-table .wine-name {
  font-family: var(--font-wine-name);
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wines-table .wine-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: 3px;
}

.wines-table .wine-varietals {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.wines-table td .vintage {
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

/* On mobile the row becomes a card; keep the thumb centered beside the title. */
@media (max-width: 768px) {
  .wines-table td:first-child .namecell {
    align-items: center;
  }
}