/* Wine & Sake list (homepage #wine, rendered by js/wine.js).
   The bottle shots are cutouts on a white background, so each one sits on its own WHITE
   plate — the photo's own background then blends into the plate instead of showing as a
   pale rectangle — and is contained rather than cropped, because a portrait bottle
   chopped into a square tile is exactly what this section exists to avoid.
   The supplied photos range from 1:1 to 1:4, so `contain` letterboxes the narrow ones
   rather than distorting them; consistent framing has to come from the source images.
   The Add button deliberately reuses .menu-card__add (see js/wine.js). */
.wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-8);
  align-items: stretch;
}

.wine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

.wine-card__bottle {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Explicit width/height rather than max-*: inside a flex parent sized by aspect-ratio,
   `max-height: 100%` resolves against an indefinite height and is dropped, so a tall
   source image (one bottle shot is 300x1199) stretched the card metres down the page.
   width/height:100% + contain letterboxes inside the plate instead. */
.wine-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wine-card__emoji { font-size: var(--fs-4xl); }

.wine-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin-top: var(--sp-2);
}

.wine-card__meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-coral);
}

.wine-card__note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  opacity: 0.8;
}

/* .menu-card__add already brings margin-top:auto, so a short and a long tasting note
   still line their buttons up across the row. */
.wine-card.is-out .wine-card__bottle { filter: grayscale(1); opacity: 0.6; }

@media (max-width: 640px) {
  .wine-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

/* ── Promo pricing on a bottle card ── */
.wine-card__bottle { position: relative; }   /* anchor for the PROMO badge */
.wine-card__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
}
.wine-card__meta--promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
}