/* Booking — Google Calendar embed (V16, rendez-vous.html only).
   The frame sits on the white section as a quiet bordered surface;
   the fallback card reuses the standard .card component. */

.booking-embed {
  max-width: 880px;
}

.booking-frame {
  display: block;
  width: 100%;
  height: clamp(560px, 75vh, 760px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white, #FFFFFF);
}

.booking-fallback {
  max-width: 640px;
}

.booking-direct {
  margin-top: var(--s-3);
}

/* Narrow screens: Google stacks the embed's panes, so the same 560px floor
   that shows a full month on a laptop cut the grid mid-week on a phone and
   pushed the slot list into the iframe's own scroll. */
@media (max-width: 640px) {
  .booking-frame { height: clamp(620px, 88svh, 820px); }
}