/* =======================================================================
 * Player profile CPT — UHND.com (goldendome)
 *
 * 2026-05-28 redesign: header switched from the 2026-05-21 "Stadium
 * Scoreboard" band to the "magazine cover" hero — a two-panel navy block
 * (studio headshot left, identity stack right). Spec:
 *   references/player-cpt/UHND Player Profile v2 _standalone_.html
 *   docs/decisions.md 2026-05-28 (Player header magazine-cover redesign)
 *
 * Loaded on is_singular('player_profile') via goldendome_enqueue_player_css()
 * in functions.php at priority 90. Depends on goldendome-tokens and
 * tie-theme-child-css. Stacks above goldendome-cpt-rough (which still
 * ships the .cpt-tabs, .cpt-layout, and module-zone styles).
 *
 * Layout shape:
 *   <main class="page page--player">
 *     <article class="cpt-article">
 *       <section class="player-hero">                     ← full-width navy hero
 *         <div class="player-hero__inner">                ← photo | identity grid
 *           <figure class="player-hero__photo">…          ← headshot (action_shot)
 *           <div class="player-hero__identity">…          ← badge, name, bio strip
 *         </div>
 *       </section>
 *       <div class="player-tabs-wrap">                    ← light bg, hairline below
 *         <div class="player-tabs-wrap__inner">
 *           <nav class="cpt-tabs">…</nav>                 ← _shared/tab-strip.php
 *         </div>
 *       </div>
 *       <div class="cpt-layout cpt-layout--rail …">       ← body+rail per view
 *         <div class="cpt-content">…</div>
 *         <aside class="cpt-rail">…</aside>
 *       </div>
 *     </article>
 *   </main>
 * ===================================================================== */

/* Drop the inherited .page max-width + padding so the scoreboard can break
 * full-viewport-width. Width management moves to .player-board__inner,
 * .player-tabs-wrap__inner, and .cpt-layout, each of which constrains
 * itself to var(--page-max). Mirrors the .page--category pattern. */
.page--player {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ===== Magazine-cover hero ========================================== *
 * Two-panel navy hero: studio headshot left, identity stack right.
 * On-dark text uses the --video-band-ink-* ramp (shared with the video
 * post band). Replaces the 2026-05-21 Stadium Scoreboard band. */

.player-hero {
	background: var(--nd-navy);
	color: var(--video-band-ink);
	border-top: 3px solid var(--nd-gold);
	overflow: hidden;
	position: relative;
}
.player-hero::before {
	/* Faint gold/green wash — gold from top-right, green from bottom-left. */
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--nd-gold) 14%, transparent) 0%, transparent 55%),
		radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--nd-green) 10%, transparent) 0%, transparent 60%);
	pointer-events: none;
}
.player-hero__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 36px var(--page-pad) 32px;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
}

/* ── Photo — circular gold-ring avatar, studio headshot, no caption ──
 * Ring construction: the photo is clipped to a circle; a navy `border`
 * forms the gap, and a gold `box-shadow` ring sits just outside it
 * (photo → navy gap → gold ring). White fill covers any letterbox on the
 * studio background. */
.player-hero__photo {
	position: relative;
	width: 208px;
	height: 208px;
	flex-shrink: 0;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	/* Subtle neutral ring — thin light hairline rather than gold. The 0.5px
	 * blur feathers the edge so the hard ring doesn't render jagged. */
	box-shadow: 0 0 0.5px 1.5px var(--video-band-ink-4);
}
.player-hero__img {
	width: 100%;
	height: 100%;
	/* Top-anchored cover keeps the face centered in the circle (the `large`
	 * size preserves the portrait aspect). */
	object-fit: cover;
	object-position: 50% 12%;
	display: block;
}
/* No headshot: an initials monogram medallion — navy fill, serif initials in
 * near-white (the canonical light-on-navy ink), and a thin gold ring to lift it
 * off the navy hero band. Reads as a deliberate crest, not a missing/broken
 * image. Supersedes a generic person silhouette and the original jersey-numeral
 * watermark (which rendered white-on-white, invisible).
 *
 * Note: the fill MUST be opaque (--nd-navy), not a semi-transparent tint — an
 * alpha fill lets the navy band bleed through and collapses the contrast. */
