/* News grid. Tokens live in assets/base.css. */

.rkl-news {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	container: rkl-news / inline-size;
	display: flex;
	flex-direction: column;
	font-family: var(--rkl-font);
	/* Figma Frame 4019: itemSpacing 24, and 24 + 46 + 24 + 330 + 24 = 448. */
	gap: 24px;
	padding: 24px;
	/*
	 * The design's height. Figma's cards are ragged — 305px for a two-line title,
	 * 330px for a three-line one — so the row's own height depends on the copy;
	 * this floor keeps the block at the design height whatever the titles do.
	 *
	 * Commented out by an unattributed session on 2026-08-18 15:31 and restored,
	 * because without it the section measures 398px against a signed-off 448px.
	 * The block renders on exactly two pages — the homepage and /blokai-testas/ —
	 * and 448 is correct on both, so there was no third page it could have been
	 * breaking. If it genuinely needs to go, disable it with a reason recorded
	 * here and a note in docs/specs/2026-08-18-homepage-fixes-outcome.md §4.
	 */
	min-height: 448px;
}

/*
 * The „Pristato“ chip is a fixed 126×32 and declares `box-sizing: border-box`,
 * but on a page that also runs the page builder something resets descendants to
 * content-box, which rendered it 142×44. Normalising the whole block — the same
 * thing .rkl-footer already does — makes the measured size the design's size
 * regardless of what else is on the page.
 */
.rkl-news *,
.rkl-news *::before,
.rkl-news *::after {
	box-sizing: border-box;
}

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

/* Title and "Žiūrėti visas" sit together on the left; the arrows go hard right,
   as in the design. */
.rkl-news__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

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

.rkl-news__arrows {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.rkl-news__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-news .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-news .rkl-link-button img {
	height: 14px;
	object-fit: contain;
	transform: rotate(-90deg);
	width: 14px;
}

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

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

/*
 * A scroll row rather than a wrapping grid: the design pages through the news
 * with the arrow buttons, so extra posts must live off to the right instead of
 * on a second line. Card widths are a fraction of the row, so exactly three sit
 * in view on a wide block — the same count the grid used to show.
 *
 * `scrollbar-width: none` hides the bar; the arrows, drag and keyboard are the
 * affordances (assets/swipe.js).
 */
/*
 * Swiper owns the scrolling (assets/swiper.js). No CSS `gap` here: the gutter is
 * Swiper's spaceBetween, and having both double-counts it and cuts off the last
 * card. `scroll-behavior: smooth` is gone too — it fights Swiper's own transition.
 *
 * Widths stay in CSS with slidesPerView: 'auto', and the breakpoints stay
 * container queries — Swiper is told breakpointsBase: 'container' to match, so a
 * narrow column inside a wide viewport still shows one card, not three cramped
 * ones.
 */
.rkl-news__viewport {
	cursor: grab;
}

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

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

/*
 * Below the desktop line the design shows one 322px card with the next peeking
 * past the right edge — the mobile row is 384px wide and the second card starts
 * at 330. So this is a fixed card, not a fraction, with a guard for the narrowest
 * phones.
 */
.rkl-news__grid > .rkl-news-card {
	width: 322px;
	max-width: calc(100% - 24px);
}

/*
 * BREAKPOINT: 1024px. Container queries measure the block, not the viewport, so
 * on a 768px tablet the stacked block is about 736px wide and would still trip a
 * bare `(min-width: 640px)` rule — measured: two 366px cards at an 885px client
 * width, where the design shows one. The media query gate is what keeps tablet on
 * the mobile layout.
 */
@media (min-width: 1025px) {
	@container rkl-news (min-width: 640px) {
		.rkl-news__grid > .rkl-news-card {
			max-width: none;
			width: calc((100% - 8px) / 2);
		}
	}

	/*
	 * 8px gutters, not 16: the row is 982px and holds 3 × 322 + 2 × 8. The old
	 * `- 32px` assumed 16px gutters and produced 316.67px cards.
	 */
	@container rkl-news (min-width: 960px) {
		.rkl-news__grid > .rkl-news-card {
			max-width: none;
			width: calc((100% - 16px) / 3);
		}
	}
}

/* A disabled arrow still needs to read as a button, just inert. */
.rkl-news__arrows .rkl-icon-button[disabled] {
	cursor: default;
	opacity: 0.4;
}

/* BREAKPOINT: 1024px. */
@media (max-width: 1024px) {
	/*
	 * Figma Frame 4062 is padded 24/0/24/16 — no right padding, so the card row
	 * bleeds off the right edge. The header gets its own right padding back so the
	 * arrows do not touch the screen edge.
	 */
	.rkl-news {
		min-height: 457px;
		padding: 24px 0 24px 16px;
	}

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

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

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

	/*
	 * Arrows are a desktop affordance; the row is swiped on touch.
	 *
	 * `rkl/news` was the only one of the twelve arrow-emitting blocks still
	 * showing them below this line, and they did not fit. The header is a
	 * `space-between` flex row that has to hold the heading plus the 88px arrow
	 * pair, and at a 390 viewport its content box measures 326.00 against
	 * `heading 223.17 + gap 16 + arrows 88 = 327.17`. Those 1.17px are enough for
	 * the header's own `flex-wrap: wrap` to drop the arrows onto a second line,
	 * which lands them 50.4px below the heading's centreline and takes the header
	 * from the heading's own 28.8px to 84.8px. The deficit only widens as the
	 * phone narrows — 16px at 375, 31px at 360 — and on the article page's
	 * „Kitos naujienos“ row, where the column is narrower still, the arrows come
	 * to rest 71.5px below the heading. At 1440 the row fits (982px box) and the
	 * two share a centreline exactly, so this is a mobile-only failure.
	 *
	 * Hidden rather than shrunk or re-wrapped, because hiding is what the other
	 * eleven already do: `videos`, `player-leaders`, `player-gallery` and
	 * `team-gallery` each carry this same `display: none` inside their own
	 * `max-width: 1024px` block, and `photo-strip`, `reel-row`, `star-row`,
	 * `benefit-row` and `legend-row` inherit it from `.rkl-section-card__arrows`
	 * in assets/base.css. `rkl/news` cannot reach that shared rule — its markup
	 * emits `.rkl-news__arrows`, not the section-card class — so it gets the
	 * block-level twin rather than a third behaviour invented for one block.
	 *
	 * This file is the right owner despite assets/base.css loading after it
	 * (measured: the inlined block style is stylesheet 6, base.css is 18): base
	 * declares no `display` for `.rkl-news__arrows` at any width, so nothing
	 * competes and specificity never comes into it.
	 *
	 * Swiper keeps the row usable with the buttons gone — touch drag, the grab
	 * cursor and the keyboard all still work (assets/swiper.js).
	 */
	.rkl-news__arrows {
		display: none;
	}
}