/**
 * Naujienų sąrašas su filtrais — Figma 2507-48859 (desktop), 2591-62426 and
 * 2629-45499 (the two mobile options), 2507-50007 (toolbar).
 *
 * The card family, `.rkl-tabs`, `.rkl-search`, `.rkl-field`, `.rkl-cta`,
 * `.rkl-icon-button--48` and `.rkl-dialog` all live in assets/base.css and are
 * used as they are — nothing here restyles them. What is here is this block's
 * own frame: the white card, the toolbar row, the grid, the „Rodyti daugiau"
 * row, the empty state, and the one class that turns the desktop grid card into
 * the design's mobile row card.
 */

/*
 * A grid item first, a card second.
 *
 * This block sits in `rkl/ad-rail`'s `minmax(0, 1fr)` main column, and landmine
 * 38's family bit both blocks already: an item without a definite width resolves
 * to fit-content, and the widest thing in here (a row of press photographs) then
 * decides the column's width instead of the other way round. `width: 100%` plus
 * `min-width: 0` keeps the column in charge; `box-sizing: border-box` keeps the
 * 24px of padding inside the 100%, and is repeated here rather than inherited
 * because a page also running GL - Page Builder resets descendants to
 * content-box.
 */
.rkl-narchive {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	width: 100%;
}

/* Toolbar ----------------------------------------------------------------- */

/*
 * The row never wraps — the brief is explicit, and it is the same rule
 * `rkl/matches` follows. Every item is `flex-shrink: 0` and the row clips, so
 * `scrollWidth > clientWidth` is an honest answer to "does this fit?"; view.js
 * hides category tabs rightmost first until it does. Without the clip the row
 * would simply grow and take the whole card with it.
 */
.rkl-narchive__toolbar {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	min-height: 48px;
	overflow: hidden;
}

.rkl-narchive__toolbar > * {
	flex-shrink: 0;
}

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

/*
 * The tabs are anchors, so category filtering works with no script at all
 * (view.js intercepts the click). `.rkl-tabs__button` was written for a
 * `<button>`, which centres its own label and carries no underline; an anchor
 * needs both said out loud. Scoped to this block: the shared class keeps its
 * meaning everywhere else.
 */
.rkl-narchive .rkl-tabs__button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	text-decoration: none;
}

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

.rkl-narchive__tools {
	align-items: center;
	display: flex;
	gap: 16px;
}

.rkl-narchive__tools > * {
	flex-shrink: 0;
}

/* Filter dialog ----------------------------------------------------------- */

/*
 * „Pasirinkite" must not read „Pasirinkit…".
 *
 * base.css reserves 70px for `.rkl-field__label` and lets it shrink to exactly
 * that (`flex: 0 1 auto; min-width: 70px`), which is how the roster's season
 * select got its value back (landmine 37). Measured here: „Pasirinkite" in
 * Poppins 14 is 70.4px, so the label lands 0.4px short and the browser draws the
 * ellipsis. Only the shrink is switched off, and only inside this block's
 * dialog: the field is 512 wide and the select has ~400px left, so the label
 * taking its own width costs the value nothing. The shared 70px probably wants
 * to be 76 — that is base.css's call, not this file's.
 */
.rkl-narchive__field .rkl-field__label {
	flex-shrink: 0;
}

/*
 * „Divizionas" is a checkbox group, so this one field is not a 48px row.
 *
 * base.css pins every `.rkl-dialog .rkl-field` to `height: 48px` and
 * `flex-wrap: nowrap`, which is right for the three selects the design draws
 * (2587-43469, and the phone sheet 2591-62908) and wrong for a group: two
 * divisions and their names fit that row on a desktop and do not on a 320px
 * phone, where the group has to take a second line instead of clipping half of
 * itself.
 *
 * Landmine 51's prescribed shape — override per context, never edit the shared
 * rule other blocks depend on — and out-specified rather than ordered:
 * `.rkl-dialog .rkl-field` is (0,2,0) and block styles are not guaranteed to be
 * enqueued after base.css (landmine 48), so the override carries both of this
 * element's own classes and wins at (0,3,0) whatever the source order is.
 */
