/**
 * Staff Panel Styles
 *
 * Team/staff display panel with grid layout for team members
 * Used on About Us page
 *
 * Dependencies: ssa-base
 * Extracted from: styles.css lines 390-467, responsive rules from 1024px, 768px, 480px
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.staff-panel {
	background-color: var(--cream);
}

.staff-panel .content {
	padding-top: var(--space-9);
	display: grid;
	grid-template-columns: 70% 25%;
	grid-template-rows: auto auto auto;
	gap: 5%;
	align-items: start;
}

/* Panel heading now uses .panel-heading from panel-base.css */

.staff-panel > .content > h3 {
	margin-bottom: 42px;
	grid-column: 1 / -1;
}

.staff-panel .image-team {
	border-top: 1px solid var(--border-grey);
	padding-top: var(--space-5);
	margin-bottom: 78px;
	grid-column: 1;
	grid-row: 2 / 4;
}

.staff-panel .image-team h3,
.staff-panel .second-team h3,
.staff-panel .third-team h3 {
	color: var(--black);
	font-size: 24px;
	letter-spacing: 0;
	margin-bottom: 33px;
}

.staff-panel .image-team-container {
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
}

.staff-panel .image-team .team-person {
	align-items: center;
	display: flex;
	margin: 0 0 24px;
	min-height: 84px;
	width: 47.5%;
}

.staff-panel .image-team .team-person img {
	margin-right: var(--space-5);
}

.staff-panel .image-team .team-person .info {
	font-size: 16px;
	line-height: 26px;
}

.staff-panel .second-team {
	border-top: 1px solid var(--border-grey);
	margin-bottom: 40px;
	padding-top: var(--space-5);
	grid-column: 2;
	grid-row: 2;
}

.staff-panel .third-team {
	border-top: 1px solid var(--border-grey);
	margin-bottom: 78px;
	padding-top: var(--space-5);
	grid-column: 2;
	grid-row: 3;
}

/* ==========================================================================
   Responsive: Desktop (1024px and below)
   ========================================================================== */

@media (max-width: 1024px) {
	.staff-panel .image-team {
		width: 100%;
	}

	.staff-panel .second-team,
	.staff-panel .third-team {
		margin-right: 10%;
		width: 45%;
	}

	.staff-panel .third-team {
		margin-right: var(--space-0);
	}
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
	.staff-panel .image-team .team-person {
		margin-right: var(--space-0);
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
	.staff-panel .content {
		display: flex;
		flex-direction: column;
	}

	.staff-panel .second-team,
	.staff-panel .third-team {
		margin-bottom: var(--space-7);
		margin-right: 0%;
		width: 100%;
	}
}