/* Partner and sponsor logos, Figma node 2466-71792. Tokens: assets/base.css. */

.rkl-partners {
	--rkl-partners-divider: var(--rkl-grey-01);
	--rkl-partners-cell-pad: 20px 16px;
	--rkl-partners-tiers: 5;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-family: var(--rkl-font);
	gap: 56px;
	background: #FFF;

	/*
	 * The white field runs to both viewport edges; the content does not move.
	 *
	 * A spread box-shadow, clipped to this box's own height.
	 *
	 * The content column has to stay exactly where the theme puts it — measured
	 * 1344px, centred — so this box cannot be widened to bleed without dragging the
	 * logos out with it. `0 0 0 100vmax` paints white in every direction from the
	 * border box, and `clip-path: inset(0 -100vmax)` then cuts it back to the
	 * section's own top and bottom edges while leaving the horizontal spill intact.
	 * Without the clip-path the spread would cover the grey above and the footer
	 * below.
	 *
	 * Three earlier attempts failed. Recorded so nobody repeats them:
	 *
	 *   1. A `::before` sized to the viewport. Died on an `overflow-x: clip` that
	 *      used to sit on this element — a descendant cannot escape an ancestor's
	 *      clip, and `overflow-clip-margin` did not lift it (the margin computed to
	 *      1920px and the band stayed cropped).
	 *   2. `box-shadow: -100vw 0 0 0` / `100vw 0 0 0`, i.e. offset with no spread.
	 *      An offset moves the *whole* copy: with the box at x=281 and 1344 wide, the
	 *      left slab landed at −1639…−295, entirely off-screen, so it never touched
	 *      the gutter it was meant to fill. An offset only abuts the box when it is
	 *      no larger than the box's own width, which cannot be written in px for a
	 *      fluid column.
	 *   3. Blaming (2) on the clip. It was not the clip — (2) fails on arithmetic
	 *      alone. The two screenshots that seemed to confirm the clip theory were
	 *      themselves invalid: headless Chrome captures only the viewport unless the
	 *      window is as tall as the document, so both shots showed the news section
	 *      at y≈1050, not partners at y≈3850.
	 *
	 * Verify this rule with a FULL-PAGE capture — `--window-size=1920,6000` — and
	 * look for a white run about 810px tall with both far edges white. At a
	 * 1200px-tall window the section is not in frame at all. Landmine 30 also
	 * applies: `--window-size` does not reliably set the layout *width* in headless,
	 * so trust it for "is this painted" and not for "at what width".
	 *
	 * The clip that (1) died on now lives on `.rkl-partners__band`, which is where
	 * the hairlines needing it actually are — see the note there.
	 */
	box-shadow: 0 0 0 100vmax var(--rkl-white);
	clip-path: inset(0 -100vmax);

	padding: 64px 0;
}


.rkl-partners.is-card {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	padding: 32px 24px;
}

.rkl-partners.has-no-dividers {
	--rkl-partners-divider: transparent;
}

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

