/* EV Mobile Unit Stability v1
   Scope: the unit-review page only.  It does not alter Home, Login, filters,
   Pending workflow, broker data, or public card rendering. */
@media (max-width: 860px) {
  html:has(#tab-unit.active),
  html:has(body.ev-tab-unit),
  html:has(body.ev-direct-unit-opened),
  body:has(#tab-unit.active),
  body.ev-tab-unit,
  body.ev-direct-unit-opened {
    background: #f2f0e9 !important;
  }

  body:has(#tab-unit.active) .app,
  body:has(#tab-unit.active) #tab-unit,
  body.ev-tab-unit .app,
  body.ev-direct-unit-opened .app,
  body.ev-tab-unit #tab-unit,
  body.ev-direct-unit-opened #tab-unit {
    background: #f2f0e9 !important;
    min-height: 100dvh !important;
  }

  /* A portrait source must stay fully visible, but the empty letterbox should
     use the page surface rather than the site-wide dark background. */
  body:has(#tab-unit.active) #tab-unit .unit-photo-main,
  body:has(#tab-unit.active) #tab-unit .unit-photo-main > img,
  body.ev-tab-unit #tab-unit .unit-photo-main,
  body.ev-direct-unit-opened #tab-unit .unit-photo-main,
  body.ev-tab-unit #tab-unit .unit-photo-main > img,
  body.ev-direct-unit-opened #tab-unit .unit-photo-main > img {
    background: #edf0f1 !important;
  }

  body:has(#tab-unit.active) #tab-unit .unit-photo-main,
  body.ev-tab-unit #tab-unit .unit-photo-main,
  body.ev-direct-unit-opened #tab-unit .unit-photo-main {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 245px !important;
    max-height: 430px !important;
    overflow: hidden !important;
  }

  body:has(#tab-unit.active) #tab-unit #unitHeroImg,
  body.ev-tab-unit #tab-unit #unitHeroImg,
  body.ev-direct-unit-opened #tab-unit #unitHeroImg {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}