/* ! [[ Staff Module ]] */

/* ! [ Staff - general display ] */
.staff-heading {

}

.staff-items {
	/* Grid Fallback */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;

	/* Supports Grid */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	grid-gap: 1.5em;

	padding: 0;
	margin: 1rem 0 4rem 0;
}
	.staff-item {
		position: relative;
		padding: 0;
		margin: 0;

		display: flex;
		flex-direction: column;

		max-width: 260px;
	}
		.staff-figure {
			margin: 1rem;
			overflow: hidden;
			position: relative;
			border-radius: 50%;
		}
			.staff-img {
				display: block;
				width: 100%;
				height: auto;

				aspect-ratio: 1 / 1;
				object-fit: cover;

				transition: transform .3s ease-in;
			}
			.staff-item:hover .staff-img {
				/* transform: scale(1.05); */
			}
			.staff-figure figcaption {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: .5rem .75rem .3rem;
				background: hsla(0, 0%, 0%, .5);
				color: #fff;
				font-size: .75rem;
			}
		.staff-details {
			font-size: 1rem;
			padding: .5rem 0;
		}
			.staff-details > :last-child {
				margin-bottom: 0;
			}
			.staff-title {
				margin: 0 0 .5rem 0;

			}
			.staff-position {
				font-weight: bolder;
				margin-bottom: .5rem;
			}

			.staff-details p {
				font-size: 1rem;
			}
				.staff-phone,
				.staff-email {
					margin: 0;
					font-weight: bolder;
				}
			.staff-meta a {
				text-decoration: underline;
				display: block;
			}
			.staff-bio {
				margin-top: .5rem;
			}

/* ! [Staff Index] */
.staff-index .staff-items {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.staff-index .staff-title {
	font-size: 1rem;
	text-align: center;
}
.staff-index .staff-position {
	text-align: center;
	font-style: italic;
	line-height: 1.3;
}
.staff-index .staff-bio {
	display: none;
}



/* ! [ Staff - Drill-In profile view ] */
.staff-view {
	/* Grid Fallback */
	display: flex;
	flex-wrap: wrap;

	/* Supports Grid */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-gap: 2rem;

	margin-block: 2rem 4rem;
}
	.staff-view .staff-title {
		margin: 0 0 .25em;
	}
	.staff-view .staff-img {

	}



/* ! [ Staff - Profiles (as signatures below content) ] */

.profiles-section {
	container-type: inline-size;
	container-name: profiles-section;

	/* --section-bg: color-mix(in srgb, var(--blue-sky), transparent 50%); */
	/* --section-bg: #f3f9fe; */
	margin: 4rem 0;
	padding: 2rem 0 2rem 2rem;

	padding-inline-start: calc(var(--main-columns-gap) / 2);
	margin-inline-start: calc(var(--main-columns-gap) / 2 * -1);

	border-start-start-radius: calc(var(--border-radius) * 2);
	border-end-start-radius: calc(var(--border-radius) * 2);

	background-color: var(--section-bg);

	box-shadow: 25vw 0 0 0 var(--section-bg),
				50vw 0 0 0 var(--section-bg);
}

	.profiles-intro {
		margin-right: 2rem;
		max-width: 800px;
	}
		.profiles-intro h2:first-of-type {
			text-wrap: balance;
		}

	.profile-items-headline {
		margin-top: 1rem;
		margin-bottom: 1rem;
		text-wrap: balance;
		position: relative;
	}
	.profile-items-headline::after {
		content: '';
		position: absolute;
		height: 1px;
		width: 100vw;
		left: calc( var(--main-columns-gap) / 2 * -1);
		bottom: -1rem;
		background-color: var(--blue-bright);
	}
	.profiles-items {
		margin-right: 2rem;
	}
		.profile-item {
			display: flex;
			gap: 1rem 2rem;
			padding-block: 1.5rem;
			position: relative;
		}
		.profile-item + .profile-item::before {
			content: '';
			position: absolute;
			height: 1px;
			width: 100vw;
			left: 11%;
			top: 0;
			background-color: var(--blue-bright);
		}
			.profile-avatar {
				flex-basis: 15%;
				min-width: 50px;
				max-width: 85px;
			}
				.profile-avatar .staff-figure {
					margin: 0;
				}
				.profile-img {
					display: block;
					width: 100%;
					height: auto;
					border-radius: 50%;
					overflow: hidden;
				}
			.profile-contact {
				flex-basis: 25%;
			}
				.profile-title {
					margin-block-end: .25rem;
					font-size: 1rem;
					color: var(--blue-bright);
				}
				.profile-details {
					margin: 0;
				}
				.profile-contact a {
					color: inherit;
					text-decoration: underline;
					text-decoration-thickness: .5px;
				}

			.profile-address {
				flex-basis: 25%;
				font-style: normal;
				font-weight: 700;

				max-width: 300px;
			}
			.profile-social {
				flex-basis: 25%;
				min-width: 4rem;
			}
				.profile-social-list {
					flex-wrap: wrap;
					justify-content: flex-start;
					column-gap: 1rem;
					row-gap: .5rem;
					margin: 0;
				}
				.profile-social-list .icon {
					width: 1.25rem;
					height: 1.25rem;
					line-height: .85;
				}

	/* ! [Profile Showcase - larger profiles for displaying executives ] */
	.profile-showcase {

	}
		.profile-showcase .profile-item + .profile-item::before {
			left: 28%;
		}

		.profile-showcase .profile-avatar {
			max-width: none;
			flex-basis: 25%;
			flex-shrink: 0;
		}
		.profile-showcase .profile-content {
			flex-shrink: 1;
		}
			.profile-showcase .profile-name {
				margin-block-end: .25rem;
				font-size: 1.5rem;
				color: var(--blue-bright);
			}
			.profile-showcase .profile-social {
				margin-block: 1rem;
			}


	@container (width < 700px) {
		.profiles-intro,
		.profiles-items {
			margin-right: 0;
		}
		.profile-contact {
			flex-basis: 75%;
		}
		.profile-address {
			display: none;
		}

		.profile-item + .profile-item::before {
			left: 0%;
		}
		.profile-showcase .profile-item + .profile-item::before {

		}
	}
	@container (width < 480px) {

		.profile-item {
			flex-wrap: wrap;
			gap: 1rem;
			padding-block: 1rem;
		}
		.profile-social {
			padding-left: calc(15% + 1rem);
			flex-basis: 100%;
		}
		.profile-social-list {
			justify-content: flex-start;
			margin-left: 0;
		}
	}

	@media (width < 480px) {
		/* container styles can't be changed via @container CQ itself, hence this MQ */
		.profiles-section {
			margin-block: 2rem;
			padding-block: 1rem 0;
		}
	}