/*
 * Wine bottle thumbnail — pairs with app/views/shared/_wine_thumb.html.erb.
 * Shared by the wine name cell (shared/_wine_name_cell) and the wishlist table
 * (wishlist_items/_table).
 *
 * The thumb is either the bottle image_url or, when absent (common), a monogram
 * tile whose colour is hashed from the producer name and fed in via the
 * dynamic-color controller as --wine-tile-color (DESIGN.md §3a). We color-mix it
 * against --color-surface so the tile adapts to dark mode without a
 * [data-theme] override.
 *
 * Image thumbs are click-to-zoom: the host page must provide an `image-modal`
 * Stimulus controller scope + one `wines/_image_modal` dialog (releases/show,
 * wines/index and the wishlist pages do). Monogram tiles are not clickable,
 * matching wines/show where only real images zoom.
 */
.wine-thumb {
  flex: 0 0 var(--wine-thumb-width);
  width: var(--wine-thumb-width);
  height: calc(var(--wine-thumb-width) * 1.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.wine-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Image thumbs are click-to-zoom (image-modal controller, same as wines/show).
   A <button> reset keeps the thumb box identical to the non-interactive span. */
button.wine-thumb-link {
  padding: 0;
  font: inherit;
  cursor: zoom-in;
}

.wine-thumb-link:hover {
  border-color: var(--color-border-hover);
}

.wine-thumb-tile {
  font-family: var(--font-wine-name);
  font-weight: 600;
  font-size: var(--font-size-lg);
  line-height: 1;
  background: color-mix(in srgb, var(--wine-tile-color, var(--color-primary)) 16%, var(--color-surface));
  color: var(--wine-tile-color, var(--color-primary));
  border-color: color-mix(in srgb, var(--wine-tile-color, var(--color-primary)) 24%, var(--color-border));
}