/* ============================================================================
   HOMEPAGE HERO — composition v3 (2026-09-15)
   Loaded AFTER home-v2.css and deliberately kept separate from it: every rule
   here overrides a v2 rule by cascade order at equal specificity, so v2 stays
   untouched and rollback is removing this file from $page_styles in index.php.

   Why: the v2 layout parked the booking panel (440px wide, ~560px tall) over the
   right third of the frame — exactly where the new hero photo's subject is
   (guest stepping out, chauffeur at the open door, x ≈ 55–85%). The panel hid
   the reason the photo was chosen.

   What changes:
     ≥1024px  copy top-left in a narrow column, the frame open to the right, and
              the booking form as a FULL-WIDTH THIN BAR pinned to the foot of the
              hero — pickup · destination · date · time · button in one row,
              tabs above, trust line beneath. Same pattern laxtogo.com uses.
     ≤1023px  the media band grows from a 128–260px strip (which on short phones
              showed only wheels under the fixed header) to roughly half the
              viewport, with a soft fade into the black page at its foot.
     all      a slow Ken Burns drift on the photo (the same device the Disneyland
              and LAX pages use), on the <picture> wrapper so it composes with
              the img's one-time 1.035→1 settle. Off under reduced-motion.

   The form's IDs, names, action and .hp-booker-* classes are a frozen booking
   contract — nothing here renames or restructures them; only layout changes.
   ========================================================================== */

/* ── Photo drift — all widths ─────────────────────────────────────────────── */
.l4h-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 60% 50%;
  will-change: transform;
  animation: l4hHeroDrift 34s ease-in-out infinite alternate;
}
@keyframes l4hHeroDrift {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .l4h-hero__media picture { animation: none; transform: none; will-change: auto; }
}

/* ── Desktop: open frame + booking bar at the foot ────────────────────────── */
@media (min-width: 1024px) {
  .l4h-hero {
    align-items: flex-start;
    min-height: 100svh;
    padding-top: clamp(76px, 9.5vh, 104px);
    padding-bottom: clamp(16px, 2vw, 26px);
  }
  /* One column. Rows: eyebrow, h1, sub, ctas, [spacer 1fr], form.
     Budgeted to fit a 900px-tall viewport with the whole two-row bar (trust
     line included) above the fold: header 76 + copy ≈ 420 + bar ≈ 250 + foot 16. */
  .l4h-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: 0;
    align-items: start;
    min-height: calc(100svh - clamp(76px, 9.5vh, 104px) - clamp(16px, 2vw, 26px));
  }
  .l4h-hero__content { display: contents; }
  .l4h-hero__eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
  .l4h-hero h1 {
    grid-column: 1; grid-row: 2;
    max-width: 12ch;
    font-size: clamp(2rem, 3.3vw, 3.05rem);
    margin-bottom: 12px;
  }
  .l4h-hero__sub  { grid-column: 1; grid-row: 3; max-width: 44ch; margin-bottom: 8px; }
  .l4h-hero__ctas { grid-column: 1; grid-row: 4; margin-top: 4px; }

  #hpBookerForm {
    grid-column: 1;
    grid-row: 6;
    align-self: end;
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }
  #hpBookerForm .hp-booker-tabs { margin-bottom: 6px; }
  /* The bar: two compact rows. Row 1 = pickup + destination at full width, so a
     formatted Places address ("LAX airport (LAX), World Way, Los Angeles, CA
     90045, USA" — ~470px at 16px) reads whole; row 2 = date + time. The button
     spans both rows on the right. When the Hourly tab hides Destination and
     shows Duration (JS toggles .is-hidden), Duration auto-places into the
     second cell of row 1 — only the button is placed explicitly, so nothing
     can collide. */
  /* Six equal tracks, everything placed by SPAN only (no fixed positions), so
     auto-placement lays out both modes correctly:
       row 1  pickup ×3  · destination ×3     (Hourly: pickup ×3 · duration ×3)
       row 2  date ×2    · time ×2 · button ×2
     Addresses get the full bar width; the button is a normal-height control. */
  #hpBookerForm .hp-booker-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
  }
  #hpBookerForm .hp-booker-field-lg,
  #hpBookerForm .hp-booker-field-hours { grid-column: span 3; }
  #hpBookerForm .hp-booker-field-sm    { grid-column: span 2; }
  #hpBookerForm .hp-booker-field { padding: 10px 16px; }
  #hpBookerForm .hp-booker-submit {
    grid-column: span 2;
    grid-row: auto;
    align-self: stretch;
    margin-top: 0;
    padding: 0 28px;
    min-height: 0;
    white-space: nowrap;
  }
  #hpBookerForm .hp-booker-trust { grid-column: 1 / -1; }

  /* Frame focus: the subject is right of centre and the bar covers the bottom
     ~22% of the hero, so keep faces (y ≈ 30–40%) in the open middle band. */
  .l4h-hero__media img { object-position: 62% 48%; }

  /* Scrim: heavy on the left column under the copy and along the foot under the
     bar; near-clear through the middle-right where the door moment lives. */
  .l4h-hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,8,8,.74) 0%, rgba(8,8,8,.24) 24%, rgba(8,8,8,.10) 52%, rgba(8,8,8,.70) 80%, rgba(8,8,8,.95) 100%),
      linear-gradient(90deg,  rgba(8,8,8,.82) 0%, rgba(8,8,8,.44) 34%, rgba(8,8,8,.04) 60%, rgba(8,8,8,.08) 100%);
  }
}

