/* CTAF Event image frame
 * The same component file is loaded in the Event editor and on the frontend.
 * Geometry, fit and center point therefore remain identical in both contexts.
 */
.ctaf-event-image-frame{
  position:relative;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#fff;
}
.ctaf-event-image-frame>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  object-position:center center!important;
  transform:none!important;
  background:#fff;
}
.ctaf-event-image-frame[data-ctaf-image-fit="cover"]>img{object-fit:cover!important}
.ctaf-event-image-frame[data-ctaf-image-fit="contain"]>img{object-fit:contain!important}

/* Editor-only empty/selected state chrome. It does not alter image geometry. */
.ctaf-event-editor-page .ctaf-event-image-frame[data-ctaf-image-preview]:not(.has-image){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px dashed var(--ctaf-admin-card-border,#d0d7de);
  border-radius:var(--ctaf-admin-radius,8px);
  color:var(--ctaf-admin-muted,#667085);
}
.ctaf-event-editor-page .ctaf-event-image-frame[data-ctaf-image-preview].has-image{
  border:1px solid var(--ctaf-admin-card-border,#d0d7de);
  border-radius:var(--ctaf-admin-radius,8px);
}