.rkl-partners__title {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

/* Rows ------------------------------------------------------------------- */

/*
 * `overflow-x: clip` lives here, not on the section.
 *
 * `.rkl-partners__item` carries a hairline on both sides with `margin-left: -1px`
 * so two touching borders collapse into one. Those overhangs pushed the wall's
 * scrollable width a few pixels past its box, and on a page where this block is a
 * direct `alignfull` child of the content — /naujienos/ is the first — that leaked
 * to the document: 8px of horizontal scroll at a 1425px viewport on a page with
 * nothing wide on it.
 *
 * `clip`, not `hidden`: it creates no scroll container, so it cannot break a
 * `position: sticky` ancestor or add a scrollbar of its own.
 *
 * It sat on `.rkl-partners` first, which contained the leak but also clipped that
 * element's own full-bleed box-shadow — the white stopped at the content edges.
 * The band is where the overhang originates, so clipping here is both narrower and
 * enough.
 */
.rkl-partners__band {
	overflow-x: clip;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* When there are more tiers than fit on one line, the next line needs room for
   its own labels — without this the labels sit against the logos above them. */
.rkl-partners__band--tiers {
	row-gap: 32px;
}

.rkl-partners__band--grid {
	flex-direction: column;
	gap: 20px;
}

/* The tier label sits above its own logo, and is pushed to the bottom of the
   cell so that logos stay on one line however many lines the labels wrap to —
   "Mus veža" next to "Pagrindinis partneris" in the design. */
/*
 * The 105px floor is the only lever that decides the phone wrap, and it is
 * bracketed on both sides. Do not round it to 100.
 *
 * The frames give two counts and nothing between them: 5 across at 1440, and
 * 3 then 2 at 400, cell drawn 100 wide (dokumentai mobile 2591-65765; the same
 * wall on all four pages that carry this block). No breakpoint sets the count —
 * this floor does, against a 20% basis — so the number has to make the wrap
 * land where the frame draws it at every width a phone actually reports.
 *
 * It was 130px until 2026-08-24, and 130 reaches 3-up only from a 390px column
 * up, i.e. a 422px viewport. At the frame's own 400 the column is 368 and 130
 * wraps 2-2-1 — three rows where the design draws two. Measured, x=70 and 200,
 * then 70 and 200, then one cell centred at 135.
 *
 * The window is (100, 109.33] and both ends were measured, not reasoned:
 *
 *   > 100  because /naujienos/ is the one page where this block is a direct
 *          `alignfull` child, so its band is the full viewport — 400, not the
 *          368 the other three get. Four 100px cells fit 400 exactly, so a
 *          floor of 100 wraps that page 4-1 at the frame's own width while the
 *          other three wrap 3-2. A floor of exactly N×100 is a knife edge.
 *   <= 109 because a 360px viewport — the common Android report — leaves a 328
 *          column, and 3 cells have to fit it: 3 × 109.33 = 328.
 *
 * 105 sits mid-window: 13px of slack at the narrowest column measured (343 at
 * 375) and 32px before the next flip. Measured 3+2 at 375, 390 and 400 on all
 * four pages, no horizontal overflow, no label overflowing its cell.
 *
 * Consequence to know about: 5 tiers now hold one row down to a 525px column
 * (~557px viewport); the old floor stepped to 4-up at 649 and 3-up at 519.
 * Neither frame says anything about the widths in between.
 */
.rkl-partners__tier {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 calc(100% / var(--rkl-partners-tiers));
	flex-direction: column;
	justify-content: flex-end;
	min-width: 105px;
}

.rkl-partners__label {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 20px;
	text-align: center;
}

.rkl-partners__band--grid > .rkl-partners__label {
	margin-bottom: 0;
}

.rkl-partners__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 24px;
}

/* Hairline rules between logos, on both sides of every cell so a half-filled,
   centred last row keeps its own end caps. The negative margin collapses the
   two touching borders back into one line. */
.rkl-partners__item {
	align-items: center;
	border-left: 1px solid var(--rkl-partners-divider);
	border-right: 1px solid var(--rkl-partners-divider);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin-left: -1px;
	min-height: calc(var(--rkl-partners-logo-height) + 40px);
	padding: var(--rkl-partners-cell-pad);
}

.rkl-partners__tier .rkl-partners__item {
	flex: 1 1 auto;
}

.rkl-partners__row--grid .rkl-partners__item {
	flex: 0 1 calc(100% / var(--rkl-partners-columns));
	min-width: 84px;
}

.rkl-partners__link {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	text-decoration: none;
	width: 100%;
}

.rkl-partners__logo {
	display: block;
	height: auto;
	max-height: var(--rkl-partners-logo-height);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.rkl-partners__row--grid .rkl-partners__logo {
	width: 114px;
	object-fit: cover;
}

.rkl-partners__row--grid img[src*="vilniaus-nealkoholinis"] {
  object-fit: contain;
}

/* Optional: flatten logos of wildly different colours into one row. Off by
   default — the design shows them in full colour. */
.rkl-partners.is-mono .rkl-partners__logo {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.rkl-partners.is-mono .rkl-partners__item:hover .rkl-partners__logo,
.rkl-partners.is-mono .rkl-partners__link:focus-visible .rkl-partners__logo {
	filter: none;
	opacity: 1;
}

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

/* Call to action ---------------------------------------------------------- */

.rkl-partners__cta {
	align-self: center;
	background: var(--rkl-green-03);
	border-radius: var(--rkl-radius);
	color: var(--rkl-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	padding: 15px 32px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.rkl-partners__cta:hover,
.rkl-partners__cta:focus-visible {
	background: #017a50;
	color: var(--rkl-white);
}

@media (prefers-reduced-motion: reduce) {
	.rkl-partners.is-mono .rkl-partners__logo,
	.rkl-partners__cta {
		transition: none;
	}
}

/* BREAKPOINT: 1024px, matching every other homepage block. */
@media (max-width: 1024px) {
	.rkl-partners {
		--rkl-partners-cell-pad: 14px 10px;

		gap: 40px;
	}

	.rkl-partners__label {
		font-size: 15px;
		margin-bottom: 14px;
	}

	.rkl-partners__row {
		row-gap: 16px;
	}

	.rkl-partners__band--tiers {
		row-gap: 24px;
	}

	.rkl-partners__item {
		min-height: calc(var(--rkl-partners-logo-height) + 24px);
	}
}

/* Flush against the footer ------------------------------------------------- */

/*
 * Partners is the last section on the page and the white field has to meet the
 * footer with no seam. Measured, the 89px between them came from two places, both
 * outside this block:
 *
 *   70.0px  padding-bottom on the theme's `.wp-block-group.alignfull` content group
 *   19.2px  margin-block-start on `footer.wp-block-template-part`, from the
 *           theme's 1.2rem blockGap applied by `:where(.wp-site-blocks) > *`
 *
 * Both are scoped to pages that actually carry this block, and this stylesheet is
 * only enqueued on those pages anyway — so a page whose last section is something
 * else keeps the theme's rhythm. The selectors are deliberately NOT wrapped in
 * `:where()`: they have to out-rank the theme's own rules, and the blockGap rule
 * is already (0,1,0).
 *
 * The `!important` is not laziness, and it is the only one in this change set. The
 * theme's page template carries that 70px INLINE on the element:
 *
 *   style="padding-top:var(--wp--preset--spacing--60);
 *          padding-bottom:var(--wp--preset--spacing--60)"
 *
 * A selector cannot out-rank an inline declaration at any specificity — verified,
 * this rule matches the element and still lost. The alternatives are editing the
 * theme's template (lost on update) or this. Only `padding-bottom` is overridden;
 * the top padding is above the content and none of our business.
 */
body:has(.rkl-partners) .wp-block-group:has(> .entry-content) {
	padding-bottom: 0 !important;
}

body:has(.rkl-partners) .wp-site-blocks > footer {
	margin-block-start: 0;
}