/*
 * MiraeLaw Single Team Member — dynamic profile
 *
 * Renders entirely through [miraelaw_team_single] (inc/team/class-team-single.php),
 * not Elementor widgets, so every rule below (including typography/color) is
 * load-bearing — same reasoning as team-grid.css. Values are taken from
 * design-system.css tokens wherever an exact match exists (confirmed against
 * both source design references' own computed styles); the few that don't
 * (bio paragraph 17–19.5px fluid, H1 38–64px fluid, watermark 160–280px
 * fluid) are noted inline. The closing CTA on this template reuses
 * team-cta.css / home-hero.css verbatim — nothing new is added for it here.
 */

/* ---------------------------------------------------------------
 * Hero — breadcrumb, name, title
 * ------------------------------------------------------------- */
.ml-team-single-hero {
	position: relative;
	overflow: hidden;
	z-index: 0; /* establishes a local stacking context for the watermark, same as .ml-hero-root */
	background: var( --ml-primary );
}

.ml-team-single-watermark {
	position: absolute;
	right: -20px;
	top: -70px;
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 700;
	/* Fluid clamp() measured from the source design — no shared token
	   covers this exact range (close to, but smaller than, --ml-text-watermark). */
	font-size: clamp( 160px, 22vw, 280px );
	line-height: 1;
	color: var( --ml-primary-tint );
	user-select: none;
	pointer-events: none;
}

.ml-team-single-hero-inner {
	position: relative;
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 44px, 6vw, 64px ) 24px;
}

.ml-team-single-breadcrumb {
	margin: 0 0 24px;
}

.ml-team-single-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var( --ml-font-mono );
	font-size: 13px;
	color: var( --ml-neutral-300 );
}

.ml-team-single-breadcrumb a {
	color: var( --ml-neutral-200 );
	text-decoration: none;
	transition: color var( --ml-transition-base );
}

.ml-team-single-breadcrumb a:hover,
.ml-team-single-breadcrumb a:focus-visible {
	color: var( --ml-accent-light );
}

.ml-team-single-breadcrumb li[aria-current] {
	color: var( --ml-background );
}

.ml-team-single-h1 {
	margin: 0 0 14px;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	/* Fluid clamp() measured from the source design — smaller/fluid unlike
	   the Team listing page's own fixed 64px Hero H1. */
	font-size: clamp( 38px, 5.4vw, 64px );
	line-height: 1.06;
	letter-spacing: var( --ml-tracking-tight );
	color: var( --ml-background );
}

.ml-team-single-title {
	margin: 0;
	font-family: var( --ml-font-mono );
	font-size: 14px;
	letter-spacing: var( --ml-tracking-wide-plus );
	text-transform: uppercase;
	color: var( --ml-tertiary-light );
}

/* ---------------------------------------------------------------
 * Content — two-column info/biography card
 * ------------------------------------------------------------- */
.ml-team-single-content {
	background: var( --ml-background );
}

.ml-team-single-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	/* Same local fluid section-padding cap already used by Our Offices,
	   What Clients Say, and the Team grid (56px–88px). */
	padding: clamp( 3.5rem, 8vw, 5.5rem ) 24px;
}

.ml-team-single-card {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid var( --ml-primary );
}

/* Left column: photo + info sidebar. flex-basis/min-width (not a media
   query) is what stacks this under the bio column on narrow viewports —
   reproduces the source design's own technique exactly. */
.ml-team-single-side {
	flex: 0 1 380px;
	min-width: min( 100%, 280px );
	display: flex;
	flex-direction: column;
	background: var( --ml-background );
}

.ml-team-single-figure {
	margin: 0;
}

.ml-team-single-photo,
.ml-team-single-photo-placeholder {
	display: block;
	width: 100%;
	/* Same 4:5 ratio already established for the Team grid's cards. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-bottom: 1px solid var( --ml-primary );
}

.ml-team-single-photo-placeholder {
	background: var( --ml-surface-hover );
}

.ml-team-single-info {
	display: flex;
	flex-direction: column;
	gap: var( --ml-spacing-xs );
	padding: 24px 26px;
}

.ml-team-single-info-group + .ml-team-single-info-group {
	border-top: 1px solid var( --ml-border-warm );
	padding-top: var( --ml-spacing-xs );
}

.ml-team-single-eyebrow {
	display: block;
	margin-bottom: 4px;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-2xs );
	letter-spacing: var( --ml-tracking-wider );
	color: var( --ml-tertiary );
}

/* Contact is the one eyebrow the source design colors differently (accent,
   not tertiary) — every other group (Languages/Practice Areas/Office/the
   Biography eyebrow) uses tertiary green. */
.ml-team-single-info-group--contact .ml-team-single-eyebrow {
	color: var( --ml-accent );
}

.ml-team-single-phone,
.ml-team-single-email {
	display: block;
	text-decoration: none;
	transition: color var( --ml-transition-base );
}

.ml-team-single-phone {
	font-family: var( --ml-font-mono );
	font-size: 16px;
	font-weight: 500;
	color: var( --ml-primary );
}

.ml-team-single-email {
	font-size: 15px;
	color: var( --ml-secondary );
}

.ml-team-single-phone:hover,
.ml-team-single-phone:focus-visible,
.ml-team-single-email:hover,
.ml-team-single-email:focus-visible {
	color: var( --ml-accent );
}

.ml-team-single-info-text {
	font-size: 14px;
	line-height: var( --ml-leading-comfortable );
	color: var( --ml-neutral-600 );
}

.ml-team-single-info-text a,
.ml-team-single-office-name {
	color: var( --ml-secondary );
	text-decoration: underline;
	transition: color var( --ml-transition-base );
}

.ml-team-single-office-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

.ml-team-single-info-text a:hover,
.ml-team-single-info-text a:focus-visible,
.ml-team-single-office-name:hover,
.ml-team-single-office-name:focus-visible {
	color: var( --ml-accent );
}

/* Right column: biography. flex-basis/min-width mirrors the left column's
   own technique so both stack together at the same point. */
.ml-team-single-bio {
	flex: 1 1 460px;
	min-width: min( 100%, 320px );
	box-sizing: border-box;
	border-left: 1px solid var( --ml-primary );
	background: var( --ml-surface );
	/* Fluid clamp() measured from the source design (28px–52px) — a
	   narrower range than the outer section padding, kept local. */
	padding: clamp( 28px, 4vw, 52px );
}

.ml-team-single-bio .ml-team-single-eyebrow {
	margin-bottom: 22px;
}

.ml-team-single-bio p {
	margin: 0 0 18px;
	max-width: 38em;
	font-family: var( --ml-font-heading );
	/* Fluid clamp() measured from the source design — no shared token
	   covers this exact range. */
	font-size: clamp( 17px, 1.8vw, 19.5px );
	line-height: 1.75;
	color: var( --ml-neutral-700 );
}

.ml-team-single-back {
	display: inline-block;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var( --ml-secondary );
	transition: color var( --ml-transition-base );
}

.ml-team-single-back:hover,
.ml-team-single-back:focus-visible {
	color: var( --ml-accent );
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states
 * ------------------------------------------------------------- */
.ml-team-single-hero a:focus-visible,
.ml-team-single-content a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ml-team-single-breadcrumb a,
	.ml-team-single-phone,
	.ml-team-single-email,
	.ml-team-single-info-text a,
	.ml-team-single-office-name,
	.ml-team-single-back {
		transition: none;
	}
}