/*------------------------------------------------------------------
team_with_modal.css
Last edited: 8/26/25
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/
/* add mobile CSS here */
.band-team-with-modal .intro {
	text-align: center;
	padding: 15px;
	margin-bottom: 40px;
	text-align: center;
}
.band-team-with-modal.featured-members .intro {
	background-color: var(--theme-color-blue);
}

.band-team-with-modal .intro :is(h1, h2, p) {
	color: var(--theme-color-blue);
	margin-bottom: 0;
	text-transform: uppercase;
	line-height: 1;
	font-size: var(--theme-fs-h2);
}

.band-team-with-modal.featured-members .intro :is(h1, h2, p) {
	color: white;
	font-weight: var(--theme-fw-extra-bold);
	margin-bottom: 0;
	text-transform: uppercase;
	line-height: 1;
	font-size: var(--theme-fs-h2);
}
	

.band-team-with-modal .card {
	margin-bottom: 60px;
}
.band-team-with-modal.featured-members .card {
	margin: 0 auto 30px;
	max-width: 360px;
}
.band-team-with-modal .card,
.band-team-with-modal .card img {
	transition: 0.4s all ease;
}
.band-team-with-modal .card img {
	margin-bottom: 0;
	width: 100%;
}

.band-team-with-modal.other-members .card {
	flex-wrap: nowrap;
	flex-direction: row;
}


.band-team-with-modal.other-members .card-body {
	padding: 15px 15px 5px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.band-team-with-modal.other-members .card-body p.btn {
	margin-top: auto;
}

.band-team-with-modal.other-members .card :is(img, .card-body) {
}

.band-team-with-modal.other-members .card img {
	width: 40%;
	min-height: 100%;
	object-fit: cover;
	object-position: center top;
}


.band-team-with-modal .card:hover img {
}
.band-team-with-modal a,
.band-team-with-modal a:hover {
    text-decoration: none;
}
.band-team-with-modal .card-body {
	padding: 30px 15px;
	transition: 0.2s all ease;
}

.band-team-with-modal.featured-members .card-body {
	background-color: var(--theme-color-eggshell);
}

.band-team-with-modal .card-body h3 {
	color: var(--theme-color-dark);
	font-size: var(--theme-fs-medium);
	transition: 0.2s all ease;
}

.band-team-with-modal .card-body p:last-child {
	margin-bottom: 0;
}


.band-team-with-modal .card-body p {
	font-size: var(--theme-fs-small);
	color: var(--theme-color-dark);
	margin-bottom: 5px;
}

.band-team-with-modal .card-body p.affiliation {
	font-style: italic;
}
.band-team-with-modal a:hover .card-body {
	background-color: var(--theme-color-blue);
}
.band-team-with-modal a:hover .card-body,
.band-team-with-modal a:hover .card-body h3,
.band-team-with-modal a:hover .card-body p {
	color: var(--theme-color-light);
}
.band-team-with-modal a:hover .btn.btn-arrow.btn-dark-arrow::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 15.49 17.91'%3E%3Cpath d='M0 17.91V0l15.49 8.95L0 17.91Z' data-name='Layer 1' style='fill:%23fff'/%3E%3C/svg%3E");
}

.team-modal {
	color: var(--theme-color-dark);
	padding: 15px 0;
}
.team-modal .headshot {
	margin-bottom: 20px;
	max-width: 275px;
}
.team-modal h3.name {
	color: var(--theme-color-dark);
	font-size: 28px;
	margin-bottom: 5px;
}
.team-modal .title,
.team-modal .affiliation {
	margin-bottom: 0;
}
.team-modal .bio {
	font-size: var(--theme-fs-small);
}
.team-modal .social-icons {
	margin: 0 0 20px;
}
.team-modal .social-icons a:first-of-type {
	padding-left: 0;
}
.team-modal .social-icons a:hover {
	text-decoration: none;
}

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
	.band-team-with-modal.featured-members .card {
		margin: 0 0 60px;
		max-width: 100%;
	}
	.band-team-with-modal.other-members .card img {
		width: 30%;
	}

}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {    
	.band-team-with-modal.other-members .card img {
	width: 40%;
}
	.team-modal {
		padding: 30px 15px;
	}
	.team-modal .headshot {
		max-width: 100%;
	}
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
	.band-team-with-modal.featured-members .gutter [class^="col-"]:nth-of-type(3n+1) {
		padding-left: 15px;
		padding-right: 29px;
	}
	.band-team-with-modal.featured-members .gutter [class^="col-"]:nth-of-type(3n-1) {
		padding-left: 22px;
		padding-right: 22px;
	}
	.band-team-with-modal.featured-members .gutter [class^="col-"]:nth-of-type(3n) {
		padding-left: 29px;
		padding-right: 15px;
	}  	
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
	.band-team-with-modal.other-members .card-body {
		padding: 15px 15px 5px 30px;
	}
	.band-team-with-modal.other-members .card img {
		width: 35%;
	}
}