/* ============================================================
   SUN HOUSE — RESPONSIVE HERO COVER SOURCE OF TRUTH
   Preserve the full Algarve composition as much as possible on
   every device, while keeping the hero fully filled.
============================================================ */

.v7-hero{
  position:relative!important;
  overflow:hidden!important;
  background-color:#6db8df!important;
  background-image:url('/images/sunhouse-cover-blue.png?v=20260914-blue-05')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:50% 50%!important;
}

/* Kill legacy pseudo cover layers. */
.v7-hero::before,
.v7-hero::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

/*
   Main visible image: use CONTAIN so the house, chimney, cliffs,
   beach and gulls remain visible instead of being aggressively cropped.
   The same image remains as a cover background underneath, so any spare
   space is filled naturally rather than with black bars.
*/
.v7-hero-media{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  content:url('/images/sunhouse-cover-blue.png?v=20260914-blue-05')!important;
  transform:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  z-index:0!important;
  pointer-events:none!important;
  user-select:none!important;
  image-rendering:auto!important;
}

.v7-overlay{z-index:1!important;}
.v7-hero-inner{z-index:2!important;}
.sunhouse-flying-key{z-index:3!important;}

/* Phone portrait — keep the whole image visible, biased slightly right
   so the Algarvian house/chimney remains prominent. */
@media (max-width:720px) and (orientation:portrait){
  .v7-hero{
    background-position:62% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:62% 50%!important;
  }
}

/* Small phone portrait */
@media (max-width:390px) and (orientation:portrait){
  .v7-hero{
    background-position:64% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:64% 50%!important;
  }
}

/* Phone landscape */
@media (max-width:932px) and (orientation:landscape){
  .v7-hero{
    background-position:54% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:54% 50%!important;
  }
}

/* Tablet portrait */
@media (min-width:721px) and (max-width:1100px) and (orientation:portrait){
  .v7-hero{
    background-position:58% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:58% 50%!important;
  }
}

/* Tablet landscape / laptops */
@media (min-width:721px) and (max-width:1599px) and (orientation:landscape){
  .v7-hero{
    background-position:52% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:52% 50%!important;
  }
}

/* Desktop / 2K / 4K / 8K */
@media (min-width:1600px){
  .v7-hero{
    background-position:50% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:50% 50%!important;
  }
}

/* Ultrawide */
@media (min-aspect-ratio:21/9) and (min-width:1600px){
  .v7-hero{
    background-position:52% 50%!important;
  }
  .v7-hero-media{
    object-fit:contain!important;
    object-position:52% 50%!important;
  }
}

/* iOS/Safari */
@supports (-webkit-touch-callout:none){
  .v7-hero,
  .v7-hero-media{
    min-height:100svh!important;
  }
}

/* ============================================================
   COVER CONTINUATION — property section
   Keep the same Algarve image behind the property area until the
   following brown content section begins.
============================================================ */
body main #alojamento{
  position:relative!important;
  background-image:url('/images/sunhouse-cover-blue.png?v=20260914-blue-05')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:50% 72%!important;
  background-color:transparent!important;
}

body main #alojamento > .wrap{
  position:relative!important;
  z-index:1!important;
}

@media (max-width:720px) and (orientation:portrait){
  body main #alojamento{
    background-position:62% 72%!important;
  }
}

@media (max-width:932px) and (orientation:landscape){
  body main #alojamento{
    background-position:54% 72%!important;
  }
}

@media (min-width:721px) and (max-width:1100px) and (orientation:portrait){
  body main #alojamento{
    background-position:58% 72%!important;
  }
}

@media (min-width:721px) and (max-width:1599px) and (orientation:landscape){
  body main #alojamento{
    background-position:52% 72%!important;
  }
}

@media (min-aspect-ratio:21/9) and (min-width:1600px){
  body main #alojamento{
    background-position:52% 72%!important;
  }
}