/**
 * Partnerships hero band — Figma desktop 2543:45734 (band at root y 99..819 of a
 * 1440x7659 frame) and mobile 2591:67426 (root y 92..611 of a 400x8033 frame).
 * Tokens live in assets/base.css.
 *
 * The three literal colours below are the only hex codes in this file. They are
 * the glow's own values from the frame and there is no palette token for any of
 * them — #010101 is the Partneriams page's black, which is *not* --rkl-black
 * (#1E201E).
 */

/*
 * The glow, and the reason it is the band's `background` rather than an overlay
 * above the video: the third layer of this shorthand is an opaque #010101, so a
 * copy of it painted over the media would hide the media completely. As a
 * background it is always painted, which is what the band falls back to when
 * there is neither a video nor a poster.
 *
 * `min-height`, never `height`: a heading that wraps to a fourth line has to be
 * able to grow the band instead of being clipped by it. The value arrives as a
 * custom property from render.php so the ≤1024 rule can override it with an
 * ordinary class selector.
 */
.rkl-partners-hero {
	/*
	 * The glow is measured against the frame, not eyeballed. Mean luminance of
	 * the design's hero in 120px columns (heading and stat card masked out) runs
	 * ~1.4 across the whole left half, 10.6 at x 600-720, 21.2 at 720-840, 35.7
	 * at 840-960, 45.6, 66.0, peaking 82.0 at 1200-1320 and easing to 64.9 at the
	 * right edge. So the field is *black* left of ~600 and the brightest point
	 * sits around x 1250, not in the corner.
	 *
	 * The first pass had `at 78% 6%` with a 62% falloff, which measured 7-22
	 * across that same left half — a green wash over ground the design keeps
	 * empty — and peaked in the wrong column. These stops track the profile
	 * above: a tight core near 86% and a wider veil that is already transparent
	 * before the middle of the band.
	 */
	background:
		radial-gradient(66% 96% at 81% 30%, rgba(16, 118, 78, 0.72) 0%, rgba(10, 78, 52, 0.42) 46%, rgba(5, 40, 27, 0.14) 70%, rgba(4, 32, 22, 0) 86%),
		radial-gradient(17% 62% at 88% 30%, rgba(24, 176, 118, 0.95) 0%, rgba(14, 108, 72, 0.5) 48%, rgba(1, 15, 10, 0) 80%),
		#010101;
	color: var(--rkl-white);
	display: flex;
	min-height: var(--rkl-partners-hero-min, 720px);
	/* The map starts at -52% on a phone and the dots carry a blur; both are meant
	   to be cut off by the band, not by the document. */
	overflow: hidden;
	position: relative;
}

/*
 * `.rkl-cta:focus-visible` in base.css draws a --rkl-black ring, which on this
 * band is a black outline on a near-black field. The outlined sibling already
 * flips to white there; the solid green one needs the same treatment here.
 */
.rkl-partners-hero .rkl-cta:focus-visible {
	outline-color: var(--rkl-white);
}

/* Media layer ------------------------------------------------------------- */

/*
 * One class for the video and for the poster-only case: both fill the band and
 * crop rather than letterbox. `pointer-events: none` because neither is
 * interactive — the video has no controls by design (see render.php).
 */
