/*
 * PCCIL individual community / group redesign (v3 - structural).
 *
 * Applied via functions.php when bp_is_group() is true. Selectors
 * key on the REAL BuddyBoss / BB-Pro DOM confirmed via direct
 * runtime inspection:
 *
 *   body.groups.single-item                    (all group screens)
 *   #item-header.groups-header.single-headers  (whole header block)
 *   #cover-image-container.left                (cover + title wrap)
 *   #header-cover-image                        (cover img wrapper)
 *   #item-header-cover-image.item-header-wrap  (avatar + content overlay)
 *     #item-header-avatar, #item-header-content
 *   #members-list.item-list.members-group-list.bp-list.grid.members-list
 *     li.item-entry.item-entry-header          (SECTION LABEL, not a card)
 *     li.item-entry.odd|even                   (real member card)
 *       .list-wrap > .list-wrap-inner
 *         .item-avatar
 *         .item > .item-block > h2.list-title / p.item-meta
 *         .member-buttons-wrap
 *
 * Goal: rebuild the visual layer so BB's own dimensions never leak
 * through, section-header LIs never grab a member grid cell, and
 * every member LI resolves to exactly one compact tile.
 */

/* ==========================================================
 * Container rhythm
 * ========================================================== */
body.groups.single-item #page,
body.groups.single-item #primary,
body.groups.single-item .bb-page-wrap {
	background: var(--pccc-color-surface, #fff);
}
body.groups.single-item #buddypress {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem) 40px;
}

/* Kill the parent theme's entry-title on group screens. */
body.groups.single-item .entry-header,
body.groups.single-item h1.entry-title,
body.groups.single-item .page-title { display: none !important; }

/* ==========================================================
 * PCCIL breadcrumb (rendered by community.php inside #item-header).
 * We absolutely position it OUT of the header so it never inflates
 * the header height.
 * ========================================================== */
body.groups.single-item #item-header { position: relative !important; }
body.groups.single-item .pccc-group-breadcrumb {
	position: absolute !important;
	top: -28px !important;
	left: 0 !important;
	right: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.82rem;
	color: var(--pccc-color-ink-muted);
	line-height: 1.2;
}
body.groups.single-item .pccc-group-breadcrumb a { color: inherit; text-decoration: none; }
body.groups.single-item .pccc-group-breadcrumb a:hover { color: var(--pccc-color-primary); }

/* ==========================================================
 * Group header - contained, no negative margins, no overlap.
 * The cover + name+meta all live inside #item-header.left.
 * ========================================================== */
body.groups.single-item #item-header {
	display: block !important;
	background: var(--pccc-color-surface) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 40px 0 20px !important;
	padding: 0 !important;
	box-shadow: 0 6px 24px -16px rgba(24, 30, 50, 0.16);
	min-height: 0 !important;
	height: auto !important;
}
body.groups.single-item #cover-image-container,
body.groups.single-item #cover-image-container.left {
	position: relative !important;
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* Cover image slot. */
body.groups.single-item #header-cover-image,
body.groups.single-item #header-cover-image.cover-small {
	position: relative !important;
	width: 100% !important;
	height: 240px !important;
	min-height: 0 !important;
	max-height: 240px !important;
	overflow: hidden !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
body.groups.single-item #header-cover-image .header-cover-img,
body.groups.single-item #header-cover-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	max-width: none !important;
}
@media (max-width: 900px) {
	body.groups.single-item #header-cover-image { height: 200px !important; max-height: 200px !important; }
}
@media (max-width: 600px) {
	body.groups.single-item #header-cover-image { height: 160px !important; max-height: 160px !important; }
}

/* Avatar + title + actions row - normal document flow beneath cover. */
body.groups.single-item #item-header-cover-image,
body.groups.single-item .item-header-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	padding: 16px 20px !important;
	margin: 0 !important;
	background: var(--pccc-color-surface) !important;
	min-height: 0 !important;
}

body.groups.single-item #item-header-avatar {
	flex: 0 0 auto !important;
	width: 84px !important;
	height: 84px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 14px !important;
	background: var(--pccc-color-surface-strong) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 4px 14px -6px rgba(24, 30, 50, 0.22);
	position: relative !important;
	top: -34px !important;
}
body.groups.single-item #item-header-avatar a,
body.groups.single-item #item-header-avatar img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	max-width: none !important;
}
@media (max-width: 600px) {
	body.groups.single-item #item-header-avatar { width: 64px !important; height: 64px !important; top: -24px !important; }
}

