/* ==========================================================================
   Booking CTA — warm ivory with palm light
   ========================================================================== */

.booking {
  position: relative;
  background: var(--nude);
  overflow: hidden;
  isolation: isolate;
}
.booking__bg {
  position: absolute;
  inset: 0;
  z-index: -2;   /* the ivory veil in ::before sits between this and the copy */
}
.booking__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 42%;
  transform: translate3d(0, calc((var(--p, .5) * 2 - 1) * -3%), 0) scale(1.05);
  will-change: transform;
}
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, var(--ivory) 10%, rgba(246, 240, 231, .95) 40%, rgba(246, 240, 231, .58) 70%, rgba(246, 240, 231, .3) 100%);
}

.booking__inner {
  padding-block: clamp(4.5rem, 10vw, 9rem);
  display: grid;
  gap: 1.75rem;
  max-width: 46rem;
}
.booking__title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -0.02em;
}
.booking__title span { display: block; }
.booking__text { max-width: 34ch; color: var(--text-on-ivory-mute); }
.booking__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.booking__note {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-ivory-mute);
}

@media (max-width: 760px) {
  .booking::before {
    background: linear-gradient(180deg, rgba(246, 240, 231, .97) 34%, rgba(246, 240, 231, .82) 70%, rgba(246, 240, 231, .5) 100%);
  }
  .booking__bg img { object-position: 46% 40%; }
  .booking__actions .btn { flex: 1 1 100%; }
}