/* ── Below desktop: a real image band with a soft foot ────────────────────── */
@media (max-width: 1023px) {
  .l4h-hero__media { inset: 0 0 auto 0; }
  /* Fixed header sits over the top ~80px; fade the band into it, and fade its
     foot into the page so the edge the strip used to have is gone. */
  .l4h-hero__media::before,
  .l4h-hero__media::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 1;
  }
  .l4h-hero__media::before { top: 0; height: 96px;
    background: linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,0) 100%); }
  .l4h-hero__media::after  { bottom: 0; height: 34%;
    background: linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,.55) 55%, #080808 100%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .l4h-hero__media { aspect-ratio: 100 / 52; height: auto; }
  .l4h-hero__media img { object-position: 56% 50%; }
  .l4h-hero__inner { padding-top: calc(52vw + 8px); }
}
/* A 375-wide band this tall shows only ~46% of the frame's width, so centre it
   on the door pair (guest x ≈ 55–65%, chauffeur x ≈ 75–85%) rather than the car. */
@media (max-width: 767px) {
  .l4h-hero__media { height: clamp(300px, 52svh, 480px); }
  .l4h-hero__media img { object-position: 67% 50%; }
  .l4h-hero__inner { padding-top: calc(clamp(300px, 52svh, 480px) + 6px); }
}
/* Short phones (≤700px tall). v2 used a 128px strip here to keep the CTA above
   the fold; under the fixed header that showed only wheels. The owner asked for
   the photo to show — so the band stays a real band and the CTA sits one short
   scroll below. */
@media (max-width: 767px) and (max-height: 700px) {
  .l4h-hero__media { height: clamp(240px, 42svh, 320px); }
  .l4h-hero__media img { object-position: 66% 46%; }
  .l4h-hero__inner { padding-top: calc(clamp(240px, 42svh, 320px) + 6px); }
}

/* ── Booking bar polish (2026-09-15, pass 2) ─────────────────────────────────
   Paired with assets/js/home-hero-v3.js. Contract untouched: only how the
   fields present and how the button responds. */

/* Fields: the control is the whole field. Long values read to the end. */
#hpBookerForm .hp-booker-field { min-width: 0; cursor: text; }
#hpBookerForm .hp-booker-field input,
#hpBookerForm .hp-booker-field select {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* No font-size transition: the script measures scrollWidth synchronously
     after each step, and a transition made every step read as "still too
     wide", dropping text to the minimum size every time. */
}
/* Stepped by the script only while the field is not focused. Focus always
   edits at 16px, which is also what keeps iOS from auto-zooming. */