.rkl-dialog .rkl-narchive__divisions.rkl-field {
	flex-wrap: wrap;
	height: auto;
	min-height: 48px;
	padding-block: 8px;
}

/*
 * `row-gap` is the wrapped case; the 16px column gap is the design's spacing
 * between two chips of the same control, not between two controls.
 */
.rkl-narchive__checks {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px 16px;
	min-width: 0;
}

.rkl-narchive__check {
	align-items: center;
	display: flex;
	gap: 8px;
}

/*
 * The whole label is the hit target, not just the 20px box: `for` gives the
 * click and the pointer cursor says so. `white-space: nowrap` keeps
 * „A divizionas" from breaking after „A" — the group wraps between the two
 * checkboxes instead, which is the only place a break reads as intentional.
 */
.rkl-narchive__check-label {
	color: var(--rkl-black);
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}

/* Grid -------------------------------------------------------------------- */

/*
 * 3 x 322 + 2 x 8 = 982, the inner width of the 1030 main column at 24px of card
 * padding. `minmax(0, 1fr)` rather than 322px: the column this block lives in is
 * fluid, and a fixed track would overflow it the moment the rail grows.
 */
.rkl-narchive__grid {
	column-gap: 8px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 24px;
	row-gap: 24px;
}

/* A class-level `display` out-ranks the UA's [hidden] rule — landmine 2. */
.rkl-narchive__grid[hidden] {
	display: none;
}

/*
 * While a filter's page 1 is in flight the grid on screen is the previous
 * filter's, so it is dimmed rather than emptied: an empty card for the length of
 * a request reads as "no results" and then flickers back.
 */
.rkl-narchive.is-loading .rkl-narchive__grid {
	opacity: 0.5;
}

/* „Rodyti daugiau" -------------------------------------------------------- */

.rkl-narchive__more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

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

.rkl-narchive__more-button {
	width: 140px;
}

/*
 * The busy state keeps the button in place and its label intact: a spinner that
 * replaced the label would change the button's width mid-request and move the
 * grid under the pointer.
 */
.rkl-narchive__spinner {
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	border-top-color: var(--rkl-white);
	box-sizing: border-box;
	display: none;
	flex: 0 0 14px;
	height: 14px;
	width: 14px;
}

.rkl-narchive__more-button.is-busy .rkl-narchive__spinner {
	display: block;
}

/* Empty state ------------------------------------------------------------- */

/*
 * The same shape as the players table's, which is the one the design uses for
 * "nothing matched": the RKL mark, the headline in Boldonse uppercase, and one
 * line telling the visitor what to try. Only the grid is replaced — the toolbar
 * stays, or there is no way back.
 */
.rkl-narchive__empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 72px 24px 96px;
	text-align: center;
}

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

.rkl-narchive__empty-mark {
	display: block;
	height: auto;
	width: 96px;
}

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

.rkl-narchive__empty-text {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	max-width: 34ch;
}

