/* -----------------------------------------------------------------------------
   Single Group Content Shell
   Grey inner page canvas with white content cards (Figma mobile).
   ----------------------------------------------------------------------------- */

/*
 * Group singles stack .bond-bp-content padding-bottom (6rem) with .bond-group-shell
 * padding-bottom (4rem), leaving a large white dead zone above the site footer.
 */
.groups.group-home .bond-bp-content,
.groups.single-item .bond-bp-content {
	padding-bottom: 0;
}

.groups.group-home .bp-wrap.bond-group-shell,
.groups.single-item .bp-wrap.bond-group-shell {
	padding-bottom: 1.5rem;
}

@media (max-width: 991.98px) {	/*
	 * Bleed the grey canvas edge-to-edge below the red group header.
	 * Settings, tabs, and tab content all sit on this surface; cards stay white.
	 */
	.groups.group-home .bp-wrap.bond-group-shell,
	.groups.single-item .bp-wrap.bond-group-shell {
		width: 100vw;
		max-width: 100vw;
		margin-top: 0;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		background: var(--color-card-background);
	}

	.groups.group-home #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin),
	.groups.single-item #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin) {
		padding: 1rem 1rem 0;
		background: var(--color-card-background);
	}

	.groups.group-home .bond-group-feed,
	.groups.single-item .bond-group-feed {
		padding-top: 0;
	}

	/* About panels: white cards on the grey shell (surface token was #F5F5F0). */
	.groups.group-home #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin) .bond-group-about,
	.groups.single-item #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin) .bond-group-about,
	.groups.group-home #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin) .bond-group-request-membership,
	.groups.single-item #item-body.bond-group-shell__body:not(.bond-group-shell__body--admin) .bond-group-request-membership {
		--bond-group-about-surface: var(--color-background-body);
	}
}
