/* Player statistics leaders. Tokens live in assets/base.css. */

.rkl-leaders {
	background: var(--rkl-white);
	container: rkl-leaders / inline-size;
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 23px;
	font-family: var(--rkl-font);
	padding: 24px;
	/*
	 * Figma Frame 4027 is 598px while its own children stack to 579px, leaving
	 * 19px of slack inside the frame. The design's outer height is what was asked
	 * for, so the slack lands below the card row.
	 */
	/* min-height: 598px; */
}

/*
 * Defensive, and not the load-bearing fix.
 *
 * The real cause of the 65px row was the Swiper wrapper's `content-box`
 * propagating through `.rkl-card * { box-sizing: inherit }`; that is corrected in
 * `assets/base.css` on the slide itself, which out-specifies the inherit. This
 * rule stays for descendants that are not inside a slide, and it is harmless
 * where the slide rule already applies.
 */
.rkl-leaders *,
.rkl-leaders *::before,
.rkl-leaders *::after {
	box-sizing: border-box;
}

.rkl-leaders__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	margin: 0;
	text-align: center;
}

/*
 * The in-place notice, as opposed to the whole-block one above.
 *
 * Same element, two jobs: without a season list the block *is* this line, and
 * that case needs no padding because the section's own 24px is all there is.
 * With the chrome around it — heading, tabs, Sezonas select — the line sits
 * where a 350px card row was a moment ago, and it needs enough height that the
 * page does not jump when a visitor picks 2026-2027 and back again.
 */
.rkl-leaders__empty[data-rkl-leaders-empty] {
	padding: 64px 16px;
}

.rkl-leaders__empty[hidden] {
	display: none;
}

/* Header ----------------------------------------------------------------- */

.rkl-leaders__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.rkl-leaders__heading {
	align-items: center;
	display: flex;
	gap: 24px;
}

.rkl-leaders__title {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.9;
	margin: 0;
	text-transform: uppercase;
}

.rkl-leaders .rkl-link-button {
	align-items: center;
	color: var(--rkl-green-03);
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.3;
	text-decoration: none;
}

.rkl-leaders .rkl-link-button:hover,
.rkl-leaders .rkl-link-button:focus-visible {
	text-decoration: underline;
}

.rkl-leaders__sponsor {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 8px 0;
}

