/* ──────────────────────────────────────────
   VINEYARD SECTION
   Image is layered behind content via CSS grid stacking — both occupy the
   same grid cell. The taller of the two (usually content) sets the section
   height, and the image stretches via object-fit: cover.

   The image has dark overlays baked in, so it blends with --dark on the
   edges without needing extra gradient masks.
─────────────────────────────────────────── */
.vineyard-section {
  position: relative;
  display: grid;
  background: var(--dark);
  width: 100%;
  overflow: hidden;
  z-index: 50;
}

/* Background image — stretches to cover the whole section.
   The base scale(1.25) gives the parallax (assets/js/vineyard.js) ~12.5%
   of headroom on each side to drift before any edge would peek out. The JS
   updates --parallax-y; the scale stays declared here. */
.vineyard-bg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0) scale(1.25);
  will-change: transform;
}

/* Content overlay — sits on top, padded for breathing room */
.vineyard-content {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 120px 32px 140px;
}