/*
 * StageHill mobile Social Activity / Groups discussion visual parity.
 *
 * This stylesheet is deliberately loaded after UM Activity's responsive CSS.
 * It changes presentation only: all Social Activity markup, AJAX handlers,
 * composer actions, likes, comments and profile-wall behaviour remain native.
 */
@media only screen and (max-width: 767px) {
	/* Both the standalone wall and a member's profile Activity tab must break
	 * out of Ultimate Member/WorkScout's centered 600px column just like the
	 * StageHill single-group discussion feed. */
	body div.um-activity,
	body .stagehill-global-activity-wall,
	body .um-profile .um-profile-body.activity,
	body .um-profile .um-profile-body.activity-default {
		box-sizing: border-box !important;
		width: calc(100vw - 28px) !important;
		max-width: calc(100vw - 28px) !important;
		min-width: 0 !important;
		margin-left: calc(50% - 50vw + 14px) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body div.um-activity > .um-form,
	body .stagehill-global-activity-wall > .um-form,
	body .stagehill-global-activity-wall .um-activity-wall,
	body .um-profile .um-profile-body.activity > .um,
	body .um-profile .um-profile-body.activity-default > .um,
	body .um-profile .um-profile-body.activity > .um-form,
	body .um-profile .um-profile-body.activity-default > .um-form,
	body .um-profile .um-profile-body.activity .um-activity-wall,
	body .um-profile .um-profile-body.activity-default .um-activity-wall {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Match the Groups feed card geometry. */
	body .um-activity-new-post,
	body .um-activity-widget {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 4px !important;
		overflow: hidden !important;
	}

	body .um-activity-body,
	body .um-activity-bodyinner,
	body .um-activity-bodyinner-photo,
	body .um-activity-bodyinner-photo a,
	body .um-activity-bodyinner-photo img,
	body .um-activity-comments,
	body .um-activity-commentwrap {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body .um-activity-bodyinner-photo img {
		display: block !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	/* Groups-style circular avatars in post headers and comment composers. */
	body .um-activity-ava,
	body .um-activity-ava a,
	body .um-activity-ava img,
	body .um-activity-comment-avatar,
	body .um-activity-comment-avatar a,
	body .um-activity-comment-avatar img {
		border-radius: 50% !important;
		overflow: hidden !important;
	}

	body .um-activity-ava img,
	body .um-activity-comment-avatar img {
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Composer footer: image upload fixed left, Post fixed right. The native
	 * Activity responsive CSS gives the insert area a 200px minimum, which is
	 * why the upload control did not line up like Groups. */
	body .um-activity-new-post .um-activity-foot {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 5px 0 0 !important;
	}

	body .um-activity-new-post .um-activity-foot > .um-activity-left.um-activity-insert,
	body .um-activity-new-post .um-activity-insert {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex: 1 1 auto !important;
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body .um-activity-new-post .um-activity-insert > .ajax-upload-dragdrop,
	body .um-activity-new-post .um-activity-insert .ajax-upload-dragdrop {
		display: block !important;
		flex: 0 0 40px !important;
		float: none !important;
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body .um-activity-new-post .um-activity-insert .upload {
		box-sizing: content-box !important;
		display: block !important;
		width: 16px !important;
		height: 20px !important;
		margin: 0 !important;
		padding: 10px 12px !important;
		line-height: 20px !important;
		text-align: center !important;
	}

	body .um-activity-new-post .um-activity-foot > .um-activity-right {
		display: flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 0 0 auto !important;
	}

	body .um-activity-new-post .um-activity-foot > .um-activity-right .um-activity-post {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		float: none !important;
		width: auto !important;
		margin: 5px 0 !important;
	}

	body .um-activity-new-post .um-activity-foot > .um-clear {
		display: none !important;
	}

	/* Match Groups' mobile Like/Comment row. UM Activity's responsive file
	 * normally hides these labels and enlarges only the icons. */
	body div.uimob340 .um-activity-actions a,
	body div.uimob500 .um-activity-actions a,
	body .um-activity-actions a {
		display: inline-flex !important;
		align-items: center !important;
		font-size: 15px !important;
		height: 20px !important;
		line-height: 20px !important;
		padding: 5px !important;
		margin: 0 10px !important;
	}

	body div.uimob340 .um-activity-actions a span,
	body div.uimob500 .um-activity-actions a span,
	body .um-activity-actions a span {
		display: inline-block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		height: auto !important;
		margin-left: 6px !important;
		font-size: 13px !important;
		line-height: 20px !important;
	}

	body .um-activity-actions i {
		display: inline-block !important;
		flex: 0 0 auto !important;
		font-size: 15px !important;
		line-height: 20px !important;
	}

	body .um-activity-foot.status {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 5px 0 !important;
	}

	body .um-activity-foot.status .um-activity-left.um-activity-actions {
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	/* Keep the Social Activity comment workflow, but give it the same physical
	 * spacing and contained width as the Groups comment composer. */
	body .um-activity-comments {
		padding: 10px 15px 0 15px !important;
	}

	body .um-activity-commentl.um-activity-comment-area {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		padding-bottom: 0 !important;
	}

	body .um-activity-comment-area .um-activity-comment-box,
	body .um-activity-comment-area textarea.um-activity-comment-textarea {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}

@supports (width: 100dvw) {
	@media only screen and (max-width: 767px) {
		body div.um-activity,
		body .stagehill-global-activity-wall,
		body .um-profile .um-profile-body.activity,
		body .um-profile .um-profile-body.activity-default {
			width: calc(100dvw - 28px) !important;
			max-width: calc(100dvw - 28px) !important;
			margin-left: calc(50% - 50dvw + 14px) !important;
		}
	}
}