/* -----------------------------------------------------------------------------
   Activity Feed Cards
   ----------------------------------------------------------------------------- */

/* Reset BuddyBoss list wrapper chrome so card items control the presentation. */
.activity-list.bp-list {
	background: unset;
	border: 0;
	padding: 0;
	margin: 0;

	/* Remove inherited spacing wrappers around list cards. */
	&::before,
	&::after {
		content: none;
		display: none;
	}

	/* Single post card shell mirrors the reference with a neutral border and no shadow. */
	& > li.activity-item {
		position: relative;
		margin: 0 0 20px;
		padding: 20px 20px 0;
		border: 1px solid var(--color-border);
		border-radius: 0;
		box-shadow: none;

		&:last-child {
			margin-bottom: 0;
		}

		/* Keep kebab menu in the top-right corner without affecting card text flow. */
		& .bb-activity-more-options-wrap.action {
			position: absolute;
			top: 10px;
			right: 10px;
			margin: 0;
		}

		/* This view does not surface pinned/muted states in the target design. */
		& .bb-pin-action,
		& .activity-feature-image:empty {
			display: none;
		}

		/* Avatar + metadata row. */
		& .bp-activity-head-group {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding-right: 28px;
			margin-bottom: 14px;
		}

		& .activity-group-avatar {
			position: relative;
			width: 48px;
			min-width: 48px;

			& .group-avatar img {
				display: block;
				width: 48px;
				height: 48px;
				border-radius: 50%;
			}

			/* Overlay the author avatar on top of the group avatar, matching the visual token stack. */
			& .author-avatar {
				position: absolute;
				right: -6px;
				bottom: -6px;
				width: 20px;
				height: 20px;
				border: 1px solid var(--color-background-body);
				border-radius: 50%;
				overflow: hidden;
				background: var(--color-background-body);

				& img {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		/* Merge group name + post meta onto one compact line like the reference card header. */
		& .activity-header.activity-header--group {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 4px;
			min-width: 0;
		}

		/* Author should appear first, followed by "posted in" + group link. */
		& .activity-group-post-meta {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 4px;
			margin: 0;
			font-size: 14px;
			line-height: 1.4;
			color: var(--color-bond-grey);
			order: 1;

			& > * {
				margin: 0;
				font-size: inherit;
				line-height: inherit;
			}

			/* Add separator before time to mirror the "meta dot" in the reference card. */
			& .time-since::before {
				content: "\00b7";
				margin: 0 4px 0 2px;
				color: var(--color-bond-grey);
			}

			/* If no topic is set the empty wrapper should not consume space. */
			& .activity-topic:empty {
				display: none;
			}
		}

		/* Move the group link into the same sentence and add the "posted in" copy from design. */
		& .activity-group-heading {
			display: inline-flex;
			align-items: center;
			margin: 0;
			font-size: 14px;
			line-height: 1.4;
			color: var(--color-bond-grey);
			order: 2;

			&::before {
				content: "posted in";
				margin-right: 4px;
				color: var(--color-bond-grey);
			}
		}

		/* Keep author, group and topic links in the brand red, matching screenshot references. */
		& .activity-group-post-meta .activity-post-author a,
		& .activity-group-heading a,
		& .activity-group-post-meta .activity-topic a,
		& .activity-group-post-meta > a {
			color: var(--color-link);
			font-size: inherit;
			line-height: inherit;
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 2px;
		}

		/* Title and excerpt hierarchy. */
		& .activity-title {
			margin: 0 0 10px;

			& h2 {
				margin: 0;
				font-size: 36px;
				line-height: 1.2;
				font-weight: 400;
				color: var(--color-bond-black);
			}
		}

		& .activity-content {
			margin: 0;
			padding: 0;

			& .activity-inner {
				margin: 0 0 14px;
				font-size: 14px;
				line-height: 1.35;
				color: var(--color-bond-black);

				& p {
					font-size: 18px;
				}

				& a {
					color: var(--color-link);
					font-size: inherit;
					line-height: inherit;
					text-decoration: underline;
				}
			}
		}

	}
}