/**
 * Player page hero — gradient band, profile card, five-stat strip.
 *
 * Figma 2543:54857 / 2543:54911 / 2543:54931 (desktop 1440),
 *       2507:57077 / 2507:57027 / 2507:57049 (mobile 400).
 *
 * The gradient recipes below are machine-derived from Figma's gradientTransform
 * matrices and were diffed against Figma's own renders at 169 sample points per
 * variant — mean absolute error under 0.7/255. Do not "tidy" the angles or the
 * stop percentages; they are exact, and the odd-looking ones are the correct ones.
 */

/* Band -------------------------------------------------------------------- */

/*
 * Square corners. `cornerRadius` is 0 in the design — Figma calls the node a
 * "rounded-rectangle" because that is the node subtype, not because it has a
 * radius. --rkl-radius must NOT be applied here.
 *
 * `isolation: isolate` is required: the texture blends with `mix-blend-mode:
 * overlay`, and without an isolated stacking context it would blend against the
 * page behind the band instead of against the band's own two gradient layers.
 */
.rkl-player-band {
	box-sizing: border-box;
	color: var(--rkl-black);
	font-family: var(--rkl-font);
	isolation: isolate;
	overflow: hidden;
	padding-block: 42px 32px;
	position: relative;
	/* Paint-flash guard only — the base layer below is fully opaque. */
	background-color: #000;
}

.rkl-player-band *,
.rkl-player-band *::before,
.rkl-player-band *::after {
	box-sizing: inherit;
}

.rkl-player-band__base,
.rkl-player-band__accent,
.rkl-player-band__texture {
	display: block;
	pointer-events: none;
	position: absolute;
}

/*
 * Layer 1 — base gradient, identical in all three variants.
 *
 * Authored as a 1440x720 rect flipped vertically; this is the equivalent upright
 * form (38.3358% of 720 == 42.596% of 648 == 276.02px). BOTH STOPS ARE FULLY
 * OPAQUE, which is why nothing behind the band is ever visible — including the
 * white plate the designer left underneath it.
 *
 * The dark end is pure #000000, NOT --rkl-black (#1E201E). Do not substitute.
 */
.rkl-player-band__base {
	background-image: linear-gradient(180deg, #075f3d 0%, #000 42.596%);
	inset: 0;
}

/*
 * Layer 2 — the accent, and the only thing that varies between variants.
 * Same box in all three: 2167x380 anchored to the band's bottom-right corner.
 */
.rkl-player-band__accent {
	bottom: 0;
	height: 58.642%; /* 380 / 648 */
	right: 0;
	width: 150.4861%; /* 2167 / 1440 */
}

/* Variant A — green-red. Figma 2613:87150, and the live desktop page. */
.rkl-player-band--red .rkl-player-band__accent {
	background-image: linear-gradient(
		-6.823deg,
		rgba(251, 69, 64, 1) -1.0925%,
		rgba(251, 69, 64, 0) 41.0446%
	);
}

/* Variant B — green-gold. Figma 2613:87158. */
.rkl-player-band--gold .rkl-player-band__accent {
	background-image: linear-gradient(
		170.4502deg,
		rgba(238, 184, 6, 0) 57.6443%,
		rgba(238, 184, 6, 1) 89.9957%
	);
}

/*
 * Variant C — green-lime. Figma 2613:87168.
 *
 * This one CANNOT be written as the two stops the file contains. Its stops have
 * different hues and the transparent end is gold, and Figma interpolates gradient
 * stops with STRAIGHT alpha while browsers interpolate PREMULTIPLIED. Written as
 * two stops in CSS, the transparent gold contributes nothing and the amber half of
 * the ramp — clearly visible in Figma's own render — disappears entirely.
 *
 * The nine stops below sample Figma's straight-alpha ramp densely enough that
 * premultiplied interpolation between neighbours is invisible. The endpoints are
 * the literal Figma stops.
 */
.rkl-player-band--lime .rkl-player-band__accent {
	background-image: linear-gradient(
		167.0595deg,
		rgba(250, 184, 1, 0) 49.058%,
		rgba(227, 184, 10, 0.125) 54.021%,
		rgba(204, 184, 19, 0.25) 58.983%,
		rgba(181, 184, 27, 0.375) 63.946%,
		rgba(158, 185, 36, 0.5) 68.908%,
		rgba(135, 185, 45, 0.625) 73.871%,
		rgba(112, 185, 54, 0.75) 78.833%,
		rgba(89, 185, 62, 0.875) 83.796%,
		rgba(66, 185, 71, 1) 88.758%
	);
}

/*
 * Layer 3 — the chrome texture, and it is not optional: overlay against a
 * near-black backdrop roughly halves it, so omitting the texture renders the whole
 * band about twice too bright.
 *
 * The exported PNG already carries the node's 0.5 opacity in its alpha channel
 * (flat 128, verified on the asset). Setting opacity: .5 here as well would halve
 * it twice.
 */
.rkl-player-band__texture {
	background-image: url("../../assets/player-band-texture.webp");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 809px;
	mix-blend-mode: overlay;
	right: 0; /* -227 + 1667 == 1440 */
	top: -22px;
	transform: scaleX(-1); /* rotate-180 + flipY == mirror in X */
	width: 1667px;
}

.rkl-player-band__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-inline: auto;
	/*
	 * The band bleeds and the inner holds the measure — the same split rkl/tab-panel
	 * uses, and for the same reason: doing both on one element means fighting the
	 * negative margins `alignfull` needs to escape the root padding.
	 *
	 * The measure is the site's --rkl-content, not this frame's 1360; see the note in
	 * player-gallery/style.css. The gutter is --rkl-gutter, which the rule further
	 * down also pins the theme's root padding to, so the bleeding band and the
	 * constrained cards below it inset by the same amount.
	 */
	max-width: calc(var(--rkl-content, 1344px) + 2 * var(--rkl-gutter, 48px));
	padding-inline: var(--rkl-gutter, 48px);
	position: relative;
	width: 100%;
	z-index: 1;
}

