/*
 * Layout only. Every card visual, and the bio popup itself, comes from
 * Salient, because the markup this plugin prints is the markup Salient's own
 * team member element prints. Do not restyle .team-member here.
 */
.perio-team {
	display: grid;
	gap: 30px;
	margin: 0 0 30px;
}

.perio-team > .team-member {
	margin-bottom: 0;
}

.perio-team--cols-1 { grid-template-columns: repeat(1, 1fr); }
.perio-team--cols-2 { grid-template-columns: repeat(2, 1fr); }
.perio-team--cols-3 { grid-template-columns: repeat(3, 1fr); }
.perio-team--cols-4 { grid-template-columns: repeat(4, 1fr); }
.perio-team--cols-5 { grid-template-columns: repeat(5, 1fr); }
.perio-team--cols-6 { grid-template-columns: repeat(6, 1fr); }
.perio-team--cols-7 { grid-template-columns: repeat(7, 1fr); }
.perio-team--cols-8 { grid-template-columns: repeat(8, 1fr); }

/* Salient's own breakpoints: 1000px is its tablet cut, 690px its phone cut. */
@media only screen and (max-width: 1300px) and (min-width: 1000px) {
	.perio-team--cols-5,
	.perio-team--cols-6,
	.perio-team--cols-7,
	.perio-team--cols-8 { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (max-width: 999px) and (min-width: 691px) {
	.perio-team--cols-3,
	.perio-team--cols-4,
	.perio-team--cols-5,
	.perio-team--cols-6,
	.perio-team--cols-7,
	.perio-team--cols-8 { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 690px) {
	.perio-team { gap: 20px; }
	.perio-team--cols-2,
	.perio-team--cols-3,
	.perio-team--cols-4,
	.perio-team--cols-5,
	.perio-team--cols-6,
	.perio-team--cols-7,
	.perio-team--cols-8 { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Opened bio paragraphs.
 *
 * Salient hides .nectar_team_bio inside the card and its JS lifts the contents
 * into the overlay's .team-desc. The card wrapper carries line-height:0, and
 * the theme ships no paragraph spacing rule for .team-desc, so multi paragraph
 * bios arrive as one unbroken block. These two rules restore the breaks.
 *
 * This is the one place the plugin styles something outside its own grid
 * wrapper. It is scoped to the bio overlay only and sets nothing the theme
 * already sets, so cards still follow the theme.
 */
body .nectar_team_member_overlay .team_member_details .team-desc p {
	line-height: 1.6;
	margin-bottom: 1.2em;
}

body .nectar_team_member_overlay .team_member_details .team-desc p:last-of-type {
	margin-bottom: 0;
}

/*
 * Salient ships `.team-desc p:empty { display: block }`, which tells us it
 * expects empty spacer paragraphs from the builder. Ours are real paragraphs,
 * so give an empty one a height rather than letting it collapse.
 */
body .nectar_team_member_overlay .team_member_details .team-desc p:empty {
	min-height: 1em;
}