/* JR My Groups Card Layout v1.0.1 */

/* Only affects the custom My Groups Directory markup */
.mgd-group { position: relative; }

/* New structure injected by JS */
.mgd-group .jr-mgd-wrap{
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  width:100% !important;
}

.mgd-group .jr-mgd-left{
  flex: 0 0 auto !important;
}

.mgd-group img.jr-mgd-avatar,
.mgd-group .jr-mgd-left img.avatar{
  width:96px !important;
  height:96px !important;
  object-fit:cover !important;
  border-radius:16px !important;
  display:block !important;
}

.mgd-group .jr-mgd-mid{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mgd-group .jr-mgd-title a{
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  display:inline-block !important;
  margin: 0 0 6px 0 !important;
  text-decoration: none !important;
}

.mgd-group .jr-mgd-desc{
  font-size: 14px !important;
  opacity: .85 !important;
  line-height: 1.35 !important;
}

.mgd-group .jr-mgd-right{
  flex: 0 0 auto !important;
  margin-left:auto !important;
  text-align:right !important;
  white-space:nowrap !important;
  padding-top: 6px !important;
  opacity: .85 !important;
  font-size: 13px !important;
}

/* Ensure all cards align */
.mgd-group + .mgd-group{
  margin-top: 14px !important;
}

/* If the theme wraps images with a circular mask, force square look */
.mgd-group .jr-mgd-left a,
.mgd-group .jr-mgd-left .item-avatar,
.mgd-group .jr-mgd-left .avatar{
  border-radius: 14px !important;
  overflow:hidden !important;
  display:inline-block !important;
}

/* Safety: prevent old layout from interfering once enhanced */
.mgd-group.jr-mgd-enhanced > a,
.mgd-group.jr-mgd-enhanced > p,
.mgd-group.jr-mgd-enhanced > small{
  margin: 0 !important;
}