/* ==========================================================================
   Wines — Figma "Product Listing - Page" 535:41 (1920 x 5056)
     title       0     → 963
     white dry   963   → 1871
     red dry     1871  → 2779
     rose dry    2779  → 3602
     footer      3602  → 4164

   The Orange row (3602 → 4494, the single Skin bottle) is removed: the
   winery does not sell it.  Its CSS went with it; the bottle art and the
   product page are in _to_delete/.
   ========================================================================== */

.wines-list { position: relative; background: var(--c-page); }

/* ---- Collection title (Figma 536:79) ----------------------------------- */
.wines-list__intro { position: relative; height: 96.3rem; }

.wines-list__title {
  position: absolute;
  left: 6.3rem;
  top: 34.045rem;
  font-size: var(--fs-display-xxl);
  line-height: var(--lh-display-xxl);
  letter-spacing: var(--ls-display-xxl);
  color: var(--c-grey-150);
  white-space: nowrap;
}

/* ---- Rows --------------------------------------------------------------- */
.wine-row { position: relative; width: 100%; overflow: hidden; }
.wine-row--white,
.wine-row--red    { height: 90.8rem; }
.wine-row--rose   { height: 82.3rem; }

.wine-row__heading {
  position: absolute;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-heading);
  line-height: normal;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--c-ink);
  white-space: nowrap;
}

.wine-row--white .wine-row__heading,
.wine-row--red   .wine-row__heading { left: 10.4rem; top: 14.6rem; }
.wine-row--rose  .wine-row__heading { left: 8.5rem; top: 10.1rem; }

/* ---- Cards -------------------------------------------------------------- */
.wine-card {
  position: absolute;
  width: 28rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

/* The bottle is drawn OVER the selection ellipse, so the ring passes behind
   the glass rather than across it.  That only works because the eight listing
   shots carry a real alpha channel: they shipped as flat RGB on a #fdfdfd
   ground, which would have hidden the whole ellipse behind a 280 x 744
   rectangle.  The ground was keyed out per pixel, graded so the bottle's own
   shadow stays soft, and only where it reaches the border — the highlights
   inside the glass are as light as the ground and a colour-only key would have
   punched holes through it.  See _ref/build/key_bottle_alpha.py. */
.wine-card__shot {
  display: block;
  position: relative;
  z-index: 1;
  width: 28rem;
  height: 74.4rem;
}

.wine-card__name {
  position: absolute;
  left: 0;
  width: 28rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: 2.4494rem;
  font-weight: var(--fw-medium);
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink);
}

/* Figma centres each caption on its bottle; the boxes below carry the
   measured centres, so the text stays centred whatever its width. */
.wine-row--white .wine-card,
.wine-row--red   .wine-card { top: 5rem; }
.wine-row--rose  .wine-card { top: 0; }

.wine-row--white .wine-card__name,
.wine-row--red   .wine-card__name { top: 74.4rem; }
.wine-row--rose  .wine-card__name { top: 74.4rem; }

.wine-card--palloures  { left: 55.3rem; }
.wine-card--xynisteri  { left: 101.5rem; }
.wine-card--viognier   { left: 151.5rem; }
.wine-card--maratheftiko { left: 55.3rem; }
/* Red takes the red row's second slot and Giannoudi the third.  Their shots
   are centred in their own 280-wide frames to within six tenths of a pixel of
   each other, so the two slots simply change hands. */
.wine-card--red        { left: 101.6rem; }
.wine-card--giannoudi  { left: 151.4rem; }
/* Eros takes the rose row's first slot and Gris the second.  The two shots
   are centred in their own 280-wide frames to within nine tenths of a pixel
   of each other, so the slots simply change hands — no renudging. */
.wine-card--eros       { left: 51.5rem; }
.wine-card--gris       { left: 101.6rem; }

