/*
 * rekos/stats-media (Figma home 104:383 desktop, 967:9807 mobile; sectors 309:8255 …; Apie mus 339:2259).
 * Tokens only. Literal values only for breakpoints, aspect ratios, 0, 1px, percentages, unitless
 * line heights and Figma geometry (the flag circles; the 154 / 343 and 281 / 254 / 609 column ratios).
 *
 * Desktop ≥1200 (1440 frame): padding 80; head row: heading in the 591 column, text in the 609
 *   column, bottom-aligned, 96 apart; 56 below: photo 591 × 420 (radius 30) | stats column 609:
 *   2 × 2 stats (rows 32 apart, columns 56 apart, first column ≤ 281, second-column labels ≤ 254;
 *   value Open Sans 700 64/1.2 in the Edrana gradient, label 16/24 bold 8 below), CTA 48 below.
 * Mobile ≤767 (375 frame): padding 72 / 16; heading, text 16 below; photo 343 × 244 (radius 20)
 *   48 below; stats 48 below (two 154 columns, rows and columns 24 apart; value 36/1.2, label
 *   14/20 bold); CTA full width 40 below.
 * Tablet (derived): 768–1023 stacked as on mobile with tablet type sizes; 1024–1199 side by side
 *   as on desktop with the 56-step gaps.
 * The stat value size follows the stats column width: 10.5cqi is 64 px in the 609 px desktop
 *   column and 36 px in the 343 px mobile column, capped by the display token, so "200 000+"
 *   always fits its grid column (no horizontal overflow at any width).
 */

.rk-stats-media {
	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--gradient--section-fade);
	color: var(--wp--preset--color--contrast);
}

.rk-stats-media__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

/* ---------- Head ---------- */

.rk-stats-media__head {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.rk-stats-media .rk-stats-media__heading {
	margin: 0;
	overflow-wrap: break-word;
	text-wrap: balance; /* below 1200: even lines (pretty did not fix lone words in Chrome); 1400+: Figma breaks, see end */
}

.rk-stats-media .rk-stats-media__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

/* ---------- Photo with the brand arc ---------- */

.rk-stats-media__media {
	position: relative;
	aspect-ratio: 591 / 420;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
}

/* The arc overlay has the photo frame's own size and ratio (assets/img/README.md § Brand arcs). */
.rk-stats-media .rk-stats-media__photo,
.rk-stats-media .rk-stats-media__arc {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

.rk-stats-media .rk-stats-media__photo {
	object-fit: cover;
}

.rk-stats-media__arc {
	pointer-events: none;
}

/* ---------- Stats and CTA ---------- */

.rk-stats-media__body {
	--rk-stats-col-gap: var(--wp--preset--spacing--50);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--20));
	min-width: 0;
}

/*
 * Mobile (all Figma 375 frames, e.g. 967:9807, 1018:23135): two 154 px columns 24 apart in the
 * 343 px column, kept in that ratio (cqi of the body) so narrower phones scale down.
 * Desktop columns: see the min-width: 768px block.
 */
.rk-stats-media__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, calc(100cqi * 154 / 343)));
	gap: var(--wp--preset--spacing--50) var(--rk-stats-col-gap);
	align-items: start;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rk-stats-media__stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.rk-stats-media .rk-stats-media__value {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 0.05em;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: min(var(--wp--preset--font-size--display), 10.5cqi);
	font-weight: 700;
	line-height: 1.2;
	/* break-word (not anywhere): a value still wraps rather than overflow, but its min-content
	   stays the whole value, so the desktop grid never squeezes "200 000+" onto two lines. */
	overflow-wrap: break-word;
	/* Every value row keeps the full value line (77 at 1440, 43 at 375), also for smaller values. */
	min-block-size: calc(min(var(--wp--preset--font-size--display), 10.5cqi) * 1.2);
}

/* Long words ("Neribotas") are set smaller and centred in the row, as in Figma 943:3696 (55 in 77). */
.rk-stats-media .rk-stats-media__value--long {
	align-items: center;
	font-size: min(calc(var(--wp--preset--font-size--display) * 0.86), 9cqi);
}