/*
 * The band sits flush under the site header.
 *
 * `.wp-site-blocks > *` carries the theme's block gap — 19.2px — so `main` opened
 * with a gap above a band that is meant to touch the header. Scoped to pages that
 * actually have the band, and a class-level rule is enough here because the gap is
 * a stylesheet rule rather than the inline style the page template used to carry.
 */
body:has(.rkl-player-band) .wp-site-blocks > main {
	margin-block-start: 0;
	/*
	 * Force the theme's root padding to the RKL gutter for this page.
	 *
	 * The gallery and the two tables are constrained blocks, so their inset is the
	 * theme's root padding — clamp(30px, 5vw, 50px). The band bleeds and insets
	 * itself. Those two numbers only coincide by luck: at 375px the clamp floors at
	 * 30 while --rkl-gutter is 16, so the gallery and the tables sat 14px inside the
	 * hero card. Pinning the root padding to the token makes all five cards share one
	 * edge at every width, which is what both frames draw.
	 */
	--wp--style--root--padding-left: var(--rkl-gutter, 48px);
	--wp--style--root--padding-right: var(--rkl-gutter, 48px);
}

/* Shared card chrome ------------------------------------------------------ */

.rkl-player-hero,
.rkl-player-strip {
	background: var(--rkl-white);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Profile card ------------------------------------------------------------ */

/*
 * `padding-bottom: 0` is load-bearing, not an omission: 32 + 360 = the design's
 * 392, and the player photo is flush with the card's bottom edge with the torso
 * sheared off. That is the design.
 */
.rkl-player-hero {
	align-items: center;
	display: flex;
	gap: 24px;
	overflow: hidden;
	padding: 32px 32px 0;
	position: relative;
}

/*
 * ...and the moment there is no photo, that 0 is simply a missing padding.
 *
 * The feed has no photo for about 40 players. With the photo gone the tallest child is
 * the text column, so the last meta value landed 1px off the card's bottom border —
 * measured "Ūgis 185 cm" flush against it at 1440 — and on phones the crest did the
 * same. Higher specificity than the phone rule's `padding` shorthand on purpose, so
 * one declaration covers every width.
 */
.rkl-player-hero:not(:has(.rkl-player-hero__photo)) {
	padding-bottom: 32px;
}

/*
 * The back link sits at 16,16 — inside the padding band, not after it — so it is
 * taken out of the row rather than being its first item.
 */
.rkl-player-hero__back {
	align-items: center;
	color: var(--rkl-green-03);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	left: 16px;
	line-height: 1.3;
	position: absolute;
	text-decoration: none;
	top: 16px;
	z-index: 2;
}

.rkl-player-hero__back:hover,
.rkl-player-hero__back:focus-visible {
	text-decoration: underline;
}

.rkl-player-hero__back:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

/* Already a left chevron in its own path — no rotation, so no non-uniform scale. */
.rkl-player-hero__back-icon {
	display: block;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/*
 * Fluid, with the design's 360 as a ceiling rather than a fixed size.
 *
 * Rigid at 360 the photo and the 220 crest ate the row: at a 1085 client the text
 * column was left 295px, and a 40px Boldonse name overflowed it and was clipped by the
 * card — the player's own name, hidden by his photo. Both now give ground as the row
 * narrows, continuously, so there is no width at which the text is starved.
 */
.rkl-player-hero__photo {
	/*
	 * Bottom, not centre. At 1440 the 360 photo IS the card's height so the two agree,
	 * but once it shrinks the text column is the tallest child and a centred photo
	 * floats with a gap under it. The design has the cut-out sheared off by the card's
	 * bottom edge at every size.
	 */
	align-self: flex-end;
	aspect-ratio: 1;
	flex: 0 1 auto;
	height: auto;
	overflow: hidden;
	width: clamp(180px, 26vw, 360px);
}

/*
 * `center top`, and deliberately not the design's per-asset crop.
 *
 * The design's photo is a full-body transparent cut-out with ~9% headroom baked in
 * and a 5.46% downward nudge applied to that one image. The real photo library is
 * nothing like it: the Genius feed returns 600x600 head-and-shoulders portraits,
 * the same ones the TOP-5 cards use. Reproducing the nudge against a portrait would
 * crop the chin. Anchoring to the top keeps the face in every case.
 */
.rkl-player-hero__photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.rkl-player-hero__body {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 24px;
	min-width: 0;
}

.rkl-player-hero__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 48px;
	min-width: 0;
}

.rkl-player-hero__title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rkl-player-hero__position {
	color: var(--rkl-black);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

/*
 * The design's name is 432px in a 668px column with `nowrap`. Real names run
 * longer, so this wraps and the card grows.
 *
 * 40px is the design's H1 and the ceiling here, but a 32-character name in a narrow
 * column cannot have it — "Tautvydas Kazimieras Vyšniauskas" at 40px needs 700px and
 * the column can be half that. `overflow-wrap: anywhere` is the backstop for a single
 * token longer than the column, which no font size can save.
 *
 * `overflow-wrap` is load-bearing on phones too, and it is the ONLY thing holding that
 * layout: with `normal`, a long token at a 320 viewport takes the card's scrollWidth from
 * 288 to 571 and `overflow: hidden` clips the name silently — no reflow, no scrollbar,
 * no sign anything is wrong. `min-width: 0` on the text column is not what saves it.
 */
.rkl-player-hero__name {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(22px, 2.6vw, 40px);
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

/* Grey 02 at 40%, not Grey 01 — the card's border is the grey-01 one. */
.rkl-player-hero__rule {
	background: var(--rkl-grey-02);
	display: block;
	height: 1px;
	opacity: 0.4;
	width: 100%;
}

/*
 * A fluid gap, not the design's flat 48.
 *
 * At 48 the three facts wrapped to two rows well before they had to, and the wrapped row
 * then sat oddly against the photo. Shrinking the gap keeps them on one line down to a
 * much narrower column and only wraps when they genuinely cannot fit.
 */
.rkl-player-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px clamp(16px, 3vw, 48px);
	margin: 0;
}

.rkl-player-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rkl-player-hero__fact dt {
	color: var(--rkl-grey-05);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.rkl-player-hero__fact dd {
	color: var(--rkl-black);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

.rkl-player-hero__crest {
	aspect-ratio: 1;
	flex: 0 1 auto;
	height: auto;
	width: clamp(96px, 16vw, 220px);
}

.rkl-player-hero__crest a {
	display: block;
	height: 100%;
}

/*
 * `contain`, where the design says `cover`. Its crest asset is square, so the two
 * are identical there; real club crests are not all square, and `cover` would
 * crop a wide wordmark.
 */
.rkl-player-hero__crest img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* Stat strip -------------------------------------------------------------- */

/*
 * `space-between` with a 172.5px inline padding, which is what puts the four rules
 * exactly in the middle of each gap — verified against the design: an item ends at
 * 228.5, +177 lands on the next item's start, for all four gaps. The rules are real
 * flex children so the browser places them; the alternative is four hard-coded x
 * positions that only hold for the design's own values.
 */
.rkl-player-strip {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 32px 172.5px;
}

.rkl-player-strip__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rkl-player-strip__label {
	color: var(--rkl-black);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.rkl-player-strip__value {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

.rkl-player-strip__rule {
	background: var(--rkl-grey-02);
	display: block;
	flex: 0 0 auto;
	height: 102px;
	width: 1px;
}

/* Intermediate widths ----------------------------------------------------- */

/*
 * The design has a 1440 frame and a 400 frame and nothing between. Two things
 * break before the mobile breakpoint if left alone: the hero's 360 + 668 + 220 row
 * overflows below about 1360, and the strip's 172.5px side padding leaves the five
 * stats no room. Both collapse early rather than at 782.
 */
@media (max-width: 1200px) {
	.rkl-player-strip {
		padding-inline: 32px;
	}
}

@media (max-width: 1024px) {
	/*
	 * The photo and the crest are fluid now, so this no longer resizes them — the
	 * clamps have already done it continuously. What is left is the vertical rhythm,
	 * which has no reason to stay at the desktop's 48 once the card is this short.
	 */
	.rkl-player-hero__text {
		gap: 24px;
	}
}

/* Phones ------------------------------------------------------------------ */

@media (max-width: 782px) {
	/*
	 * The mobile band is not the desktop band scaled: its base gradient runs the
	 * other way — black at the top, green at the bottom — and its accent is a
	 * single glow box in the bottom-right rather than a full-width sweep. The
	 * texture is off-canvas at 400px in the design and is dropped here.
	 */
	.rkl-player-band {
		padding-block: 40px;
	}

	.rkl-player-band__base {
		background-image: linear-gradient(180deg, #000 61.664%, #075f3d 100%);
	}

	.rkl-player-band__accent {
		height: 395px;
		width: 99%; /* 396 / 400 */
	}

	.rkl-player-band--red .rkl-player-band__accent {
		background-image: linear-gradient(
			-34.2391deg,
			rgba(251, 69, 64, 1) 1.0925%,
			rgba(251, 69, 64, 0) 41.045%
		);
	}

	/*
	 * Gold and lime are NOT authored at 400px — the mobile frame carries only a
	 * visible green-red and a hidden green-lime. Shipping two variants on phones
	 * would break the even distribution the client asked for, so all three are
	 * kept, with the desktop hues on the mobile glow geometry. The angle of a
	 * Figma gradient is a function of its box aspect ratio, so these two are
	 * approximations of an unauthored design rather than measurements.
	 */
	.rkl-player-band--gold .rkl-player-band__accent {
		background-image: linear-gradient(
			-34.2391deg,
			rgba(238, 184, 6, 1) 1.0925%,
			rgba(238, 184, 6, 0) 41.045%
		);
	}

	.rkl-player-band--lime .rkl-player-band__accent {
		background-image: linear-gradient(
			-34.2391deg,
			rgba(66, 185, 71, 1) 1.0925%,
			rgba(107, 185, 48, 0.5) 21%,
			rgba(250, 184, 1, 0) 41.045%
		);
	}

	.rkl-player-band__texture {
		display: none;
	}

	.rkl-player-band__inner {
		/* base.css drops --rkl-gutter to 16px here, so the padding follows on its
		   own; only the desktop measure needs lifting. */
		max-width: none;
	}

	/*
	 * A grid on phones, and the crest is the reason.
	 *
	 * The design stacks the card — back link, text, then the photo bottom-right with
	 * the crest bottom-left — and gets the two images level by hand-placing them. A
	 * flex column cannot: the crest is the last item of the text stack and the photo is
	 * a sibling pulled up under it by a negative margin, so their vertical positions are
	 * set by two unrelated numbers. Measured at 375: the crest ran 512-600 and the photo
	 * 496-676, centres 30px apart and the crest ending 76px above the photo's foot —
	 * reported as the logo and the player not being aligned.
	 *
	 * As a two-column grid the two images share row 3 and the browser levels them: the
	 * crest centres on whatever height the photo has, at every width, with no arithmetic
	 * that can go stale. It also drops the negative-margin tuck entirely, and with it
	 * the whole class of bug that came from a photo rising into occupied space — see
	 * landmine 66. The card is ~30px taller than the tuck version, and 505 tall at 375–430
	 * on a one-line name: 32 + 18 (back) + 16 + 241 (text) + 16 + 180 (photo) + borders,
	 * against the frame's 430. Composition and the other widths in spec §11.16.
	 */
	.rkl-player-hero {
		align-items: end;
		display: grid;
		gap: 16px;
		/*
		 * `minmax(0, 1fr)`, not `1fr`: a bare `1fr` floors at the photo's min-content
		 * size, so a 180px photo would hold the column open and push the card wider than
		 * the screen instead of letting `max-width` shrink it.
		 */
		grid-template-columns: auto minmax(0, 1fr);
		padding: 32px 16px 0;
	}

	.rkl-player-hero__back {
		grid-column: 1 / -1;
		grid-row: 1;
		/*
		 * `justify-self` is required, not decorative: in the flow the link is a full-width
		 * grid item, and left to itself the inline-flex box would still stretch across
		 * both columns. The design has it top-left, like the desktop.
		 */
		justify-self: start;
		position: static;
	}

	/*
	 * The body's box exists for the desktop row only. `display: contents` removes it
	 * here so the text block and the crest become grid items of the card itself, which
	 * is what lets the crest sit in a row with the photo — a grandchild cannot be
	 * placed in its grandparent's grid, and this is the one property that fixes that
	 * without touching the markup.
	 */
	.rkl-player-hero__body {
		display: contents;
	}

	.rkl-player-hero__text {
		gap: 16px;
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.rkl-player-hero__title {
		gap: 8px;
		/* back link -> position is 32 in the design, everything else 16. */
		margin-top: 16px;
	}

	.rkl-player-hero__name {
		font-size: 24px;
	}

	.rkl-player-hero__meta {
		/* Ūgis wraps to a second row on its own: the three facts need 181 + 50 + 68 plus
		   two 24px gaps = 347, and the row is 310 usable at a 400 viewport (334 less the
		   reservation below) — emergent, not two hard-coded rows. One row again from about
		   500 up to the breakpoint. The 331 this comment used to cite was the frame's own
		   363 card, and §9 records that 368/16 was taken as correct instead. */
		gap: 8px 24px;
		/*
		 * A reserved strip on the right, so the row wraps before it crowds rather than
		 * after. Without it the three facts hold one row down to 430px and "200 cm" ends
		 * 3px short of the card's inner edge — fitting, but reading as a mistake. The
		 * padding makes the same width wrap instead, and every row then keeps at least
		 * this much air.
		 */
		padding-right: 24px;
	}

	/*
	 * Row 3, and the whole point: `align-self: center` levels the 88px badge on the
	 * middle of the photo whatever the photo's height turns out to be. Nothing here
	 * mentions 180, so a photo that shrinks on a narrow screen stays centred.
	 */
	.rkl-player-hero__crest {
		align-self: center;
		grid-column: 1;
		grid-row: 3;
		height: 88px;
		width: 88px;
	}

	/*
	 * Note for whoever makes the photo interactive: row 3 renders the crest (DOM-later)
	 * to the LEFT of the photo (DOM-earlier), so visual and tab order are inverted here.
	 * It is inert today because the photo holds no focusable content — the crest's team
	 * link is the only tabbable thing in the row. Give the photo a link or a lightbox
	 * trigger and it becomes a real tab-order bug; swap the two `grid-column`s then, or
	 * move the crest in render.php.
	 */
	.rkl-player-hero__photo {
		/* Flush with the card's bottom edge, as on the desktop. */
		align-self: end;
		grid-column: 2;
		grid-row: 3;
		justify-self: end;
		/*
		 * The design's 180, but `max-width` is what keeps it off the crest: the
		 * percentage resolves against this grid column, which is already the card minus
		 * the badge and the gap, so the two can never meet however narrow the screen is.
		 */
		max-width: 100%;
		width: 180px;
	}

	.rkl-player-strip {
		padding: 16px;
	}

	.rkl-player-strip__label {
		font-size: 18px;
	}

	.rkl-player-strip__value {
		font-size: 24px;
	}

	.rkl-player-strip__rule {
		height: 69px;
	}
}

/* Very narrow phones ------------------------------------------------------ */

/*
 * Below about 360px the five stats and their four rules cannot hold one row at
 * 18px labels. The design has nothing to say here; shrinking the label is less bad
 * than a horizontal scrollbar on the whole page.
 */
@media (max-width: 360px) {
	.rkl-player-strip {
		padding: 16px 12px;
	}

	.rkl-player-strip__label {
		font-size: 14px;
	}

	.rkl-player-strip__value {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rkl-player-hero__back {
		transition: color 0.15s ease;
	}
}