.rkl-leaders__sponsor-label {
	color: var(--rkl-grey-05);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.rkl-leaders__sponsor-logo {
	display: block;
	height: 32px;
	object-fit: contain;
	width: auto;
}

/* Controls --------------------------------------------------------------- */

.rkl-leaders__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

/*
 * Division tabs and the Sezonas select, as one group on the left.
 *
 * They are wrapped rather than made two flex children of the controls row
 * because that row is `space-between`: a third child would have pushed the tabs
 * to the left edge, the select to the middle and the arrows to the right, with
 * the gap between the two controls growing with the block's width. Grouped, the
 * pair stays a pair and the arrows stay opposite it.
 */
.rkl-leaders__pickers {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * `.rkl-tabs` declares `display: flex`, which out-specifies the user agent's
 * `[hidden] { display: none }` — so a tablist hidden because the season has only
 * one division would otherwise still be drawn, as an empty grey pill. The
 * buttons need no such rule: they declare no `display` of their own.
 */
.rkl-leaders .rkl-tabs[hidden] {
	display: none;
}

/*
 * `.rkl-leaders__season` used to sit here, sizing a Sezonas select next to the
 * division tabs. That select is gone — the season is an editor setting now, and
 * the players table's own select is the visitor's one control (see render.php).
 * `.rkl-leaders__pickers` stays: it is still the tablist's row.
 */

/* Loading ---------------------------------------------------------------- */

/*
 * The same treatment rkl/teams-table gives its own season fetch, to the
 * millisecond — these are the same control doing the same job on two pages, and
 * a different fade here would read as a different kind of wait.
 *
 * The controls stay live: the point of dimming only the row is that a visitor
 * who picked the wrong season can pick again without waiting.
 */
.rkl-leaders.is-loading .rkl-leaders__panel {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 160ms ease;
}

/* Nothing to page through, so the affordance would be a lie. */
.rkl-leaders.is-empty .rkl-leaders__arrows {
	display: none;
}

/*
 * The active state is a single pill that slides between the buttons, so
 * switching division reads as one movement rather than two colour swaps.
 */
.rkl-leaders__arrows {
	display: flex;
	gap: 8px;
}

/* Card row --------------------------------------------------------------- */

.rkl-leaders__panel[hidden] {
	display: none;
}

.rkl-leaders__panel {
	animation: rkl-panel-in 0.28s ease both;
}

@keyframes rkl-panel-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rkl-leaders__panel {
		animation: none;
	}
}

/*
 * Swiper is the scroller (assets/swiper.js). The 6px padding with a matching
 * negative margin stays: it is the gutter that keeps the card's outer shadow and
 * focus ring from being clipped, and the percentage card width below resolves
 * against this same content box, so the 3-up maths is unchanged.
 */
.rkl-leaders__viewport {
	cursor: grab;
	margin: -6px;
	padding: 6px;
}

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

.rkl-leaders__viewport.swiper-grabbing {
	cursor: grabbing;
}

.rkl-leaders__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Card ------------------------------------------------------------------- */

/* The hairline is an inset shadow so the card stays exactly 389px tall. */
/*
 * Figma `Rectangle 2046`: a 1px #e3e3e3 stroke and exactly one drop shadow,
 * `r4 offset 0,1 #000 @0.15`. A third, wider layer used to sit under those two
 * and read as a halo around every card — the „weird shadow" in the brief.
 *
 * The hairline stays an inset shadow rather than a border so the card is exactly
 * 389px tall rather than 391.
 */
.rkl-leader-card {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-shadow:
		inset 0 0 0 1px var(--rkl-grey-01),
		0 1px 4px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 322px;
}

/*
 * Hero: the accent artwork with the streak screened on top, exactly as the
 * three card variants in the design.
 *
 * The base is `DSC00267 64` from the Figma library section „Efects and
 * gradients" (2613:86697), exported per accent at 2x — green at the top edge,
 * black at the bottom, the accent glow blooming from the top right. It used to
 * be a radial-plus-linear reconstruction of that rect, which is how the whole
 * thing ended up upside down once already.
 *
 * `isolation` keeps the streak's `screen` inside the hero. Without it the blend
 * reaches the white card underneath and the hero washes out.
 */
.rkl-leader-card__hero {
	background-color: var(--rkl-black, #1e201e);
	background-image: var(--rkl-leader-art);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 197px;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/*
 * The streak — Figma's vector `82`, already unmixed to a transparent alpha in
 * `assets/player-card-bg.png`, or whatever „Kortelių fonas" is set to.
 *
 * It is a pseudo-element rather than a second background layer on the hero
 * because the accent artwork is what has to sit underneath: this used to be the
 * gradient, painted over the hero's own background-image, so the texture (and
 * any upload behind that setting) was never actually visible.
 */
.rkl-leader-card__hero::before {
	background-image: var(--rkl-leader-texture);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	position: absolute;
}

.rkl-leader-card--yellow {
	--rkl-leader-art: url("../../assets/leader-card-yellow.jpg?v=2");
}

.rkl-leader-card--red {
	--rkl-leader-art: url("../../assets/leader-card-red.jpg?v=2");
}

.rkl-leader-card--green {
	--rkl-leader-art: url("../../assets/leader-card-green.jpg?v=2");
}

/*
 * Player photos come from the feed in two forms: cut-outs with transparency
 * and plain JPEG portraits on a solid background. Feathering the edges keeps
 * the second kind from showing a hard white box on the dark hero, and leaves
 * the cut-outs unchanged.
 *
 * The mask clips this element's background as well as its image content, so it
 * also feathered base.css's #f9f9f9 lazy-image placeholder — which is how a
 * near-white wash over the artwork survived review as "the photo is loading".
 * render.php withholds `data-rkl-img` now; the hero's own black and artwork are
 * the wait state. Do not put it back to get the shimmer: the mask will hide the
 * shape of the mistake, not the brightness of it.
 */
.rkl-leader-card__photo {
	bottom: 0;
	height: auto;
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, #000 22%),
		radial-gradient(115% 115% at 62% 45%, #000 58%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0%, #000 22%),
		radial-gradient(115% 115% at 62% 45%, #000 58%, transparent 100%);
	mask-composite: intersect;
	/*
	 * `max-height` is the guard, not the layout.
	 *
	 * The photo is 61% of the card with `height: auto`, so its height tracks the
	 * card's WIDTH while the hero's height is fixed. Any card wider than ~322 used to
	 * push the photo's top above the hero, and `overflow: hidden` cut the head off.
	 * Clamping to the hero means the worst case is a photo that sits a little narrow
	 * in its box, never one that loses a face.
	 */
	max-height: 100%;
	object-fit: contain;
	object-position: bottom;
	position: absolute;
	right: 0;
	width: 61%;
}

/*
 * `auto` at the bottom, not 0: Figma's `Group 3822` is 159px tall inside a 197px
 * hero and does not stretch. Anchoring both edges made the block 173px and moved
 * every line inside it.
 */
.rkl-leader-card__meta {
	inset: 24px auto auto 16px;
	position: absolute;
	width: 190px;
}

.rkl-leader-card__category {
	color: var(--rkl-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

.rkl-leader-card__rule {
	background: var(--rkl-grey-02);
	display: block;
	height: 1px;
	margin: 24px 0 0;
	opacity: 0.6;
	width: 160px;
}

.rkl-leader-card__name {
	color: var(--rkl-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	/* Figma: the name's box starts 16px under the rule, at y=83 in the hero. */
	margin: 16px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-leader-card__value {
	color: var(--rkl-white);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.5;
	/* Figma: the value's box starts 15px under the name's, at y=123 in the hero. */
	margin: 15px 0 0;
	text-transform: uppercase;
}

/* Rows 2..5 -------------------------------------------------------------- */

.rkl-leader-card__rows {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0 8px;
}

.rkl-leader-row {
	align-items: center;
	border-bottom: 1px solid var(--rkl-grey-01);
	display: flex;
	gap: 8px;
	height: 48px;
	padding: 8px;
}

.rkl-leader-row:last-child {
	border-bottom: 0;
}

.rkl-leader-row__rank {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	color: var(--rkl-black);
	display: flex;
	flex: none;
	font-size: 12px;
	height: 24px;
	justify-content: center;
	line-height: 1.5;
	min-width: 24px;
}

.rkl-leader-row__name {
	color: var(--rkl-black);
	flex: 1 1 auto;
	font-size: 12px;
	line-height: 1.6;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-leader-row__value {
	color: var(--rkl-black);
	flex: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

/* Mobile ----------------------------------------------------------------- */

/* BREAKPOINT: 1024px. */
@media (max-width: 1024px) {
	.rkl-leaders {
		gap: 24px;
		min-height: 607px;
		padding: 24px 0 24px 16px;
	}

	.rkl-leaders__header {
		align-items: flex-start;
		flex-direction: column-reverse;
		gap: 8px;
		padding-right: 16px;
	}

	.rkl-leaders__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		order: 2;
		width: 100%;
	}

	.rkl-leaders__title {
		font-size: 18px;
		line-height: 1.6;
	}

	.rkl-leaders__sponsor {
		align-self: flex-end;
		margin-top: -46px;
		padding: 0;
	}

	.rkl-leaders__controls {
		padding-right: 16px;
	}


	/* Arrows are a desktop affordance; the row is swiped on touch. */
	.rkl-leaders__arrows {
		display: none;
	}

	.rkl-leaders__viewport {
		padding-right: 16px;
	}
}

/* Links inherit the card styling; the design shows plain text. */
.rkl-leader-card__hero-link,
.rkl-leader-card__name a,
.rkl-leader-row__name a {
	color: inherit;
	text-decoration: none;
}

.rkl-leader-card__name a:hover,
.rkl-leader-card__name a:focus-visible,
.rkl-leader-row__name a:hover,
.rkl-leader-row__name a:focus-visible {
	text-decoration: underline;
}

/* Clickable areas --------------------------------------------------------- */

/*
 * "All area should be clickable (not only name)" — the whole hero for the
 * leader, the whole row for ranks 2-5. Two mechanisms, because the two boxes are
 * built differently.
 *
 * The hero is a real wrapping <a> at `inset: 0`, so it becomes the hero's box
 * exactly: the photo's `bottom/right/61%` and the meta's `24px/16px` are absolute
 * against it and resolve to the same pixels they did against the hero. It has to
 * be a real link rather than a stretched `::after` on the name, because the meta
 * is itself `position: absolute` and would have been the pseudo-element's
 * containing block — a 190px box, not the card.
 */
.rkl-leader-card__hero-link {
	display: block;
	inset: 0;
	position: absolute;
}

/*
 * Hover anywhere in the hero underlines the name, which is the affordance the
 * card already used when the name alone was the target. The cursor comes free —
 * the whole box is the link now.
 */
.rkl-leader-card__hero-link:hover .rkl-leader-card__name {
	text-decoration: underline;
}

/*
 * The focus ring goes on the hero, not on the name, because the hero is what
 * activating it will follow. `outline-offset: -2px` draws it inside: the hero is
 * `overflow: hidden` and an outward ring would be clipped away.
 */
.rkl-leader-card__hero:has(.rkl-leader-card__hero-link:focus-visible) {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/*
 * The rows go the other way: the rank, the name and the value are flex children,
 * so a wrapping <a> would collapse the layout. The name's link stays where it is
 * and grows an invisible overlay across the row instead.
 *
 * `is-linked` is what makes the row the containing block, so a row with no
 * destination — a player the feed gives no slug for — gets no phantom hit area.
 */
.rkl-leader-row.is-linked {
	position: relative;
}

.rkl-leader-row.is-linked .rkl-leader-row__name a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.rkl-leader-row.is-linked:hover .rkl-leader-row__name a {
	text-decoration: underline;
}

.rkl-leader-row.is-linked:has(a:focus-visible) {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/*
 * Three cards per view once the block itself is wide enough, regardless of the
 * viewport. Declared last so it wins over the fixed 322px design width.
 */
/*
 * BREAKPOINT: 1024px. The container query alone fires on a tablet too once the
 * block stacks to full width, putting three cards where the mobile design shows
 * one — measured on the news block as two 366px cards at an 885px client width.
 */
@media (min-width: 1025px) {
	@container rkl-leaders (min-width: 990px) {
		.rkl-leaders__list .rkl-leader-card {
			/*
			 * A third of the row, but never WIDER than the design's 322.
			 *
			 * The unclamped `calc((100% - 16px) / 3)` is only correct while the block
			 * is about 982 wide, which is the homepage's row. On the Žaidėjai page the
			 * same block sits in a 1281 container, so a third came out at 422 — and
			 * because the photo is sized as 61% of the card with `height: auto` inside
			 * a hero of a FIXED 197px, it grew to 257 and the players' heads were
			 * clipped off the top of the hero.
			 *
			 * `min()` keeps the homepage byte-identical (982 → exactly 322, and it
			 * still shrinks to ~317 in a 967 row, which is what that breakpoint was
			 * added for) while a wider container now shows more cards rather than
			 * bigger ones — which is what the Žaidėjai frame draws: four 322s in a
			 * 1296 row, the last one slightly clipped.
			 */
			width: min(322px, calc((100% - 16px) / 3));
		}
	}
}