/* Koinonia custom UI layer - Milestone 1 */

/* Round + HD icon baseline */
.tag_navbar_top_side .btn svg,
.tag_navbar_top_side_all .btn svg,
.tag_navbar_top_side .btn img,
.tag_navbar_top_side_all .btn img {
  border-radius: 999px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.koinonia-nav-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  object-fit: cover;
  border-radius: 999px;
  clip-path: circle(46% at 50% 50%);
  background: transparent;
}

/* Registration two-step identity selectors */
#register #k_user_type,
#register #k_sub_type {
  font-weight: 500;
}

/* Comment expansion polish in Hearth feed */
.wo_comments .comment-text,
.comment-reply-container .comment-text {
  line-height: 1.55;
  word-break: break-word;
}

.wo_comments .comment-text.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wo_comments .comment-toggle,
.comment-reply-container .comment-toggle {
  font-weight: 600;
  cursor: pointer;
}

/* Membership cards: max 3 per row on desktop */
.tag_pro_plans {
  flex-wrap: wrap;
  align-items: stretch;
}

.tag_pro_plan {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  margin-top: 20px;
}

.tag_pro_plan .wow_content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tag_pro_plan p {
  margin-bottom: 10px;
  line-height: 1.35;
}

.koinonia-plan-description {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  max-height: 130px;
  overflow: auto;
  padding-right: 6px;
  word-break: break-word;
}

/* Round + HD header icon */
.koinonia-pro-hd-icon,
.tag_plan_hdr > div:not(.pricing_p_price) img.pro_packages_icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 991px) {
  .tag_pro_plan {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 640px) {
  .tag_pro_plan {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
