.booking {
  background: var(--color-theme);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--space-xl) + var(--header-height, 4.75rem)) var(--space-section-x) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.booking__eyebrow {
  font-size: var(--fs-value);
  color: var(--color-cream);
  text-transform: uppercase;
}

.booking__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero-title);
  line-height: 1.1;
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-top: 0.15em;
}

.booking__intro {
  order: 0;
}

.booking__details {
  /* Mobile order is widget, then details, then the event card (Figma) —
     desktop resets this back to DOM order (details, widget, event) to
     match the 3-column grid below. */
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.booking__detail {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.booking__label {
  font-size: var(--fs-label);
  color: var(--color-cream);
  text-transform: uppercase;
  opacity: 0.7;
}

.booking__value {
  font-size: var(--fs-value);
  color: var(--color-cream);
  text-transform: uppercase;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  overflow-wrap: anywhere;
}

.booking__value img {
  width: 1em;
  height: 1em;
}

.booking__value--email {
  text-transform: lowercase;
}

.booking__widget {
  order: 1;
  /* The DesignMyNight embed renders its own white card UI (styled via its
     own stylesheet param) — this is just a width-constrained slot for it,
     not a styled container of ours. */
  width: 100%;
  max-width: 32rem;
}

/* The widget's own stylesheet (onsass.designmynight.com, loaded from a
   <link> inside .booking__widget — later in the document than ours, so it
   can win ties without !important here) hard-codes #dmn-partner-widget to
   270px regardless of its container, which was leaving it narrower than
   this column and noticeably shorter than the other two columns beside
   it. Both overrides target their real element IDs directly (real DOM,
   not an iframe, so this is safe to do) rather than the .booking__widget
   wrapper, which was already full width. */
.booking__widget #dmn-partner-widget,
.booking__widget #dmn-widget-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* #dmn-widget-inner carries the widget's own white card background — a
   bigger fixed height (not "auto") reads as breathing room at the bottom
   of that same white card, so the wider box doesn't look short and squat
   next to the other two columns. Their stylesheet pins this to 475px —
   tried switching to height:auto + overflow:visible first, but their own
   stage-transition system turned out to rely on that fixed height +
   overflow:hidden for its positioning, and broke completely (the active
   stage collapsed to ~46px) the moment either was touched. A taller fixed
   px number keeps that mechanism intact. */
.booking__widget #dmn-widget-inner {
  height: 580px !important;
}

/* At genuinely large screens the grid column itself is wider than the
   270-ish px this widget was designed around — letting it fill that full
   column (fine at laptop widths, where the column is much narrower) reads
   as oversized. justify-self: center (set above) already centers it
   within the column once its own max-width is capped below the column's
   width again. */
@media (min-width: 1440px) {
  .booking__widget {
    max-width: 24rem;
  }
}

.booking__event-card {
  background: var(--color-cream);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  /* Figma breaks this out of the dark section entirely on mobile — full
     bleed to the screen edges and down to the bottom of the page, not a
     floating card. Desktop restores the small floating card below. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(var(--space-section-x) * -1);
  margin-right: calc(var(--space-section-x) * -1);
  margin-bottom: calc(var(--space-xl) * -1);
  padding: var(--space-xl) var(--space-section-x);
  border-radius: 0;
}

.booking__event-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.375rem);
  color: var(--color-olive);
  text-transform: uppercase;
}

.booking__event-body {
  font-size: var(--fs-eyebrow);
  color: var(--color-olive);
  line-height: 1.4;
}

/* Overrides the shared .btn--dark-text:hover (olive fill) just for this
   one CTA — scoped to this class rather than changing that shared rule,
   which other .btn--dark-text buttons site-wide still use as-is. */
.booking__event-cta:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-cream);
}

.booking__event-wrap {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.booking__event-badge {
  width: 16rem;
  height: auto;
}

@media (min-width: 1024px) {
  .booking {
    /* Feedback: the widget + side columns should all be visible on one
       screen, not run past it. min-height let the page grow taller than
       the viewport whenever the (fixed-height, third-party) booking
       widget needed more room than the surrounding chrome left for it —
       switch to a firm height and tighten that chrome (padding, title
       size, gaps) so there's enough room left for it to actually fit,
       the same "shrink the frame around it" approach as .home. */
    /* No overflow:hidden — the DesignMyNight widget's own height isn't
       under our control (a taller calendar month, browser zoom, a short
       laptop screen), so if it ever doesn't quite fit, this should
       gracefully scroll rather than silently clip/hide calendar days or
       the event card with no way to reach them. min-height, not a fixed
       height: a fixed height only sizes this section's own box — content
       taller than that (the widget, once its own height was increased)
       still overflowed past it with nothing forcing the page to grow, so
       it visually bled into the footer instead of pushing it down. */
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--space-md) + var(--header-height, 4.75rem)) var(--space-section-x) var(--space-md);
    /* .booking itself is the grid now (see below) — the title sits above
       just the details column, not above all 3, so the widget and badge
       columns start level with the title instead of below it. Named areas
       let the title (intro) and the address/hours/touch list (details)
       stack in column 1 while widget/event each span both rows as one
       tall column, all without needing separate markup per breakpoint —
       mobile still just stacks these 4 pieces via flex + order below. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro   widget event"
      "details widget event";
    align-items: start;
    gap: var(--space-lg);
  }

  .booking__title {
    /* --fs-hero-title (up to 100px) is sized for a full-bleed photo hero;
       here it's competing with the widget for vertical space, so it gets
       its own smaller cap. */
    font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  }

  .booking__intro {
    grid-area: intro;
  }

  .booking__details {
    grid-area: details;
  }

  .booking__widget {
    grid-area: widget;
    justify-self: center;
  }

  .booking__event-wrap {
    grid-area: event;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .booking__event-badge {
    /* Was trimmed to 11rem while the row's height was fought over via
       align-items: center (see .booking__grid) — now that columns stretch
       to a shared height instead of competing to be the tallest, there's
       room to size this back up. */
    width: 15rem;
  }

  .booking__event-card {
    width: auto;
    max-width: 24rem;
    margin: 0;
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
}