/*
 * DB Surgical — team page cards.
 *
 * Everything is scoped to .dbs-team so nothing leaks into the rest of the site.
 * The theme styles .employee-name, .employee-position, .team_heading and
 * .team-name as bare classes in assets/css/style.css and responsive.css, so the
 * properties it sets there are reset here explicitly rather than left to chance.
 */

.dbs-team {
	--dbs-blue: #316BEF;
	--dbs-sky: #5AB9E8;
	--dbs-navy: #030923;
	--dbs-card: #F9F9F9;
}

.dbs-team .team-section { padding: 60px 0 20px; }

/* Heading and grid sit in one box so they share the same left edge,
   exactly as they do inside .wrap in the approved design. */
.dbs-team .team-section .team-section-inner {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Section heading ------------------------------------------------------- */

.dbs-team .team-section .team_heading {
	display: inline-flex !important;
	align-items: flex-start;
	gap: 14px !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	margin-bottom: 38px;
}

.dbs-team .team-section .team_heading svg {
	width: 44px !important;
	height: 44px !important;
	max-width: none !important;
	flex: 0 0 auto;
	margin: 6px 0 0 !important;
	position: static !important;
}

.dbs-team .team-section .team-name {
	color: var(--dbs-blue);
	font-family: "arboria", "Montserrat", sans-serif;
	font-weight: 500;
	font-size: clamp(32px, 5.2vw, 56px);
	line-height: 1;
	border-bottom: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Grid and card --------------------------------------------------------- */

.dbs-team .team-section .team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 0;
	padding: 0;
}

.dbs-team .team-section .team-card {
	background: var(--dbs-card);
	border-radius: 33px;
	padding: 22px 26px 26px;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
	margin: 0;
}

.dbs-team .team-section .team-card--slim { padding: 30px 30px 26px; }

/* Photo ----------------------------------------------------------------- */

.dbs-team .team-section .card-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	overflow: hidden;
	margin: 0 0 20px;
	padding: 0;
	position: relative;
}

.dbs-team .team-section .card-photo img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	display: block;
	margin: 0;
}

.dbs-team .team-section .card-photo--initials {
	background: var(--dbs-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
}

.dbs-team .team-section .card-photo--initials .ph-star { width: 34px; height: 34px; }

.dbs-team .team-section .card-photo--initials span {
	font-family: "arboria", "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 58px;
	color: var(--dbs-sky);
	line-height: 1;
}

/* Name block ------------------------------------------------------------ */

/* The star is a flex item rather than an absolutely positioned one, so the
   space between it and the name is fixed by `gap` and cannot be widened by
   the padding the theme puts on .employee-name. */
.dbs-team .team-section .employee_heading {
	display: flex !important;
	align-items: flex-start;
	gap: 10px !important;
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
}

.dbs-team .team-section .card-star {
	position: static !important;
	flex: 0 0 30px;
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
}

.dbs-team .team-section .card-star svg {
	width: 30px !important;
	height: 30px !important;
	max-width: none !important;
	display: block;
	margin: 0 !important;
}

/* Theme sets padding-left on these as bare classes in assets/css/style.css
   and again in responsive.css; outrank both. */
.dbs-team .team-section .team-card .employee_heading .employee-name,
.dbs-team .team-section .team-card .employee_heading .employee-position {
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-indent: 0 !important;
}

.dbs-team .team-section .employee-name {
	color: var(--dbs-blue);
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left;
}

.dbs-team .team-section .employee-position {
	color: #000;
	font-size: 15.5px;
	line-height: 1.4;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	text-align: left;
}

.dbs-team .team-section .employee-bio {
	color: #1c1c1c;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	text-align: left;
}

/* LinkedIn pill --------------------------------------------------------- */

.dbs-team .team-section .li-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 18px 0 0 !important;
	padding: 9px 18px;
	border: 1px solid var(--dbs-sky);
	border-radius: 40px;
	color: var(--dbs-blue);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: all .25s ease;
}

.dbs-team .team-section .li-pill .li-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.dbs-team .team-section .li-pill:hover { background: var(--dbs-sky); color: #fff; text-decoration: none; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
	.dbs-team .team-section .team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.dbs-team .team-section .li-pill { padding: 11px 20px; font-size: 13.5px; }
}

@media (max-width: 640px) {
	.dbs-team .team-section { padding-top: 44px; }
	.dbs-team .team-section .team-grid { grid-template-columns: 1fr; }
	.dbs-team .team-section .team_heading { margin-bottom: 26px; }
	.dbs-team .team-section .team_heading svg { width: 32px; height: 32px; margin-top: 4px; }
	.dbs-team .team-section .card-photo { border-radius: 20px; }
	.dbs-team .team-section .team-card { border-radius: 28px; }
	.dbs-team .team-section .employee-name { font-size: 16px; }
}