body.groups.single-item #item-header-content {
	flex: 1 1 260px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.groups.single-item #item-header-content h1,
body.groups.single-item #item-header-content h2,
body.groups.single-item #item-header-content .bb-item-title {
	font-family: var(--pccc-font-display) !important;
	font-size: clamp(1.15rem, 1.9vw, 1.5rem) !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	color: var(--pccc-color-ink) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	text-transform: none !important;
}
body.groups.single-item #item-header-content .item-meta,
body.groups.single-item #item-header-content .group-status,
body.groups.single-item #item-header-content .highlight {
	font-size: 0.82rem !important;
	color: var(--pccc-color-ink-muted) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	background: transparent !important;
	line-height: 1.4 !important;
}
body.groups.single-item #item-header-content .item-meta:before,
body.groups.single-item #item-header-content .group-status:before,
body.groups.single-item #item-header-content .highlight:before { content: none !important; display: none !important; }
body.groups.single-item #item-header-content .group-description {
	font-size: 0.88rem !important;
	color: var(--pccc-color-ink) !important;
	margin: 8px 0 0 !important;
	line-height: 1.5 !important;
	max-width: 70ch;
}

/* Join / Leave button - PCCIL primary. */
body.groups.single-item .generic-button a,
body.groups.single-item .group-button a,
body.groups.single-item .bb-item-buttons a.button,
body.groups.single-item #item-header .group-button a,
body.groups.single-item #item-header-content .group-button a {
	background: var(--pccc-color-primary) !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
	border: 0 !important;
	line-height: 1.2 !important;
	font-size: 0.88rem !important;
	transition: background .15s ease;
}
body.groups.single-item .generic-button a:hover { background: var(--pccc-color-primary-hover) !important; }
body.groups.single-item .generic-button a.leave-group,
body.groups.single-item .group-button a.leave-group {
	background: var(--pccc-color-surface) !important;
	color: var(--pccc-color-ink) !important;
	border: 1px solid var(--pccc-color-border) !important;
}

/* Hide the invisible modal wrappers inside #item-header - they add layout height. */
body.groups.single-item #item-header > .bb-action-popup,
body.groups.single-item #item-header > .bb-leave-group-popup { position: absolute !important; visibility: hidden !important; }

/* ==========================================================
 * Primary tab nav.
 * ========================================================== */
body.groups.single-item #object-nav,
body.groups.single-item #object-nav.item-list-tabs,
body.groups.single-item #subnav,
body.groups.single-item #subnav.item-list-tabs {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--pccc-color-border) !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	overflow-x: auto;
	scrollbar-width: none;
}
body.groups.single-item #object-nav::-webkit-scrollbar,
body.groups.single-item #subnav::-webkit-scrollbar { display: none; }

body.groups.single-item #object-nav ul,
body.groups.single-item #subnav ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	gap: 2px !important;
	flex-wrap: nowrap !important;
}
body.groups.single-item #object-nav li,
body.groups.single-item #subnav li {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	list-style: none !important;
}
body.groups.single-item #object-nav li:before,
body.groups.single-item #subnav li:before { content: none !important; display: none !important; }

body.groups.single-item #object-nav li a,
body.groups.single-item #subnav li a {
	display: inline-block !important;
	padding: 10px 14px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: var(--pccc-color-ink-muted) !important;
	border-bottom: 2px solid transparent !important;
	background: transparent !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: color .15s ease, border-color .15s ease;
}
body.groups.single-item #object-nav li a:hover,
body.groups.single-item #subnav li a:hover { color: var(--pccc-color-primary) !important; }
body.groups.single-item #object-nav li.current a,
body.groups.single-item #object-nav li.selected a,
body.groups.single-item #subnav li.current a,
body.groups.single-item #subnav li.selected a {
	color: var(--pccc-color-primary) !important;
	border-bottom-color: var(--pccc-color-primary) !important;
}

/* De-emphasise Send Invites / Manage. */
body.groups.single-item #object-nav li[id*="invite"] a,
body.groups.single-item #object-nav li[id*="admin"] a,
body.groups.single-item #object-nav li[id*="manage"] a {
	color: var(--pccc-color-ink-subtle) !important;
	font-weight: 500 !important;
	opacity: 0.72;
}

/* ==========================================================
 * Members grid - explicit control over layout.
 * ========================================================== */

