/* Property360 Adaptive Listing Media — Overlay 341
   Canonical enhancement layered after property-experience-player.css.
   360° and YouTube keep their original stage rules. Only normal photos adapt. */

.p360-xp__stage.p360-xp__stage--adaptive-photo{
  --xp-photo-max-h:min(72vh,760px);
  --xp-photo-bg:none;
  isolation:isolate;
  aspect-ratio:auto !important;
  height:var(--xp-photo-max-h);
  min-height:clamp(340px,46vw,620px);
  display:grid;
  place-items:center;
  background:#0a1724;
}

/* Ambient backdrop uses the same image, so portrait photos no longer sit
   between two dead black columns. It is deliberately subtle so the actual
   listing photo remains the focus. */
.p360-xp__stage.p360-xp__stage--adaptive-photo::before{
  content:"";
  position:absolute;
  inset:-32px;
  z-index:0;
  background-image:var(--xp-photo-bg);
  background-size:cover;
  background-position:center;
  filter:blur(28px) saturate(.86);
  transform:scale(1.09);
  opacity:.26;
  pointer-events:none;
}
.p360-xp__stage.p360-xp__stage--adaptive-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(4,13,22,.32),rgba(4,13,22,.04) 32%,rgba(4,13,22,.04) 68%,rgba(4,13,22,.32));
  pointer-events:none;
}

.p360-xp__stage.p360-xp__stage--adaptive-photo>img:not(.p360-xp__youtube-poster){
  position:relative;
  z-index:1;
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  background:transparent !important;
  box-shadow:0 10px 34px rgba(0,0,0,.17);
}

/* Landscape: use the file's real ratio, not a forced 16:9 crop/container. */
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-landscape{
  height:auto;
  min-height:280px;
  aspect-ratio:var(--xp-photo-ratio,16/9) !important;
  max-height:var(--xp-photo-max-h);
}
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-landscape>img:not(.p360-xp__youtube-poster){
  width:100% !important;
  height:100% !important;
  max-width:none;
  max-height:none;
}
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-landscape::before,
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-landscape::after{
  opacity:0;
}

/* Portrait: maximize useful vertical real estate without cropping. */
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-portrait{
  min-height:500px;
}
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-portrait>img:not(.p360-xp__youtube-poster){
  max-width:min(76%,760px);
}

/* Square / near-square receives a balanced canvas. */
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-square{
  height:min(68vh,700px);
  min-height:400px;
}
.p360-xp__stage.p360-xp__stage--adaptive-photo.is-square>img:not(.p360-xp__youtube-poster){
  max-width:min(88%,720px);
}

/* Original controls remain above the image and ambient layers. */
.p360-xp__stage.p360-xp__stage--adaptive-photo .p360-xp__topbar,
.p360-xp__stage.p360-xp__stage--adaptive-photo .p360-xp__nav,
.p360-xp__stage.p360-xp__stage--adaptive-photo .p360-xp__toolbar,
.p360-xp__stage.p360-xp__stage--adaptive-photo .p360-xp__caption,
.p360-xp__stage.p360-xp__stage--adaptive-photo .p360-xp__meta{
  z-index:12;
}

/* Fullscreen owns the viewport and must not inherit normal-page size limits. */
.p360-xp.is-immersive .p360-xp__stage.p360-xp__stage--adaptive-photo{
  height:100% !important;
  max-height:none;
  min-height:0;
  aspect-ratio:auto !important;
}
.p360-xp.is-immersive .p360-xp__stage.p360-xp__stage--adaptive-photo>img:not(.p360-xp__youtube-poster){
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:100%;
}

/* Public/mobile listing: portrait source can use almost all available width
   and a large portion of the viewport, while remaining fully visible. */
@media(max-width:640px){
  .p360-xp__stage.p360-xp__stage--adaptive-photo{
    --xp-photo-max-h:min(70dvh,680px);
    min-height:360px;
    border-radius:14px;
  }
  .p360-xp__stage.p360-xp__stage--adaptive-photo.is-portrait{
    height:min(70dvh,680px);
    min-height:min(60dvh,540px);
  }
  .p360-xp__stage.p360-xp__stage--adaptive-photo.is-portrait>img:not(.p360-xp__youtube-poster){
    max-width:100%;
  }
  .p360-xp__stage.p360-xp__stage--adaptive-photo.is-square{
    height:min(64dvh,580px);
    min-height:340px;
  }
  .p360-xp__stage.p360-xp__stage--adaptive-photo.is-square>img:not(.p360-xp__youtube-poster){
    max-width:100%;
  }
  .p360-xp__stage.p360-xp__stage--adaptive-photo::before{
    inset:-22px;
    filter:blur(22px) saturate(.86);
    opacity:.22;
  }
}

/* Compact screens: don't let a tiny landscape photo become excessively short. */
@media(max-width:420px){
  .p360-xp__stage.p360-xp__stage--adaptive-photo.is-landscape{
    min-height:250px;
  }
}
