.map-source-crop{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#e8e1d5;
}

/* Default: expose only the live map surface. */
.map-source-crop .live-map-frame{
  position:absolute;
  top:-325px;
  left:-470px;
  width:calc(100% + 470px);
  height:calc(100% + 325px);
  max-width:none;
  border:0;
  background:#e8e1d5;
  transition:
    top .24s ease,
    left .24s ease,
    width .24s ease,
    height .24s ease,
    transform .24s ease;
}

/*
 * Detail mode: stop cropping the left side so the upstream project/details
 * layout can be seen as a complete page inside our card. We still lift the
 * upstream header/search chrome out of view and center the content area.
 */
.map-source-crop.is-detail-view{
  background:#f7f7f4;
}

.map-source-crop.is-detail-view .live-map-frame{
  top:-105px;
  left:0;
  width:100%;
  height:calc(100% + 105px);
  transform:none;
}

.map-card .map-live-badge{
  display:none !important;
}

.map-detail-back{
  position:absolute;
  z-index:20;
  top:16px;
  left:16px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:13px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(20,20,20,.12);
  backdrop-filter:blur(14px);
  color:#1d1d1b;
  font:800 11px/1 "Cairo",Arial,sans-serif;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.map-detail-back span{
  color:var(--brand,#f97316);
  font-size:15px;
}

.map-detail-back[hidden]{display:none!important}

@media (max-width:760px){
  .map-source-crop .live-map-frame{
    top:-325px;
    left:-520px;
    width:1480px;
    min-width:1480px;
    height:1200px;
    border:0;
    transform:scale(.78);
    transform-origin:top left;
  }

  .map-source-crop.is-detail-view .live-map-frame{
    top:-88px;
    left:0;
    width:1180px;
    min-width:1180px;
    height:1040px;
    transform:scale(.72);
    transform-origin:top left;
  }

  .map-detail-back{
    top:10px;
    left:10px;
    min-height:38px;
    padding:0 11px;
    border-radius:11px;
    font-size:9px;
  }
}

@media (max-width:430px){
  .map-source-crop .live-map-frame{
    top:-325px;
    left:-545px;
    width:1480px;
    min-width:1480px;
    height:1200px;
    transform:scale(.72);
    transform-origin:top left;
  }

  .map-source-crop.is-detail-view .live-map-frame{
    top:-82px;
    left:0;
    width:1160px;
    min-width:1160px;
    height:1040px;
    transform:scale(.64);
    transform-origin:top left;
  }
}