/**
 * Design tokens shared by every RKL block.
 * Values come from the Figma library (Nostra.lt RKL Website).
 */

:root {
	--rkl-white: #ffffff;
	--rkl-black: #1e201e;
	--rkl-grey-01: #e3e3e3; /* dividers */
	--rkl-grey-02: #dcdcdc; /* strokes */
	--rkl-grey-03: #ededed; /* hover surfaces */
	--rkl-grey-04: #f9f9f9; /* surfaces, buttons */
	--rkl-grey-05: #7d7d7d; /* muted text */
	--rkl-green-01: #dbf6d3; /* win chip surface */
	--rkl-green-02: #42b947;
	--rkl-green-03: #029561;
	--rkl-green-04: #00632F;
	--rkl-red-01: #ffcace; /* loss chip surface */
	--rkl-red-02: #dd2936; /* loss text, defeat dots */
	--rkl-yellow: #eeb806;

	--rkl-radius: 8px;
	--rkl-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	--rkl-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * Page geometry, from the Figma frames: a 1440 design with 48px gutters and a
	 * 1344px content column (1030 main + 16 gap + 298 rail). The mobile frame is
	 * 400 wide with 16px gutters.
	 *
	 * These exist because two things need the same number and used to hardcode it
	 * separately: the page's own gutters, and the full-bleed matches strip, which
	 * has to line its panel up with the content column it deliberately escapes.
	 */
	--rkl-gutter: 48px;
	--rkl-content: 1344px;
}

/*
 * 1024px is the tablet/desktop line for the whole homepage: at or below it every
 * block uses the mobile layout. Changing it here changes it for the gutters; the
 * per-block stylesheets carry the same number and are marked BREAKPOINT.
 */
@media (max-width: 1024px) {
	:root {
		--rkl-gutter: 16px;
	}
}

/**
 * Lazy images.
 *
 * Team logos come from the Genius CDN, so they arrive after the markup. Until
 * each one loads it shows a shimmering placeholder in its exact final size,
 * which keeps the layout from shifting and makes the wait legible.
 */
@keyframes rkl-shimmer {
	from { background-position: 150% 0; }
	to { background-position: -50% 0; }
}

img[data-rkl-img]:not(.is-loaded) {
	animation: rkl-shimmer 1.4s linear infinite;
	background-color: var(--rkl-grey-04);
	background-image: linear-gradient(
		90deg,
		var(--rkl-grey-04) 20%,
		#eef1f4 40%,
		#eef1f4 55%,
		var(--rkl-grey-04) 75%
	);
	background-size: 200% 100%;
	border-radius: 4px;
	color: transparent;
}

img[data-rkl-img].is-loaded {
	animation: none;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	img[data-rkl-img]:not(.is-loaded) {
		animation: none;
	}
}

/* Accessible text that stays out of the visual design. */
.rkl-card .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.rkl-card {
	box-sizing: border-box;
	color: var(--rkl-black);
	font-family: var(--rkl-font);
}

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

/**
 * Round icon button, shared by every carousel. Lives here rather than in one
 * block's stylesheet so a page can use any block on its own.
 */
.rkl-icon-button {
	align-items: center;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 40px;
}

.rkl-icon-button:hover:not(:disabled) {
	background: var(--rkl-grey-03);
	border-color: var(--rkl-grey-02);
}

.rkl-icon-button img {
	display: block;
	height: 14px;
	object-fit: contain;
	width: 14px;
}

/* The asset is a down caret; direction comes from the modifier. */
.rkl-icon-button--prev img {
	transform: rotate(90deg);
}

.rkl-icon-button--next img {
	transform: rotate(-90deg);
}

/* Still legible when disabled: the glyph is dark, only the surface fades. */
.rkl-icon-button:disabled {
	background: var(--rkl-white);
	border-color: var(--rkl-grey-01);
	cursor: default;
}

.rkl-icon-button:disabled img {
	opacity: 0.35;
}

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

/* Sponsor chip as a link ---------------------------------------------------- */

/*
 * The chip keeps its own box in each block's stylesheet; this only makes the
 * anchor transparent to that layout, so adding a URL cannot change any geometry.
 */
.rkl-sponsor-link {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 8px;
	text-decoration: none;
}

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

/* Page title -------------------------------------------------------------- */

/*
 * The theme prints the page title above the content; in these designs the
 * heading belongs to the hero, so a separate "Homepage" line is wrong.
 *
 * Scoped to pages that actually use an RKL block. Unscoped it would also hide
 * the title on single news articles, where the title is the content.
 */
body:has(.rkl-featured, .rkl-matches-line, .rkl-standings, .rkl-partners, .rkl-news, .rkl-page-hero, .rkl-partners-hero, .rkl-hero-banner, .rkl-documents--h1) .wp-block-post-title {
	display: none;
}

/* Page gutters ------------------------------------------------------------ */

/*
 * The design's gutters, not the theme's.
 *
 * twentytwentyfive sets `styles.spacing.padding` to `clamp(30px, 5vw, 50px)`,
 * which measures 50px on desktop where the Figma frame has 48px, 38.4px at a
 * 768px viewport and 30px on a phone where it has 16px.
 *
 * Override the theme's own variable rather than the `padding` declaration it
 * feeds. WordPress derives two things from `--wp--style--root--padding-*`: the
 * padding on `.has-global-padding`, and the negative margins that let an
 * `.alignfull` child escape it. Setting only the padding desynchronises the pair
 * — measured: the padding became 48px while `.entry-content.alignfull` kept
 * pulling -50px, which put 4px of horizontal scroll on the page and left the
 * content column at 44px instead of 48px. Driving the variable keeps both sides
 * derived from one number, with no specificity fight and nothing left to cancel.
 *
 * The class list is deliberately narrower than the page-title rule's above. It
 * names only blocks that appear on the homepage, because `/rungtynes/` and
 * `/zaidejai/` carry `rkl/page-hero` and `rkl/matches`, and `.rkl-matches`
 * already applies its own `padding-inline: var(--rkl-gutter)`. Matching
 * `.rkl-page-hero` here would change the page padding underneath a block that
 * has already solved its own gutters, on two pages this change set does not
 * verify. Add a class here only together with a measurement of the page it
 * affects.
 */
body:has(.rkl-matches-line, .rkl-featured, .rkl-news, .rkl-partners) {
	--wp--style--root--padding-left: var(--rkl-gutter);
	--wp--style--root--padding-right: var(--rkl-gutter);
}


