/**
 * Single Team member profile — "Bio Page V2".
 *
 * Reproduces client's-provided-mockup/Bio_Page_Mockup_V2.htm. That mockup runs
 * under html{zoom:1.25}, so every value here is the mockup's CSS px x 1.25 (the
 * size it actually renders at), expressed as a fluid clamp that hits the target
 * at the theme's 1600px design ceiling.
 *
 * Layout / spacing / decoration only — font sizes, weights, line-heights and
 * token colors are applied via the site's utility classes in single-team.php.
 * The one exception is .bio-body, whose markup comes from a WYSIWYG field and
 * therefore cannot carry utility classes.
 */

.tm-bio {
	--bio-max: 1625px; /* mockup 1300 x 1.25 */

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

/*--------------------------------------------------------------
# Navy identity banner
--------------------------------------------------------------*/

.tm-bio .bio-banner {
	position: relative;
	overflow: hidden;
	padding-block: clamp(45px, 3.63vw + 31.94px, 90px);
	background: var(--gradient-navy);
	border-bottom: 1px solid rgba(196, 154, 44, 0.22);
}

/* Gold light-bar down the left edge. */
.tm-bio .bio-banner::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: linear-gradient(to bottom, transparent 8%, var(--color-gold2) 45%, transparent 92%);
}

.tm-bio .bio-banner-crumb,
.tm-bio .bio-banner-grid {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bio-max);
	margin-inline: auto;
	padding-inline: var(--section-pad-x);
}

.tm-bio .bio-banner-crumb {
	margin-block-end: clamp(21.25px, 1.71vw + 15.08px, 42.5px);
	letter-spacing: 0.04em;
}

.tm-bio .bio-banner-crumb a {
	color: var(--color-white);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.tm-bio .bio-banner-crumb a:hover,
.tm-bio .bio-banner-crumb a:focus-visible {
	opacity: 1;
}

.tm-bio .bio-banner-crumb .sep {
	margin-inline: 8px;
	color: rgba(255, 255, 255, 0.4);
}

.tm-bio .bio-banner-grid {
	display: grid;
	grid-template-columns: clamp(220px, 12.5vw + 175px, 375px) minmax(0, 1fr);
	gap: clamp(40px, 3.23vw + 28.39px, 80px);
	align-items: center;
}

.tm-bio .bio-banner-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid rgba(196, 154, 44, 0.5);
	background-color: var(--color-bg);
}

.tm-bio .bio-banner-name {
	letter-spacing: -0.02em;
	margin-block: 0 20px;
}

.tm-bio .bio-banner-intro {
	max-width: 750px; /* mockup 600 x 1.25 */
	margin: 0;
	color: var(--color-gold2);
}
.single-team .social-links {
	margin: 15px 0 0;
	display: flex;
	align-items: center;
	gap: 15px;
}
.single-team .social-links i {
	font-size: 26px;
	color: var(--color-white);
	transition: color 0.2s ease, transform 0.2s ease;
}
.single-team .social-links a:hover i {
	color: var(--color-gold-hover);
	transform: translateY(-2px);
}
.team-m-designation br {
	display: none;
}
/*--------------------------------------------------------------
# Two-column body
--------------------------------------------------------------*/

.tm-bio .bio-wrap {
	width: 100%;
	max-width: var(--bio-max);
	margin-inline: auto;
	padding-block: clamp(30px, 2.42vw + 21.29px, 60px) clamp(50px, 4.03vw + 35.48px, 100px);
	padding-inline: var(--section-pad-x);
	display: grid;
	grid-template-columns: clamp(300px, 12.1vw + 256.45px, 450px) minmax(0, 1fr);
	gap: clamp(45px, 3.63vw + 31.94px, 90px);
	align-items: start;
}

/*--------------------------------------------------------------
# Left column — credentials
--------------------------------------------------------------*/

.tm-bio .bio-sec {
	margin-block-end: clamp(30px, 2.42vw + 21.29px, 60px);
}

.tm-bio .bio-sec:last-child {
	margin-block-end: 0;
}

.tm-bio .bio-sec-h {
	letter-spacing: -0.01em;
	margin-block: 0 clamp(14px, 0.89vw + 10.81px, 25px);
}

.tm-bio .bio-rule {
	height: 1px;
	margin-block-end: clamp(14px, 0.89vw + 10.81px, 25px);
	background-color: var(--color-gold-light);
}

.tm-bio .bio-block {
	margin-block-end: clamp(16px, 0.93vw + 12.66px, 27.5px);
}

.tm-bio .bio-block:last-child {
	margin-block-end: 0;
}

.tm-bio .bio-block .t {
	margin-block-end: 6px;
}

/* Areas of Focus — a plain stacked list with tighter rhythm. */
.tm-bio .bio-two .bio-block {
	margin-block-end: clamp(12px, 0.44vw + 10.4px, 17.5px);
}

.tm-bio .bio-two .bio-block:last-child {
	margin-block-end: 0;
}

