/**
 * Team hero — Figma 6014-30855 (desktop 1440x500 with a club photo),
 * 6014-31203 (mobile 400 with a photo), 6014-30201 / 6014-30068 (no photo,
 * desktop / mobile).
 *
 * The band is a flex column 500 tall: the club text starts 90px down and the tab
 * strip is pushed to the bottom edge by `margin-top: auto`, so a long club name
 * takes a third line into the 60px of slack the design leaves between them
 * instead of pushing the strip out of the band.
 *
 * The photo, the gradient and the crest are one absolutely positioned layer.
 * Below the breakpoint that layer becomes a 277px block at the top of the flow
 * and everything else follows it — which is the entire desktop→mobile
 * difference. The crest is positioned against that layer either way, so its
 * mobile rule only has to name a corner and a size.
 *
 * The crest itself is the one element with a third rule: on desktop its column
 * depends on whether the team has a photograph, so it is centred by percentage
 * and the `min-width: 783px` block moves that percentage for
 * `.rkl-thero--has-photo`. See the crest's own comment below.
 *
 * `.rkl-card` is deliberately not used: this is a full-bleed band, not a card,
 * so it owns its own box-sizing and font the way blocks/page-hero/style.css
 * does.
 */

.rkl-thero {
	background: var(--rkl-black);
	box-sizing: border-box;
	color: var(--rkl-white);
	display: flex;
	flex-direction: column;
	font-family: var(--rkl-font);
	min-height: 500px;
	overflow: hidden;
	position: relative;
}

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

.rkl-thero__notice {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 48px;
}

/* Photo, gradient, crest -------------------------------------------------- */

/*
 * `pointer-events: none` because the layer covers the whole band, including the
 * tab strip's row: the strip has no fill of its own so the photograph shows
 * through behind it, and a decorative layer must never be what a tap lands on.
 */
