/**
* Page hero with tabs — Figma 2466-58050 (desktop 1440x180) and 2507-55404
* (mobile 400x160).
*
* The background is the finished 1440x180 artwork from the Figma library
* section „Efects and gradients" (2613:86697), exported at 2x. The green-into-
* black field, the angled accent wash and the photographic grain are all baked
* into it, so there is nothing here to decode and nothing to keep in sync — the
* three layers this used to draw were a reconstruction of a rotated Figma
* construction, and the wash was a flat colour where the design has a shader.
*
* The design ships the band in three accents. Red is the default because that
* is the Rungtynės node the block was built from; the other two are a modifier
* class away.
*
* .rkl-page-hero red — „Red (hero)" 2613:87056
* .rkl-page-hero--yellow yellow — „Yellow (hero)" 2613:87039
* .rkl-page-hero--green green — „Green (hero)" 2613:87022
*/
/*
* `100% 100%`, not `cover`. The design composes this band the same way at every
* width — green at the left, the accent hard against the right edge — and says
* so itself: the 400x160 mobile node (2507-55404) is the 1440x180 desktop one
* squeezed, not cropped. `cover` would cut the accent off a phone entirely and
* shave the band's top and bottom on a wide monitor. At the design's own 1440
* the two are identical.
*/
.rkl-page-hero {
background-color: var(--rkl-black, #1e201e);
background-image: var(--rkl-page-hero-art, url("../../assets/page-hero-bg.jpg?v=2"));
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
color: var(--rkl-white);
font-family: var(--rkl-font);
overflow: hidden;
position: relative;
}
.rkl-page-hero--yellow {
--rkl-page-hero-art: url("../../assets/page-hero-bg-yellow.jpg?v=2");
}
.rkl-page-hero--green {
--rkl-page-hero-art: url("../../assets/page-hero-bg-green.jpg?v=2");
}
.rkl-page-hero *,
.rkl-page-hero *::before,
.rkl-page-hero *::after {
box-sizing: inherit;
}
/*
* A chosen background replaces the bundled one outright — render.php puts it
* in an inline `background-image`, which out-ranks the rule above. The sizing
* is repeated here only so an upload of any aspect ratio still fills the band.
*/
.rkl-page-hero.has-custom-bg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*
* The content column. 1440 max with 48px of padding puts the title at x=48 and
* the sponsor mark's right edge at 1392 — the same column the card below it
* occupies, so the two line up at the design width and stay lined up above it.
*/
.rkl-page-hero__inner {
margin-inline: auto;
max-width: 1440px;
padding: 48px 0 0;
position: relative;
z-index: 1;
}
.rkl-page-hero__title-row {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
min-height: 53px;
padding-inline: 48px;
}
/*
* With no tabs the strip is not there to close the band, so the padding is
* symmetrical: 48 + 53 + 48 = 149px, which is what the Naujienos hero measures
* (Figma 2507-49947).
*
* BREAKPOINT 782: desktop only, and the query is not decoration. Below it the
* title row supplies its own 24px bottom padding, so 24 + 48 + 24 already closes
* the band at the mobile frame's 96px (2591-62428) — adding 48 more measured a
* 144px band on a 400px screen, half again as tall as the design.
*/
@media (min-width: 783px) {
.rkl-page-hero--no-tabs .rkl-page-hero__inner {
padding-bottom: 48px;
}
}
/*
* H2 from the library, applied literally. The 1.9 line-height is what gives the
* title row its 53px height — it is not padding, and normalising it collapses
* the band's vertical rhythm.
*/
.rkl-page-hero__title {
color: var(--rkl-white);
font-family: "Boldonse", var(--rkl-font);
font-size: 28px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.9;
margin: 0;
text-transform: uppercase;
}
/*
* No vertical padding, and that is what keeps the band 180px tall.
*
* This used to be `padding: 8px 0`, which made the 32px mark's box 48 — a
* harmless number while the title row's `min-height: 53px` was the taller of the
* two. At 50px the same padding makes it 66, the mark rather than the title
* starts driving the row, and the band grows to 192. Zero padding leaves the box
* at 50, still under the 53.2px the title's line-height produces, so on desktop
* the row and the band measure exactly what they measured at 32 — 53.2 and
* 179.59 with tabs, 149.2 without. Mobile is 2px taller and cannot help it:
* there the row's floor is 48, so a 50px mark is the tallest thing in it and the
* band goes 150 -> 152 (96 -> 98 with no tabs). The anchor loses nothing as a
* target either: 50px is taller than the 48 the padding used to buy it.
*/
.rkl-page-hero__sponsor {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: 8px;
margin: 0;
padding: 0;
}
.rkl-page-hero__sponsor-label {
color: var(--rkl-grey-05);
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
/*
* 50px tall, up from the 32 the band was built with — the league asked for the
* „Pristato" mark at the size its sponsor contract expects.
*
* The height lives here and *also* as the `height` attribute in render.php, and
* the two are one decision: `width: auto` against a fixed height resolves to
* **zero** for an image that has not arrived, so the attribute pair is what
* reserves the box until then — the trap `rkl_blocks_sponsor()` documents, and
* the same reason base.css floors the news chip's logo. Change one and you must
* change the other, or the band jumps when the logo lands.
*
* Nothing caps the width here on purpose. These marks are arbitrary aspect
* ratios, and letterboxing one to fit a box would shrink the very height that
* was asked for. The narrow-screen valve is in the mobile query below, where the
* room actually runs out.
*/
.rkl-page-hero__sponsor-logo {
display: block;
height: 50px;
object-fit: contain;
width: auto;
}
/* Tabs ------------------------------------------------------------------- */
.rkl-page-hero__tabs {
margin-top: 22px;
padding: 16px 0 0;
}
/*
* The strip scrolls sideways rather than wrapping. A wrapped second row would
* change the band's height, and the design has the tabs on one line at every
* width — on a phone they run off the right edge and are dragged into view.
*/
.rkl-page-hero__tabs-strip {
-webkit-overflow-scrolling: touch;
display: flex;
gap: 24px;
overflow-x: auto;
padding-inline: 40px;
scrollbar-width: none;
}
.rkl-page-hero__tabs-strip::-webkit-scrollbar {
display: none;
}
/*
* The tab is a column: label, a 16px gap, then the 2px underline across the
* whole tab box. The label's own 8px side padding is why the strip's padding is
* 40 and not 48 — the text lands at 48, flush with the title, while the
* underline deliberately overhangs it by 8px on each side.
*/
.rkl-page-hero__tab {
align-items: flex-start;
color: var(--rkl-grey-05);
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 16px;
text-decoration: none;
transition: color 0.15s ease;
}
.rkl-page-hero__tab-label {
align-items: center;
display: flex;
font-size: 16px;
font-weight: 500;
justify-content: center;
line-height: 1.4;
padding-inline: 8px;
white-space: nowrap;
}
/*
* The underline is always in the layout and always 2px tall, so switching tabs
* cannot shift anything. Only its paint changes, and it grows from the centre
* so the move between tabs reads as a slide rather than a blink.
*/
.rkl-page-hero__tab-underline {
background: var(--rkl-white);
display: block;
height: 2px;
opacity: 0;
transform: scaleX(0);
transition: transform 0.15s ease, opacity 0.15s ease;
width: 100%;
}
.rkl-page-hero__tab.is-active {
color: var(--rkl-white);
}
.rkl-page-hero__tab.is-active .rkl-page-hero__tab-underline {
opacity: 1;
transform: scaleX(1);
}
.rkl-page-hero__tab:hover {
color: var(--rkl-white);
}
.rkl-page-hero__tab:focus-visible {
color: var(--rkl-white);
outline: 2px solid var(--rkl-white);
outline-offset: 4px;
}
/* Mobile ------------------------------------------------------------------
*
* The mobile frame is 400x160: a 96px title row with 24/16 padding, an 8px gap,
* then the tab strip with a 4px gap between tabs instead of 24.
*/
@media (max-width: 782px) {
.rkl-page-hero__inner {
padding-top: 24px;
}
.rkl-page-hero__title-row {
gap: 8px;
min-height: 48px;
padding-bottom: 24px;
padding-inline: 16px;
}
.rkl-page-hero__title {
font-size: 18px;
}
/*
* White, not grey. The mobile hero component (Figma 2591-62428) puts
* „Pristato" in `#FFF` where the desktop band uses `#7D7D7D` — on a 400px
* band the label sits over the dark field rather than beside a wide title,
* and grey on near-black does not read.
*/
.rkl-page-hero__sponsor-label {
color: var(--rkl-white);
font-size: 11px;
}
/*
* The narrow-screen valve for the 50px mark, and it is not decoration —
* measured before it was added.
*
* The row is [title] 8 [label 8 logo] inside 16px of side padding. This mark
* is 227x62, so at 50px tall it is 183 wide; with the 40px label and the two
* gaps the sponsor needs 231. Beside „Komandos" (114 at this font size) the
* row wants 369 and a 360px phone has 328 — the mark ran 11px past the right
* edge and the band's `overflow: hidden` quietly *clipped* it. It cannot wrap
* out of trouble either: the titles are single unbreakable words.
*
* So the sponsor is allowed to shrink here, where the desktop rule pins it at
* `flex: 0 0 auto`, and the logo shrinks with it — the label is pinned
* instead, so all of the give comes out of the image. `object-fit: contain`
* then letterboxes the mark inside a box that is still 50 tall, which trades
* a few pixels of drawn height for the whole logo staying on screen. At the
* 390px design width there is room and none of this binds; it engages below
* roughly 372px, and for a logo wider than ~3.6:1.
*/
.rkl-page-hero__sponsor {
flex-shrink: 1;
min-width: 0;
}
/*
* `min-width: 0` is the load-bearing half. A replaced element's automatic
* minimum size is its own transferred width — 183px here — so a flex item
* that is an `![]()
` refuses to shrink below its intrinsic size no matter
* what `flex-shrink` says. Measured: with `max-width` alone the sponsor box
* shrank to 206 and the logo stayed 183 and overflowed it anyway.
*/
/*
* 32px on a phone, down from the desktop 50.
*
* At 375px the 50px mark measured taller than both the site's own logo in the
* header (32px) and the page title it sits beside (30px), and it took 226 of
* the 375px width. A sponsor mark outranking the masthead and the `` is
* the wrong hierarchy, and it is only visible on a phone — on desktop the
* band is wide enough that 50px reads as intended, so the desktop value is
* untouched.
*
* 32 rather than an arbitrary reduction: it is what `rkl/player-leaders` and
* `rkl/videos` already give their „Pristato" chips, and what the header logo
* was capped to on 2026-09-08. Three places, one number.
*
* The `width`/`height` attributes in render.php stay at 181/50 and must not
* be touched — they are the *ratio* (3.62) the browser reserves the box from,
* not a size. `width: auto` plus this height resolves against that ratio, so
* the box is still reserved before the image lands and the band does not jump.
*/
.rkl-page-hero__sponsor-logo {
height: 32px;
max-width: 100%;
min-width: 0;
}
.rkl-page-hero__tabs {
margin-top: 0;
padding-top: 15px;
}
.rkl-page-hero__tabs-strip {
gap: 4px;
padding-inline: 16px;
}
.rkl-page-hero__tab-label {
font-size: 15px;
}
}
@media (max-width: 420px) {
.rkl-page-hero__title {
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.rkl-page-hero__tab,
.rkl-page-hero__tab-underline {
transition: none;
}
}
/* 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 another 70px of padding — 140px of white above a band that is
* meant to touch the header. `!important` because 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. Landmine 39.
*
* These three rules exist in six block stylesheets — `tab-panel`, `article`,
* `hero-banner`, `partners-hero`, `documents` and here — because a block
* stylesheet only loads on pages carrying that block and none may reach into
* another's file. The older copies say the override belongs here; it does, but it
* cannot yet replace them. `rkl/tab-panel` opens the team, player and play-off
* pages, which carry no `rkl/page-hero` at all, so its copy is still load-bearing.
*
* Only `/rungtynes/` actually needs this one: it is the single hero page whose
* tabs are the hero's own, so it carries no `rkl/tab-panel` and fell through the
* override that covers the other four. Keyed on the hero rather than on that
* page so the next hero page built without tabs is right on the first load.
*
* Scoped to `body:has(.rkl-page-hero)`, which reaches the five hero pages and
* nothing else — counted across every rendered page on the site, because
* `body:has()` cannot tell a first child from a fifth one.
*/
body:has(.rkl-page-hero) .wp-site-blocks > main {
margin-block-start: 0 !important;
}
body:has(.rkl-page-hero) .wp-site-blocks > main > .wp-block-group {
padding-block-start: 0 !important;
}
/*
* And the last 19.2px: the block gap between `main`'s children puts a top margin
* on the entry content, because the theme's `h1` is still a preceding sibling
* even though base.css hides it. Class-based, so no `!important` needed.
*/
body:has(.rkl-page-hero) .wp-block-post-content {
margin-block-start: 0;
}