/**
 * Team Roster section.
 * Values calibrated to the Meet the Team mockup × its 1.25 zoom (rendered size),
 * fluid down to mobile. Typography is applied via utility classes in the markup;
 * this file is layout / spacing / decoration only.
 */

/* Section owns its own vertical rhythm (header band + centered wrap). */
.team-roster { padding-block: 0; }

/* ── Header band ─────────────────────────────────────────── */
.tr-head {
	background-color: var(--color-bg2);
	padding-block: clamp(40px, 2.62vw + 30.57px, 72.5px);
	padding-inline-end: var(--section-pad-x);
	padding-inline-start: clamp(24px, 13.19vw - 23.47px, 187.5px);
}

.tr-ey {
	display: flex;
	align-items: center;
	gap: clamp(9px, 0.28vw + 7.99px, 12.5px);
	letter-spacing: 0.28em;
	margin-block-end: clamp(10px, 0.2vw + 9.27px, 12.5px);
}

.tr-ey-dot {
	width: clamp(6px, 0.22vw + 5.2px, 8.75px);
	height: clamp(6px, 0.22vw + 5.2px, 8.75px);
	border-radius: 50%;
	background-color: var(--color-gold2);
	flex-shrink: 0;
}

.tr-title { letter-spacing: -0.01em; margin: 0; }
.tr-head + .tr-wrap {
	padding-top: clamp(50px ,3.5vw , 80px);
}

/*
 * ── is-navy ──────────────────────────────────────────────
 * The client asked for this band to match the Team CPT bio banner
 * (2026-08-03), so it borrows `.bio-banner`'s exact treatment: the shared
 * --gradient-navy, the hairline gold rule along the bottom edge, and the
 * vertical gold rail up the leading edge. Only surface + decoration live here;
 * the type colours invert via utilities in team_roster.php (convention 2).
 *
 * `position: relative` is required — the rail is an absolutely positioned
 * ::before and .tr-head is otherwise static.
 */
.tr-head.is-navy,
.is-navy .tr-head {
	position: relative;
	background-color: transparent;
	background-image: var(--gradient-navy);
	border-bottom: 1px solid rgba(196, 154, 44, 0.22);
	overflow: hidden;
}

.tr-head.is-navy::before,
.is-navy .tr-head::before {
	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%);
}

/* ── Centered content wrap ───────────────────────────────── */
.tr-wrap {
	width: 100%;
	max-width: 1475px;
	margin-inline: auto;
	padding-inline: var(--section-pad-x);
	padding-block-end: clamp(56px, 4.76vw + 38.87px, 115px);
}

/* Shared portrait — square, thin gold frame. */
.tr-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border: 1px solid rgba(196, 154, 26, 0.5);
	background-color: var(--color-bg2);
}

/*
 * Portrait → single-bio link (template-parts/team/team-listing.php).
 *
 * The hover deliberately reuses the site's established link-card interaction
 * from services.css `.svc-card-link:hover` — same gold border, same -5px lift,
 * same shadow, same 0.28s ease — so a roster portrait and a service card feel
 * like the same control rather than two different hovers.
 *
 * Chosen over an image zoom on purpose: a zoom needs `overflow:hidden` on the
 * wrapper, which would clip .tr-photo's gold frame and force the border onto the
 * wrapper instead. `transform` costs no reflow, so the grid geometry is
 * untouched at every breakpoint.
 */
.tr-photo-link {
	display: block;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.tr-photo-link .tr-photo { transition: border-color 0.28s ease; }

/*
 * Member name → single-bio link.
 *
 * `color: inherit` is load-bearing, not tidiness: the global
 * `a { color: var(--color-gold) }` in style.css would otherwise repaint every
 * member name gold and change the page at rest. Inheriting keeps the heading's
 * `.text-navy` utility winning, so the resting state is pixel-identical.
 */
.tr-name-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.28s ease;
}

/*
 * The portrait and the name are two links to one destination, so they share one
 * hover state — hovering either lifts the portrait, golds its frame, and golds
 * the name. Without this they'd look like two unrelated controls sitting on top
 * of each other.
 *
 * Driving it from the CARD (:has) rather than each link also covers keyboard
 * users: the portrait link is tabindex="-1", so `.tr-photo-link:focus-visible`
 * can never fire and the name's focus is the only route to portrait feedback.
 *
 * Progressive enhancement — where :has() is unsupported, the plain
 * `.tr-photo-link:hover` and `.tr-name-link:hover` rules still work on their own.
 */
