/* Full-screen, reversible framing of the owner's unmodified photographs.
   The oversized frame excludes the right-hand scrub and lower foreground.
   Keep this final override after all baseline/revision stylesheets. */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  max-height: none;
}

/* A single photo should scroll naturally with its section. Layered parallax
   belongs to the next revision, after sky and landscape are split. */
.hero .hero-scene {
  transform: none !important;
  will-change: auto;
}

.hero .hero-photo {
  inset: 0 auto auto 0;
  width: 137.931%; /* visible source width <= 2900 of 4000 pixels */
  height: 112.712%; /* exclude the lowest part of the 2536-pixel frame */
  max-width: none;
  object-fit: cover;
  object-position: left 70%;
}

.hero .hero-theme {
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1);
}

.hero-title { top: 38%; }
.hero .booking-bar {
  bottom: 18vh;
  bottom: 18svh;
  backdrop-filter: none;
}

/* Wide monitors need a little more sky to keep the entire moon visible. */
@media (min-aspect-ratio: 2/1) {
  .hero .hero-photo { object-position: left 60%; }
}

@media (max-width: 800px) {
  .hero .hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-day .hero-photo { object-position: 36% bottom; }
  .hero-night .hero-photo { object-position: 30% bottom; }
  .hero-title { top: 40%; }
  .hero .booking-bar { bottom: 14vh; bottom: 14svh; }
}

@media (max-width: 800px) and (orientation: landscape) {
  .hero .hero-photo {
    inset: 0 auto auto 0;
    width: 137.931%;
    height: 112.712%;
    object-position: left 60%;
  }
}

@media (min-width: 641px) and (max-height: 760px) {
  .hero-title { width: min(420px, 52svh); }
  .hero .booking-bar { bottom: 15vh; bottom: 15svh; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .hero-title { width: min(32vw, 240px); top: 40%; }
  .hero .booking-bar {
    grid-template-columns: 1fr 1fr .8fr 1fr;
    width: min(850px, calc(100% - 44px));
    padding: 16px;
    gap: 10px;
    bottom: 8vh;
    bottom: 8svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-theme { transition: none; }
}