/* ============================================================================
   HOMEPAGE HERO — booking card (2026-10-20)
   Loaded after home-hero-v3.css; rollback = remove it from $page_styles.
   Owner: on a computer the booking form sits on the right; on a phone it is the
   first thing a visitor sees. Same pattern as Uber, Blacklane and Bookings Lane.
     ≥1024px  copy left, form as a card on the right (vertically centred).
     ≤1023px  short headline, then the form at once; the photo becomes the
              backdrop behind both instead of a 300–480px band above them.
   The form's IDs, names, action and .hp-booker-* classes (the booking contract)
   are unchanged. Date and time are pop-up pickers (booking-widget.js, pickerOnly).
   ========================================================================== */

/* ── Card (all widths) ───────────────────────────────────────────────────── */
#hpBookerForm {
  background: rgba(14, 13, 11, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(233, 201, 121, .26);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.hp-booker-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.005em;
}
#hpBookerForm .hp-booker-hint { display: none; }
#hpBookerForm .hp-booker-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0 0 12px;
}
#hpBookerForm .hp-booker-tab { justify-content: center; text-align: center; padding-inline: 8px; white-space: nowrap; }
#hpBookerForm .hp-booker-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#hpBookerForm .hp-booker-field-lg,
#hpBookerForm .hp-booker-field-hours { grid-column: 1 / -1; }
#hpBookerForm .hp-booker-field-sm    { grid-column: span 1; padding: 8px 12px; }
#hpBookerForm .hp-booker-submit      { grid-column: 1 / -1; min-height: 56px; margin-top: 4px; font-size: 16px; letter-spacing: .01em; }
#hpBookerForm .hp-booker-trust       { grid-column: 1 / -1; justify-content: center; margin-top: 2px; }

/* Date / time buttons, styled to sit in the dark field */
#hpBookerForm .hp-pick {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0;
  margin: 2px 0 0; padding: 0;
  background: none; border: 0;
  color: #fff; font: inherit; text-align: left; cursor: pointer;
}
#hpBookerForm .hp-pick .l4rbw__pick-ic { width: 28px; height: 28px; background: rgba(233, 201, 121, .14); color: #E9C979; }
#hpBookerForm .hp-pick .l4rbw__pick-v  { font-size: 15px; color: #fff; }
#hpBookerForm .hp-pick .l4rbw__pick-s  { color: rgba(255, 255, 255, .62); opacity: 1; }
#hpBookerForm .hp-pick:focus-visible   { outline: 2px solid #F3D481; outline-offset: 4px; border-radius: 6px; }
#hpBookerForm .hp-booker-field-sm { cursor: pointer; }

/* ── Desktop: copy left, card right ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .l4h-hero { align-items: center; }
  .l4h-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  .l4h-hero__eyebrow { grid-column: 1; grid-row: 2; justify-self: start; }
  .l4h-hero h1       { grid-column: 1; grid-row: 3; max-width: 13ch; font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
  .l4h-hero__sub     { grid-column: 1; grid-row: 4; }
  .l4h-hero__ctas    { grid-column: 1; grid-row: 5; }
  #hpBookerForm {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    margin-top: 0;
  }
  #hpBookerForm .hp-booker-field { padding: 9px 14px; }
  /* The card sits over the right of the frame: darken that side a little so it reads. */
  .l4h-hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,8,8,.70) 0%, rgba(8,8,8,.20) 26%, rgba(8,8,8,.20) 70%, rgba(8,8,8,.85) 100%),
      linear-gradient(90deg, rgba(8,8,8,.84) 0%, rgba(8,8,8,.40) 40%, rgba(8,8,8,.18) 62%, rgba(8,8,8,.46) 100%);
  }
}
@media (min-width: 1024px) and (max-height: 800px) {
  #hpBookerForm { padding: 16px 18px; }
  .hp-booker-title { margin-bottom: 8px; font-size: 17px; }
  #hpBookerForm .hp-booker-tabs { margin-bottom: 8px; }
  #hpBookerForm .hp-booker-submit { min-height: 50px; }
}

/* ── Tablet and phone: headline, then the form, photo as backdrop ───────── */
@media (max-width: 1023px) {
  .l4h-hero { min-height: 0; align-items: flex-start; padding-top: 76px; padding-bottom: 28px; }
  .l4h-hero__media { inset: 0 !important; height: auto !important; aspect-ratio: auto !important; }
  .l4h-hero__media::after { height: 60%; }
  .l4h-hero__scrim { display: block; background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.70) 45%, rgba(8,8,8,.92) 100%); }
  .l4h-hero__inner { padding-top: 0 !important; }
  .l4h-hero__content { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
  .l4h-hero__eyebrow { display: none; }
  .l4h-hero h1 { order: 1; font-size: clamp(1.7rem, 6.6vw, 2.4rem); line-height: 1.12; margin: 6px 0 14px; }
  #hpBookerForm { order: 2; margin: 0; }
  .l4h-hero__sub  { order: 3; margin: 18px 0 8px; font-size: 15px; }
  .l4h-hero__ctas { order: 4; }
}
@media (max-width: 420px) {
  #hpBookerForm { padding: 16px 14px; border-radius: 18px; }
  #hpBookerForm .hp-booker-tab { font-size: 11px; letter-spacing: .08em; padding-inline: 4px; }
  #hpBookerForm .hp-booker-field-sm { padding: 8px 10px; }
  #hpBookerForm .hp-pick { gap: 8px; }
  #hpBookerForm .hp-pick .l4rbw__pick-ic { width: 26px; height: 26px; }
  #hpBookerForm .hp-pick .l4rbw__pick-v { font-size: 14px; }
}
/* `hidden` still lets focus/scrollIntoView slide the hero sideways; `clip` cannot be scrolled. */
.l4h-hero { overflow: clip; }