/* =========================================================
   UAV / USV SHOWCASE PHOTO + VIDEO v122
   Restores the previous event photograph and arranges it with the video.
   ========================================================= */

.uav-field-page .evidence-record-engagement{
  display:grid!important;
  grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr)!important;
  gap:22px!important;
  align-items:center!important;
}

.uav-field-page .engagement-media-duo{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
}

/* Both media panels use the same visual language. */
.uav-field-page .engagement-photo-showcase,
.uav-field-page .engagement-video-showcase{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:6px!important;
  background:var(--surface)!important;
}

.uav-field-page .engagement-photo-showcase{
  cursor:pointer!important;
}

.uav-field-page .engagement-photo-showcase img,
.uav-field-page .engagement-video-showcase video{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  min-height:0!important;
  object-fit:cover!important;
  background:#071417!important;
  border:0!important;
}

/* Video should preserve full frame where possible. */
.uav-field-page .engagement-video-showcase video{
  object-fit:contain!important;
}

/* Captions are below both media items, not overlayed. */
.uav-field-page .engagement-photo-showcase figcaption,
.uav-field-page .engagement-video-showcase figcaption{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  padding:8px 10px!important;
  border-top:1px solid var(--line)!important;
  background:var(--surface2)!important;
  color:var(--muted)!important;
  font-size:.63rem!important;
  line-height:1.35!important;
  text-align:left!important;
}

/* Dark mode integration. */
html[data-theme="dark"] .uav-field-page .engagement-photo-showcase,
html[data-theme="dark"] .uav-field-page .engagement-video-showcase{
  background:#101b21!important;
  border-color:#303d42!important;
}

html[data-theme="dark"] .uav-field-page .engagement-photo-showcase figcaption,
html[data-theme="dark"] .uav-field-page .engagement-video-showcase figcaption{
  background:#162229!important;
  color:#a8b3b1!important;
  border-color:#303d42!important;
}

/* Medium screens: keep text first, then two media panels. */
@media(max-width:1180px){
  .uav-field-page .evidence-record-engagement{
    grid-template-columns:1fr!important;
    gap:16px!important;
    align-items:start!important;
  }
}

/* Smaller screens: stack photo and video vertically. */
@media(max-width:760px){
  .uav-field-page .engagement-media-duo{
    grid-template-columns:1fr!important;
  }

  .uav-field-page .engagement-photo-showcase figcaption,
  .uav-field-page .engagement-video-showcase figcaption{
    font-size:.61rem!important;
  }
}