/* Shared controls --------------------------------------------------------- */

/*
 * The select field and the segmented pill control started life inside
 * standings-card and player-leaders. Block stylesheets are only enqueued on
 * pages that carry that block, so a page with the play-off block but no
 * standings card rendered bare, unstyled selects. Shared chrome belongs here.
 */

/* Division selector ----------------------------------------------------- */

.rkl-field {
	align-items: center;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	display: flex;
	gap: 8px;
	min-height: 48px;
	padding: 8px 16px;
	position: relative;
}

.rkl-field:hover {
	background: var(--rkl-grey-03);
}

.rkl-field__label {
	color: var(--rkl-grey-05);
	flex: 0 1 auto;
	font-size: 14px;
	line-height: 1.5;
	min-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rkl-field__select {
	appearance: none;
	background: none;
	border: 0;
	color: var(--rkl-black);
	cursor: pointer;
	flex: 1 1 auto;
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	/* Room for the chevron, which is positioned over the field. */
	min-width: 0;
	padding: 0 26px 0 0;
	text-overflow: ellipsis;
	/*
	 * No width: 100% — as a flex item it would claim the whole row and squeeze
	 * the label into an ellipsis even when there is space for both.
	 */
	width: auto;
}

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

/*
 * The exported icons carry preserveAspectRatio="none", so they must be sized
 * to their own ratio (or contained) or they stretch into a thick chevron.
 */
.rkl-field__icon {
	height: 14px;
	object-fit: contain;
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
}

/*
 * In a narrow card the label and the value no longer fit on one line, so the
 * field stacks instead of truncating the division name.
 */
@media (max-width: 480px) {
	.rkl-field {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 2px;
		height: auto;
		min-height: 48px;
		padding: 6px 16px;
	}

	.rkl-field__label {
		flex: 1 0 100%;
		font-size: 12px;
	}

	.rkl-field__select {
		flex: 1 0 100%;
	}
}

/*
 * Segmented control. The active option is the button itself, rendered server
 * side with .is-active, so the control is correct before any script runs.
 */

.rkl-tabs {
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-01);
	border-radius: var(--rkl-radius);
	display: flex;
	padding: 4px;
	position: relative;
}

.rkl-tabs__button {
	background: none;
	position: relative;
	transition: color 0.2s ease;
	z-index: 1;
	border: 1px solid transparent;
	border-radius: var(--rkl-radius);
	color: var(--rkl-black);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	height: 40px;
	line-height: 1.3;
	margin: 0;
	padding: 8px 16px;
	white-space: nowrap;
}

.rkl-tabs__button:hover:not(.is-active) {
	background: var(--rkl-white);
}

/*
 * The active pill is the button's own surface, not a separate sliding element.
 * A JS-positioned pill lived here before; its used width collapsed to its 2px
 * border on the front end no matter what the width declaration said — even
 * inline and !important — so the affordance was invisible. The static surface
 * cannot fail that way, needs no measurement, and is what the design shows.
 */