/* Caption centres measured off the Figma text boxes (± the bottle centre) */
.wine-card--palloures    .wine-card__name { left: -0.405rem; }
.wine-card--xynisteri    .wine-card__name { left:  0.045rem; }
.wine-card--viognier     .wine-card__name { left: -0.09rem; }
.wine-card--maratheftiko .wine-card__name { left: -0.35rem; }
.wine-card--giannoudi    .wine-card__name { left: -0.05rem; }
.wine-card--red          .wine-card__name { left: -0.05rem; }
.wine-card--gris         .wine-card__name { left:  0.055rem; }
.wine-card--eros         .wine-card__name { left: -0.055rem; }

/* ---- The one card that leads to a product page -------------------------- */
a.wine-card { display: block; }

/* The selection ellipse.  Figma's metadata reports the node as 165 x 70 at
   x 95.5, but the instance scales it: measured off the prototype render (a
   clean 0.75 zoom, so the numbers convert exactly) it is 328 x 112, centred
   on the bottle at y 474 — wide enough to reach past the glass on both sides,
   which is the whole point of it.  Hence the negative left: it overhangs the
   280-wide card by 24px each side, and the cards are 220px apart, so there is
   room.  `100% 100%` rather than `contain`, or the SVG's own 165:70 aspect
   would letterbox it back to 264 wide. */
a.wine-card::after {
  content: '';
  position: absolute;
  left: -2.4rem;
  top: 41.8rem;
  width: 32.8rem;
  height: 11.2rem;
  background: url('../assets/svg/wine-select-ellipse.svg') center / 100% 100% no-repeat;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-inout);
  pointer-events: none;
}

/* It grows rather than simply arriving, the way `.menu__ring` does in
   components.css — that one animates its own width and height from a small
   fixed size up to the item's; this is a background SVG, so a scale does the
   same job without a layout pass and keeps the ring centred on the box it
   already has.

   0.75 is measured rather than chosen.  The ellipse is 328px wide and the
   bottle is drawn over it, and the widest of the eight shots is 208px of
   glass across the band the ring passes through.  328 x 0.75 is 246, so at
   its smallest the ring already clears the glass by twenty-odd pixels each
   side and there is something to see from the first frame; by the end each
   end reaches sixty.  Below about 0.63 it would start entirely hidden behind
   the bottle and the first third of the move would be invisible.

   The two properties are deliberately on different clocks.  The fade uses the
   site's `--ease-out`, which front-loads almost everything — right for an
   arrival, wrong for a growth, because by the time you can see the ring it
   would already be full size.  So the ring is up in `--dur-fast` and then
   opens on `--ease-inout` over `--dur-base`, which spreads the movement
   across the whole of it instead of spending it in the first eighth. */
a.wine-card:hover::after,
a.wine-card:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
a.wine-card:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1rem; }

/* ==========================================================================
   The row you are reading
   ==========================================================================
   A rule draws itself under the heading of whichever row the page is on, and
   is pulled away again when the next one takes over.  Three rows, one rule,
   handed along as you scroll — so the heading is always telling you where you
   are rather than just what is underneath it.

   The rule is the one the site already uses: `.header-cta::after` in
   components.css is a 1px line in `currentColor` that scales out from its
   left edge over `--dur-base`.  This is that line at editorial size — 0.03em,
   which is 2px under the 70px heading on a desktop and never less than the
   1px the header-cta uses on a phone.

   It grows from the left and leaves to the right.  The origin flips with the
   class rather than being animated, so the line always travels the way the
   reader is going: in behind the first letter, out past the last one.  Under
   "White Dry" that matters — the rule sits 0.05em below the box so it clears
   the descender of the "y" instead of striking through it.

   `is-current` is put on the row by js/wine-rows.js, which watches for the
   row that covers the middle line of the window.  Rows are contiguous and
   taller than nothing, so exactly one of them ever holds it.
   ========================================================================== */
.wine-row__heading > span {
  position: relative;
  display: inline-block;
}

.wine-row__heading > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: max(1px, 0.03em);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.wine-row.is-current .wine-row__heading > span::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Reduced motion: the rule still says which row you are on, it just does not
   travel to get there. */
@media (prefers-reduced-motion: reduce) {
  .wine-row__heading > span::after { transition: none; }
}