.player-hero__photo.is-placeholder {
	display: grid;
	place-items: center;
	background: var(--nd-navy);
	/* Thin solid gold ring replaces the base white hairline — defines the
	 * medallion against the same-navy hero band. */
	box-shadow: 0 0 0 1.5px var(--nd-gold);
}
.player-hero__monogram {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 64px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--video-band-ink);
}

/* ── Identity stack ────────────────────────────────────────────────── */
.player-hero__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 2px;
}

/* Eyebrow: state badge — reuses the shared .status-pill component (base
 * lives in the bundle). */
.player-hero__eyebrow {
	margin: 0 0 18px;
}
/* Player-state color variants of .status-pill: gold (graduated / commit),
 * green (transferred in), red (in portal). Solid fills read clearly on the
 * navy hero. */
.status-pill--state {
	background-color: var(--nd-gold);
	color: var(--nd-navy);
}
.status-pill--transfer {
	background-color: var(--nd-green);
	color: #fff;
}
.status-pill--portal {
	background-color: var(--danger);
	color: #fff;
}

/* Name row: jersey numeral + name block */
/* Name row: gold jersey numeral + name block, bottom-aligned so the
 * jersey's baseline sits with the name's baseline (not the small pos label
 * above it) — reads as an intentional marquee lead-in to the name. */
.player-hero__name-row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin: 0 0 24px;
}
.player-hero__jersey {
	display: inline-flex;
	align-items: baseline;
	flex-shrink: 0;
	color: var(--nd-gold);
	font-family: var(--font-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.06em;
	line-height: 0.9;
}
.player-hero__jersey-hash {
	font-size: clamp(18px, 2vw, 26px);
	color: var(--video-band-ink-4);
	font-weight: 500;
}
.player-hero__jersey-num {
	font-size: clamp(52px, 6.5vw, 84px);
	line-height: 0.9;
}
.player-hero__name-block {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}
.player-hero__pos {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--video-band-ink-3);
	margin: 0 0 6px;
}
.player-hero__name {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(40px, 5.4vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0;
	text-wrap: balance;
}

/* Sub-view H1 suffix — renders INLINE after the player name on indexable
 * sub-views (Career Stats / Game Log / News & Coverage), so the H1 reads as one
 * line: "#13 CJ Carr Career Stats". Serif continuation of the name, one register
 * smaller and in a lighter ink so the player name stays the dominant identity
 * (§20 parent-identity rule). On the `--subview` modifier the jersey + name are
 * scaled down a step so all three elements fit one line on desktop; the line
 * wraps naturally on mobile. Default Profile tab never renders this. */
.player-hero__name-view {
	font-family: var(--font-serif);
	font-size: 1em; /* same size as the name; distinction comes from weight + ink */
	font-weight: 400; /* regular vs the name's 600 — lighter for clear separation */
	letter-spacing: -0.025em;
	color: var(--video-band-ink-2);
	margin-left: 0.32em;
}

/* Sub-view size step-down — only when the view suffix is present, so the
 * Profile tab keeps the full marquee scale. The jersey numeral and name share
 * ONE size so the whole line (numeral · name · suffix) reads uniform,
 * differentiated only by color (gold / white / lighter ink). */
.player-hero__name-row--subview .player-hero__jersey-num,
.player-hero__name-row--subview .player-hero__name {
	font-size: clamp(30px, 4.2vw, 52px);
}

/* Bio strip — inline labeled facts, hairline-divided. Cells stretch to
 * equal columns across the full identity width so the row reads as a
 * spread data strip rather than a left-packed cluster. */
.player-hero__bio {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: stretch;
	margin: 12px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--video-band-line);
}
.player-hero__bio-cell {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 28px;
	border-left: 1px solid var(--video-band-line);
	min-width: 0;
}
.player-hero__bio-cell:first-child {
	border-left: 0;
	padding-left: 0;
}
.player-hero__bio-label {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--video-band-ink-3);
}
.player-hero__bio-val {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}
.player-hero__bio-num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.player-hero__bio-unit {
	color: var(--video-band-ink-3);
	font-weight: 500;
	margin-left: 3px;
	font-size: 13px;
}
.player-hero__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--nd-gold);
	font-size: 15px;
	line-height: 1;
}
.player-hero__star.is-off {
	color: var(--video-band-ink-4);
}