.rkl-tabs__button.is-active {
	background: var(--rkl-white);
	border-color: var(--rkl-grey-02);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

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

@media (max-width: 782px) {
	.rkl-tabs {
		width: 100%;
	}

	.rkl-tabs__button {
		flex: 1 1 auto;
	}
}

/* Swiper rows ------------------------------------------------------------- */

/*
 * Only the layout essentials, written here rather than pulling in Swiper's own
 * stylesheet: that file is ~18 KB and carries `:host` rules for Swiper's web
 * components, none of which this site uses. Card widths still come from each
 * block's own CSS.
 */
.rkl-swiper {
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.rkl-swiper > .swiper-wrapper {
	box-sizing: content-box;
	display: flex;
	/* auto, not 100%: the wrapper's height comes from its slides. See below. */
	height: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	width: 100%;
	z-index: 1;

	/*
	 * `flex-start`, and it has to be stated explicitly.
	 *
	 * Swiper's autoHeight writes a pixel height onto this wrapper. Flex's default
	 * `align-items: normal` behaves as `stretch`, so the slides grew to fill that
	 * height — and the next measurement then returned the height autoHeight had
	 * just imposed, so the row could never resize. Removing an explicit `stretch`
	 * was not enough; the default had to be overridden. Slides are `height: auto`,
	 * and the news title's two-line clamp is what keeps the cards equal.
	 */
	align-items: flex-start;
}

/*
 * `height: auto`, never 100%.
 *
 * Swiper's stock CSS gives slides `height: 100%`, which resolves against a
 * wrapper whose own height comes from the slides — so the slide collapsed to the
 * one child with an intrinsic height, the 16/9 media. Everything below it (the
 * news card's title and category) was then clipped by the container's
 * `overflow: hidden`, and the narrower the screen the shorter the media and the
 * more text disappeared. Cards are kept equal by the news title's two-line clamp, not by stretching.
 */
/*
 * `box-sizing: border-box`, restoring what the wrapper above takes away.
 *
 * The wrapper needs `content-box` for Swiper's own maths, and base.css's
 * `.rkl-card * { box-sizing: inherit }` then propagates that down into every
 * slide and everything inside it. Both selectors are specificity (0,1,0) and this
 * file loads after the block stylesheets, so a block's own `border-box` on a card
 * silently loses — measured: `.rkl-leader-row` sizes itself with `height: 48px`
 * plus 8px padding and a 1px border and rendered 65px, making the leader card
 * 456px instead of 389px. This selector is (0,3,0), so it wins, and the slide's
 * subtree inherits `border-box` again.
 *
 * Fixing it here rather than per block: every carousel in this plugin is built on
 * `.rkl-swiper`, so any of them could hit this the moment it sizes a row.
 */
.rkl-swiper > .swiper-wrapper > .swiper-slide {
	box-sizing: border-box;
	flex-shrink: 0;
	height: auto;
	position: relative;
	transition-property: transform;
}

/*
 * Before Swiper initialises — and if the script never arrives at all — the row
 * stays a plain horizontal scroller, so the cards are always reachable. Swiper
 * adds `swiper-initialized` once it owns the row, and then its own translate
 * takes over.
 */
.rkl-swiper:not(.swiper-initialized) {
	overflow-x: auto;
	scrollbar-width: none;
}

.rkl-swiper:not(.swiper-initialized)::-webkit-scrollbar {
	display: none;
}

.rkl-swiper:not(.swiper-initialized) > .swiper-wrapper {
	width: auto;
}

/*
 * Swiper adds `swiper-backface-hidden`, whose `backface-visibility: hidden` on
 * each slide creates a compositing context that breaks `backdrop-filter` on
 * descendants — the news card's „Pristato“ chip is exactly that.
 */
.swiper-backface-hidden.rkl-swiper > .swiper-wrapper > .swiper-slide {
	backface-visibility: visible;
	transform: none;
}

/* Page-builder rows ------------------------------------------------------- */

/*
 * Stopgap: let a page-builder row holding RKL blocks stack on tablets.
 *
 * The homepage's two-column row is authored in GL - Page Builder as
 * `display: flex; flex-wrap: nowrap` with a hard `width: 1000px` main column and
 * a `width: 298px` right rail. Below ~1300px those two cannot fit, and because
 * nothing may wrap or shrink the row keeps its full width: at 768px the document
 * scrolled 584px and the standings card sat entirely off-screen (1054–1352px).
 *
 * The proper fix is in the builder — give that row its own tablet/mobile styles.
 * Until then this makes any such row wrap and drops the fixed width from the
 * child that directly holds an RKL block, so the layout stacks instead of
 * overflowing. Scoped to <=768px and to rows that actually contain our blocks;
 * `!important` because the builder's compiled classes otherwise win.
 */
@media (max-width: 768px) {
	/*
	 * Stack instead of wrap.
	 *
	 * This used to be `flex-wrap: wrap`, which was wrong: the selector matches
	 * every builder ancestor, and one of them is a *column* flex container.
	 * Wrapping a column container makes it lay items out in columns and stretch
	 * them along the main axis — the news block came out 87px taller than its own
	 * content at ~580px. `flex-direction: column` is a no-op on a container that is
	 * already a column, and turns the two-column row into a stack, which is what
	 * was wanted in the first place.
	 */
	[class*="gsbp-"]:has([class^="rkl-"]) {
		flex-direction: column !important;
	}

	/*
	 * Any builder child that directly holds one of our blocks loses its fixed
	 * width. Every RKL block's wrapper class starts with `rkl-`, so this covers
	 * the set without naming each one.
	 */
	[class*="gsbp-"]:has(> [class^="rkl-"]) {
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/*
	 * The builder also emits an unclassed wrapper whose width is set to 1000px by
	 * a generated rule, so there is no class to hook. It is matched structurally
	 * instead: a plain div inside a builder element that contains an RKL block.
	 */
	[class*="gsbp-"] > div:has([class^="rkl-"]) {
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}
}

/* Link button ------------------------------------------------------------- */

/*
 * „Žiūrėti visus" — the green text link with a caret that sits next to a
 * section heading. Three blocks had already declared it scoped to themselves
 * (`.rkl-news`, `.rkl-leaders`, `.rkl-videos`); this is the unscoped base so the
 * Naujienos blocks do not add a fourth copy. Those scoped rules are (0,2,0) and
 * still win where they exist, so nothing about them changes.
 */
.rkl-link-button {
	align-items: center;
	color: var(--rkl-green-03);
	display: inline-flex;
	font-family: var(--rkl-font);
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.3;
	text-decoration: none;
}

.rkl-link-button img {
	height: 14px;
	object-fit: contain;
	width: 14px;
}

.rkl-link-button:hover,
.rkl-link-button:focus-visible {
	text-decoration: none !important;
	color: #00632F;
}

/* Green button ------------------------------------------------------------ */

/*
 * `Pritaikyti filtrus`, `Rodyti daugiau`, `Tapti partneriu` — one shape in the
 * design (h48, radius 8, Poppins Medium 14/1.3 white on #029561) that three
 * blocks had drawn separately. New blocks use this; the existing three keep
 * their own rules, because restyling the homepage is not this change's job.
 *
 * **It is `.rkl-cta`, not `.rkl-button`, and that name is not a preference.**
 * `rkl-addons/assets/css/style.css` — the unscoped legacy stylesheet that already
 * reaches every table in every new block (landmine 23) — declares `.rkl-button`
 * as a red, 700-weight, radius-5 inline-block. It is site-wide, it is the same
 * (0,1,0) specificity as this rule, and it is enqueued *after* this file, so
 * source order hands it the win. Measured: the archive's „Rodyti daugiau"
 * rendered `rgb(200, 29, 37)` at weight 700 with every declaration below in
 * place. Renaming costs nothing; `!important` here would have to be repeated on
 * every property and would still lose to the next legacy rule somebody adds.
 */
.rkl-cta {
	align-items: center;
	background: var(--rkl-green-03);
	border: 0;
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	color: var(--rkl-white);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--rkl-font);
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	height: 48px;
	justify-content: center;
	line-height: 1.3;
	margin: 0;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.rkl-cta:hover:not([disabled]) {
	background: #02784e;
}

.rkl-cta:focus-visible {
	outline: 2px solid var(--rkl-black);
	outline-offset: 2px;
}

.rkl-cta[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* Search field ----------------------------------------------------------- */

/*
 * 280x48 in the design, `#F9F9F9` on `#DCDCDC`, a 20px magnifier and the
 * placeholder in grey. The players table declared this scoped to itself; the
 * Naujienos archive needs the identical control, so it lives here rather than
 * becoming a second copy that drifts.
 */
.rkl-search {
	align-items: center;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	gap: 8px;
	height: 48px;
	padding: 8px 16px;
	position: relative;
	width: 280px;
}

.rkl-search:hover {
	background: var(--rkl-grey-03);
}

.rkl-search:focus-within {
	border: 2px solid var(--rkl-green-03);
}

.rkl-search__icon {
	flex: 0 0 20px;
	height: 20px;
	object-fit: contain;
	pointer-events: none;
	width: 20px;
}

.rkl-search__input {
	appearance: none;
	background: none;
	border: 0;
	color: var(--rkl-black);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	/* Without this a flex `<input>` refuses to shrink below its size attribute. */
	min-width: 0;
	padding: 0;
}

.rkl-search__input:focus {
	outline: none;
}

.rkl-search__input::placeholder {
	color: var(--rkl-grey-05);
	opacity: 1;
}

/* The UA's own clear button would sit next to ours. */
.rkl-search__input::-webkit-search-cancel-button {
	display: none;
}

:where(.rkl-card) .rkl-search__clear {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex: 0 0 20px;
	height: 20px;
	justify-content: center;
	padding: 0;
	width: 20px;
}

.rkl-search__clear img {
	height: 10px;
	object-fit: contain;
	width: 10px;
}

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

/* 48px icon button ------------------------------------------------------- */

/*
 * The filter button is 48x48 where the carousel arrows are 40x40. Same surface,
 * same border, same radius — only the box differs, so it is a modifier rather
 * than a second control.
 */
.rkl-icon-button--48 {
	height: 48px;
	width: 48px;
}

.rkl-icon-button--48 img {
	height: 20px;
	width: 20px;
}

/* News card --------------------------------------------------------------- */

/*
 * The card the whole site draws for a post: `rkl/news` on the homepage,
 * `rkl/news-highlights` and `rkl/news-archive` on /naujienos/, and the article
 * page's „Kitos naujienos" row. It used to live in `blocks/news/style.css`, and
 * a block stylesheet is only enqueued on pages carrying that block — which is
 * landmine 21, and it has already shipped unstyled controls on this site once.
 *
 * Markup comes from `rkl_blocks_news_card()` in `includes/news-page.php`, so
 * there is one renderer and one stylesheet for all five callers.
 *
 * Three shapes:
 *
 *   --grid      322 wide, image 322x213 — the archive grid and every card row
 *   --featured  the same card at 840 wide, in the highlights block
 *   --row       image beside the text, and the chip *under* the image
 *
 * Type is the library's: title Poppins Medium 18/1.4, category Regular 12/1.5,
 * both in `#1E201E`. The category is **not** grey — the design puts the whole
 * text group in the body colour.
 */

/*
 * Not a card. The design has no surface, no border and no shadow around a news
 * item: an image with an 8px radius, and the text sitting directly on the page
 * under it. `position: relative` is here because the „Pristato" chip is
 * absolutely positioned against it.
 */
.rkl-news-card {
	background: none;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	overflow: visible;
	position: relative;
}

.rkl-news-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	/* The design's 16px between the photo and the title. */
	gap: 16px;
	height: auto;
	text-decoration: none;
}

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

.rkl-news-card__media-col {
	display: block;
	position: relative;
	width: 100%;
}

/*
 * The photo is the only rounded shape in the item. 764/506 is Figma's own
 * `image 334` ratio and holds at every width: 322 -> 213, 840 -> 557,
 * 211 -> 140, 168 -> 111. One number, four sizes.
 */
.rkl-news-card__media {
	aspect-ratio: 764 / 506;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.rkl-news-card__image,
.rkl-news-card__placeholder {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.rkl-news-card__placeholder {
	background: linear-gradient(180deg, #1e201e 40%, #075f3d 100%);
}

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

/*
 * Poppins Medium 18/140%, up to three lines.
 *
 * No `min-height`: Figma's cards are top-aligned and genuinely different
 * heights — 305 next to 330 in the same row — so reserving two lines pushes the
 * category a line lower than the design on every short headline.
 */
.rkl-news-card__heading {
	color: var(--rkl-black);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	font-size: 18px;
	font-weight: 500;
	-webkit-line-clamp: 3;
	line-height: 1.4;
	overflow: hidden;
}

.rkl-news-card__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Figma `Komplektacija`: Poppins Regular 12/150%, in the body colour. */
.rkl-news-card__category {
	color: var(--rkl-black);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Hover — Figma 2527-20261.
 *
 * The node's only difference from the resting card is an underline on the
 * title. It used to turn `--rkl-green-03` here, which the design does not do
 * anywhere; one card implementation, one hover.
 */
.rkl-news-card__link:hover .rkl-news-card__heading,
.rkl-news-card__link:focus-visible .rkl-news-card__heading {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Optional category chip over the photo (rkl/news' „Kategorijos vieta"). */
.rkl-news-card__tag {
	background: rgba(30, 32, 30, 0.85);
	border-radius: var(--rkl-radius);
	color: var(--rkl-white);
	font-size: 12px;
	font-weight: 600;
	left: 12px;
	line-height: 1.3;
	padding: 4px 8px;
	position: absolute;
	top: 12px;
}

/*
 * „Pristato" chip: 126x32, `padding: 6px 8px`, gap 8, radius 8, opaque white,
 * 4px in from the image's corner — Figma's own offsets. The fixed width means
 * the logo is contained to the remaining 20px of height rather than setting the
 * box.
 */
.rkl-news-card__sponsor {
	align-items: center;
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: inline-flex;
	gap: 8px;
	height: 32px;
	max-width: calc(100% - 8px);
	padding: 6px 8px;
	position: absolute;
	width: 126px;
}

.rkl-news-card__sponsor--top-left {
	left: 4px;
	top: 4px;
}

.rkl-news-card__sponsor--top-right {
	right: 4px;
	top: 4px;
}

.rkl-news-card__sponsor--bottom-left {
	bottom: 4px;
	left: 4px;
}

.rkl-news-card__sponsor--bottom-right {
	bottom: 4px;
	right: 4px;
}

/* Keep the category chip and the sponsor mark from colliding. */
.rkl-news-card__tag ~ .rkl-news-card__sponsor--top-left {
	top: 52px;
}

.rkl-news-card__sponsor-label {
	color: var(--rkl-grey-05);
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.rkl-news-card__sponsor-logo {
	display: block;
	/* 32px chip minus 6px of padding top and bottom. */
	height: 20px;
	max-width: 100%;
	object-fit: contain;
	width: auto;

	/*
	 * The floor is for a mark stored as a bare URL rather than as an attachment,
	 * whose dimensions cannot be read server side. `width: auto` against a fixed
	 * height resolves to **zero** for an image that has not loaded, and these
	 * marks are lazy SVGs — measured, the chip rendered its label and then
	 * nothing. With an attachment `rkl_blocks_sponsor()` emits a real `width`
	 * attribute and this never binds; without one, 24px keeps the chip honest
	 * and the shimmer visible.
	 */
	min-width: 24px;
}

/*
 * Bottom-anchored chips have to clear the text, which sits under the photo, so
 * they are pinned to the media column rather than to the card.
 */
.rkl-news-card__sponsor--bottom-left,
.rkl-news-card__sponsor--bottom-right {
	bottom: auto;
	top: calc(100% - 36px);
}

.rkl-news-card--featured .rkl-news-card__heading {
	-webkit-line-clamp: 2;
}

/*
 * The row shape — Figma 2639-47501 (432 desktop) and 2629-46040 (352 mobile).
 *
 * `--rkl-card-thumb` is the image column's width, and the chip's offset is
 * derived from it through the shared 764/506 ratio, so the two cannot drift
 * apart: 211 -> 139.7, 168 -> 111.3, which is exactly what the frames measure.
 *
 * The chip moves **under** the image here rather than on top of it: a 211px
 * thumbnail carrying a 126px chip reads as a label over a thumbnail instead of
 * as part of a photograph, and the design does not do it. `padding-bottom` is
 * what makes room for it — the card is 172 where its image is 140.
 */
.rkl-news-card--row {
	--rkl-card-thumb: 211px;
	padding-bottom: 0;
}

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

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

.rkl-news-card--row .rkl-news-card__body {
	flex: 1 1 auto;
}

.rkl-news-card--row:has(.rkl-news-card__sponsor) {
	padding-bottom: 32px;
}

.rkl-news-card--row .rkl-news-card__sponsor {
	bottom: auto;
	justify-content: center;
	left: 0;
	right: auto;
	/* The image's own height, from its width and the shared ratio. */
	top: calc(var(--rkl-card-thumb) / (764 / 506));
	width: var(--rkl-card-thumb);
}

/* Entrance ---------------------------------------------------------------- */

/*
 * Cards fade and lift into place when a filter, a search or „Rodyti daugiau"
 * replaces or extends the grid. The delay is capped at fifteen steps so a
 * filter that returns 200 rows does not animate for six seconds.
 *
 * `backwards`, never `both`. A filling animation leaves the element a permanent
 * stacking and containing context — landmines 24 and 35, which put a filter
 * sheet inside its panel instead of over the viewport. With `backwards` the
 * fill applies before the animation starts and nothing survives it.
 */
@keyframes rkl-card-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rkl-news-card.is-entering {
		animation: rkl-card-in 0.32s ease-out backwards;
		animation-delay: calc(min(var(--rkl-card-index, 0), 15) * 28ms);
	}

	.rkl-news-card__image {
		transition: transform 0.3s ease-out;
	}

	.rkl-news-card__link:hover .rkl-news-card__image {
		transform: scale(1.04);
	}
}

/* Dialog ------------------------------------------------------------------ */

/*
 * The filter dialog — Figma 2587-43469 (desktop card) and 2591-62908 (mobile
 * sheet). One element for both: a real `<dialog>` opened with `showModal()`.
 *
 * That choice is the fix for a whole family of bugs on this site. A
 * `position: fixed` overlay is contained by any ancestor with a filling
 * transform (landmine 24) and its z-index is measured against any ancestor that
 * has become a stacking context (landmine 35) — which is how the players
 * table's sheet rendered 341x382 pinned inside its card, and why raising its
 * z-index to 100000 changed nothing. A modal `<dialog>` is in the browser's top
 * layer: no ancestor can contain it and no z-index can out-rank it.
 */
.rkl-dialog {
	background: var(--rkl-white);
	border: 0;
	border-radius: var(--rkl-radius);
	box-shadow: 4px 0 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: none;
	flex-direction: column;
	font-family: var(--rkl-font);
	height: 560px;
	margin: auto;
	max-height: calc(100vh - 32px);
	max-width: calc(100vw - 32px);
	padding: 0;
	width: 560px;
}

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

/*
 * `display: flex` only when open. The UA sheet gives a closed dialog
 * `display: none`, and a `display: flex` of our own out-specifies it — which
 * renders the panel on the page, unopened, for every visitor.
 */
.rkl-dialog[open] {
	display: flex;
}

.rkl-dialog::backdrop {
	background: rgba(30, 32, 30, 0.5);
}

.rkl-dialog__head {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius) var(--rkl-radius) 0 0;
	display: flex;
	flex: 0 0 auto;
	height: 56px;
	justify-content: center;
	padding: 8px 16px;
	position: relative;
}

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

:where(.rkl-dialog) .rkl-dialog__close {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--rkl-radius);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 16px;
	top: 8px;
	width: 40px;
}

.rkl-dialog__close:hover {
	background: var(--rkl-grey-03);
}

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

.rkl-dialog__close img {
	height: 20px;
	object-fit: contain;
	width: 20px;
}

.rkl-dialog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	padding: 24px;
}

.rkl-dialog__foot {
	flex: 0 0 auto;
	padding: 0 24px 24px;
}

.rkl-dialog__foot .rkl-cta {
	width: 100%;
}

/*
 * A `<select>` sized `auto` is as wide as its longest option, and the team list
 * holds club names — which is what made the roster's five filters 1197px wide
 * instead of 879 (landmine 37). A definite width on the field, and the select
 * shrinks inside it.
 */
.rkl-dialog__body .rkl-field {
	width: 100%;
}

/*
 * The field stays on one line inside a dialog, at every width.
 *
 * `.rkl-field` stacks its label above its value below 480px — right for the
 * standings card's narrow column, wrong here: the design's mobile sheet
 * (2591-62908) draws „Pasirinkite" and its value side by side in a 48px row, and
 * the stacked version measured 55px with the label on its own line. This is
 * landmine 51's prescribed shape — override per context, never edit the shared
 * rule other blocks depend on — and it is two classes, so it beats the
 * single-class rule inside that media query regardless of source order.
 */
.rkl-dialog .rkl-field {
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	height: 48px;
	min-height: 48px;
	padding: 8px 16px;
}

.rkl-dialog .rkl-field__label {
	flex: 0 1 auto;
	font-size: 14px;
	min-width: 0;
}

.rkl-dialog .rkl-field__select {
	flex: 1 1 auto;
	font-size: 14px;
}

.rkl-dialog__body .rkl-field__select {
	flex: 1 1 auto;
	width: 100%;
}

/* BREAKPOINT: 782px — the dialog becomes the design's bottom sheet. */
@media (max-width: 782px) {
	.rkl-dialog {
		border-radius: 0;
		height: auto;
		inset: var(--rkl-sheet-top, 118px) 0 0;
		margin: 0;
		max-height: none;
		max-width: none;
		position: fixed;
		width: 100%;
	}

	/* `Pritaikyti filtrus` sits 40px from the bottom edge on a phone. */
	.rkl-dialog__foot {
		padding: 0 24px 40px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes rkl-dialog-in {
		from {
			opacity: 0;
			transform: scale(0.96);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes rkl-sheet-in {
		from {
			transform: translateY(16px);
		}

		to {
			transform: none;
		}
	}

	@keyframes rkl-backdrop-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.rkl-dialog[open] {
		animation: rkl-dialog-in 0.18s ease-out;
	}

	.rkl-dialog[open]::backdrop {
		animation: rkl-backdrop-in 0.18s ease-out;
	}

	@media (max-width: 782px) {
		.rkl-dialog[open] {
			animation: rkl-sheet-in 0.22s ease-out;
		}
	}
}

/* Outline buttons --------------------------------------------------------- */

/*
 * The design draws two outlined siblings of `.rkl-cta`: „Sužinoti daugiau" on a
 * light field (1px `#DCDCDC`, dark label) and „Parsisųsti prezentaciją" on the
 * hero's dark field (1px white, white label). Same box as `.rkl-cta` — h48,
 * radius 8, Poppins Medium 14/1.3 — so they are modifiers rather than a second
 * button.
 */
.rkl-cta--outline,
.rkl-cta--outline-light {
	background: transparent;
	border: 1px solid var(--rkl-grey-02);
	color: var(--rkl-black);
}

.rkl-cta--outline:hover:not([disabled]) {
	background: var(--rkl-grey-04);
	border-color: var(--rkl-black);
}

.rkl-cta--outline-light {
	border-color: var(--rkl-white);
	color: var(--rkl-white);
}

.rkl-cta--outline-light:hover:not([disabled]) {
	background: rgba(255, 255, 255, 0.12);
}

.rkl-cta--outline-light:focus-visible {
	outline-color: var(--rkl-white);
}

/*
 * Inline icon inside a button. `currentColor` glyphs, so one asset serves the
 * light and the dark button; the box is fixed in both axes because an `auto`
 * dimension on an SVG resolves to its intrinsic size.
 */
.rkl-cta svg,
.rkl-icon-inline {
	display: block;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* Form controls ----------------------------------------------------------- */

/*
 * The contact form's fields: 48 tall, `#F9F9F9` on `#DCDCDC`, radius 8, Body 2,
 * placeholder in `--rkl-grey-05`. `.rkl-field` above is the *select* chrome and
 * carries a label inside the box, so it is not the same control.
 *
 * `min-width: 0` and a definite `width` are not decoration: an input in a flex
 * row otherwise refuses to shrink below its intrinsic size, which is how five
 * filters once came out 1197px wide (landmine 37).
 */
.rkl-input,
.rkl-textarea {
	appearance: none;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	color: var(--rkl-black);
	display: block;
	font-family: var(--rkl-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	min-width: 0;
	padding: 12px 16px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	width: 100%;
}

.rkl-input {
	height: 48px;
}

.rkl-textarea {
	min-height: 198px;
	resize: vertical;
}

.rkl-input::placeholder,
.rkl-textarea::placeholder {
	color: var(--rkl-grey-05);
	opacity: 1;
}

.rkl-input:hover,
.rkl-textarea:hover {
	background: var(--rkl-grey-03);
}

/*
 * Focus. The frame (2587:60553) draws a **2px** green stroke and leaves the
 * surface `#F9F9F9` — the white fill that used to be here is not in any frame,
 * and it made a focused field look like a different control from the filled one
 * beside it.
 *
 * The second pixel is an inset shadow rather than `border-width: 2px`, because a
 * border that grows moves the box's content in by a pixel: with 16px of padding
 * the text, the caret and the floating label all jump left and up the moment the
 * field takes focus, and back out when it loses it. A shadow is painted inside
 * the border box and shifts nothing.
 */
.rkl-input:focus,
.rkl-textarea:focus {
	border-color: var(--rkl-green-03);
	box-shadow: inset 0 0 0 1px var(--rkl-green-03);
	outline: 2px solid transparent;
	outline-offset: 0;
}

/*
 * No second ring.
 *
 * The 2px green stroke above *is* the focus indicator, it appears for a pointer
 * and a keyboard alike, and it is what the frame draws. A `:focus-visible`
 * outline on top of it put a green halo one pixel outside a green border —
 * measured as two concentric rings on every field the visitor tabbed into, which
 * reads as an error state rather than as focus.
 *
 * Contrast is still met without it: `--rkl-green-03` is 4.0:1 against the
 * field's own `#F9F9F9` and 4.3:1 against the white card behind it, both over
 * the 3:1 a non-text indicator needs.
 */
.rkl-input:focus-visible,
.rkl-textarea:focus-visible {
	outline: none;
}

/*
 * A field the server rejected. Driven by `aria-invalid`, so the styling and the
 * announcement can never disagree.
 */
.rkl-input[aria-invalid="true"],
.rkl-textarea[aria-invalid="true"] {
	border-color: var(--rkl-red-02);
}

/*
 * Autofill.
 *
 * Chrome paints a filled field its own pale blue and will not let a `background`
 * override it — the one thing that does is an inset shadow large enough to cover
 * the box. 100px is simply more than any control here is tall.
 *
 * The focused pair restates the green ring, because the two declarations are the
 * same property: a focused autofilled field would otherwise lose its stroke. The
 * ring is listed first, so it paints over the fill.
 */
.rkl-input:-webkit-autofill,
.rkl-textarea:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 100px var(--rkl-grey-04);
	-webkit-text-fill-color: var(--rkl-black);
}

.rkl-input:-webkit-autofill:focus,
.rkl-textarea:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 1px var(--rkl-green-03), inset 0 0 0 100px var(--rkl-grey-04);
}

/* 20px box, `#F9F9F9` on `#DCDCDC`, radius 4 — smaller than the token. */
.rkl-checkbox {
	appearance: none;
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	flex: 0 0 auto;
	height: 20px;
	margin: 0;
	position: relative;
	width: 20px;
}

.rkl-checkbox:checked {
	background: var(--rkl-green-03);
	border-color: var(--rkl-green-03);
}

/*
 * The tick is drawn rather than exported: the design has no checked state, and
 * a border-only glyph cannot be got wrong the way a guessed path could.
 */
.rkl-checkbox:checked::after {
	border: solid var(--rkl-white);
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	left: 6px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	width: 5px;
}

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

/* Section card ------------------------------------------------------------ */

/*
 * The white panel the three Partneriams card rows share: „Kaip mūsų renginiai
 * atrodo iš arti?", „Mūsų žvaigždės", „Nauda Nostra.lt-RKL rėmėjams". One shape
 * in the design — white, radius 8, 24 padding, 24 gap — so it lives here rather
 * than being declared three times.
 */
.rkl-section-card {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
}

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

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

.rkl-section-card__arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

/*
 * The mobile frames show no arrows on any of the three rows — the row is a
 * swipe track there. `display: none` rather than `visibility`, so the heading
 * keeps the full width.
 */
@media (max-width: 1024px) { /* BREAKPOINT */
	.rkl-section-card {
		gap: 16px;
		padding: 16px 0;
	}

	.rkl-section-card__head {
		padding-inline: 16px;
	}

	/*
	 * „H3 mobile" is its own token — Boldonse **18 / 1.6**, not a smaller step of
	 * the desktop 24 / 1.9 — so it needs a query rather than a clamp: a clamp can
	 * interpolate the size and cannot interpolate the leading. Measured on the
	 * „Administracija" head at a 400 viewport: 20 / 1.9 gave 38 against the
	 * frame's 29 (2591:66208).
	 */
	.rkl-section-card__title {
		font-size: 18px;
		line-height: 1.6;
	}

	.rkl-section-card__arrows {
		display: none;
	}
}

/* Scroll reveal ----------------------------------------------------------- */

/*
 * Shared entrance for the Partneriams bands, driven by assets/reveal.js.
 *
 * `.rkl-reveal` is the *opt-in*: the script adds `is-in` when the element first
 * intersects. The hidden state is only declared inside the motion query and
 * only once the script has marked the document (`html.rkl-reveal-ready`), so a
 * visitor with JavaScript off — or with the script still loading — never sees a
 * blank band. That is the same failure `rkl/header` had at landmine 35: a
 * no-JavaScript fallback that is the CSS default is a flash of the fallback for
 * everybody.
 *
 * `transition`, never `animation: … both`: a filling animation leaves the
 * element a permanent stacking context and containing block, which is how a
 * fixed-position sheet ended up pinned inside a card (landmines 24 and 35).
 */
@media (prefers-reduced-motion: no-preference) {
	html.rkl-reveal-ready .rkl-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: calc(var(--rkl-reveal-i, 0) * 60ms);
	}

	html.rkl-reveal-ready .rkl-reveal.is-in {
		opacity: 1;
		transform: none;
	}
}

/* Page band --------------------------------------------------------------- */

/*
 * The Partneriams bands all sit on the same content column, and getting there
 * through the theme is not possible: twentytwentyfive's `wideSize` is 1340 and
 * its `contentSize` is 645, while this design's column is 1344 with 48px gutters
 * and 368 with 16px gutters. So every band is `align: full` and takes its width
 * from here.
 *
 * **How, and why not `width`.** An `.alignfull` child of a `has-global-padding`
 * container is pulled outward by `margin-inline: calc(var(--wp--style--root--padding-*) * -1)`
 * and left at `width: auto`, so it ends up exactly one viewport wide. Setting a
 * width or a percentage on it breaks that in a way that looks almost right:
 * percentages resolve against the *padded* containing block while the negative
 * margins still move the box to x = 0. Measured on this page at a 1440 viewport:
 * `width: 100%` gave a band 1344 wide starting at 0 — 96px short on the right —
 * and `min(1344px, 100% - 2 * 48px)` gave 1248, also flush left. Both read as
 * "nearly correct" in a screenshot and are wrong in both axes of the gutter.
 *
 * The column is therefore made by *cancelling* the pull instead of fighting it:
 * `margin-inline: auto` reverts the negative margins, so the band fills the
 * padded containing block, and `max-width` caps it once that block grows past
 * the design's column. The theme's root padding is pinned to `--rkl-gutter` on
 * this page (see "Page gutters" above), which makes the padded block 1344 at a
 * 1440 viewport and 368 at 400 — the design's two numbers, with no arithmetic of
 * our own. Above 1440 the cap takes over and the band centres.
 */
.rkl-band {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--rkl-content);
	width: auto;
}

/*
 * When the band *is* the `.alignfull` element — a card row, the contact panel —
 * the theme's outward pull is on that same box, and `margin-inline: auto` above
 * loses to it. Measured at a 1440 viewport: the card came out `margin-inline:
 * -48px` with `width: 1344px`, i.e. the right shape sitting at x = 0 with 96px
 * of dead space on the right. Two properties, one seam, and it reads as correct
 * in a screenshot — which is why it is worth the `!important`.
 *
 * `!important` rather than a specificity climb because the rule being overridden
 * is generated: WordPress emits the alignment margins per layout container, so
 * its selector is not something to pin a counter-selector to. This is the same
 * call `blocks/tab-panel/style.css` makes against the theme's inline `main`
 * spacing (landmine 39) — the theme owns the declaration, so the override has to
 * be unconditional rather than clever.
 *
 * An inner `.rkl-band` (the one inside `rkl/media-text`) needs none of this: it
 * is not the aligned element, so it already measures x = 48, width = 1344.
 */
.rkl-band.alignfull {
	margin-inline: auto !important;
}

/*
 * A band that keeps the column on desktop and runs edge to edge on a phone.
 *
 * The mobile frames draw the white panels 400 wide at x = 0 with 16px of their
 * own padding — not as a 368 column with 16px inside it. Measured at a 400
 * viewport before this existed: the contact section came out 368 at x = 16 and
 * its form card 336 at x = 32, against the frame's 400/0 and 368/16
 * (2591:66033, 2591:67649). The 32px went missing on both sides of every child.
 *
 * The `.rkl-section-card` phone rules further up say the same thing from the
 * other direction: `padding: 16px 0` with the head taking `padding-inline: 16px`
 * only makes sense on a panel that already reaches the viewport edge.
 *
 * The pull is stated as the theme's own root padding rather than as
 * `--rkl-gutter`. They are the same 16 on any page that matches the „Page
 * gutters" rule above — but a page carrying only this block matches neither, and
 * cancelling a `clamp(30px, 5vw, 50px)` pull with a flat 16 would leave the band
 * short of one edge and over the other.
 */
@media (max-width: 1024px) { /* BREAKPOINT */
	.rkl-band--edge.alignfull {
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
		max-width: none;
	}
}

/*
 * A band that paints its own full-bleed field — the hero, the stat strip, the
 * dark „6 kartus" section — keeps the theme's negative margins and so stays a
 * viewport wide. It declares **no width and no inline margin at all**; the
 * column lives on an inner `.rkl-band--inner` child.
 */
.rkl-band--bleed {
	box-sizing: border-box;
}

/*
 * The column *inside* a bleeding band, and it needs a different rule from
 * `.rkl-band` rather than the same one — this cost a round to learn.
 *
 * `.rkl-band` works by cancelling the theme's outward pull, so the gutter it
 * ends up with is the theme's root padding. That is right for a band that is the
 * aligned element, and useless for an inner box: its parent is the full-bleed
 * section, which has already escaped that padding, so there is nothing to
 * cancel and no gutter to inherit. On desktop the `max-width` cap hid the
 * problem — a 1440 parent capped to 1344 happens to look like a 48px gutter —
 * and on a phone it did not: measured at a 390 viewport, `rkl/media-text` came
 * out 390 wide with its image running edge to edge, against the frame's 358 with
 * a 16px gutter.
 *
 * So the inner column states the gutter itself. Exact at both frames: inside a
 * 1440 bleed it is min(1344, 1344) at x 48, and inside a 390 bleed it is
 * min(1344, 358) at x 16.
 */
.rkl-band--inner {
	box-sizing: border-box;
	margin-inline: auto;
	width: min(var(--rkl-content), 100% - 2 * var(--rkl-gutter));
}

/*
 * Vertical rhythm. 64px between bands in both frames, and 0 where the design
 * butts two dark fields together — the hero against the stat strip, and the
 * stat strip against the dark section below it.
 *
 * `.rkl-partners` is in the list because the existing partners band closes this
 * page and predates these classes; without it the last seam is the theme's
 * block gap.
 */
.rkl-band,
.rkl-band--bleed {
	margin-block: 0;
}

:is(.rkl-band, .rkl-band--bleed) + :is(.rkl-band, .rkl-band--bleed, .rkl-partners),
:is(.rkl-band, .rkl-band--bleed) + .rkl-band--bleed {
	margin-block-start: 64px;
}

/* The three dark bands at the top of the page are flush with each other. */
.rkl-partners-hero + .rkl-stat-band,
.rkl-stat-band + .rkl-media-text--dark {
	margin-block-start: 0;
}

/*
 * Apie mus opens the same way: the dark field starts where the banner's
 * photograph ends. In the frame the field rectangle (2613:83243) begins at 819,
 * which is the banner's own bottom edge — the seam rule above would put 64px of
 * page between them, and the page then reads as a banner with a gap under it
 * rather than a photograph the field grows out of.
 */
.rkl-hero-banner + .rkl-story-band {
	margin-block-start: 0;
}

/*
 * The Dokumentai band already ends in the design's 64px: the grey field runs 64
 * below the card it holds (frame 2543:27647 — card bottom 564, partner wall top
 * 628), because the gap is the field's own padding rather than air between two
 * bands. The generic seam rule above would add a second 64 and the page would
 * come out 128 apart, with half of it grey and half of it white — which reads as
 * a deliberate step rather than a mistake, and is the reason this exception is
 * written here beside the dark-band one instead of in the block's stylesheet:
 * the declaration it overrides lives in this file, and load order between a
 * globally enqueued stylesheet and a block stylesheet is not something to bet a
 * layout on.
 */
.rkl-documents + .rkl-partners {
	margin-block-start: 0;
}

/*
 * Legacy EmbedPress markup inside imported posts.
 *
 * 179 of the posts brought over from live rkl.lt carry an `<!-- wp:embedpress/
 * embedpress -->` block. EmbedPress is not installed here and the block is not
 * registered, so nothing renders this: WordPress echoes the saved HTML verbatim,
 * including a per-embed `<style>` block that the plugin baked into the content
 * years ago. There is no plugin setting to change and nothing that a plugin
 * update can take back — the markup is frozen in `post_content`.
 *
 * The overflow is not the 600px itself. `.ep-embed-content-wraper` is an
 * `inline-block` (inline style, no max-width), so it shrink-to-fits to its 600px
 * child, and the `max-width: 100%` EmbedPress already writes inline on
 * `.ose-embedpress-responsive` then resolves against 600 and never clamps.
 * Measured on a single post at a real 390px viewport: `scrollWidth` 616 against
 * a 390 `clientWidth`, six elements sharing a right edge of 616. Give the
 * wrapper a block box and the chain below it clamps on its own.
 *
 * The weight is not decoration. Each figure's baked `<style>` says
 * `width: 600px !important` at `[data-source-id="…"] .ose-embedpress-responsive`
 * (0,2,0) and `[data-source-id="…"] iframe` (0,1,1), and it sits in the body —
 * later in the document than this file, so source order is already lost. Three
 * classes out-weigh both; `display` additionally has to beat an inline style
 * attribute, which only `!important` can do. Same family as landmines 23 and 32.
 *
 * `max-width` rather than `width` on purpose: the desktop box keeps its natural
 * 600 inside the 640 column (verified unchanged at 1440), and only a column
 * narrower than the embed clamps it.
 */
.wp-block-embedpress-embedpress .ep-embed-content-wraper {
	display: block !important;
	max-width: 100% !important;
}

.wp-block-embedpress-embedpress .gutenberg-block-wraper .ose-embedpress-responsive {
	display: block !important;
	max-width: 100% !important;
}

.wp-block-embedpress-embedpress .gutenberg-block-wraper .ose-embedpress-responsive > iframe {
	display: block !important;
	max-width: 100% !important;
}

/*
 * A Facebook post reflows inside its own iframe, so clamping the width is the
 * whole fix there. A video does not: the baked height is a fixed 340px against a
 * 600px width, and at 358px that becomes a 16:9 frame letterboxed inside a 1.05:1
 * box. The ratio is the reliable thing to state; the height follows it.
 */
.wp-block-embedpress-embedpress .gutenberg-block-wraper .ose-youtube,
.wp-block-embedpress-embedpress .gutenberg-block-wraper .ose-youtube > iframe {
	aspect-ratio: 16 / 9;
	height: auto !important;
	max-height: none !important;
}