/* ============================================================================
   Aurelia Luxe — v3.38
   Loads last, after v337.

   BUG — Homepage hero renders noticeably shorter than the full-bleed photo
   it should be, cropping the uploaded 1440×810 (desktop) / 390×844 (mobile)
   hero image instead of showing it full and grand.

   Root cause (measured): `.hl-header` is `position: fixed` (72px tall on
   desktop, 64px on mobile) — it does NOT take up space in normal document
   flow, and `.hl-main` already carries `padding-top: 0` on the homepage.
   So the hero already starts flush at the real top of the page with
   nothing to compensate for.

   Despite that, main.css still applies a leftover "pull hero up to sit
   behind the header" hack:
       .hl-hero { margin-top: -72px !important; padding-top: 72px !important; }
       body:has(.hl-announce) .hl-hero { margin-top: -108px; padding-top: 108px; }
   The padding-top happens to cancel the margin-top for total *height*
   (box-sizing: border-box), but the margin-top still shifts the whole box
   upward by 72–108px relative to the viewport. Since nothing pulls the
   rest of the page down to compensate, the hero's bottom edge — and with
   it, roughly the bottom 72–108px of the hero photograph — ends up shifted
   off the top of the viewport and is never seen. The next section then
   arrives 72–108px earlier than it should, which is exactly the "hero
   looks smaller than it should" symptom.

   Fix: zero out the leftover margin/padding hack so the hero box sits
   exactly at the true top of the page with no vertical offset. The fixed
   header still floats on top of the photo via z-index (that's normal,
   intentional site chrome and isn't "cropping" anything — the header is
   translucent/blurred and the image continues underneath it), but the
   hero's own box — and therefore the visible photograph — is restored to
   its full min-height: 100svh (100dvh on mobile, see below), matching the
   full 1440×810 / 390×844 source frame.

   Also nudges the hero content's own bottom padding down slightly so the
   tagline + booking widget sit a touch lower, giving the photo above them
   a little more breathing room without shrinking the hero box itself.
============================================================================ */

.hl-hero,
body.hluxe-homepage .hl-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.hl-announce) .hl-hero,
body.hluxe-homepage:has(.hl-announce) .hl-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Use the small viewport height consistently so mobile browser chrome
   (address bar show/hide) can't reintroduce a size jump; matches the
   --hl-stable-vh approach already used by scroll-stability.css. */
.hl-hero {
  min-height: 100svh !important;
  height: auto !important;
}

/* Let the tagline + booking widget ride a little lower inside the hero,
   so more of the photo shows above them, without changing the hero box's
   own height. */
.hl-hero__content {
  padding-bottom: 1.5rem !important;
}

@media (max-width: 900px) {
  .hl-hero__content {
    padding-bottom: 1rem !important;
  }
}