/*
 * Wine tile — pairs with app/views/shared/_wine_tile.html.erb.
 * One wine on a home-page shelf: shared/_bottle_stage above the name,
 * producer and price. The whole tile is one link.
 */
.wine-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.wine-tile:hover,
.wine-tile:focus-within {
  border-color: var(--color-border-hover);
}

.wine-tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* :visited is listed so the global a:visited tint (application.css), which
   outranks a lone class, doesn't recolour a tile the viewer has opened. */
.wine-tile-link,
.wine-tile-link:visited {
  color: inherit;
}

.wine-tile-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.wine-tile-name {
  margin: 0;
  font-family: var(--font-wine-name);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.25;
}

.wine-tile-link:hover .wine-tile-name {
  color: var(--color-primary);
}

.wine-tile-meta {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.wine-tile-price {
  margin: var(--space-sm) 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wine-tile-price-note {
  font-weight: 400;
  color: var(--color-text-light);
}