#hpBookerForm .hp-booker-field input.is-fit-1 { font-size: 15px; }
#hpBookerForm .hp-booker-field input.is-fit-2 { font-size: 14px; letter-spacing: -0.005em; }
#hpBookerForm .hp-booker-field input.is-fit-3 { font-size: 13px; letter-spacing: -0.01em; }
#hpBookerForm .hp-booker-field input.is-fit-4 { font-size: 12px; letter-spacing: -0.012em; }
#hpBookerForm .hp-booker-field input:focus { font-size: 16px; letter-spacing: 0; }

/* Focus is visible at the field, not just the caret. */
#hpBookerForm .hp-booker-field:focus-within {
  border-color: rgba(247,200,107,.55);
  box-shadow: 0 0 0 3px rgba(247,200,107,.14);
}
#hpBookerForm .hp-booker-field input:focus,
#hpBookerForm .hp-booker-field select:focus { outline: none; }

/* (Desktop column widths live in the composition block above — the two-row
   bar. Nothing here may redefine grid-template-columns or it wins by order.) */
@media (min-width: 1024px) {
  #hpBookerForm .hp-booker-field-sm { padding-inline: 14px; }
}

/* The button: a slow breath, not a blink. home-v2.js adds .l4h-booking-3d to
   the form, whose CSS owns the button's ::after (a one-time gold sweep) and sets
   overflow:hidden — so the breath lives on ::before, INSIDE the button, as a
   soft brightening of the fill. Opacity-only (compositor-friendly), ~2.8s
   cycle, paused while hovered or focused so direct feedback owns the moment.
   Press responds on pointer-down. */
#hpBookerForm .hp-booker-submit {
  position: relative;
  isolation: isolate;
  transition: transform 120ms ease-out, box-shadow 160ms ease-out, filter 160ms ease-out;
}
#hpBookerForm .hp-booker-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;                 /* above the button's gradient, below its label */
  animation: l4hCtaBreathe 2.8s ease-in-out infinite;
}
@keyframes l4hCtaBreathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
#hpBookerForm .hp-booker-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 26px -10px rgba(247,200,107,.55);
}
/* Stop (not pause) on hover/focus: a paused animation would freeze the glow
   mid-breath; `none` lets the declared opacity:0 take over cleanly. */
#hpBookerForm .hp-booker-submit:hover::before,
#hpBookerForm .hp-booker-submit:focus-visible::before { animation: none; opacity: 0; }
#hpBookerForm .hp-booker-submit:active {
  transform: translateY(0) scale(.985);
  transition-duration: 70ms;
}
#hpBookerForm .hp-booker-submit:focus-visible {
  outline: 2px solid rgba(247,200,107,.9);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #hpBookerForm .hp-booker-submit::before { animation: none; opacity: 0; }
  #hpBookerForm .hp-booker-submit,
  #hpBookerForm .hp-booker-field input { transition: none; }
}

/* Laptop-height desktops (1366×768, 1280×720): the same composition, denser,
   so the whole bar — trust line included — clears the fold. Copy is clamped to
   two lines here; the full sentence lives on taller screens. */
@media (min-width: 1024px) and (max-height: 800px) {
  .l4h-hero { padding-top: 54px; padding-bottom: 10px; }
  .l4h-hero__inner { min-height: calc(100svh - 54px - 10px); }
  .l4h-hero__eyebrow { margin-bottom: 6px; padding: 5px 12px; }
  /* 16ch instead of 12ch: at 1200–1366 wide the 12ch cap wrapped the headline
     to five lines, which alone pushed the bar under the fold. */
  .l4h-hero h1 { font-size: clamp(1.8rem, 2.7vw, 2.3rem); margin-bottom: 6px; max-width: 16ch; }
  #hpBookerForm .hp-booker-tab { padding: 8px 14px; }
  .l4h-hero__sub {
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .l4h-hero__ctas { margin-top: 0; }
  #hpBookerForm { margin-top: 6px; }
  #hpBookerForm .hp-booker-tabs { margin-bottom: 2px; }
  #hpBookerForm .hp-booker-field { padding: 6px 14px; }
  #hpBookerForm .hp-booker-trust { padding-top: 2px; font-size: 10px; }
  .l4h-hero h1 { margin-bottom: 6px; }
  .l4h-hero__eyebrow { padding: 5px 12px; }
}