/* BREAKPOINT: 1024px — two columns, the tablet grid. */
@media (max-width: 1024px) {
	.rkl-narchive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* BREAKPOINT: 782px — the phone frames. */
@media (max-width: 782px) {
	/*
	 * The card runs to both screen edges here, and the negative margin is what
	 * gets it there.
	 *
	 * Frame 4019 in both mobile artboards is at x=0 with width 400 — the white
	 * surface is full-bleed — and its toolbar is at x=16 with width 368. This
	 * block sits inside `.rkl-tab-panel__inner`, which owns the page's 16px
	 * gutter, so without the negative margin the card is inset 16 and its content
	 * is 336: measured, that gave a 280px search where the frame draws 312, and
	 * the shortfall came off every card in the grid as well.
	 *
	 * One gutter out, one gutter of padding back in, so the content lands at 368
	 * exactly. `--rkl-gutter` rather than 16px, because base.css owns that number.
	 */
	.rkl-narchive {
		border-radius: 0;
		margin-inline: calc(-1 * var(--rkl-gutter));
		padding: 16px;
		width: auto;
	}

	/* Both mobile frames show the search and the filter button, nothing else. */
	.rkl-narchive__tabs {
		display: none;
	}

	.rkl-narchive__toolbar {
		gap: 8px;
	}

	.rkl-narchive__tools {
		gap: 8px;
		min-width: 0;
		width: 100%;
	}

	/*
	 * 312 + 8 + 48 = 368, the frame's row. `flex: 1 1 auto` with the 312 as a
	 * maximum rather than a fixed width, so the field also fits a 320px phone
	 * instead of pushing the filter button off the card.
	 */
	.rkl-narchive__search {
		flex: 1 1 auto;
		/* max-width: 312px; */
		min-width: 0;
		width: auto;
	}

	.rkl-narchive__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rkl-narchive__empty {
		padding: 48px 16px 64px;
	}

	.rkl-narchive__empty-title {
		font-size: 20px;
	}

	.rkl-narchive__empty-text {
		font-size: 14px;
	}
}

/* Mobile option 2 — the row card ------------------------------------------ */

/*
 * `mobileLayout` is an editor setting and it changes no markup.
 *
 * Option 1 (2591-62426) stacks the full-width grid card; option 2 (2629-45499,
 * card 2629-46040) stacks the row card: 352 wide, 168 of image + 16 + 168 of
 * text. Both are the same `.rkl-news-card--grid` element, restyled here below
 * 783px, for one reason — „Rodyti daugiau" appends cards from
 * `rkl-blocks/v1/news`, which renders whatever `shape` it is asked for. If the
 * layout were a shape, the appended page and the first paint would each be one
 * request's opinion of the current breakpoint, and a visitor who resized between
 * them would get a grid of two different cards. One DOM cannot disagree with
 * itself.
 *
 * The numbers are base.css's `--row` numbers, reached through the same
 * `--rkl-card-thumb`, so the two shapes cannot drift: 168 / (764/506) = 111.3,
 * which is what the frame measures for the image.
 */
@media (max-width: 782px) {
	.rkl-narchive--mobile-list .rkl-news-card {
		--rkl-card-thumb: 168px;
	}

	.rkl-narchive--mobile-list .rkl-news-card__link {
		align-items: flex-start;
		flex-direction: row;
		gap: 16px;
	}

	.rkl-narchive--mobile-list .rkl-news-card__media-col {
		flex: 0 0 var(--rkl-card-thumb);
		width: var(--rkl-card-thumb);
	}

	.rkl-narchive--mobile-list .rkl-news-card__body {
		flex: 1 1 auto;
	}

	/*
	 * And the chip moves under the image, exactly as it does on the `--row`
	 * shape: a 126px mark laid over a 168px thumbnail reads as a label on a
	 * thumbnail rather than as part of a photograph, which is why the design
	 * does not do it at this size.
	 */
	.rkl-narchive--mobile-list .rkl-news-card:has(.rkl-news-card__sponsor) {
		padding-bottom: 32px;
	}

	.rkl-narchive--mobile-list .rkl-news-card__sponsor {
		bottom: auto;
		justify-content: center;
		left: 0;
		right: auto;
		top: calc(var(--rkl-card-thumb) / (764 / 506));
		width: var(--rkl-card-thumb);
	}
}

/* Motion ------------------------------------------------------------------ */

/*
 * The card entrance itself is base.css's `.is-entering`, set by view.js on cards
 * that arrive from a filter or from „Rodyti daugiau". Only the spinner is this
 * block's own, and it exists solely as motion — with reduced motion the disabled
 * button is the whole feedback, so nothing spins and nothing is drawn.
 */
@media (prefers-reduced-motion: no-preference) {
	.rkl-narchive__grid {
		transition: opacity 0.15s ease;
	}

	@keyframes rkl-narchive-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.rkl-narchive__more-button.is-busy .rkl-narchive__spinner {
		animation: rkl-narchive-spin 0.6s linear infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rkl-narchive__more-button.is-busy .rkl-narchive__spinner {
		display: none;
	}
}