/* ===== Tab row wrap (light bg, below board) ========================= */

.player-tabs-wrap {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.player-tabs-wrap__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 24px var(--page-pad) 0;
}

/* ===== Body+rail wrap (constrain max-width back to page) ============ */

.page--player .cpt-layout {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 36px var(--page-pad) 56px;
}

/* ===== Transfer route (from → to) — in the Portal Activity module ===
 * Two team-colored panels with an arrow in the white gap between them.
 * The origin panel color is data-driven (inline --team-color); the
 * destination is always Notre Dame navy. */
.transfer-route {
	margin: 0 0 18px;
}
.transfer-route__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	flex-wrap: wrap;
}
.transfer-route__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--nd-navy);
}
.transfer-route__date {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}
.transfer-route__cards {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
}
.transfer-route__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	min-width: 0;
	color: #fff;
}
.transfer-route__card--from {
	/* Neutral slate until the origin team color syncs in. */
	background: var(--team-color, color-mix(in srgb, var(--nd-navy), white 22%));
}
.transfer-route__card--to {
	background: var(--nd-navy);
}
.transfer-route__abbr {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--video-band-ink-3);
}
.transfer-route__card--to .transfer-route__abbr {
	color: var(--nd-gold);
}
.transfer-route__team {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.transfer-route__name {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.transfer-route__sub {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--video-band-ink-3);
}
.transfer-route__arrow {
	display: grid;
	place-items: center;
	padding: 0 18px;
	font-size: 20px;
	color: var(--ink-4);
}

/* ===== Mobile (≤900px / ≤680px / ≤420px) ============================ */

@media (max-width: 900px) {
	.page--player .cpt-layout--rail {
		grid-template-columns: minmax(0, 1fr);
	}
	.player-hero__inner {
		gap: 28px;
	}
}

@media (max-width: 680px) {
	/* Stack: avatar above identity, left-aligned. */
	.player-hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px var(--page-pad) 26px;
	}
	.player-hero__photo {
		width: 156px;
		height: 156px;
	}
	.player-hero__name {
		font-size: clamp(34px, 9vw, 48px);
	}
	.player-hero__jersey-num {
		font-size: clamp(48px, 14vw, 64px);
	}
	/* Bio → grid; drop hairlines, use row gaps instead so wrapped cells
	 * don't carry stray left borders. `grid-auto-flow: row` is required —
	 * the base rule sets `grid-auto-flow: column`, which would otherwise
	 * keep all cells on one line (flowing into new auto-columns) and make
	 * the column-count below dead. Without it the 5 bio cells never wrap,
	 * colliding at narrow widths (responsive audit P2-A, 2026-06-05). */
	.player-hero__bio {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 0;
	}
	.player-hero__bio-cell,
	.player-hero__bio-cell:first-child {
		border-left: 0;
		padding: 0 10px 0 0;
	}
	.player-tabs-wrap__inner {
		padding-top: 16px;
	}
}

@media (max-width: 560px) {
	/* Tighten the transfer route so two cards + arrow still fit. */
	.transfer-route__card {
		padding: 12px 14px;
		gap: 10px;
	}
	.transfer-route__name {
		font-size: 15px;
	}
	.transfer-route__arrow {
		padding: 0 10px;
		font-size: 16px;
	}
}

@media (max-width: 420px) {
	.player-hero__bio {
		grid-template-columns: repeat(2, 1fr);
	}
}