.tm-bio .bio-contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tm-bio .bio-contact-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tm-bio .bio-contact-row .k {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tm-bio .bio-contact-row a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.tm-bio .bio-contact-row a:hover,
.tm-bio .bio-contact-row a:focus-visible {
	color: var(--color-navy);
}

/* Recognition — 2 x 2 bordered grid with collapsed inner borders. */
.tm-bio .bio-pillars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-block-end: clamp(16px, 0.93vw + 12.66px, 27.5px);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg2);
}

.tm-bio .bio-pillar {
	padding-block: clamp(16px, 0.73vw + 13.39px, 25px);
	padding-inline: clamp(12px, 0.65vw + 9.68px, 20px);
	text-align: center;
	border-inline-end: 1px solid var(--color-border);
	border-block-end: 1px solid var(--color-border);
}

.tm-bio .bio-pillar:nth-child(2n) {
	border-inline-end: 0;
}

.tm-bio .bio-pillar:nth-last-child(-n + 2) {
	border-block-end: 0;
}

/*
 * An odd LAST pillar spans the full width instead of leaving the second column
 * empty. The grid is a fixed `1fr 1fr`, so a member with one recognition item
 * rendered a half-width block beside dead space — with the column divider still
 * drawn down the middle of it, because `:nth-child(2n)` (which clears that
 * border) only ever matches the RIGHT column. Hence clearing it here too.
 *
 * `:last-child:nth-child(odd)` rather than `:only-child` so it covers 3, 5, …
 * as well as 1 — the empty cell is the same defect at any odd count. Today
 * Scott Zafia and Michael Harostock have exactly one each; Louis has four and is
 * untouched, since an even count never leaves a gap.
 *
 * Harmless in the single-column block below: `1 / -1` is just the one column.
 */
.tm-bio .bio-pillar:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	border-inline-end: 0;
}

.tm-bio .bio-pillar .n {
	letter-spacing: 0.02em;
}

.tm-bio .bio-pillar .l {
	margin-block-start: 7.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tm-bio .bio-quote {
	margin: 0;
	padding-block-start: 7.5px;
	padding-inline: 10px;
	font-style: italic;
	text-align: center;
}

/*--------------------------------------------------------------
# Right column — biography (WYSIWYG output)
--------------------------------------------------------------*/

/* Offset the sticky theme header so the column never slides underneath it. */
.tm-bio .bio-right {
	position: sticky;
	top: calc(clamp(64px, 5.73vw + 43.4px, 135px) + 25px);
}

.tm-bio .bio-body > *:last-child {
	margin-block-end: 0;
}

/* Typography lives here (not in utilities) because this markup is generated. */
.tm-bio .bio-body p {
	margin-block: 0 clamp(18px, 0.97vw + 14.52px, 30px);
	font-size: clamp(13.27px, 0.341vw + 12.04px, 17.5px); /* mockup 14 x 1.25 */
	line-height: 1.85;
	color: var(--color-text2);
}

.tm-bio .bio-body ul,
.tm-bio .bio-body ol {
	margin-block: 0 clamp(18px, 0.97vw + 14.52px, 30px);
	padding: 0;
	list-style: none;
}

.tm-bio .bio-body li {
	position: relative;
	margin-block-end: clamp(13px, 0.56vw + 10.97px, 20px);
	padding-inline-start: clamp(22px, 0.65vw + 19.68px, 30px);
	font-size: clamp(13.27px, 0.341vw + 12.04px, 17.5px); /* mockup 14 x 1.25 */
	line-height: 1.85;
	color: var(--color-text2);
}

.tm-bio .bio-body li:last-child {
	margin-block-end: 0;
}

.tm-bio .bio-body li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-gold2);
}

.tm-bio .bio-body ol {
	counter-reset: bio-ol;
}

.tm-bio .bio-body ol li {
	counter-increment: bio-ol;
}

.tm-bio .bio-body ol li::before {
	content: counter(bio-ol) '.';
	top: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--color-gold2);
	font-weight: 700;
}

.tm-bio .bio-body a {
	color: var(--color-gold);
	text-decoration: underline;
}

.tm-bio .bio-body a:hover,
.tm-bio .bio-body a:focus-visible {
	color: var(--color-navy);
}

/*--------------------------------------------------------------
# Responsive — stack at the site's established 1200px breakpoint
  (the mockup stacks at 980 CSS px, which under its 1.25 zoom is 1225 physical)
--------------------------------------------------------------*/

@media (max-width: 1200px) {

	.tm-bio .bio-banner-grid {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.tm-bio .bio-banner-photo-wrap {
		width: 100%;
		max-width: 375px;
	}

	.tm-bio .bio-wrap {
		grid-template-columns: 1fr;
	}

	.tm-bio .bio-right {
		position: static;
	}
}

@media (max-width: 600px) {

	.tm-bio .bio-pillars {
		grid-template-columns: 1fr;
	}

	.tm-bio .bio-pillar {
		border-inline-end: 0;
	}

	.tm-bio .bio-pillar:nth-last-child(-n + 2) {
		border-block-end: 1px solid var(--color-border);
	}

	.tm-bio .bio-pillar:last-child {
		border-block-end: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.tm-bio .bio-banner-crumb a,
	.tm-bio .bio-contact-row a {
		transition: none;
	}
}