/**
 * The article — Figma 2507-68371 (desktop), 2591-62143 (mobile),
 * 2654-49541 (with the „Pristato" chip).
 *
 * One grid does the whole page geometry: a centred 640 column with „Atgal"
 * living in the left margin next to the meta row. Everything in the design is
 * 32px apart vertically — meta → title → rule → body → share — so that is one
 * `row-gap` rather than five margins.
 */

.rkl-article {
	box-sizing: border-box;
	color: var(--rkl-black);
	display: grid;
	font-family: var(--rkl-font);
	/*
	 * The middle track is the content column; the outer tracks are the page's
	 * own margins, and „Atgal" is placed in the left one. `min(…, 100%)` is what
	 * makes the phone case fall out for free: at a 400 viewport the padding box
	 * is 368, which is exactly what the mobile frame draws.
	 *
	 * `minmax(0, 1fr)` rather than `1fr` so a long word inside the column can
	 * never push the margins wider than the page.
	 */
	grid-template-columns: minmax(0, 1fr) min(var(--rkl-article-width, 640px), 100%) minmax(0, 1fr);
	/*
	 * The frame puts „Atgal" at y=132 under a 100px header (28px notice + 72px
	 * bar), so the air above it is 32px. The mobile frame's 108 under a 92px
	 * header (28 + 64) is 16px. Both are the site's gutter values, which is
	 * probably not a coincidence, but they are written as the measurement.
	 */
	padding-block-start: 32px;

	/*
	 * No inline padding by default, and that is a correction rather than a taste.
	 *
	 * The block sits in the `single` template's constrained `main`, which already
	 * carries the page's root padding — so a gutter of its own is a second one:
	 * measured, „Atgal" landed at x=96 in a 1425 viewport where frame 2507-68371
	 * draws it at 40, because 48 of theme padding and 48 of ours had stacked. The
	 * gutter comes back only for `alignfull`, where WordPress's negative margins
	 * have escaped the root padding and there is nothing else to supply it.
	 */
	padding-inline: 0;
	row-gap: 32px;
}

/*
 * Everything belongs to the content column except the back link. Declared on the
 * children rather than on a wrapper element so the column's 32px rhythm is the
 * grid's own gap and cannot be double-counted by a nested container.
 */
/*
 * Alignfull has escaped the theme's root padding, so the block supplies the
 * gutter itself. Same number, different owner.
 */
.rkl-article.alignfull {
	padding-inline: var(--rkl-gutter);
}

.rkl-article > * {
	grid-column: 2;
	margin: 0;
}

/*
 * „Atgal" is at the page gutter — 48px on desktop, 16px on a phone — not beside
 * the column. The desktop frame measures its icon box at x=40; the label lands
 * on the 48 gutter and the caret's own left bearing accounts for the difference,
 * so this follows the gutter rather than hardcoding a 40 that exists nowhere
 * else on the site.
 *
 * Row 1 puts it on the meta row's line. If the meta row is switched off the h1
 * takes row 1 instead and the link still aligns with the first thing in the
 * column.
 */
