/* Team member profile pages — /team/{slug}/
   Pulls from existing SolvAir brand conventions:
     - primary blue #1a63ab  (buttons, accents — matches casestudy-stats)
     - link blue    var(--link-blue)  (matches .button border/text)
     - hover dark   #11275d  (matches .button:hover)
     - light grey   #f5f7fa  (matches sidebar-box in testimonial-form)
     - quote grey   #f1f1f1  (matches .casestudy-quote)
   Typography, .section, .section-boxed, .intro, .card-* classes all inherit
   from style.css — this file only adds the layout specific to the profile page. */

/* -----------------------------
   Hero
   ----------------------------- */
.team-member-hero {
	padding: 40px 0 50px;
	margin: 0;
}

/* Imagify wraps <img> in <picture> for WebP delivery, transferring the class
   to the wrapper — so we style the wrapper to create the circle and style
   the inner <img> to fill it. Works whether .team-member-photo ends up as
   the <picture> wrapper OR a raw <img> element. */
.team-member-hero .team-member-photo {
	display: block;
	width: 260px;
	height: 260px;
	max-width: 100%;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(17, 39, 93, 0.12);
	/* If the class is on a raw <img> (no picture wrapper), these apply to it directly */
	object-fit: cover;
	object-position: center 25%;
}

/* If the class is on a <picture> wrapper (Imagify case), the inner <img> needs
   to fill the circle with the same crop behaviour. */
.team-member-hero .team-member-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

.team-member-hero .team-member-name {
	margin: 0 0 0.25em;
	line-height: 1.1;
	font-weight: 300;
}

.team-member-hero .team-member-job-title {
	color: #1a63ab;
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 1rem;
	letter-spacing: 0.2px;
}

.team-member-hero .team-member-short-bio {
	font-size: 1.1rem;
	line-height: 1.55;
	color: #333;
	margin: 0 0 1.25rem;
	max-width: 60ch;
}

.team-member-hero .team-member-linkedin a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--link-blue);
	text-decoration: none;
	font-weight: 500;
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.team-member-hero .team-member-linkedin a:hover {
	color: #11275d;
	border-bottom-color: #11275d;
}

.team-member-hero .team-member-linkedin i {
	font-size: 1.25rem;
	color: #0a66c2; /* LinkedIn brand blue */
}

/* -----------------------------
   Body — full bio + credentials sidebar
   ----------------------------- */
.team-member-body {
	padding: 20px 0 40px;
	margin: 0;
}

.team-member-body .richtext {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #222;
}

.team-member-body .richtext h2,
.team-member-body .richtext h3 {
	margin-top: 1.75em;
	margin-bottom: 0.5em;
}

/* Bio: full width, set in two columns on large screens (Jason 2026-10-01) so each line stays a
   readable length. Only when there are two or more paragraphs: a one-paragraph bio (Dan) would
   otherwise sit in the left column beside an empty right one. Paragraphs never split across
   the columns. */
@media (min-width: 992px) {
	.team-member-bio:has(p + p) {
		column-count: 2;
		column-gap: 3rem;
	}
	.team-member-bio p {
		break-inside: avoid;
	}
}

/* "Areas of expertise" — a full-width box closing the section, below the bio (2026-10-01;
   it was a sidebar beside it). Echoes .sidebar-box from testimonial-form.css. */
.team-member-credentials {
	background: #f5f7fa;
	border-radius: 6px;
	padding: 1.75rem 1.75rem 1.5rem;
}

.team-member-bio + .team-member-credentials {
	margin-top: 2.5rem;
}

/* h2 since 2026-08-13: these sit directly under the bio's h1, so h3 skipped a level.
   The selector moved with the tag — colour, weight and letter-spacing live ONLY here,
   so leaving it on h3 would have silently reverted all three to the base heading. */
.team-member-credentials h2 {
	/* Keeps the h3 scale it has always rendered at — the base h2 is 36px. The 991px
	   step below mirrors the theme's responsive h3, whose breakpoint is not this
	   file's 767px one. */
	font-size: 24px;
	line-height: 1.2;
	margin-top: 1.25rem;
	margin-bottom: 1rem;
	color: #11275d;
	font-weight: 500;
	letter-spacing: 0.2px;
}

@media (max-width: 991px) {
	.team-member-credentials h2 {
		font-size: 20px;
	}
}

.team-member-credentials h2:first-child {
	margin-top: 0;
}

.team-member-credentials p {
	margin: 0;
	color: #333;
	line-height: 1.55;
}

.team-member-knowsabout {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.team-member-knowsabout li {
	background: #fff;
	border: 1px solid #d6dee8;
	color: #1a63ab;
	font-size: 0.85rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	line-height: 1.4;
	/* Was `white-space: nowrap`, which meant a long phrase could not break and overflowed the
	   #f5f7fa box on a narrow sidebar. Chris and Steve have the longest lists. Breaking BETWEEN
	   words is fine; what nowrap was really protecting against is a chip splitting mid-phrase,
	   and max-width keeps that rare while still letting the chip wrap when it has to. */
	max-width: 100%;
}

/* -----------------------------
   Articles by [Name]
   ----------------------------- */
.team-member-articles {
	background: #f1f1f1;
}

.team-member-articles-heading {
	font-weight: 300;
	margin: 0 0 2rem;
	text-align: center;
}

/* The cards themselves are the site's standard .news-tile (loop-post.php) since 2026-10-01;
   their spacing comes from `.post-grid:has(.news-tile)` in style.css. That 2.5rem gutter is
   wider than the container's phone padding, so it is pulled back to Bootstrap's default there
   or the one-column grid overhangs the screen by 8px. */
@media (max-width: 767px) {
	.team-member-articles .post-grid {
		--bs-gutter-x: 1.5rem;
	}
}

/* -----------------------------
   Responsive
   ----------------------------- */
@media (max-width: 767px) {
	.team-member-hero {
		padding: 30px 0 35px;
		text-align: center;
	}
	.team-member-hero .team-member-photo {
		width: 180px;
		height: 180px;
	}
	.team-member-hero .team-member-name {
		margin-top: 1.25rem;
	}
	.team-member-hero .team-member-short-bio {
		margin-left: auto;
		margin-right: auto;
	}
}

/* The case-study strip carries its grey band from the home page, where it sits between two
   coloured sections. Here it follows the grey articles band and runs into the white brochure
   section, so the grey only made an odd step — white on these pages only (Jason 2026-10-01). */
.single-team_member .home-casestudies {
	background: transparent;
}