/* Reset the wrapping members component container. */
body.groups.single-item .members.dir-form,
body.groups.single-item #members-dir-list,
body.groups.single-item #members-group-list,
body.groups.single-item .members-group-list-wrap {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.groups.single-item #members-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
@media (min-width: 641px) {
	body.groups.single-item #members-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 900px) {
	body.groups.single-item #members-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1200px) {
	body.groups.single-item #members-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Section header LIs must NOT occupy a member cell - span the whole row. */
body.groups.single-item #members-list > li.item-entry-header {
	grid-column: 1 / -1 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 12px 0 4px !important;
	margin: 0 !important;
	font-family: var(--pccc-font-display) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: var(--pccc-color-ink-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	line-height: 1 !important;
	display: block !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: initial !important;
	text-align: left !important;
	box-shadow: none !important;
}

/* Actual member card LI. */
body.groups.single-item #members-list > li.item-entry {
	background: var(--pccc-color-surface) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 12px !important;
	padding: 14px 12px 12px !important;
	margin: 0 !important;
	list-style: none !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 6px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex-basis: auto !important;
	float: none !important;
	clear: none !important;
	position: relative !important;
	min-height: 0 !important;
	transition: border-color .15s ease, transform .15s ease;
}
body.groups.single-item #members-list > li.item-entry:hover {
	border-color: var(--pccc-color-primary) !important;
	transform: translateY(-1px);
}
body.groups.single-item #members-list > li.item-entry:before { content: none !important; display: none !important; }

/* Neutralise BB's inner wrappers - collapse to plain document flow. */
body.groups.single-item #members-list > li .list-wrap,
body.groups.single-item #members-list > li .list-wrap-inner {
	display: contents !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	box-shadow: none !important;
}

/* Avatar container - small circle. */
body.groups.single-item #members-list > li .item-avatar {
	width: 60px !important;
	height: 60px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--pccc-color-primary), var(--pccc-color-accent)) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	flex: 0 0 auto !important;
}
body.groups.single-item #members-list > li .item-avatar a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	line-height: 0 !important;
}
body.groups.single-item #members-list > li .item-avatar img,
body.groups.single-item #members-list > li .item-avatar .avatar {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
	max-width: none !important;
	max-height: none !important;
}
body.groups.single-item #members-list > li .member-status,
body.groups.single-item #members-list > li .bb-user-presence,
body.groups.single-item #members-list > li .bb-member-friend-status {
	display: none !important;
}

/* Initials fallback tile (rendered by community.php bp_core_fetch_avatar filter). */
body.groups.single-item .pccc-avatar-initials {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--pccc-color-primary), var(--pccc-color-accent)) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	line-height: 1 !important;
	overflow: hidden !important;
	text-align: center !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: 1 / 1;
}

/* Body / name / meta area. */
body.groups.single-item #members-list > li .item {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
	background: transparent !important;
}
body.groups.single-item #members-list > li .item-block {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	display: block !important;
	width: 100% !important;
}
body.groups.single-item #members-list > li .list-title,
body.groups.single-item #members-list > li h2.list-title,
body.groups.single-item #members-list > li .member-name {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--pccc-color-ink) !important;
	line-height: 1.25 !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}
body.groups.single-item #members-list > li .list-title a {
	color: inherit !important;
	text-decoration: none !important;
}
body.groups.single-item #members-list > li .list-title a:hover { color: var(--pccc-color-primary) !important; }

body.groups.single-item #members-list > li .item-meta,
body.groups.single-item #members-list > li .last-activity {
	font-size: 0.72rem !important;
	color: var(--pccc-color-ink-muted) !important;
	line-height: 1.3 !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
body.groups.single-item #members-list > li .item-meta .separator {
	margin: 0 4px !important;
	color: var(--pccc-color-ink-subtle) !important;
}
body.groups.single-item #members-list > li .pccc-member-job-org {
	font-size: 0.72rem !important;
	color: var(--pccc-color-ink-muted) !important;
	line-height: 1.25 !important;
	margin: 2px 0 0 !important;
}
body.groups.single-item #members-list > li .follow-container {
	display: none !important;
}