.rkl-article__back {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

/* The svg counterpart of the `.rkl-link-button img` sizing in base.css. */
.rkl-article__back-icon {
	display: block;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* Meta row ---------------------------------------------------------------- */

.rkl-article__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/*
 * Button1 from the library: Poppins Medium 14/1.3 in the body colour, not grey —
 * the design keeps the category and the date at full contrast.
 */
.rkl-article__category,
.rkl-article__date {
	color: var(--rkl-black);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

/*
 * The „Pristato" chip, at the design's fixed 126x32. On a card it sits on a
 * photograph and is white; here the page behind it is white too, so the box is
 * given the site's surface token — a white chip on a white article would be a
 * label and a logo with no chip at all. Everything else is the card's chip
 * verbatim: 6px 8px padding, 8px gap, 8px radius, a 20px logo and a SemiBold
 * 12/1.3 grey label.
 */
.rkl-article__sponsor {
	align-items: center;
	background: var(--rkl-grey-04);
	border-radius: var(--rkl-radius);
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 8px;
	height: 32px;
	justify-content: center;
	padding: 6px 8px;
	width: 126px;
}

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

/* The logo is contained to the chip's remaining 20px rather than setting it. */
.rkl-article__sponsor-logo {
	display: block;
	height: 20px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* Title and rule --------------------------------------------------------- */

/*
 * H1, applied literally. The 1.9 line-height is the measurement, not a
 * typographic preference: two lines of the sample headline are 106px in the
 * desktop frame (28 x 1.9 x 2 = 106.4) and 64px in the mobile one
 * (20 x 1.6 x 2). Normalising it collapses the header's rhythm.
 *
 * `font-weight: 400` because Boldonse ships one weight and the theme's inherited
 * 300 would have the browser synthesise a lighter one — landmine 34.
 */
.rkl-article__title {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.9;
	text-transform: uppercase;
}

/*
 * The featured image, between the title and the rule.
 *
 * No `aspect-ratio` and no cropping: on a card the box is the design's and the
 * photograph is cropped into it, but here the column is the measure and the
 * picture keeps its own shape — a portrait press photo is not a mistake to be
 * cut down. The `width`/`height` attributes carry the file's own dimensions, so
 * nothing below it moves as it loads.
 *
 * The 32px above and below is the grid's `row-gap`, not a margin here, which is
 * why the figure only has to zero its own.
 */
.rkl-article__featured {
	/* A figure is an inline-formatting context; without this the image's
	   baseline reserves a few pixels of descender under it. */
	line-height: 0;
}

.rkl-article__featured-image {
	border-radius: var(--rkl-radius);
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.rkl-article__rule {
	background: var(--rkl-grey-01);
	height: 1px;
	width: 100%;
}

/* Body ------------------------------------------------------------------- */

.rkl-article__body {
	color: var(--rkl-black);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/*
 * Two rules, in this order, and the order is the point: both are (0,1,0), so
 * whichever comes last wins on `margin-block-start` (landmine 32). The reset
 * clears the theme's own block margins first; the gap rule then puts the
 * design's single 32px between every two blocks.
 *
 * `:where()` keeps these element selectors from out-specifying anything of ours
 * inside the content — landmine 23.
 */
.rkl-article__body :where(p, ul, ol, blockquote, figure, h2, h3, h4, pre, hr) {
	margin-block: 0;
}

.rkl-article__body > * + * {
	margin-block-start: 32px;
}

/*
 * Images are the column's full width at their natural ratio. The 32px of air the
 * design shows above and below one is already the block gap above — nothing extra
 * here, or an image inside a figure would get 64.
 */
.rkl-article__body :where(img) {
	border-radius: var(--rkl-radius);
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.rkl-article__body :where(figcaption) {
	color: var(--rkl-grey-05);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	margin-block-start: 8px;
}

/*
 * Headings inside the body are the library's H3 (24/1.9 uppercase) and the
 * mobile H2 (20/1.6): the article's own H1 already holds 28, so an in-body h2 at
 * the same size would compete with it.
 */
.rkl-article__body :where(h2) {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.9;
	text-transform: uppercase;
}

.rkl-article__body :where(h3) {
	color: var(--rkl-black);
	font-family: "Boldonse", var(--rkl-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
}

.rkl-article__body :where(ul, ol) {
	padding-inline-start: 24px;
}

.rkl-article__body :where(li + li) {
	margin-block-start: 8px;
}

.rkl-article__body :where(blockquote) {
	border-inline-start: 2px solid var(--rkl-green-03);
	padding-inline-start: 16px;
}

.rkl-article__body :where(strong, b) {
	font-weight: 600;
}

/*
 * Links are green and underlined, and this one is deliberately NOT in `:where()`.
 *
 * Player names are linked by hand by the editor, and the underline is what makes
 * them read as links inside a paragraph (spec §3). The theme's global styles
 * reach these anchors with `:root :where(a:where(:not(.wp-element-button)))`,
 * which is (0,1,0) — the same weight this rule would have wrapped in `:where()`,
 * leaving the outcome to source order. (0,1,1) settles it, and it out-specifies
 * nothing of ours.
 */
.rkl-article__body a {
	color: var(--rkl-green-03);
	text-decoration: underline;
}

.rkl-article__body a:hover,
.rkl-article__body a:focus-visible {
	text-decoration: none;
}

/* Imported EmbedPress embeds --------------------------------------------- */

/*
 * 179 imported posts carry EmbedPress's saved block output, and that plugin is
 * NOT installed here — the block type is unregistered, so what renders is the
 * static markup frozen into `post_content`, `<style>` element and all. Every
 * embed writes its own sheet keyed on its own `data-source-id`:
 *
 *   [data-source-id="source-…"] .ose-embedpress-responsive { width: 600px!important }
 *   [data-source-id="source-…"] iframe                     { width: 600px!important }
 *
 * That 600 is the whole of the mobile overflow. Measured on
 * /birstono-milasta-pristate-du-naujokus/: `scrollWidth` pinned at **616** (600
 * plus the 16px gutter) at every phone width, so the page scrolled sideways by
 * 226px at a 390 viewport and 256px at 360. Nothing under `.rkl-news`
 * contributed a pixel — it is entirely the embed.
 *
 * Three things decide which layer may hold the fix, and all three point here:
 *
 * 1. There is no plugin to fix. The declaration is *content* — in the database,
 *    in 179 posts. An EmbedPress update could never reach it, and neither can a
 *    plugin edit, because there is no EmbedPress on disk.
 * 2. The iframe already carries `max-width: 100%` and it does nothing: it sits
 *    in a **second** `style` attribute, and the browser keeps only the first
 *    (`border:none;overflow:hidden`). Landmine 36, arriving in third-party
 *    markup — the iframe's computed `max-width` reads `none`.
 * 3. Specificity has to win it, not source order. Those rules are `!important`
 *    and live in the body, so they are later than any stylesheet this plugin
 *    enqueues in the head. `[data-source-id="x"] .ose-…` is (0,2,0), so a
 *    two-class rule of ours would tie and lose on order — landmine 32. The
 *    scope below is (0,3,0)/(0,3,1) and wins from the head, verified.
 *
 * A cap, not a width. `width: 100%` here also *widens* the embed on desktop —
 * measured 600 → 640 at a 1440 viewport, filling the article column instead of
 * sitting at the width the editor chose. `max-width` alone leaves desktop
 * identical (600 at x=400, before and after) and binds only once the column is
 * narrower than 600.
 *
 * Capping the iframe is also what unsticks the wrapper, which is the part that
 * looks redundant and is not. `.ep-embed-content-wraper` is an inline-block with
 * no width, so it shrink-to-fits — and an iframe with a definite 600px width
 * contributes 600 as its *min-content*, which is why a box inside a 328px column
 * still measured 600. The cap lowers that contribution and the wrapper resolves
 * to the column.
 *
 * `.ose-embedpress-responsive` is on all 137 rendered embeds (124 bare, 12 also
 * `.ose-youtube`, 1 also `.ose-facebook`), and all 179 posts are `post` —
 * every one of them renders through this block's body.
 *
 * The authored `height: 800px!important` is deliberately left alone: a
 * cross-origin frame cannot report its content height, so any height of ours
 * would be a guess, and a guess that comes in low clips the post. Narrowing the
 * box only ever reduces the slack, never adds any.
 */
.rkl-article .rkl-article__body .ep-embed-content-wraper,
.rkl-article .rkl-article__body .ose-embedpress-responsive,
.rkl-article .rkl-article__body .ose-embedpress-responsive iframe {
	max-width: 100% !important;
}

/*
 * YouTube is the one provider here whose proportion is knowable, so it gets a
 * ratio instead of the authored height — and it needs one, because capping the
 * width above without touching the height is what leaves it mis-proportioned.
 *
 * The authored height is EmbedPress's own 16:9 default: 11 of the 12 rendered
 * `.ose-youtube` boxes carry `height: 340px!important` against `width: 600px`,
 * which is 1.765 against 16:9's 1.778, and the twelfth is authored 1000x600
 * (1.667). So the ratio is the editor's intent restated, not a number invented
 * here. All 12 srcs are plain `/embed/<id>` videos — no Shorts, no playlists —
 * so none of them is 9:16.
 *
 * (Read the per-embed sheets carefully if you check this: EmbedPress writes an
 * `.ose-youtube` rule into *every* embed's sheet regardless of provider, keyed
 * to that embed's own `data-source-id`, so a Facebook embed carries a YouTube
 * rule that can never match. Counting those rules overcounts the videos.)
 *
 * The player does not letterbox a box of the wrong ratio, it **crops**: at 328
 * wide the height stayed 340 (r=0.965) and the thumbnail's own title was cut off
 * at both edges. Two posts are worth naming. On 5222 this is mobile-only —
 * desktop is 600x340, and the ratio changes it to 337.5, which is the 2.5px
 * nobody will see. On 5211 the authored box is 640x600 (r=1.067), so it has been
 * wrong at *every* width since the import, desktop included (authored 1000x600,
 * then held to the 640 column); 16:9 corrects it to 640x360 there. That is a
 * deliberate desktop change, and it moves toward the proportion the video
 * actually has.
 *
 * `max-height` is dropped explicitly because the sibling `.ose-embedpress-responsive`
 * rule sets one from the same authored number, and a stale cap is exactly what
 * would silently overrule the ratio on a future embed whose height is authored
 * shorter than its own 16:9.
 */
.rkl-article .rkl-article__body .ose-youtube,
.rkl-article .rkl-article__body .ose-youtube iframe {
	aspect-ratio: 16 / 9;
	height: auto !important;
	max-height: none !important;
}

/* Share row -------------------------------------------------------------- */

.rkl-article__share {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.rkl-article__share-label {
	color: var(--rkl-grey-05);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.rkl-article__share-link {
	align-items: center;
	color: var(--rkl-green-03);
	display: inline-flex;
	text-decoration: none;
}

/*
 * `rkl_blocks_social_icon()` emits its svg with the footer's class on it, and the
 * footer's stylesheet is not enqueued on an article — so the glyph is sized here.
 * `currentColor` in the svg means the colour above is the whole treatment.
 */
.rkl-article__share-link svg {
	display: block;
	height: 24px;
	width: 24px;
}

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

/* The accessible name of each glyph, out of sight but not out of the document. */
.rkl-article__sr {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* The editor's "wrong context" note. */
.rkl-article__empty {
	color: var(--rkl-grey-05);
	font-family: var(--rkl-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	padding: 24px;
	text-align: center;
}

/* BREAKPOINT — 1024px, the site's tablet/desktop line. ------------------- */

/*
 * Below it the column is the page minus its gutters and „Atgal" can no longer sit
 * beside it, so it becomes the first row of the column instead. 1024 rather than
 * a measured ~850 (640 + two link widths) because every other block on this site
 * switches to its mobile layout here, and a page that changes shape twice on the
 * way down reads as a bug.
 */
@media (max-width: 1024px) {
	.rkl-article {
		grid-template-columns: min(var(--rkl-article-width, 640px), 100%);
		justify-content: center;
		padding-block-start: 16px;
	}

	/* One track now, so the column override has to come with it. */
	.rkl-article > *,
	.rkl-article__back {
		grid-column: 1;
	}

	.rkl-article__back {
		grid-row: auto;
	}

	.rkl-article__title {
		font-size: 20px;
		line-height: 1.6;
	}
}

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

/*
 * The article starts under the site header, and twentytwentyfive puts 140px of
 * white in front of it: `main` opens with `style="margin-top:var(--wp--preset--
 * spacing--60)"` and its inner group carries a matching `padding-top`. Both are
 * INLINE declarations written by the template's own block spacing, so no selector
 * can outrank them — hence `!important` (landmine 39).
 *
 * `blocks/tab-panel/style.css` already carries the identical override for the
 * pages it builds; this is the same fix keyed on this block, because a block
 * stylesheet only loads on pages that use the block and neither may reach into
 * the other's file. Both should move to `rkl/page-hero` when that block takes
 * over page chrome.
 */
body:has(.rkl-article) .wp-site-blocks > main {
	margin-block-start: 0 !important;
}

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

/* And the block gap between `main`'s children. Class-based, so no !important. */
body:has(.rkl-article) .wp-block-post-content {
	margin-block-start: 0;
}

/*
 * This block draws the post's title as its own H1, so the theme's title block
 * would be a second one.
 *
 * base.css hides `.wp-block-post-title` only on pages carrying the homepage
 * blocks, and its comment says why it stops there: on a single news article the
 * title *is* the content. That is still true — it is just this block's job now,
 * which is why the rule is scoped to this block and not added there.
 */
body:has(.rkl-article) .wp-block-post-title {
	display: none;
}