/* ==========================================================================
   Staff page - grouped staff layout
   Target: /the-parish/staff (menu item 1294, Gantry outline 15)
   Adds full-width group headings (Pastoral Leadership / Parish Office Staff)
   and lays the staff cards out three across underneath each heading.
   ========================================================================== */

/* --- Flatten the Joomla bootstrap rows so every card is one grid cell ------ */
.itemid-1294 .blog .items-row,
.staff-groups .blog .items-row,
.itemid-1294 .blog .items-row > [class*="span"],
.staff-groups .blog .items-row > [class*="span"] {
	display: contents !important;
}

/* --- One grid: three cards across, headings span the full width ----------- */
.itemid-1294 .blog,
.staff-groups .blog {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 34px;
	align-items: start;
}

.itemid-1294 .blog .item,
.staff-groups .blog .item {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* --- Group heading: own full-width line ---------------------------------- */
.itemid-1294 .blog .item:has(.staff-group-heading),
.staff-groups .blog .item:has(.staff-group-heading) {
	grid-column: 1 / -1;
	margin: 0 !important;
}

.itemid-1294 .staff-group-heading h2,
.staff-groups .staff-group-heading h2 {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 3px solid #28604f;
	color: #28604f;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
}

/* --- Tablet: two across -------------------------------------------------- */
@media (max-width: 767px) {
	.itemid-1294 .blog,
	.staff-groups .blog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 26px;
	}
}

/* --- Phone: one across --------------------------------------------------- */
@media (max-width: 480px) {
	.itemid-1294 .blog,
	.staff-groups .blog {
		grid-template-columns: minmax(0, 1fr);
	}

	.itemid-1294 .staff-group-heading h2,
	.staff-groups .staff-group-heading h2 {
		font-size: 19px;
	}
}

/* --- Suppress the Bootstrap clearfix pseudo-elements on .items-row ---------
   The theme gives .items-row a clearfix ::before/::after (content:"" ;
   display:table). Because .items-row is set to display:contents above, those
   two pseudo-elements are promoted into the grid and were being laid out as
   real cells, which pushed every second row of cards out of position.
   Removing them lets the cards fill the row properly.
   ------------------------------------------------------------------------- */
.itemid-1294 .blog .items-row::before,
.itemid-1294 .blog .items-row::after,
.staff-groups .blog .items-row::before,
.staff-groups .blog .items-row::after,
.itemid-1294 .blog .items-row > [class*="span"]::before,
.itemid-1294 .blog .items-row > [class*="span"]::after,
.staff-groups .blog .items-row > [class*="span"]::before,
.staff-groups .blog .items-row > [class*="span"]::after {
	content: none !important;
	display: none !important;
}