/* ===========================================================
   IPH HOMEPAGE HERO v1.2 — panorama
   v1.2 (13 Nov 2026, Dewa): desktop hero is as tall as the photo itself (2048×768 → 37.5% of the width, about half the
   screen) so the photo is never stretched or blown up; phones show the whole portrait photo (resort front in view)
   with the search card below it, clear of the chat button.
   Scoped to .iph-hero--pano so it never clashes with the Oct 2026 timelapse hero (.iph-hero.home-hero).
   Image media queries MUST match the preload media queries in inc/iph-header.php.
   =========================================================== */
.iph-hero--pano{
  position:relative;overflow:visible;           /* search suggestions may drop below the hero */
  width:100%;
  height:37.5vw;                     /* = the photo's own shape (768/2048): no crop, no stretching */
  min-height:520px;                  /* room for the nav + search on smaller laptops (photo then crops a little at the sides) */
  max-height:100vh;max-height:100svh;
  background-color:#0B1126;
  background-image:url(../img/hero-desktop-2048.jpg);
  background-image:image-set(url(../img/hero-desktop-2048.webp) type("image/webp"),url(../img/hero-desktop-2048.jpg) type("image/jpeg"));
  background-size:cover;background-position:center 62%;background-repeat:no-repeat;
}
/* Portrait screens (phones, tablets upright): portrait image */
@media (orientation:portrait){
  /* Phones / upright tablets: the whole portrait photo at its own shape (1097×1399 → 127.5% of the width),
     then the search card underneath, overlapping only the water at the bottom of the photo */
  .iph-hero--pano{
    height:auto;min-height:0;max-height:none;
    padding-top:calc(127.5vw - 150px);padding-bottom:24px;
    background-color:#172132;            /* = the bottom edge of the photo */
    background-size:100% auto;background-position:center top;
    background-image:url(../img/hero-mobile-750.jpg);
    background-image:image-set(url(../img/hero-mobile-750.webp) type("image/webp"),url(../img/hero-mobile-750.jpg) type("image/jpeg"));
  }
}
@media (orientation:portrait) and (min-resolution:2.5dppx), (orientation:portrait) and (min-width:501px){
  .iph-hero--pano{
    background-image:url(../img/hero-mobile-1097.jpg);
    background-image:image-set(url(../img/hero-mobile-1097.webp) type("image/webp"),url(../img/hero-mobile-1097.jpg) type("image/jpeg"));
  }
}

/* Soft dark gradient on the top 34% so the white nav stays readable */
.iph-hero--pano::before{content:"";position:absolute;inset:0 0 auto;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,28,.62),rgba(7,11,28,0))}

/* H1 kept for SEO / screen readers, never shown */
.iph-hero--pano h1.iph-hero-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;font-size:1px!important;color:transparent!important}

/* Search cluster (tabs + AI search bar): bottom-centre over the water, max 720px */
/* centred with left/right + margin (no transform: a transform would trap the Filters popup inside this box) */
.iph-hero--pano .iph-hero-search{position:absolute;z-index:4;left:0;right:0;bottom:48px;margin:0 auto;
  width:calc(100% - 32px);max-width:720px}
@media (max-width:991.98px){.iph-hero--pano .iph-hero-search{bottom:max(24px,env(safe-area-inset-bottom,0px));width:calc(100% - 24px)}}
/* Portrait: the search card sits in the page flow under the photo (see the padding on .iph-hero--pano) */
@media (orientation:portrait){
  .iph-hero--pano .iph-hero-search{position:relative;bottom:auto}
  /* fade the photo's bottom edge into the background colour, so the photo has no hard line behind the card */
  .iph-hero--pano::after{content:"";position:absolute;left:0;right:0;top:calc(127.5vw - 90px);height:90px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(23,33,50,0),#172132)}
}

/* Undo the homepage's older "search hangs below the hero" rules (front page <style>, Oct 2026) */
.iph-hero--pano .homez-search-container{
  position:relative!important;z-index:4;width:100%!important;height:auto!important;margin:0!important}
.iph-hero--pano .homez-search-container > .herocnt{
  position:static!important;top:auto!important;bottom:auto!important;left:auto!important;transform:none!important;
  width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0!important}

/* No dark/blue panel behind the tabs + search card (theme's mobile search box):
   clear every wrapper between the hero and the tabs, keep the tabs and the white card as they are */
.iph-hero--pano .iph-hero-search .homez-search-container,
.iph-hero--pano .iph-hero-search .herocnt,
.iph-hero--pano .iph-hero-search :has(> #myTab),
.iph-hero--pano .iph-hero-search :has(#myTab):not(.iph-hero-search){
  background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:0!important;padding-right:0!important}
@media (max-width:991.98px){
  .iph-hero--pano .iph-hero-search .herocnt,
  .iph-hero--pano .iph-hero-search :has(> #myTab){padding-top:0!important;padding-bottom:0!important}
}

/* Filters popup (Bootstrap modal inside the search form): while it is open, remove everything on its wrappers
   that would trap a position:fixed element (transform, filter, backdrop-filter) or keep it under the dark backdrop (z-index).
   Without this the popup is clipped to the search bar and dimmed. */
.iph-hero--pano:has(.modal.show,[aria-modal="true"]) .iph-hero-search,
.iph-hero--pano :has(> .modal.show),
.iph-hero--pano :has(.modal.show),
.iph-hero--pano :has([aria-modal="true"]){
  transform:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  z-index:auto!important;contain:none!important;will-change:auto!important;perspective:none!important}