.rk-stats-media__number,
.rk-stats-media__suffix {
	background: var(--wp--preset--gradient--edrana);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* "greičiau" next to "4x": 24/32 against a 64 value, 8 above the value's baseline box (309:8255). */
.rk-stats-media__suffix {
	padding-block-end: 0.125em;
	font-size: 0.375em;
	line-height: 1.333;
}

/* Flags: 48 px circles (34 on mobile), 12 px overlap, centred in the value line (1.2em). */
.rk-stats-media .rk-stats-media__value--flags {
	--rk-flag-size: 34px;
	flex-wrap: nowrap;
	align-items: center;
	block-size: 1.2em;
}

.rk-stats-media__flag {
	flex: none;
	inline-size: var(--rk-flag-size);
	block-size: var(--rk-flag-size);
	margin-inline-end: calc(-1 * var(--wp--preset--spacing--30));
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
}

.rk-stats-media__flag:last-child {
	margin-inline-end: 0;
}

.rk-stats-media .rk-stats-media__flag img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.rk-stats-media .rk-stats-media__value--image {
	block-size: 1.2em;
}

.rk-stats-media .rk-stats-media__value-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.rk-stats-media .rk-stats-media__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.43;
}

/* Mobile: full-width CTA; the ring sits outside the pill, so the pill leaves room for it. */
.rk-stats-media__body .rk-stats-media__cta {
	inline-size: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
}

@media (forced-colors: active) {
	.rk-stats-media__number,
	.rk-stats-media__suffix {
		background: none;
		color: CanvasText;
	}
}

/* ---------- Tablet and desktop ---------- */

@media (min-width: 768px) {
	.rk-stats-media .rk-stats-media__text {
		line-height: 1.5;
	}

	.rk-stats-media__body {
		--rk-stats-col-gap: var(--wp--preset--spacing--70);
		gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
	}

	/*
	 * "standard" (home, sectors): first column as wide as its content, at most 281 of the 609
	 * column; the second takes the rest, its labels wrap at 254 (home 200 | 56 | rest, sectors
	 * 281 | 56 | 254: 104:383, 941:3372). "compact" (Apie mus 339:2259): labels do not size the
	 * first column, so it is as wide as the widest value (200) and its labels wrap inside it.
	 * The second column never gets narrower than its widest value (min-content).
	 */
	.rk-stats-media__stats {
		grid-template-columns: fit-content(calc(100cqi * 281 / 609)) minmax(min-content, 1fr);
		row-gap: var(--wp--preset--spacing--60);
	}

	.rk-stats-media__stat:nth-child(2n) .rk-stats-media__label {
		max-inline-size: calc(100cqi * 254 / 609);
	}

	.rk-stats-media--cols-compact .rk-stats-media__label {
		contain: inline-size;
	}

	.rk-stats-media--cols-compact .rk-stats-media__stat:nth-child(2n) .rk-stats-media__label {
		max-inline-size: none;
	}

	.rk-stats-media .rk-stats-media__value--flags {
		--rk-flag-size: 48px;
	}

	.rk-stats-media .rk-stats-media__label {
		line-height: 1.5;
	}

	/* Pill 200 wide as in Figma (nav button width + 32). */
	.rk-stats-media__body .rk-stats-media__cta {
		inline-size: auto;
		min-inline-size: calc(var(--wp--custom--button--nav-width) + var(--wp--preset--spacing--60));
	}
}

@media (min-width: 1024px) {
	.rk-stats-media__inner {
		--rk-stats-media-cols: minmax(0, 591fr) minmax(0, 609fr);
		grid-template-columns: var(--rk-stats-media-cols);
		column-gap: var(--wp--preset--spacing--70);
		row-gap: var(--wp--preset--spacing--70);
	}

	.rk-stats-media--media-right .rk-stats-media__inner {
		--rk-stats-media-cols: minmax(0, 609fr) minmax(0, 591fr);
		grid-auto-flow: row dense;
	}

	/* Heading over the photo column, text over the stats column, bottom-aligned. */
	.rk-stats-media__head {
		grid-column: 1 / -1;
		grid-template-columns: var(--rk-stats-media-cols);
		grid-template-columns: subgrid;
		column-gap: inherit;
		align-items: end;
	}

	.rk-stats-media__media {
		grid-column: 1;
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-stats-media__body {
		grid-column: 2;
	}

	.rk-stats-media--media-right .rk-stats-media__media {
		grid-column: 2;
	}

	.rk-stats-media--media-right .rk-stats-media__body {
		grid-column: 1;
	}

	.rk-stats-media--no-media .rk-stats-media__body {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.rk-stats-media__inner {
		column-gap: calc(3 * var(--wp--preset--spacing--60));
	}
}

/* Headings (Otilija 2026-10-08): stacked layouts (768–1199) use the full column
   and balanced lines; from 1400 (near the 1440 design width) the Figma line breaks (greedy wrap); 1200–1399 stays balanced. */
@media (min-width: 1400px) {
	.rk-stats-media .rk-stats-media__heading {
		text-wrap: wrap;
	}
}