/* Redesign pass — fixes real bugs (invisible sections, letterboxed
   images, cramped mobile form) and tightens the visual rhythm, while
   keeping the original palette (near-black + forest green + warm
   off-white text), fonts (Zodiak / Poppins), photography, and copy. */

/* ---------- Hero ---------- */
.hero-plain-title {
  margin: 0;
  color: #fff;
  font-family: Zodiak, serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .hero-plain-title { font-size: 44px; }
}
@media screen and (max-width: 479px) {
  .hero-plain-title { font-size: 34px; }
}

/* ---------- Section rhythm ---------- */
.home-flex-center-text {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Webflow's scroll-reveal (IX2) sets inline opacity/transform on a
   large number of elements via JS at runtime (not just the few marked
   in the static HTML) and never triggers the "reveal" step outside of
   Webflow's own hosting — that's what was leaving most of the page's
   headings, cards, and text permanently invisible. Every element it
   touches carries an inline `opacity` style, so this one rule is the
   reliable global fix; !important is required to beat the inline
   style the JS applies after this stylesheet loads. */
[style*="opacity"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Images: fix letterboxed / non-spanning photos ----------
   Root cause: several Webflow grids set `justify-items: center` on
   mobile, which shrinks grid cells to their content's intrinsic size
   instead of stretching — that's what was insetting these photos. */
.adventure-grid {
  justify-items: stretch !important;
}

.content-panel,
.adventure-image-holder,
.w-layout-cell {
  width: 100% !important;
}

.w-layout-cell img,
.adventure-image-holder img {
  width: 100% !important;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

/* ---------- Special Events photo grid ----------
   Was a fixed 2-column Webflow layout that assumed exactly 2 images.
   Now backed by src/content/events/events.json (editable via the CMS),
   so this needs to gracefully handle any number of photos. */
.vwc-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  margin-top: 24px;
}
.vwc-event-card {
  display: flex;
  flex-direction: column;
}
.vwc-event-caption {
  margin-top: 10px;
  color: #8fa2a0;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* ---------- What People Are Saying (reviews) ---------- */
.vwc-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 24px;
  text-align: left;
}
.vwc-review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.03);
}
.vwc-review-stars {
  color: #008a40;
  font-size: 15px;
  letter-spacing: 2px;
}
.vwc-review-quote {
  color: #b5b5b5;
  line-height: 1.5;
  flex-grow: 1;
}
.vwc-review-author {
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
.vwc-review-badge {
  color: #8fa2a0;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 6px;
}

.menu-item-black {
  padding-bottom: 30px;
}

.menu-item-image-holder {
  width: 100%;
  height: 220px;
  margin-top: 20px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
}

#w-node-_7ce90d45-4be1-dfde-85f0-e9125dc20fb7-3ee5bb50 .menu-item-image-holder {
  background-image: linear-gradient(rgba(21, 21, 21, 0.25), rgba(21, 21, 21, 0.55)),
    url("/images/65ef34e9d10f8803fd3880e6_Valley-Wine-Cellar-Lifestyle-16-p-1600.jpg");
}

#w-node-f952e415-3f2f-97d1-d206-0cbd6e982a26-3ee5bb50 .menu-item-image-holder {
  background-image: linear-gradient(rgba(21, 21, 21, 0.25), rgba(21, 21, 21, 0.55)),
    url("/images/65ef34ec189e8646ff6872df_Valley-Wine-Cellar-Lifestyle-24-p-1600.jpg");
}

/* ---------- Nav: was fully transparent + sticky, so it visually
   collided with photos/content scrolling underneath it ---------- */
.navbar {
  background-color: rgba(14, 13, 12, 0.92) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Nav link spacing ----------
   "Featured" and "Wine Tasting" share a single .nav-link-holder (a Webflow
   markup quirk — every other nav item gets its own holder), so they had no
   gap between them at all. Give every nav-link-holder breathing room
   between its children, and a touch more horizontal padding on each link
   overall so the whole nav doesn't feel cramped. */
.nav-link-holder {
  gap: 22px;
}
.nav-link {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ---------- Buttons ---------- */
.button.w-button,
a.button,
.no-borders {
  cursor: pointer;
}

/* ---------- Event / contact form: one field per line, always ---------- */
.vwc-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.vwc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vwc-field-label {
  color: #8fa2a0;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 12px;
  font-weight: 500;
}

.vwc-input {
  width: 100%;
  box-sizing: border-box;
  background-color: #1a1b1c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vwc-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.vwc-input:focus {
  outline: none;
  border-color: #008a40;
  background-color: #202122;
}

.vwc-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: Poppins, sans-serif;
}

/* ---------- Scroll-reveal (see /js/reveal.js) ----------
   The JS adds the "reveal" class itself right before it starts observing,
   so if the script ever fails to run, elements simply never get these
   rules applied and stay at their normal, visible default — unlike the
   old Webflow IX2 system this replaces. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Contact section footer spacing (desktop had a big gap) ---------- */
.contact-us-grid {
  margin-top: 4em;
}

@media screen and (max-width: 767px) {
  .contact-us-grid {
    margin-top: 2em;
  }
}