/* Phase 33 — final contact and mobile cinematic geometry lock. */

/* The fallback image is nested inside .sam-experience-fallback. Earlier rules
   only targeted a direct image child, leaving unused space below portrait media. */
body.sam-phase33-ui .sam-experience-card .sam-experience-fallback{
  position:relative;
  width:100%;
  height:100%;
  min-height:inherit;
  overflow:hidden;
  isolation:isolate;
  background:#11151d;
}
body.sam-phase33-ui .sam-experience-card .sam-experience-fallback>img{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 24%;
}
body.sam-phase33-ui .sam-experience-card .sam-experience-overlay{
  z-index:1;
  background:linear-gradient(180deg,rgba(8,11,17,.04) 35%,rgba(8,11,17,.58) 100%);
}

/* Tablet: keep every overlay element inside the media box. */
@media(max-width:1024px){
  body.sam-phase33-ui .sam-experience-card .sam-experience-circle{
    position:absolute;
    right:clamp(18px,3vw,30px);
    bottom:clamp(18px,3vw,30px);
    top:auto;
    transform:none;
    width:clamp(220px,34vw,300px);
    margin:0;
    padding:clamp(32px,4.5vw,48px);
  }
  body.sam-phase33-ui .sam-experience-card .sam-play{
    left:auto;
    right:clamp(18px,3vw,30px);
    top:clamp(18px,3vw,30px);
  }
}

/* Mobile: one clean portrait card, full-bleed image and compact controls. */
@media(max-width:767px){
  body.sam-phase33-ui .sam-experience-card{
    width:100%;
    height:clamp(430px,125vw,540px);
    min-height:0!important;
    border-radius:18px;
    overflow:hidden;
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-fallback{
    min-height:0!important;
    border-radius:inherit;
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-fallback>img{
    object-position:center 20%;
  }
  body.sam-phase33-ui .sam-experience-card .sam-play{
    right:14px;
    top:14px;
    width:52px;
    height:52px;
    border-width:4px;
    font-size:1rem;
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-circle{
    right:12px;
    bottom:12px;
    width:clamp(166px,48vw,196px);
    height:clamp(166px,48vw,196px);
    aspect-ratio:auto;
    margin:0;
    padding:22px 20px;
    overflow:hidden;
    align-items:flex-start;
    justify-content:center;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-circle h3{
    font-size:clamp(1.25rem,5.5vw,1.65rem);
    line-height:.92;
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-circle a{
    margin-top:10px;
    font-size:.58rem;
    line-height:1.2;
    white-space:nowrap;
  }
}

@media(max-width:360px){
  body.sam-phase33-ui .sam-experience-card{
    height:430px;
  }
  body.sam-phase33-ui .sam-experience-card .sam-experience-circle{
    width:160px;
    height:160px;
    padding:20px 18px;
  }
}