/* ── Proeverijen page ────────────────────────────────────────────────────── */

.page-proeverijen-header {
  padding: 80px var(--padding-page) 56px;
  border-bottom: var(--border-fine);
}

.page-proeverijen-title {
  font-family: var(--font-serif);
  font-size: var(--text-page-title);
  font-weight: 400;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 16px;
}

.page-proeverijen-intro {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 600px;
}

/* ── Tasting listings — reuses .tasting-grid and .tasting-card from tasting.css ── */

.page-proeverijen-listings {
  padding: 0 var(--padding-page) 72px;
}

/* ── Booking form ────────────────────────────────────────────────────────── */

.page-proeverijen-booking {
  background: var(--bg-paper);
  padding: var(--section-gap) var(--padding-page);
  scroll-margin-top: 80px;
}

.booking-form-header {
  max-width: 560px;
  margin-bottom: 48px;
}

.booking-form-title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 16px;
}

.booking-form-header p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.page-proeverijen-booking .ww-form {
  max-width: 100%;
}

/* ── Formulier + foto naast elkaar ───────────────────────────────────────── */
.booking-layout {
  display: flex;
  gap: 64px;
  align-items: center;
  max-width: 1180px;
}

.booking-main {
  flex: 1 1 620px;
  min-width: 0;
}

.booking-photo {
  flex: 1 1 380px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #c4ad84;
  margin-left: 32px;
}

.booking-photo img,
.booking-photo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-proeverijen-header {
    padding: 48px var(--padding-mobile) 32px;
  }

  .page-proeverijen-title {
    font-size: var(--text-page-title-md);
  }

  .page-proeverijen-listings {
    padding: 0 var(--padding-mobile) 48px;
  }

  .page-proeverijen-booking {
    padding: var(--section-gap-mobile) var(--padding-mobile);
  }

  .booking-form-title {
    font-size: 32px;
  }

  .booking-layout {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .booking-photo {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-left: 0;
    order: -1; /* foto boven het formulier op mobiel */
  }
}