/*
 * „Mūsų žvaigždės“ — the Partneriams player row.
 *
 * The white panel (`.rkl-section-card` + `__head` `__title` `__arrows`), the
 * 40×40 arrows (`.rkl-icon-button`) and the scroll track (`.rkl-swiper` >
 * `.swiper-wrapper` > `.swiper-slide`) all live in assets/base.css and are only
 * used here, never redeclared. What is left is the card.
 *
 * Figma: desktop 2543:50960 (cards 2543:50968..50989), mobile 2591:67616.
 */

.rkl-star-row__empty {
	color: var(--rkl-grey-05);
	font-size: 14px;
	/* landmine 34: the theme inherits 300, so every text rule states its weight. */
	font-weight: 400;
	margin: 0;
	text-align: center;
}

/*
 * `.rkl-swiper` clips its overflow, so a focus ring drawn outside the track — or
 * outside the first or last card — is cut off. Both rings are inset instead.
 */
.rkl-star-row__track:focus-visible {
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

.rkl-star-row__track.swiper-grabbing {
	cursor: grabbing;
}

.rkl-star-row__track:not(.swiper-initialized) {
	cursor: grab;
}

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

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

.rkl-star-card {
	/*
	 * The design's four cards share the track: basis 0 with grow 1 means they
	 * divide whatever width the block has, so the row is right at 1440 and at
	 * `align: full` alike. `min-width: 0` because flex's automatic minimum size
	 * is min-content, which a long name would otherwise push the card out to.
	 *
	 * `max-width` is not belt-and-braces — without it the row scrolls 24px it has
	 * no business scrolling. `flex: 1 1 0` and Swiper's `spaceBetween` measure
	 * each other in a circle: Swiper reads a slide's width before its own inline
	 * margins are in play, which on a growing row is the free width divided four
	 * ways — measured `slidesSizesGrid: [324, 324, 324, 324]` — then adds the
	 * three gaps for a `virtualSize` of 1320 against a 1296 track. So the next
	 * arrow came up enabled on a row where all four cards already fit, and
	 * nudged 24px. Capping the card at the frame's 318 makes the pre-margin
	 * measurement and the laid-out width the same number, 4 × 318 + 3 × 8 = 1296,
	 * and the arrows lock. `rkl/reel-row` avoids the same trap the same way.
	 */
	flex: 1 1 0;
	max-width: 318px;
	min-width: 0;
}

/*
 * Swiper's `spaceBetween: 8` lands as an inline `margin-right: 8px` on *every*
 * slide, the last one included, and the design's gap only exists between cards.
 * On a `flex: 1 1 0` row that trailing margin is width taken off the cards:
 * measured, the four cards in the 1296 track came out (1296 − 4 × 8) / 4 = 316
 * instead of the frame's 318, which is 2.5px off the 373 photo through the
 * 290/340 box and leaves the fourth card's edge 8px short of the panel.
 *
 * `!important` because the declaration being overridden is an inline style and
 * nothing else reaches one — the same reasoning as the rkl-addons overrides in
 * blocks/matches. Swiper's own arithmetic already excludes the final gap
 * (`virtualSize` is the slides plus n − 1 gaps), so dropping it agrees with the
 * maths rather than fighting it: 4 × 318 + 3 × 8 = 1296 exactly and the row locks.
 *
 * The rule sits outside the ≤1024 query on purpose, so it applies at both widths.
 * Desktop: the four `flex: 1 1 0` cards stop paying for a gap that is not drawn,
 * per the arithmetic above. Mobile: the fixed 322 cards keep their 8px gaps
 * between one another, and the space trailing the last card is the track's own
 * 16px inset rather than 16 + 8 = 24 — which is the inset the mobile frame asks
 * for on both ends of the track.
 */
.rkl-star-row .swiper-slide:last-child {
	margin-inline-end: 0 !important;
}

.rkl-star-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/*
 * The whole-card link. `display: contents` would keep the anchor out of the
 * layout, but a box-less link gets no hit area and no focus ring — so it stays a
 * block-level box that borrows the card's colour and drops the underline.
 */
.rkl-star-card__link {
	color: inherit;
	text-decoration: none;
}

.rkl-star-card__link:focus-visible {
	border-radius: var(--rkl-radius);
	outline: 2px solid var(--rkl-green-03);
	outline-offset: -2px;
}

/* Photo ------------------------------------------------------------------- */

.rkl-star-card__photo {
	/* Figma's photo box is 290×340. */
	aspect-ratio: 290 / 340;
	border-radius: var(--rkl-radius);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/*
 * The plates. The portraits are transparent cut-outs, so this gradient is what
 * is actually seen behind each one — straight off the card frames
 * (2543:50968..50989). These three colours are not in the palette and appear
 * nowhere else on the site, so they stay literal here rather than becoming
 * tokens.
 */
.rkl-star-card__photo--green {
	background-image: linear-gradient(165deg, #000 15.389%, #075f3d 90.699%);
}

.rkl-star-card__photo--red {
	background-image: linear-gradient(165deg, #000 15.389%, #8f1219 90.699%);
}

.rkl-star-card__photo--yellow {
	background-image: linear-gradient(165deg, #000 15.389%, #8a6a04 90.699%);
}

.rkl-star-card__portrait {
	display: block;
	height: 100%;
	object-fit: cover;
	/* The cut-outs are framed from the feet up: the crop has to keep the bottom,
	 * or a tall portrait loses the player's legs and floats in the plate. */
	object-position: bottom;
	width: 100%;
}

/*
 * base.css shimmers `img[data-rkl-img]` until it loads, and this portrait fills
 * the whole box — so the shimmer would hide the plate behind it, which is the
 * one part of the card that is already there. The gradient is the placeholder.
 * (0,4,0) against base.css's (0,2,1), so load order does not matter.
 */
.rkl-star-card__photo .rkl-star-card__portrait[data-rkl-img]:not(.is-loaded) {
	animation: none;
	background: none;
}

/* Meta row ---------------------------------------------------------------- */

.rkl-star-card__meta {
	align-items: center;
	display: flex;
	gap: 16px;
	min-width: 0;
}

.rkl-star-card__crest {
	/* 54×54 in the frames, and it must not shrink when the name is long. */
	flex: 0 0 54px;
	height: 54px;
	object-fit: contain;
	width: 54px;
	/*
	 * landmine 25: an inline-level box sits on the text baseline and reserves
	 * room for the descender, which lifts the crest a few pixels above the name
	 * it is supposed to be centred against.
	 */
	vertical-align: middle;
}

/* `min-width: 0` so the ellipsis below can happen at all — without it the column
 * is as wide as its longest word and pushes the crest out of the card. */
.rkl-star-card__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Subline: Poppins 500 16/1.4. */
.rkl-star-card__name {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Body 2: Poppins 400 14/1.5. */
.rkl-star-card__position {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1024px) { /* BREAKPOINT */
	/*
	 * landmine 71: in a bleeding carousel the gutter belongs to the scroll track,
	 * not to the card. On the card it would clip the first tile inside the screen
	 * edge and let the last one run flush off it. `scroll-padding-inline` matches
	 * so the snap positions land on the inset too. The panel itself already drops
	 * its inline padding at this width (base.css).
	 *
	 * Scoped through the block root, so (0,2,0). A bare `.rkl-star-row__track` is
	 * (0,1,0), exactly what base.css's `.rkl-swiper { padding: 0 }` is, and that
	 * file loads after the block stylesheets — so the padding lost the tie and
	 * vanished while `scroll-padding-inline`, which base.css does not touch,
	 * survived. Measured on the 400 frame: computed `padding-left: 0px`, first
	 * card flush at x = 0, and every snap position 16px out. Same shape as the
	 * notes in matches-line and player-gallery.
	 */
	.rkl-star-row .rkl-star-row__track {
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}

	.rkl-star-card {
		/*
		 * The mobile frame's card is 322 wide, with the next one peeking. The
		 * desktop 318 cap has to go with it, or it would win over the basis.
		 */
		flex: 0 0 322px;
		max-width: none;
	}
}