/* -----------------------------------------------------------------------------
   Groups Cards
   ----------------------------------------------------------------------------- */

/* Groups cards: enforce structure/typography to match Bond reference design. */
.groups-dir-list {
	& li.item-entry {
		& .list-wrap {
			display: flex;
			flex-direction: column;
			height: 100%;
			background: var(--color-card-background);
			border: 0;
			border-radius: 4px;
			overflow: hidden;
		}

		& .bs-group-cover a {
			padding-top: 120px;
			border-radius: 4px 4px 0 0;
		}

		& .item {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			padding: 28px 28px 24px;
			text-align: left;

			& .group-item-wrap {
				flex: 1 1 auto;
				text-align: left;

				& .groups-title {
					margin: 0 0 2px;
					font-size: 28px;
					line-height: 1.12;
					letter-spacing: 0;

					& a {
						display: inline-block;
						max-width: 100%;
						font-size: 28px;
						line-height: 1.12;
						font-weight: 600;
						overflow-wrap: anywhere;
						word-break: break-word;
					}
				}

				/* Keep title + group type close together. */
				& .item-meta-wrap {
					margin-top: 3px;
				}

				& .group-details {
					margin: 0;
					font-size: 18px;
					line-height: 1.35;
					color: var(--color-bond-grey);

					/* Keep only group type label in card meta. */
					& .group-visibility {
						display: none;
					}

					& .group-type {
						font-size: 14px;
						line-height: 1.35;
						color: var(--color-bond-grey);
						top: -0.5rem;
						position: relative;
					}
				}

				& .bond-group-description {
					margin: 5px 0 0;
					font-size: 16px;
					font-weight: 400;
					line-height: 1.55;
					text-align: left;
					color: var(--color-text-main);
					max-width: 100%;
					overflow-wrap: anywhere;
					word-break: break-word;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			& .group-footer-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15px;

				& .group-members-wrap {
					margin-right: 12px;
				}

				& .groups-loop-buttons {
					margin-left: auto;

					/* Slightly larger CTA text without wrapping. */
					& .group-button,
					& .button {
						width: auto;
						padding: 0.5rem 0.75rem;
						font-size: 0.9rem;
						flex: 0 1 auto;
						line-height: 1;
						white-space: nowrap;
					}

					/* Prevent inherited full-width wrappers from forcing button text wraps. */
					& .groups-meta,
					& .generic-button {
						width: auto;
					}
				}
			}
		}

		& .item-block {
			margin-bottom: 0;
		}
	}
}

/* Keep member avatars unfiltered and style the "more members" icon chip. */
ul.bp-list.groups-dir-list {
	& .bs-group-members .bs-group-member {
		& img {
			border-radius: 50%;
			box-shadow: none;
			filter: none;
		}

		& [class*=" bb-icon-"] {
			width: 29px;
			height: 29px;
			border-radius: 50%;
			background: var(--color-bond-red-darker);
			color: var(--color-background-body);
		}
	}
}