.rkl-partners-hero__media {
	height: 100%;
	inset: 0;
	object-fit: cover;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* Map layer --------------------------------------------------------------- */

/*
 * One asset, two breakpoints, driven entirely by these four properties.
 *
 * assets/partners-map.svg is NOT a crop of the world-map group taken from some
 * point down the page. It is Figma's frame-bounds export of Frame 4141, so
 * its `viewBox` of "0 0 1440 720" is already the BAND's own coordinate space and
 * there is no crop origin anywhere in the arithmetic below. Two measurements say
 * so rather than one argument: Lithuania's path bbox inside the asset is
 * x 715.80..1431.40, y 86.95..622.65, which is exactly the frame-relative box
 * Figma reports for that node (715.797, 86.954, 715.61 x 535.70); and an
 * edge-map cross-correlation of the rendered band against the Figma page render
 * peaks at (dy 0, dx 0) with a score of 4865, falling to 3329 two pixels off.
 *
 * So on desktop the map simply IS the band — top 0, nothing to derive — and the
 * only correction it needs is a cap. The box is `aspect-ratio: 2 / 1` inside a
 * 720px band with `overflow: hidden`, so an uncapped `100%` above a 1440
 * viewport makes the artwork taller than the band and clips Lithuania's southern
 * edge: 240px of it at 1920. `min(1440px, 100%)` freezes it at the drawn size.
 * It is pinned RIGHT rather than left because that is where the composition
 * lives — Lithuania occupies x 716..1431 of the 1440 box — so pinning left would
 * carry the artwork off the window and leave the bare left side on screen.
 *
 * The height is never written: `aspect-ratio: 2 / 1` is the artwork's ratio, so
 * one width does both axes and the dot percentages stay valid at any width.
 */
.rkl-partners-hero__map {
	--map-left: auto;
	--map-right: 0;
	--map-top: 0;
	--map-width: min(1440px, 100%);
	aspect-ratio: 2 / 1;
	left: var(--map-left);
	/*
	 * The vertical offset is a margin and not a `top`, which matters only on
	 * mobile — see the ≤1024 rule for why.
	 */
	margin-top: var(--map-top);
	pointer-events: none;
	position: absolute;
	right: var(--map-right);
	top: 0;
	width: var(--map-width);
	z-index: 1;

	/*
	 * Fade the artwork out to the left.
	 *
	 * The export is a frame-bounds crop, so its country outlines run all the way
	 * to x = 0 at full strength; the design does not show them there. Measured on
	 * the frame, the left half of the band is essentially black (mean luminance
	 * ~1.4) and the artwork only becomes visible from about x 600, reaching parity
	 * with ours by x 840. Without a mask the strokes sit on empty ground as a set
	 * of faint lines with a hard start — which is what „missing fade" describes.
	 *
	 * Percentages of the map box, so the ramp scales with the artwork and holds on
	 * the mobile box too. `mask` is unprefixed plus `-webkit-` because Safari
	 * still needs the prefixed property for a gradient mask.
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 26%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0.75) 50%, #000 60%);
	mask-image: linear-gradient(to right, transparent 26%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0.75) 50%, #000 60%);
}

.rkl-partners-hero__map-image {
	aspect-ratio: 2 / 1;
	display: block;
	height: auto;
	width: 100%;
}

/* Dots ------------------------------------------------------------------- */

/*
 * The Figma primitive, sized as a fraction of the MAP box rather than of the
 * band. That is the whole trick: 13.63 / 1440 = 0.9464% and 7.34 / 1440 =
 * 0.5096%, so on the mobile map box (131.98% of 400 = 527.9px) they come out at
 * 4.996 and 2.690 — the frame's own mobile numbers, with no second set of
 * constants to keep in sync.
 *
 * The span is only the 13.63px box. The blurred halo is `::before` and the solid
 * core is `::after`, because `filter` applies to an element *and its
 * pseudo-elements*: a core nested inside a blurred parent would be blurred too,
 * and the primitive would lose the crisp centre that makes it read as a marker.
 */
.rkl-partners-hero__dot {
	aspect-ratio: 1;
	left: var(--dot-x, 50%);
	position: absolute;
	top: var(--dot-y, 50%);
	width: 0.9464%;
}

.rkl-partners-hero__dot::before,
.rkl-partners-hero__dot::after {
	background: var(--rkl-white);
	content: "";
	position: absolute;
}

/* Halo: 4.19 / 13.63 = 30.74% radius, so the corner rounding scales too. */
.rkl-partners-hero__dot::before {
	border-radius: 30.74%;
	filter: blur(6.29px);
	inset: 0;
	opacity: 0.45;
}

/*
 * Core: 0.5096% of the map box is 0.5096 / 0.9464 = 53.846% of the halo it sits
 * in, and `inset` centres it without a transform — (100 - 53.846) / 2 = 23.077.
 * 3.67 / 7.34 is exactly half, so the radius is a circle at every scale.
 */
.rkl-partners-hero__dot::after {
	border-radius: 50%;
	inset: 23.077%;
}

/*
 * The pulse.
 *
 * An `animation` rather than a `transition` because it has to repeat, and that is
 * normally forbidden here (landmines 24/35: a filling animation leaves the
 * element a permanent stacking context and containing block, which is how a
 * fixed-position sheet once ended up pinned inside a card). It is safe on this
 * element and only on this element: a dot has no descendants at all, let alone a
 * fixed one. `animation-fill-mode: none` is stated anyway so the rule cannot be
 * copied into somewhere it would matter.
 *
 * The delay is negative so all 28 dots are already mid-cycle on load; 140ms x 28
 * spreads them evenly across the 4s cycle.
 */
@keyframes rkl-partners-hero-dot {
	from,
	to {
		opacity: 0.45;
	}

	50% {
		opacity: 0.75;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rkl-partners-hero__dot::before {
		animation: rkl-partners-hero-dot 4s ease-in-out infinite;
		animation-delay: calc(var(--i, 0) * -140ms);
		animation-fill-mode: none;
	}
}

/* Copy ------------------------------------------------------------------- */

/*
 * The front layer carries the page gutter and the bottom anchor, and it is also
 * the stat card's containing block — it stretches to the band's full box, so the
 * card's percentage insets are percentages of the band.
 *
 * Bottom-anchored with padding rather than a top offset, so a longer heading
 * grows upwards instead of pushing the buttons past the band's edge. The padding
 * is checked against the frame: 720 - 230 = 490 for the column's bottom edge,
 * the column is 3 x 60 (H1 40/1.5) + 32 + 48 = 260 tall, so its top lands at 230
 * — root y 99 + 230 = 329, which is where Figma puts Frame 4142.
 */
/*
 * The copy and the stat card sit on the page's content column, not on the
 * viewport.
 *
 * The band itself still bleeds — the field, the glow and the map are full width.
 * Only this layer is constrained, by `.rkl-band--inner` in base.css, which is the
 * same `min(1344px, 100% - 2 * gutter)` every other band on the page uses.
 *
 * The padding is 72 and not the frame's 120 because the column already supplies
 * the first 48: at a 1440 viewport the column runs 48..1392, so 48 + 72 puts the
 * heading on the frame's x = 120 exactly. Measured before the change, at a 1905
 * window: the heading sat at x 120 and the stat card's right edge at 1852 while
 * every other band on the page ran 281..1625 — the hero was the one thing not
 * lining up with the page.
 */
.rkl-partners-hero__front {
	align-items: flex-end;
	display: flex;
	/*
	 * `flex-grow: 0`, or the width from `.rkl-band--inner` never applies: the band
	 * is a flex row, and a `flex: 1 1 auto` item fills it whatever width it asks
	 * for. Measured at a 1425 window with grow left at 1: the layer came out
	 * 0..1425 and the column class looked like it had done nothing.
	 *
	 * The height still stretches, because that comes from the band's default
	 * `align-items: stretch` rather than from the grow factor.
	 */
	flex: 0 1 auto;
	/*
	 * `--rkl-hero-inset` is the distance from the content column's edge, and the
	 * stat card below uses the same variable so the two sides stay symmetrical.
	 *
	 * 48 puts the heading on x = 96 at a 1440 viewport, which is the page's
	 * dominant left edge: the 751px image in each of the three media-text bands
	 * starts there, and so do „Nostra.lt-RKL – milžiniškas…" and „Susisiekite su
	 * mumis". The frame draws this heading at 120 instead, which lines up with
	 * nothing below it — measured, the page has four different left edges at
	 * 1425: 120 (hero, stat strip), 96 (media-text, contact), 72 (the three card
	 * rows, which are inset cards) and 48 (the partner wall). Following the frame
	 * here was the misalignment, so this is a deliberate departure from it.
	 */
	padding: 0 var(--rkl-hero-inset, 48px) 230px;
	position: relative;
	z-index: 2;
}

/*
 * A definite `width` rather than an auto margin: an auto inline margin on a flex
 * item suppresses stretch (landmine 38), and the actions row needs the column's
 * full measure to know when to wrap.
 */
.rkl-partners-hero__copy {
	display: flex;
	flex-direction: column;
	/* The 32px between the heading and the button row. */
	gap: 32px;
	max-width: 539px;
	width: 100%;
}

.rkl-partners-hero__title {
	color: var(--rkl-white);
	font-family: "Boldonse", var(--rkl-font);
	/* H1: 40 desktop, 28 mobile, fluid between them rather than a hard step. */
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 539px;
	text-transform: uppercase;
}

.rkl-partners-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Stat card --------------------------------------------------------------- */

/*
 * White card, 260x135, at Figma (1140, 539) in root coordinates — (1140, 440)
 * inside the band. The insets are percentages of the band so the card tracks a
 * window narrower than 1440 instead of drifting off the artwork:
 *
 *   right   1440 - 1140 - 260 =  40  →  40 / 1440 =  2.7778%
 *   bottom   720 -  440 - 135 = 145  → 145 /  720 = 20.1389%
 *
 * `min-height`, not `height`: the caption is two lines at the design's measure,
 * and a longer one has to be allowed to make the card taller.
 */
.rkl-partners-hero__stat {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	bottom: 20.1389%;
	color: var(--rkl-black);
	display: flex;
	flex-direction: column;
	/* The 8px between the number and the caption. */
	gap: 8px;
	min-height: 135px;
	padding: 16px;
	position: absolute;
	/*
	 * The same inset as the copy, so the band's two edges are symmetrical: at a
	 * 1440 viewport the card's right edge lands on 1344, which is where the
	 * media-text bands' content box ends.
	 *
	 * It has to be the variable and not `right: 0`, because an absolutely
	 * positioned box is offset from its container's *padding* box — `0` would sit
	 * on the column edge and ignore the padding that moved the heading.
	 */
	right: var(--rkl-hero-inset, 48px);
	width: 260px;
}

.rkl-partners-hero__stat-number {
	font-family: "Boldonse", var(--rkl-font);
	font-size: clamp(24px, 2.8vw, 40px);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.rkl-partners-hero__stat-text {
	/* Body 2. The weight is explicit because the theme inherits 300 (landmine 34). */
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/* BREAKPOINT: 1024px — the line for the whole Partneriams page. ----------- */

@media (max-width: 1024px) {
	/*
	 * 519, and it is a subtraction rather than a number read off the frame. The
	 * mobile frame's header instance is y 0..92 and the stat band's own field
	 * (Rectangle 2326) starts at y 611, so this band is 92..611 = 519 tall. The
	 * spec's „611 mobile" is that stat-band edge in root coordinates — it is not
	 * this band's height, and reading it as one makes the band 92px too tall.
	 */
	.rkl-partners-hero {
		min-height: 519px;
	}

	/*
	 * Mobile geometry, in the mobile frame's own coordinates. Because the asset
	 * is the frame-bounds export there is no crop origin to add — the arithmetic
	 * is the group's scale and offset and nothing else:
	 *
	 *   scale s       = 262.33 / 715.61      =   0.366596
	 *   map left      = 53.26 - 715.80 * s   = -209.15  →  -52.29% of 400
	 *   map width     = 1440 * s             =  527.90  →  131.98% of 400
	 *   map top(root) = 166.53 -  86.95 * s  =  134.66
	 *   map top(band) = 134.66 - 92          =   42.66  →  10.665% of 400
	 *
	 * (92 is the mobile header's height, and therefore this band's top.)
	 *
	 * Percentages rather than the pixel values because this branch runs the whole
	 * way from 400 to 1024 and the arrangement has to hold across it, not only at
	 * the frame. That is also why the vertical offset has to be the `margin-top`
	 * the base rule sets up and cannot be `top`: a percentage `top` resolves
	 * against the containing block's HEIGHT, a percentage margin against its
	 * INLINE SIZE — and inline size is what the left and the width already scale
	 * with, so the margin is the only way the three stay locked together.
	 *
	 * `--map-right: auto` is required, not tidiness: the desktop rule pins the box
	 * right, and left + right + width together is over-constrained.
	 */
	.rkl-partners-hero__map {
		--map-left: -52.29%;
		--map-right: auto;
		--map-top: 10.665%;
		--map-width: 131.98%;
	}

	/*
	 * The one dot number that cannot be a percentage: `blur()` takes a length
	 * only. So this is the single place the mobile scale factor is applied by
	 * hand — 6.29 * 0.36660 = 2.31px, the same 0.4368% of the map box that the
	 * desktop blur is.
	 */
	.rkl-partners-hero__dot::before {
		filter: blur(2.31px);
	}

	/*
	 * 16px gutter, and the same bottom-anchor check: 519 - 16 = 503 for the
	 * column's bottom edge, the column is 3 x 42 (H1 28/1.5) + 32 + 48 = 206, so
	 * its top lands at 297 — root y 92 + 297 = 389 against the frame's 391. The
	 * 2px is unexplained rather than measured away: the suspect is the assumed
	 * column height, whose 3-line H1 wrap and 48px CTA are read off the frame
	 * instead of measured, with the frame's own 391 the other candidate.
	 */
	.rkl-partners-hero__front {
		/*
		 * 0 inline: `.rkl-band--inner` already insets by --rkl-gutter (16 here),
		 * and the mobile frame puts the heading and the stat card on that 16.
		 * Setting the variable rather than the padding keeps the stat card's
		 * right edge in step without repeating the number.
		 */
		--rkl-hero-inset: 0px;
		padding-bottom: 16px;
	}

	.rkl-partners-hero__copy,
	.rkl-partners-hero__title {
		/* 400 - 2 x 16. */
		max-width: 368px;
	}

	/*
	 * Top right on a phone, and `bottom: auto` is required — the desktop rule
	 * set it, and top + bottom together would stretch the card down the band.
	 * It overlaps the header band in the mobile frame; that is the design.
	 */
	.rkl-partners-hero__stat {
		bottom: auto;
		min-height: 88px;
		padding: 8px;
		top: 16px;
		width: 150px;
	}

	/*
	 * Both mobile sizes are the frame's boxes solved for a font size, not a
	 * guess at „one step down". The number's box is 27 x 32, and Boldonse 24 at
	 * line-height 1.3 is 31.2 — so 24 is the size that fills it.
	 */
	.rkl-partners-hero__stat-number {
		font-size: 24px;
	}

	/*
	 * And the caption box (2591:67525) is 134 x 36: two lines of 18, and 18 / 1.5
	 * is 12. Body 2's 14 would make it 42 and overflow the 88px card.
	 */
	.rkl-partners-hero__stat-text {
		font-size: 12px;
		line-height: 1.5;
	}
}

/* Page chrome ------------------------------------------------------------- */

/*
 * The band sits flush under the site header.
 *
 * twentytwentyfive's page template opens `main` with 70px of top margin and its
 * inner group with a matching 70px of padding — 140px of white above a band that
 * is meant to touch the header. Both are INLINE styles written by the template's
 * own block spacing (`style="margin-top:var(--wp--preset--spacing--60)"`), and no
 * selector outranks an inline declaration, so `!important` is the only lever
 * short of a `wp_template` override that would change every page on the site.
 * Landmine 39, and the same shape as the fix in blocks/tab-panel/style.css.
 *
 * Scoped to `body:has(.rkl-partners-hero)` so it cannot reach a page without the
 * band.
 *
 * Nothing pins the theme's root padding on this page's behalf, and nothing
 * needs to. Not here; and base.css's pin is scoped to `.rkl-matches-line,
 * .rkl-featured, .rkl-news, .rkl-partners`, a list holding none of this page's
 * blocks — the page matches it only incidentally, because it happens to end
 * with the rkl/partners band. Nothing depends on that: every band here is
 * `align: full` and takes its own width from `.rkl-band` / `.rkl-band--bleed`
 * in assets/base.css, so `clamp(30px, 5vw, 50px)` decides the edge of no band
 * ON THIS PAGE. That is a fact about these bands, not a general one — a
 * `.rkl-band` nested inside a padded container is still measured against that
 * container.
 *
 * Leaving the root padding alone also desynchronises nothing: the theme derives
 * both that padding and the negative margins that let an `alignfull` child
 * escape it from the same variable, so the two stay in step at any value it
 * takes.
 */
body:has(.rkl-partners-hero) .wp-site-blocks > main {
	margin-block-start: 0 !important;
}

body:has(.rkl-partners-hero) .wp-site-blocks > main > .wp-block-group {
	padding-block-start: 0 !important;
}

/*
 * And the last 19px: the block gap between `main`'s children puts a top margin on
 * the entry content itself. Class-based, so no !important needed.
 */
body:has(.rkl-partners-hero) .wp-block-post-content {
	margin-block-start: 0;
}