/*
 * rekos/media-text (Figma solution promo 151:3700 / 1008:4595; "Vienas tiekėjas" 207:4658,
 * 601:3200; sectors 806:5616 / 1018:22683; Apie mus team 339:2691 / 1028:5191).
 * Tokens only. Literal values only for breakpoints, aspect ratios, 0, percentages, unitless
 * line heights and Figma geometry (the 518 photo, 554 / 592 / 498 text columns, the 595 sector
 * frame, logo heights and the arrow circles).
 * Rules that override theme.json element styles (h2, p, links) start with .rk-media-text so
 * they beat the global styles whatever the load order.
 *
 * Desktop ≥1200 (1440 frame): padding 80; photo 518 × 420 (radius 30 → card 32) and text
 *   column 554 (592 with bullets, 498 with text_width "narrow"), 96 apart, centred as a group,
 *   vertically centred; with logo cards (sectors) a 595 high section, padding 56.
 *   Heading H36 across the whole text column (Figma's 476 measure dropped 2026-10-08), 24 to
 *   the text (16 on the fade solution promos; 18/28; 16/24 with bullets), 24 to the bullets (Open Sans 700 16/24, disc, 8 apart);
 *   40 to the logo cards / CTA.
 *   Logo cards: 2 in a row, 12 apart, padding 24, radius 18 (→ media 20), logo 50 high,
 *   30 px navy arrow circle top right. CTA ring button, pill 200 wide.
 * Mobile ≤767 (375 frame): padding 72 / 16; one column, 48 between photo and text;
 *   photo 343 × 278 (radius 20); heading H30, 16 to the text (14/20) and bullets (14/20 bold);
 *   24 to the logo cards (stacked, 12 apart, padding 12/16, radius 12, logo 30, 24 px circle)
 *   and the full-width CTA.
 * Tablet (derived): 768–1023 one centred column as wide as the desktop text column (554 / 592)
 *   with the desktop type and card sizes; 1024–1199 side by side with a 40–48 px gap.
 */

.rk-media-text {
	--rk-mt-media: 518px;
	--rk-mt-text: 554px;
	--rk-mt-media-fr: 518fr;
	--rk-mt-text-fr: 554fr;
	--rk-mt-gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Apie mus team (339:2691): the text column is 592 wide. */
.rk-media-text--has-list {
	--rk-mt-text: 592px;
	--rk-mt-text-fr: 592fr;
}

/* text_width "narrow": the Profit People promos on HR, DU, Darbo laikas, Savitarna (151:3703) are 498 wide. */
.rk-media-text--narrow {
	--rk-mt-text: 498px;
	--rk-mt-text-fr: 498fr;
}

/* Figma mobile: white → 60 % tint at 7 % → 90 % tint (≈ surface-2) at the bottom. */
.rk-media-text--bg-fade {
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--base) 0%,
		color-mix(in srgb, var(--wp--preset--color--surface-2) 67%, var(--wp--preset--color--base)) 7%,
		var(--wp--preset--color--surface-2) 100%
	);
}

.rk-media-text__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
	align-items: center;
}

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

.rk-media-text__media {
	position: relative;
	aspect-ratio: 518 / 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-media-text .rk-media-text__photo,
.rk-media-text .rk-media-text__arc {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

.rk-media-text .rk-media-text__photo {
	object-fit: cover;
}

.rk-media-text__arc {
	pointer-events: none;
}

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

.rk-media-text__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
}

.rk-media-text__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
}

/*
 * The heading uses the whole text column (554 / 592 / 498), not Figma's 476 measure (22ch):
 * Otilija 2026-10-08, short titles such as "Viskas iš vienų rankų" stay on one line when the
 * column fits them. Longer ones (or a phone) break into even lines, never a lone last word.
 */
.rk-media-text .rk-media-text__heading {
	max-inline-size: none;
	margin: 0;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.rk-media-text .rk-media-text__text {
	--rk-mt-line: 1.43;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--rk-mt-line);
}

.rk-media-text .rk-media-text__text p {
	margin: 0;
}

/* A blank line in the field = one empty line between paragraphs (Figma 753:2059). */
.rk-media-text .rk-media-text__text p + p {
	margin-block-start: calc(var(--rk-mt-line) * 1em);
}

/* A list typed in the WYSIWYG text (since 2026-10-09): one empty line from the paragraphs. */
.rk-media-text .rk-media-text__text :is(ul, ol) {
	margin: 0;
	padding-inline-start: 1.5em;
}

.rk-media-text .rk-media-text__text > :is(p, ul, ol) + :is(ul, ol),
.rk-media-text .rk-media-text__text > :is(ul, ol) + p {
	margin-block-start: calc(var(--rk-mt-line) * 1em);
}

.rk-media-text .rk-media-text__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.rk-media-text .rk-media-text__text a:hover {
	color: var(--wp--preset--color--primary);
}

.rk-media-text .rk-media-text__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding-inline-start: 1.5em;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.43;
	list-style: disc;
}

