/* THE EAGLE — edge-to-edge Home hero and legible light controls on Dark theme.
   Loaded last; tightly scoped to avoid disturbing booking, header or gallery layout. */

/* Legacy 16:9 + min-height combination made the hero 560px on a 390px
   screen and 1600px on a 1640px screen. Explicit width wins now. */
.page-view[data-page="home"] > section.hero,
.page-view[data-page="home"] section.hero {
  position:relative !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:auto !important;
  height:clamp(650px, 56.25vw, 900px) !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
}
.page-view[data-page="home"] .hero-split,
.page-view[data-page="home"] .hero-shade {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
}
.page-view[data-page="home"] .hero-split .hero-image {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
}
.page-view[data-page="home"] .hero-content {
  position:relative !important;
  z-index:2 !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:1320px !important;
  min-width:0 !important;
  margin:0 auto !important;
}
.page-view[data-page="home"] .hero-index {
  display:none !important;
}
@media(max-width:700px) {
  .page-view[data-page="home"] > section.hero,
  .page-view[data-page="home"] section.hero {
    height:max(700px, 85svh) !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }
  .page-view[data-page="home"] .hero-content {
    max-width:100% !important;
  }
}

/* Studio: white feature chips must use dark foreground/icons in Dark mode. */
:root[data-theme="dark"] .page-view[data-page="stay"] .studio-overview .chips > span {
  background:#f7f7f3 !important;
  border-color:#d6d8d3 !important;
  color:#1a1d1b !important;
  text-shadow:none !important;
}
:root[data-theme="dark"] .page-view[data-page="stay"] .studio-overview .chips > span *,
:root[data-theme="dark"] .page-view[data-page="stay"] .studio-overview .chips > span i,
:root[data-theme="dark"] .page-view[data-page="stay"] .studio-overview .chips > span svg {
  color:#1a1d1b !important;
  fill:currentColor !important;
  opacity:1 !important;
}

/* Gallery lightbox: existing white navigation squares were white-on-white. */
:root[data-theme="dark"] #lightbox #close-photo,
:root[data-theme="dark"] #lightbox #previous-photo,
:root[data-theme="dark"] #lightbox #next-photo {
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #d4d4d4 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
:root[data-theme="dark"] #lightbox #close-photo *,
:root[data-theme="dark"] #lightbox #previous-photo *,
:root[data-theme="dark"] #lightbox #next-photo * {
  color:#111827 !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
:root[data-theme="dark"] #lightbox #close-photo:hover,
:root[data-theme="dark"] #lightbox #previous-photo:hover,
:root[data-theme="dark"] #lightbox #next-photo:hover {
  background:#fff8e1 !important;
  color:#111827 !important;
  border-color:#b69a37 !important;
}
:root[data-theme="dark"] #lightbox #close-photo:focus-visible,
:root[data-theme="dark"] #lightbox #previous-photo:focus-visible,
:root[data-theme="dark"] #lightbox #next-photo:focus-visible {
  outline:3px solid #dfbf54 !important;
  outline-offset:2px !important;
}
/* Modal buttons are just as legible in Light mode. */
:root[data-theme="light"] #lightbox #close-photo,
:root[data-theme="light"] #lightbox #previous-photo,
:root[data-theme="light"] #lightbox #next-photo {
  color:#111827 !important;
  background:#fff !important;
}

/* EAGLE-4K-TOP-20261025 — 4K images anchored to the top on every screen. */
.page-view[data-page="home"] section.hero {
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  height:clamp(760px, calc(100svh - 78px), 1060px) !important;
  aspect-ratio:auto !important;
}
.page-view[data-page="home"] .hero-split .hero-image,
.page-view[data-page="home"] .hero-split .hero-building-side,
.page-view[data-page="home"] .hero-split .hero-building-front,
.page-view[data-page="home"] .hero-split .hero-beach,
.page-view[data-page="home"] .hero-split .hero-balcony {
  object-position:50% 0% !important;
  transform-origin:center top !important;
}
@media (max-width:700px) {
  .page-view[data-page="home"] section.hero {
    height:max(790px, calc(100svh - 76px)) !important;
    min-height:0 !important;
  }
  .page-view[data-page="home"] .hero-split .hero-image {
    object-position:50% 0% !important;
  }
}