.rkl-thero__media {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/*
 * The split is exactly half the frame, 720/720, and the photo bleeds to the
 * band's top, right and bottom — no inset, no radius. `cover` because the
 * uploaded photo is any aspect ratio and the band is not.
 *
 * `background` is `--rkl-black` again — the colour `.rkl-thero` already paints,
 * stated a second time on the slot rather than left to show through the
 * transparent `.rkl-thero__media`. This box is what a visitor looks at until the
 * photograph decodes, and several of the uploads are PNGs, so what sits behind
 * the picture is a decision the design makes (the left half is the same flat
 * black) and not whatever an ancestor happens to be painting. It only holds
 * because render.php withholds `data-rkl-img`: base.css's
 * `img[data-rkl-img].is-loaded { background: none }` would wipe it the moment
 * the image arrived, and the `:not(.is-loaded)` rule above it — one attribute
 * plus one pseudo-class — outweighs any single class this file could write.
 */
.rkl-thero__photo {
	background: var(--rkl-black);
	display: block;
	height: 100%;
	left: 50%;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 50%;
}

/*
 * A 300x500 ramp over the photo's left edge (node 2466:72548), opaque for its
 * first 5.5% and gone by 76.7%.
 *
 * The transparent stop is `rgba(24, 26, 24, 0)` — #181A18, not the #1E201E the
 * left half is painted with. It is immaterial at zero alpha, but the two hues
 * interpolate differently across the ramp, so „correcting" it to the token
 * shifts the middle of the fade. The one place in this file a raw colour is
 * right.
 */
.rkl-thero__fade {
	background: linear-gradient(to right, var(--rkl-black) 5.5%, rgba(24, 26, 24, 0) 76.7%);
	bottom: 0;
	display: block;
	left: 50%;
	position: absolute;
	top: 0;
	width: 300px;
}

/*
 * 200x200, vertically centred on the band and horizontally centred on the middle
 * of the empty right half. The design's numbers are x 980→1180 and y 250→450
 * inside a band of 100→600 (6014:30207), which is 75% and 50% of the band to the
 * pixel at 1440 — so they are written as percentages of the media layer rather
 * than as a measured corner, and the crest tracks the 720/720 split at every
 * width the way the photo and the ramp already do.
 *
 * `translate(-50%, -50%)` and not `calc(75% - 100px)`: the offset is half the
 * crest's own size, so writing it as a percentage of the element keeps the size
 * a single number. Changing 200 does not then need two more edits.
 *
 * This is the **no-photo** column, and it is the base rule because 190 of the
 * 193 teams are in that state. With a photograph the crest moves 360px left onto
 * the seam — `min-width: 783px` below, keyed off `.rkl-thero--has-photo`.
 *
 * `contain`, not the `cover` the Figma image fill reports: Genius crests are not
 * all square, and `cover` crops a wide one. At 200x200 with a square source the
 * two are identical — this is what blocks/player-profile/style.css does with the
 * same crest.
 */
.rkl-thero__crest {
	display: block;
	height: 200px;
	left: 75%;
	object-fit: contain;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
}

/* With a photo, desktop only ---------------------------------------------- */

/*
 * The only `min-width` query in this file, and it is here to keep the mobile
 * block below honest. Both rules are desktop-shaped — one is a percentage of a
 * 1440-wide band, the other a 540px column — and both are two classes deep, so
 * as plain rules they would outrank the single-class mobile overrides and have
 * to be undone there by name. 783 rather than 782 so the two blocks cannot both
 * apply at any width.
 */
@media (min-width: 783px) {
	/*
	 * Centred on the 720/720 seam: 6014:30872 draws the crest at x 620, 200
	 * wide, so half of it lies on the flat black and half on the photograph.
	 * That overlap is the design, not a collision — the 300px ramp is at
	 * 61-100% opacity across the crest's right half (measured), so the
	 * photograph behind it is nearly black and a light crest still reads.
	 */
	.rkl-thero--has-photo .rkl-thero__crest {
		left: 50%;
	}

	/*
	 * 100px off the text column, for the same reason the `50%` half of the
	 * min() below exists: the crest now reaches 100px *past* the split into the
	 * text's own half, so capping the column at the split is no longer enough.
	 * Whenever this cap binds the text ends exactly one 48px gutter short of the
	 * crest — at 1440 it does not bind (min() resolves to 540, the design's own
	 * column) and the drawn 136px gap between the address and the crest is kept.
	 *
	 * Only the three teams with a photo pay for it. The no-photo crest sits a
	 * further 360px right and never reaches the text, so its column keeps the
	 * full width the base rule gives it.
	 */
	.rkl-thero--has-photo .rkl-thero__identity {
		max-width: min(540px, calc(50% - 100px));
	}
}

/* Text column ------------------------------------------------------------- */

/*
 * z-index 1 lifts the whole column and the strip above the media layer. The
 * 1440 measure keeps the text on the same line as the cards below it on a wider
 * screen, exactly as .rkl-page-hero__inner does.
 */
.rkl-thero__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-inline: auto;
	max-width: 1440px;
	position: relative;
	width: 100%;
	z-index: 1;
}

/*
 * 90px of headroom (band top 100 → column top 190) and a 444 column: 540 = 444 +
 * the two 48px gutters, so the content box is the design's 444 while the padding
 * keeps the text on the house gutter.
 *
 * The `50%` half of the min() is the only thing in this file the design does not
 * state, and it is not decoration. The frames give 1440 and 400 and nothing
 * between, and the halves are a fixed 50/50: at 885 the 540 column ran 49.5px
 * onto the photograph — measured — with the ramp fully transparent by then, so
 * the address sat on a lit gym floor. Capping the column at the split makes the
 * text end 48px short of the photo at every width (the right gutter is inside
 * the max-width), and at the design's own 1440 the min() resolves to 540 and
 * changes nothing.
 *
 * With a photo the split is no longer the nearest obstacle — the crest reaches
 * 100px past it — so the `min-width: 783px` block above tightens this same cap
 * by that 100. Change one and read the other.
 */
.rkl-thero__identity {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 90px;
	max-width: min(540px, 50%);
	padding-inline: 48px;
	width: 100%;
}