.tr-photo-link:hover,
:is(.tr-member, .tr-featured):has(.tr-name-link:hover) .tr-photo-link,
:is(.tr-member, .tr-featured):has(.tr-name-link:focus-visible) .tr-photo-link {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px -20px rgba(0, 0, 128, 0.42);
}

.tr-photo-link:hover .tr-photo,
:is(.tr-member, .tr-featured):has(.tr-name-link:hover) .tr-photo,
:is(.tr-member, .tr-featured):has(.tr-name-link:focus-visible) .tr-photo {
	border-color: var(--color-gold2);
}

.tr-name-link:hover,
.tr-name-link:focus-visible,
:is(.tr-member, .tr-featured):has(.tr-photo-link:hover) .tr-name-link {
	color: var(--color-gold2);
}

@media (prefers-reduced-motion: reduce) {
	.tr-photo-link { transition: none; }

	.tr-photo-link:hover,
	:is(.tr-member, .tr-featured):has(.tr-name-link:hover) .tr-photo-link,
	:is(.tr-member, .tr-featured):has(.tr-name-link:focus-visible) .tr-photo-link {
		transform: none;
		box-shadow: none;
	}
}

/* ── Featured member ─────────────────────────────────────── */
.tr-featured {
	display: grid;
	/* Side columns are viewport-fluid so they shrink WITH the middle column
	   instead of holding a fixed px max and crushing the bio at 1025–1440px.
	   They reach the design's 410/450 near the ceiling, then scale down. */
	grid-template-columns: clamp(240px, 26vw, 410px) minmax(0, 1fr) clamp(250px, 28vw, 450px);
	gap: clamp(30px, 2.42vw + 21.29px, 60px);
	align-items: start;
	padding-block: clamp(48px, 3.19vw + 36.53px, 87.5px) clamp(44px, 2.5vw + 35px, 75px);
}

/* Photo fills its (now fluid) column and never exceeds the design width. The
   link wrapper takes the same cap so the lift/shadow tracks the image box. */
.tr-featured .tr-photo,
.tr-featured .tr-photo-link { max-width: 410px; }

.tr-feat-body { padding-block-start: 6px; }

.tr-featured .tr-name { margin: 0 0 clamp(6px, 0.12vw + 5.57px, 7.5px); letter-spacing: -0.01em; }

.tr-role { margin: 0 0 clamp(20px, 0.6vw + 17.82px, 27.5px); color: var(--color-text); }

.tr-bio { max-width: 550px; margin: 0; }
.tr-bio p { margin: 0; }

.tr-cards {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 0.44vw + 10.4px, 17.5px);
	padding-block-start: 4px;
}

.tr-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-bg2);
	border: 1px solid var(--color-border);
	padding: clamp(14px, 0.69vw + 11.53px, 22.5px) clamp(16px, 0.93vw + 12.66px, 27.5px);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tr-card:hover { background-color: var(--color-bg3); border-color: var(--color-gold2); }

/* ── Members grid — flows 3-up, then remaining members center ── */
.tr-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(40px, 2.22vw + 32.02px, 67.5px) clamp(24px, 1.09vw + 20.08px, 37.5px);
}

.tr-member {
	flex: 0 1 calc((100% - 75px) / 3);
	max-width: 410px;
	text-align: center;
}

.tr-member .tr-photo { margin-block-end: clamp(20px, 0.6vw + 17.82px, 27.5px); }
.tr-member .tr-name { margin: 0 0 clamp(7px, 0.14vw + 6.49px, 8.75px); }
.tr-mem-title { color: var(--color-text); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
	.tr-featured {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.tr-featured .tr-photo { max-width: 410px; }
	.tr-feat-body { max-width: 620px; }
	.tr-role { text-align: center; }
	.tr-bio { max-width: 620px; margin-inline: auto; text-align: center; }
	.tr-cards { width: 100%; max-width: 480px; }
}

@media (max-width: 900px) {
	.tr-member { flex: 0 1 calc((100% - 37.5px) / 2); }
}

@media (max-width: 600px) {
	.tr-member { flex: 0 1 100%; max-width: 360px; }
}