/* ==============================================================
   B3 — Booking hero

   Centred stack with the car bleeding behind it, where §18 is a
   two-column grid with the car AS a column. The practical difference
   is that nothing here depends on the image existing: remove it and
   the content is still centred and correct.
   ============================================================== */

.bookinghero {
  position: relative;
  /* Clips the bleed. The car is deliberately larger than the section
     and anchored past its corner, so without this it would extend the
     page rather than run off the edge of the band. */
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--booking-pad-block);
}

/* Deliberately NOT position:relative. The car is anchored to the
   SECTION so it can run off the page edge; making this a containing
   block pinned it to the centred column instead, 36px shy of the edge
   and not bleeding at all. .bookinghero__content carries the stacking
   context, so nothing is lost. */
.bookinghero__inner {
  max-width: var(--booking-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Above the car, and its own stacking context so the bar's focus
   ring cannot end up underneath the image. */
.bookinghero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}


/* --- Heading ------------------------------------------------------ */

.bookinghero__heading {
  margin: 0 0 var(--booking-heading-gap);
  font-size: var(--text-section-heading);
  line-height: var(--leading-display);
  color: var(--color-heading-display);
}

/* Each line is a block, so the break is a decision rather than a
   wrapping accident. The space between them in the markup is for the
   accessible name and collapses to nothing here. */
.bookinghero__heading-line { display: block; }


/* --- Booking bar -----------------------------------------------------
   Moved to bookingform.css (§30): the free-text location field this
   used to hold was replaced by a fixed branch select, ported in as
   its own component rather than patched in place. .bookingform
   handles its own responsive layout via container queries, so the
   §B4 breakpoint that used to live here (grep history if it's ever
   needed again) is gone too — nothing left in this file depends on
   viewport width.
   --------------------------------------------------------------------- */


/* --- Rating --------------------------------------------------------
   Logo + stars removed by request — text-only now, so there is
   nothing left to separate with a margin instead of a flex gap.
   --------------------------------------------------------------------- */

.bookinghero__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--booking-rating-gap);
}

.bookinghero__rating-text {
  margin: 0;
  font-size: var(--text-booking-rating);
  line-height: var(--leading-tight);
}

.bookinghero__rating-count { font-weight: var(--weight-bold); }


/* --- Car ------------------------------------------------------------
   Anchored past the bottom-right corner so it runs off both edges,
   and inert to the pointer so it can overlap the content area without
   swallowing clicks meant for the bar.
   --------------------------------------------------------------------- */

/* B5. The car started 120px to the LEFT of the rating row's text,
   which has no background of its own — so black 14px type was sitting
   directly on a photograph. Contrast over an image is not a number you
   can check: the body of this car is near-white, but its windows,
   tyres and shadow are not, and the rating happened to land about 60%
   of the way down it.

   Rather than pick a smaller percentage and hope, the car is pinned to
   the right edge of the booking bar and runs from there off the page.
   The bar is the widest thing in the centred column, so clearing it
   clears the heading and the rating too, at every viewport.

   Note this is narrower than the composition, where the car does reach
   under the content. That composition also places the content block
   LEFT of centre, which is what makes the overlap safe there; the
   wireframe centres it. Shifting the content left would let the car
   grow back — that is a design decision, not an accessibility one. */
.bookinghero__media {
  position: absolute;
  left: calc(50% + var(--booking-bar-max) / 2);
  right: calc(-1 * var(--booking-media-bleed));
  bottom: calc(-1 * var(--booking-media-bleed));
  pointer-events: none;
}

.bookinghero__image {
  width: 100%;
  height: auto;
}


/* Pinning the car to the right of the bar (see B5) means it loses width
   as the section narrows, because the bar does not: 404px at 1440,
   206px at 1024, and 84px at 768 — a sliver of bodywork bleeding off
   the edge rather than a car. Below the width where it stops reading
   as one, the BLEED goes — not the car itself. It drops out of the
   absolute stack pinned to the bar and back into normal flow, where it
   was already the next sibling after .bookinghero__content: centred,
   capped at the bar's own width (the same "widest thing in the centred
   column" the bar already is), full width below that. The photo's own
   near-white ground matches --color-surface closely enough that it
   still reads as sitting directly on the page, not in a frame — no
   border or card needed to make that work at this size either. */
@media (max-width: 1049px) {

  .bookinghero__media {
    position: static;
    margin-top: var(--booking-rating-gap);
  }

  .bookinghero__image {
    max-width: var(--booking-bar-max);
    margin-inline: auto;
  }
}