/* Compact action bar (View / Message). */
body.groups.single-item #members-list > li .member-buttons-wrap,
body.groups.single-item #members-list > li .item-actions,
body.groups.single-item #members-list > li .bb-list-actions,
body.groups.single-item #members-list > li .bp-members-list-hook {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 4px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	width: 100% !important;
}
body.groups.single-item #members-list > li .member-buttons-wrap a,
body.groups.single-item #members-list > li .item-actions a,
body.groups.single-item #members-list > li .bp-members-list-hook a {
	padding: 4px 10px !important;
	font-size: 0.72rem !important;
	line-height: 1.2 !important;
	background: transparent !important;
	color: var(--pccc-color-ink) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}
body.groups.single-item #members-list > li .member-buttons-wrap a:hover,
body.groups.single-item #members-list > li .item-actions a:hover {
	border-color: var(--pccc-color-primary) !important;
	color: var(--pccc-color-primary) !important;
}

/* ==========================================================
 * Search + view toggle.
 * ========================================================== */
body.groups.single-item .bp-search,
body.groups.single-item .subnav-search,
body.groups.single-item #subnav .bp-search {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	flex-wrap: wrap !important;
}
body.groups.single-item .bp-search form,
body.groups.single-item .bp-search .search-form {
	display: flex !important;
	flex: 1 1 260px !important;
	max-width: 380px !important;
	background: var(--pccc-color-surface) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 8px !important;
	padding: 4px 8px !important;
	margin: 0 !important;
}
body.groups.single-item .bp-search input[type="text"],
body.groups.single-item .bp-search input[type="search"] {
	flex: 1 !important;
	border: 0 !important;
	background: transparent !important;
	outline: none !important;
	font: inherit !important;
	font-size: 0.85rem !important;
	color: var(--pccc-color-ink) !important;
	padding: 4px 6px !important;
	box-shadow: none !important;
}
body.groups.single-item .bp-search button {
	background: transparent !important;
	color: var(--pccc-color-primary) !important;
	border: 0 !important;
	padding: 4px 8px !important;
	font-size: 0.85rem !important;
	cursor: pointer !important;
}
body.groups.single-item .grid-filters,
body.groups.single-item .grid-filter,
body.groups.single-item .bb-grid-filter {
	margin-left: auto !important;
	display: inline-flex !important;
	gap: 4px !important;
}
body.groups.single-item .grid-filters button,
body.groups.single-item .grid-filter button {
	background: transparent !important;
	border: 1px solid var(--pccc-color-border) !important;
	color: var(--pccc-color-ink-muted) !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 0.75rem !important;
	cursor: pointer !important;
}
body.groups.single-item .grid-filters button.selected,
body.groups.single-item .grid-filter button.selected {
	background: var(--pccc-color-primary) !important;
	color: #fff !important;
	border-color: var(--pccc-color-primary) !important;
}

/* ==========================================================
 * Activity / Feed.
 * ========================================================== */
body.groups.single-item.group-activity #buddypress .bp-list,
body.groups.single-item.group-activity #activity-stream {
	max-width: 780px;
	margin: 0 auto !important;
}

body.groups.single-item #activity-stream li,
body.groups.single-item .activity-list > li {
	background: var(--pccc-color-surface) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	margin: 0 0 10px !important;
	box-shadow: none !important;
	list-style: none !important;
}
body.groups.single-item #activity-stream li:before,
body.groups.single-item .activity-list > li:before { content: none !important; display: none !important; }

body.groups.single-item .activity-avatar,
body.groups.single-item .activity-item .item-avatar {
	width: 40px !important;
	height: 40px !important;
	overflow: hidden !important;
	border-radius: 50% !important;
	margin-right: 12px !important;
}
body.groups.single-item .activity-avatar img,
body.groups.single-item .activity-item .item-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

body.groups.single-item .activity-header,
body.groups.single-item .activity-content .activity-inner,
body.groups.single-item .activity-content p {
	font-size: 0.9rem !important;
	color: var(--pccc-color-ink) !important;
	line-height: 1.5 !important;
}
body.groups.single-item .activity-header .time-since,
body.groups.single-item .activity-time-since {
	color: var(--pccc-color-ink-subtle) !important;
	font-size: 0.75rem !important;
}
body.groups.single-item .activity-meta a {
	color: var(--pccc-color-primary) !important;
	text-decoration: none !important;
}

body.groups.single-item .load-more,
body.groups.single-item #load-more,
body.groups.single-item .bp-list-load-more {
	background: transparent !important;
	color: var(--pccc-color-primary) !important;
	border: 1px solid var(--pccc-color-border) !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
}