/* wp-content/themes/apexcx/assets/css/member.css */
/* Team Member single (single-apexcx_member.php). Loaded only on is_singular('apexcx_member').
   Values reference design tokens; component layout dimensions (rail width, portrait
   size, hero padding) are section-specific one-offs kept local by intent. */

.apexcx-member-hero {
	position: relative;
	overflow: hidden;
	padding: 126px 0 var(--apexcx-space-xl); /* top clears the 76px fixed header */
}
.apexcx-member-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, var(--apexcx-color-surface), var(--apexcx-color-bg-alt));
}
.apexcx-member-hero__bg svg { display: block; }
.apexcx-member-hero__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(238, 240, 243, .2) 55%, var(--apexcx-color-bg) 90%);
}
.apexcx-member-hero__inner { position: relative; z-index: 2; }

/* Breadcrumb */
.apexcx-member-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--apexcx-text-kick);
	letter-spacing: .04em;
	margin-bottom: var(--apexcx-space-lg);
}
.apexcx-member-breadcrumb a {
	color: var(--apexcx-color-muted);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 600;
}
.apexcx-member-breadcrumb a:hover { color: var(--apexcx-color-primary); }
.apexcx-member-breadcrumb [aria-current="page"] {
	color: var(--apexcx-color-primary);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 800;
}

/* Layout split */
.apexcx-member-split {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 56px;
	align-items: start;
}

/* Sticky dark bio rail */
.apexcx-member-rail {
	position: sticky;
	top: 100px;
	background: var(--apexcx-color-navy);
	padding: var(--apexcx-space-xl) var(--apexcx-space-lg) 38px;
	color: var(--apexcx-color-white);
	overflow: hidden;
}
.apexcx-member-rail__glow {
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .45;
	background: radial-gradient(circle, rgba(0, 176, 240, .55), transparent 65%);
	top: -120px;
	right: -90px;
	pointer-events: none;
}
.apexcx-member-rail__inner { position: relative; }

.apexcx-member-portrait {
	width: 100%;
	max-width: 300px;
	height: auto; /* required so aspect-ratio wins over the img's width/height attributes → true circle */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	margin: 0 auto;
	border: 4px solid rgba(255, 255, 255, .9);
	background: var(--apexcx-color-bg-alt);
}
.apexcx-member-portrait--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, var(--apexcx-color-navy), var(--apexcx-color-primary-dark));
}
.apexcx-member-portrait--fallback span {
	font-size: 52px;
	color: var(--apexcx-color-accent-cyan);
}

/* Rail meta list */
.apexcx-member-meta {
	margin: 30px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
	padding-top: var(--apexcx-space-md);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.apexcx-member-meta dt,
.apexcx-member-meta dd { margin-inline-start: 0; } /* reset only the UA 40px left indent on <dd>; leave the value's top margin intact */
.apexcx-member-meta__label { color: var(--apexcx-color-accent-blue); }
.apexcx-member-meta__value {
	font-size: 19px; /* fixed per design; the fluid --apexcx-text-h4 token ballooned to ~27px on desktop */
	line-height: 1.1;
	margin: 7px 0 0;
	color: var(--apexcx-color-white);
}
.apexcx-member-meta__value--soft {
	font-size: var(--apexcx-text-body);
	font-family: var(--apexcx-font-display);
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .86);
	line-height: 1.5;
}

/* Rail CTAs */
.apexcx-member-book,
.apexcx-member-linkedin {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--apexcx-space-2xs);
	font-weight: 700;
	font-size: var(--apexcx-text-kick);
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 15px var(--apexcx-space-md);
	transition: background var(--apexcx-duration-fast), color var(--apexcx-duration-fast), border-color var(--apexcx-duration-fast);
}
.apexcx-member-book {
	margin-top: 30px;
	background: var(--apexcx-color-white);
	color: var(--apexcx-color-primary);
}
.apexcx-member-book:hover { background: var(--apexcx-color-accent-blue); color: var(--apexcx-color-primary); }
/* LinkedIn brand colors — third-party, intentionally not tokenized. */
.apexcx-member-linkedin {
	margin-top: var(--apexcx-space-xs);
	background: #0A66C2;
	color: var(--apexcx-color-white);
	border: 1px solid #0A66C2;
	padding: 14px var(--apexcx-space-md);
}
.apexcx-member-linkedin:hover { background: #004182; border-color: #004182; color: var(--apexcx-color-white); }
.apexcx-member-linkedin svg { flex: none; }

/* Main bio column */
.apexcx-member-role-kick { color: var(--apexcx-color-primary); }
.apexcx-member-name {
	font-size: var(--apexcx-text-hero);
	margin: 14px 0 0;
	color: var(--apexcx-color-ink);
}
.apexcx-member-bio {
	margin-top: var(--apexcx-space-md);
	max-width: 70ch;
}
.apexcx-member-bio p {
	font-size: 17px; /* design body size, between --apexcx-text-body (16) and --apexcx-text-body-lg (18) */
	line-height: 1.7;
	color: var(--apexcx-color-ink-soft);
	margin: 0 0 18px;
}
.apexcx-member-bio > *:last-child { margin-bottom: 0; }
.apexcx-member-bio a { color: var(--apexcx-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.apexcx-member-bio a:hover { color: var(--apexcx-color-ink); }

.apexcx-member-back { margin: var(--apexcx-space-lg) 0 0; }
.apexcx-member-back-link { color: var(--apexcx-color-ink); }
.apexcx-member-back-link:hover { color: var(--apexcx-color-primary); }

/* Responsive */
@media (max-width: 960px) {
	.apexcx-member-split { grid-template-columns: 1fr; gap: var(--apexcx-space-lg); }
	.apexcx-member-rail { position: static; padding: var(--apexcx-space-lg) var(--apexcx-space-md) var(--apexcx-space-md); }
}
@media (max-width: 560px) {
	.apexcx-member-portrait { max-width: 220px; }
}