.rkl-thero__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rkl-thero__founded {
	color: var(--rkl-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

/*
 * H1 from the library, applied literally. The 425 max-width is the design's own
 * text box in a 444 column: the mock's „Vilniaus „Rytas-MRU"" breaks after
 * „RYTAS-" by width, not by a manual break, so a longer club name simply takes a
 * third line.
 */
.rkl-thero__name {
	color: var(--rkl-white);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	margin: 0;
	max-width: 425px;
	text-transform: uppercase;
}

.rkl-thero__address {
	color: var(--rkl-white);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

/*
 * `--rkl-grey-02` at 40%, through `opacity` rather than a baked rgba() so the
 * token stays the source of the colour. On the black band the flat token reads
 * as a bright white line.
 */
.rkl-thero__rule {
	background: var(--rkl-grey-02);
	display: block;
	height: 1px;
	opacity: 0.4;
	width: 100%;
}

/* Socials ----------------------------------------------------------------- */

/*
 * The drawn row is 4 glyph boxes of 27x24 on a 43px pitch, first glyph at the
 * gutter — below the 44px touch minimum in both axes. The pitch is the drawing,
 * so it is kept and the target is grown by padding instead: each link is a
 * 43x44 box with the 24px glyph centred, the row's own gap is 0, and the three
 * negative margins put the first glyph's left edge back on the gutter and the
 * glyph line back on the baseline the design draws. The padding overflows into
 * the 24px column gap above, where nothing is painted.
 */
.rkl-thero__socials {
	display: flex;
	list-style: none;
	margin: -10px 0 -10px -9.5px;
	padding: 0;
}

.rkl-thero__social {
	display: flex;
}

.rkl-thero__social-link {
	align-items: center;
	color: var(--rkl-white);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	width: 43px;
}

.rkl-thero__social-link:hover {
	opacity: 0.7;
}

.rkl-thero__social-link:focus-visible {
	outline: 2px solid var(--rkl-white);
	outline-offset: -4px;
}

/*
 * Two classes. `rkl_blocks_social_icon()` emits `class="rkl-footer__icon"`, and
 * the footer's own stylesheet styles that class with a single-class rule — the
 * helper is shared, so the glyph is sized inside this block's scope rather than
 * by editing the helper or racing another block's sheet on source order.
 */
.rkl-thero .rkl-footer__icon {
	display: block;
	height: 24px;
	width: 24px;
}

/*
 * The accessible name for each glyph. base.css only defines
 * `.rkl-card .screen-reader-text`, and this band is not a card.
 */
.rkl-thero__sr {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Tabs -------------------------------------------------------------------- */

/*
 * Bottom-anchored inside the 500px band, with no fill so the photograph shows
 * through (frame 2466:72525 has none). `margin-top: auto` rather than a measured
 * offset: rkl/page-hero's own 22px `margin-top` is that block's vertical maths
 * for a 180px band and must not be inherited here.
 *
 * The 2px bottom padding is the frame's own slop — the strip ends at 598 in a
 * band that ends at 600.
 */
.rkl-thero__tabs {
	margin-top: auto;
	padding: 16px 0 2px;
}

/*
 * The strip scrolls sideways rather than wrapping: a second row would change the
 * band's height, and the design keeps the tabs on one line at every width. On a
 * phone the fourth and fifth labels run off the right edge and are dragged into
 * view.
 */
.rkl-thero__tabs-strip {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-inline: 40px;
	scrollbar-width: none;
}

.rkl-thero__tabs-strip::-webkit-scrollbar {
	display: none;
}

/*
 * 40 and not 48, because the label carries its own 8px sides: the text lands on
 * the house gutter at 48 while the underline deliberately overhangs it by 8px
 * on each side, which is what the frame draws (label at x 48, underline at
 * x 40).
 */
.rkl-thero__tab {
	align-items: flex-start;
	color: var(--rkl-grey-05);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
}

.rkl-thero__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 the band. Only its paint changes.
 */
.rkl-thero__tab-underline {
	background: var(--rkl-white);
	display: block;
	height: 2px;
	opacity: 0;
	transform: scaleX(0);
	width: 100%;
}

.rkl-thero__tab.is-active {
	color: var(--rkl-white);
}

.rkl-thero__tab.is-active .rkl-thero__tab-underline {
	opacity: 1;
	transform: scaleX(1);
}

.rkl-thero__tab:hover {
	color: var(--rkl-white);
}

.rkl-thero__tab:focus-visible {
	color: var(--rkl-white);
	outline: 2px solid var(--rkl-white);
	outline-offset: 4px;
}

/* Mobile ------------------------------------------------------------------
 *
 * 6014-31203 / 6014-30068. The band unstacks: the photo is the full width at the
 * top, 277 tall, the ramp turns 90° and fades up out of its bottom edge, the
 * crest drops to 88 in the photo's own bottom-right corner, and the dark panel
 * with the text is everything below it. Nothing in the text column changes but
 * the club name's size.
 *
 * With no photo the 277px stays and the crest floats in it — the design keeps
 * the reservation (6014:30094 is at the same x/y as 6014:31229), and the band is
 * one flat black because the `<img>` and the ramp are absent rather than
 * restyled. This is the breakpoint where the two states really are identical:
 * the crest's desktop column moves with the photo, its mobile corner does not,
 * so `.rkl-thero--has-photo` has nothing to say down here.
 */
/* BREAKPOINT 782 */
@media (max-width: 782px) {
	/*
	 * The 500 floor goes: the band is now the photo plus the column plus the
	 * strip, which measures the frame's own 590 with real content in it.
	 */
	.rkl-thero {
		min-height: 0;
	}

	.rkl-thero__media {
		flex: 0 0 auto;
		height: 277px;
		inset: auto;
		position: relative;
	}

	.rkl-thero__photo {
		left: 0;
		width: 100%;
	}

	/*
	 * The same ramp rotated: opaque along the photo's bottom edge, gone 138px
	 * up. `top: auto` undoes the desktop rule's top/bottom pair, or the height
	 * is ignored and the ramp covers the whole photo.
	 */
	.rkl-thero__fade {
		background: linear-gradient(to top, var(--rkl-black) 5.5%, rgba(24, 26, 24, 0) 76.7%);
		height: 138px;
		left: 0;
		top: auto;
		width: 100%;
	}

	/*
	 * 88x88 in the photo band's bottom-right corner, right 16 and bottom 0 — the
	 * crest's bottom edge lands exactly on the band's own bottom edge at y 369
	 * (6014:31229 draws it at y 281→369 over a photo band of 92→369, and
	 * 6014:30094 is the same box with no photo behind it).
	 *
	 * `left`, `top` and the transform are undone rather than overridden: the
	 * desktop rule centres the crest, and a stale `translate(-50%, -50%)` would
	 * drag this corner 44px up and left out of the band.
	 */
	.rkl-thero__crest {
		bottom: 0;
		height: 88px;
		left: auto;
		right: 16px;
		top: auto;
		transform: none;
		width: 88px;
	}

	.rkl-thero__identity {
		margin-top: 24px;
		max-width: 100%;
		padding-inline: 16px;
	}

	/*
	 * H1 mobile — 24/1.5, one line in the frame. The max-width goes with the
	 * 425 desktop box: at 368 the column is the narrower constraint.
	 */
	.rkl-thero__name {
		font-size: 24px;
		max-width: 100%;
	}

	/*
	 * 24 from the text to the strip, and 1px of the frame's slop at the bottom
	 * instead of the desktop's 2. `margin-top` beats the desktop `auto` because
	 * there is no free space left to distribute here.
	 */
	.rkl-thero__tabs {
		margin-top: 24px;
		padding-bottom: 1px;
	}

	/*
	 * 16 and 4, from 2507:67628. The label stays at 16px: rkl/page-hero drops
	 * its own to 15 and both mobile artboards keep 16.
	 */
	.rkl-thero__tabs-strip {
		gap: 4px;
		padding-inline: 16px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rkl-thero__social-link {
		transition: opacity 0.2s ease;
	}

	.rkl-thero__tab {
		transition: color 0.15s ease;
	}

	/*
	 * The underline grows from the centre so the move between tabs reads as a
	 * slide rather than a blink.
	 */
	.rkl-thero__tab-underline {
		transition: transform 0.15s ease, opacity 0.15s ease;
	}
}