.rk-media-text__list li {
	margin: 0;
	padding: 0;
}

/* ---------- Product logo cards (806:5622 / 1018:22966) ---------- */

.rk-media-text__logos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rk-media-text__logo-item {
	min-width: 0;
	margin: 0;
}

/* Figma #F5F5FB: 4.4 % indigo on white (surface where color-mix is missing). */
.rk-media-text .rk-media-text__logo-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	block-size: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--surface);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 4.4%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rk-media-text .rk-media-text__logo {
	display: block;
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	height: 30px;
	min-width: 0;
	object-fit: contain;
	object-position: left center;
}

.rk-media-text__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-media-text__arrow .rk-icon {
	inline-size: 12px;
	block-size: 12px;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

/* Hover and keyboard focus (derived states, not drawn in Figma). */
.rk-media-text__logo-card--link:hover .rk-media-text__arrow,
.rk-media-text__logo-card--link:focus-visible .rk-media-text__arrow {
	background: var(--wp--preset--color--primary);
}

.rk-media-text__logo-card--link:hover .rk-media-text__arrow .rk-icon {
	transform: translate(1px, -1px);
}

/* ---------- CTA ---------- */

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

/* ---------- Editor placeholder ---------- */

.rk-media-text__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

@media (prefers-reduced-motion: reduce) {
	.rk-media-text__arrow,
	.rk-media-text__arrow .rk-icon {
		transition: none;
	}

	.rk-media-text__logo-card--link:hover .rk-media-text__arrow .rk-icon {
		transform: none;
	}
}

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

@media (min-width: 768px) {
	/* Figma desktop: white → 90 % tint at 56 %, then flat (≈ surface-2). */
	.rk-media-text--bg-fade {
		background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--surface-2) 56%);
	}

	/* Tablet: one centred column as wide as the desktop text column (554 / 592), photo on top. */
	.rk-media-text__inner {
		gap: var(--wp--preset--spacing--70);
		max-inline-size: var(--rk-mt-text);
	}

	.rk-media-text__content {
		gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--20));
	}

	.rk-media-text__body {
		gap: var(--wp--preset--spacing--50);
	}

	/* Solution promos (the fade background): heading → text 16 (151:3700, 753:2059); the others 24. */
	.rk-media-text--bg-fade .rk-media-text__body {
		gap: var(--wp--preset--spacing--40);
	}

	/* Without bullets the text is the 18/28 lead size; with bullets 16/24 (339:2709). */
	.rk-media-text .rk-media-text__text {
		--rk-mt-line: 1.556;
		font-size: var(--wp--preset--font-size--md);
	}

	.rk-media-text--has-list .rk-media-text__text {
		--rk-mt-line: 1.5;
		font-size: var(--wp--preset--font-size--base);
	}

	.rk-media-text .rk-media-text__list {
		line-height: 1.5;
	}

	.rk-media-text__logos {
		flex-direction: row;
	}

	.rk-media-text__logo-item {
		flex: 1 1 0;
	}

	.rk-media-text .rk-media-text__logo-card {
		align-items: flex-start;
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--media);
	}

	.rk-media-text .rk-media-text__logo {
		height: 50px;
	}

	.rk-media-text__arrow {
		inline-size: 30px;
		block-size: 30px;
	}

	.rk-media-text__arrow .rk-icon {
		inline-size: 18px;
		block-size: 18px;
	}

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

@media (min-width: 1024px) {
	/* Photo and text side by side, centred as one group of at most 518 + gap + 554 (592). */
	.rk-media-text__inner {
		grid-template-columns: minmax(0, var(--rk-mt-media-fr)) minmax(0, var(--rk-mt-text-fr));
		column-gap: var(--rk-mt-gap);
		max-inline-size: calc(var(--rk-mt-media) + var(--rk-mt-gap) + var(--rk-mt-text));
	}

	.rk-media-text--media-right .rk-media-text__inner {
		grid-template-columns: minmax(0, var(--rk-mt-text-fr)) minmax(0, var(--rk-mt-media-fr));
	}

	/* Only text (no photo) or only a photo: one centred column. */
	.rk-media-text--single .rk-media-text__inner {
		grid-template-columns: minmax(0, 1fr);
		max-inline-size: var(--rk-mt-text);
	}

	.rk-media-text--single .rk-media-text__media {
		justify-self: center;
		inline-size: 100%;
		max-inline-size: var(--rk-mt-media);
	}

	.rk-media-text__media {
		border-radius: var(--wp--custom--radius--card);
	}
}

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

	/*
	 * Sectors "Viskas iš vienų rankų" (with logo cards, 806:5616 …): a 595 high frame, text and
	 * photo centred in it (text 459–487 high, so 54–69 above and below instead of 80).
	 */
	.rk-media-text--has-logos {
		padding-block: var(--wp--preset--spacing--70);
	}

	.rk-media-text--has-logos .rk-media-text__inner {
		min-block-size: calc(595px - 2 * var(--wp--preset--spacing--70));
	}
}