/*
 * rekos/comparison-columns.
 * Figma HR 151:2183 (1440 × 1084 with 6 + 6 rows) / mobile 1006:3146 (375 × 1152),
 * toggle states 1008:3435 ("Su": logo button active) and 1008:3436 ("Be": text button
 * active). Spec. moduliai 361:6142 has the same geometry (Edrana Baltic logo 137 × 50).
 * Tokens only; literal values only for breakpoints, percentages, 1px hairlines, unitless
 * line-heights and component geometry (icons 32 / 20, logos 50 / 36, toggle buttons
 * 116 × 60). Rules that override theme.json element styles (h2, h3, links) start with
 * .rk-comparison-columns so they win whatever the load order.
 *
 * Background (both): white → surface-2 at 56 %, then surface-2 (Figma: #E9F4FD at 0 → 90 %
 * opacity over white, flattened).
 * Desktop (≥1200): padding 80; head centred (H2, 24, intro 16/24 in a 498 measure); 56 to
 * the card. Card 1136 (content − 2 × 80), white, radius 32 (Figma 30), padding 24, two
 * 532 columns 24 apart. Column = title row 50 high (left: H20/28 bold at the top, right:
 * logo 50 high), 24, list box (padding 24 + 1 px border, radius 32, rows 16 apart).
 * Left box white with no visible border; right box surface with a 1 px Edrana-gradient
 * border. Rows: 32 px icon (close navy 60 % / check gradient), 24, B16/24. Left and right
 * rows are paired: each row pair is as tall as its taller text (subgrid). 32 to the ring
 * CTA (200 × 44 + ring), centred.
 * Mobile (≤767): padding 72; head left-aligned: H2 30/42, 16, intro B14/20; 48 to the card.
 * Card white, radius 20, padding 24 / 16, gap 16: toggle (two 116 × 60 pill buttons, 12
 * apart, 1 px navy outline; active = navy fill: white text / gradient + white logo 36
 * high), list box (padding 16 + 1 px gradient border, radius 20, rows 16 apart, 20 px
 * icon, 12, B14/20; right box surface, left box white). The box keeps the taller list's
 * height when switching (Figma 1008:3504 is 594 high in the "Be" state). 32 to the
 * full-width CTA. Without JS: no toggle; both panels with their titles, one under the other.
 * Tablet (768–1199, derived): desktop structure on the full content width, icon gap 16.
 */

.rk-comparison-columns {
	--rk-cc-tab-width: 116px;
	--rk-cc-tab-height: 60px;
	--rk-cc-logo: 36px;
	--rk-cc-icon: 20px;

	padding-block: var(--wp--preset--spacing--80);
	background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--surface-2) 56%);
	color: var(--wp--preset--color--contrast);
}

.rk-comparison-columns__inner {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

/* ---------- Heading ---------- */

.rk-comparison-columns__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.rk-comparison-columns .rk-comparison-columns__heading {
	margin: 0;
	color: inherit;
	overflow-wrap: break-word;
	text-wrap: balance;
}

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

/* ---------- Card, panels, lists (mobile first) ---------- */

.rk-comparison-columns__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--60);
	min-width: 0;
}

.rk-comparison-columns__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
}

.rk-comparison-columns__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.rk-comparison-columns .rk-comparison-columns__title {
	display: flex;
	justify-content: center;
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.556;
	text-align: center;
	text-transform: none;
}

.rk-comparison-columns__logo {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: var(--rk-cc-logo);
	object-fit: contain;
}

.rk-comparison-columns__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: calc(var(--wp--preset--spacing--40) + 1px);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
	list-style: none;
}

.rk-comparison-columns__panel--with .rk-comparison-columns__list {
	background: var(--wp--preset--color--surface);
}

/* 1px Edrana-gradient border: the border area of a masked box (the .rk-btn--ring technique). */
.rk-comparison-columns__list::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--wp--preset--gradient--edrana);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.rk-comparison-columns__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

.rk-comparison-columns__icon.rk-icon {
	inline-size: var(--rk-cc-icon);
	block-size: var(--rk-cc-icon);
}

/* Figma: close icon navy at 60 % opacity; check icon in the Edrana gradient (.rk-icon--brand). */
.rk-comparison-columns__icon--close {
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
}

.rk-comparison-columns__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Mobile: the ring button fills the column (stretch keeps the ring margins inside). */
.rk-comparison-columns .rk-comparison-columns__cta {
	display: flex;
}

.rk-comparison-columns__empty {
	padding: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- Mobile toggle (only below 768 px and only with JS: html.js from head.js) ---------- */

.rk-comparison-columns__tabs {
	display: none;
}

.rk-comparison-columns .rk-comparison-columns__tab {
	display: inline-flex;
	flex: 0 0 var(--rk-cc-tab-width);
	align-items: center;
	justify-content: center;
	inline-size: var(--rk-cc-tab-width);
	min-block-size: var(--rk-cc-tab-height);
	margin: 0;
	/*
	 * Figma draws the 1px stroke inside the 116 × 60 box: 12 − 1 keeps the logo button 60 high.
	 * Sides 12 (Figma 25): ~90 px for the label, so a longer desktop label (D31, "Be Edrana
	 * Baltic") still wraps to 2 lines and the button stays 60 high.
	 */
	padding: calc(var(--wp--preset--spacing--30) - 1px) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-comparison-columns .rk-comparison-columns__tab--logo {
	padding-inline: var(--wp--preset--spacing--40);
}

.rk-comparison-columns .rk-comparison-columns__tab[aria-selected="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: default;
}

/* Hover (derived, not drawn in Figma): light fill on the idle button. */
.rk-comparison-columns .rk-comparison-columns__tab[aria-selected="false"]:hover {
	background: var(--wp--preset--color--surface-2);
}

.rk-comparison-columns__tab-label {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Idle button: colour logo; active (navy) button: gradient + white logo. */
.rk-comparison-columns__tab[aria-selected="true"] .rk-comparison-columns__logo:not(.rk-comparison-columns__logo--light),
.rk-comparison-columns__tab[aria-selected="false"] .rk-comparison-columns__logo--light {
	display: none;
}

@media (max-width: 767px) {
	html.js .rk-comparison-columns--tabs .rk-comparison-columns__tabs {
		display: flex;
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
	}

	/* Both panels share one grid cell, so the box keeps the taller list's height. */
	html.js .rk-comparison-columns--tabs .rk-comparison-columns__card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	html.js .rk-comparison-columns--tabs .rk-comparison-columns__panel {
		grid-row: 2;
		grid-column: 1;
	}

	html.js .rk-comparison-columns--tabs .rk-comparison-columns__panel:not(.is-active) {
		visibility: hidden;
	}

	/* The toggle buttons name the panels; the titles would repeat them. */
	html.js .rk-comparison-columns--tabs .rk-comparison-columns__title {
		display: none;
	}

	html.js .rk-comparison-columns--tabs .rk-comparison-columns__list {
		flex: 1 1 auto;
	}
}

/* ---------- Tablet (derived) and desktop: two columns, paired rows ---------- */

@media (min-width: 768px) {
	.rk-comparison-columns {
		--rk-cc-icon: 32px;
	}

	.rk-comparison-columns__inner {
		gap: var(--wp--preset--spacing--70);
	}

	.rk-comparison-columns__head {
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		text-align: center;
	}

	.rk-comparison-columns__intro {
		/* Figma wraps the intro at 498 px (16 px text): a measure, not a token. */
		max-inline-size: 31.125em;
		line-height: 1.5;
	}

	.rk-comparison-columns__body {
		align-items: center;
	}

	/* Pill 200 wide as in Figma 182:1092 (nav button width + 32). */
	.rk-comparison-columns .rk-comparison-columns__cta {
		display: inline-flex;
		min-inline-size: calc(var(--wp--custom--button--nav-width) + var(--wp--preset--spacing--60));
	}

	.rk-comparison-columns__card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto repeat(var(--rk-cc-rows, 1), auto);
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--40);
		inline-size: 100%;
		padding: var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-comparison-columns--single .rk-comparison-columns__card {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Each panel spans every row; its title and list rows follow the card's rows. */
	.rk-comparison-columns__panel {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		gap: inherit;
	}

	.rk-comparison-columns__panel--without {
		grid-column: 1;
	}

	.rk-comparison-columns__panel--with {
		grid-column: 2;
	}

	.rk-comparison-columns--single .rk-comparison-columns__panel {
		grid-column: 1;
	}

	.rk-comparison-columns .rk-comparison-columns__title {
		grid-row: 1;
		align-items: flex-start;
		min-block-size: 50px;
		/* Card row gap 16 + 8 = Figma's 24 between the title row and the list box. */
		margin-block-end: calc(var(--wp--preset--spacing--50) - var(--wp--preset--spacing--40));
		line-height: 1.4;
	}

	.rk-comparison-columns__title--logo {
		--rk-cc-logo: 50px;
	}

	.rk-comparison-columns__list {
		display: grid;
		grid-row: 2 / -1;
		grid-template-rows: subgrid;
		gap: inherit;
		padding: calc(var(--wp--preset--spacing--50) + 1px);
		border-radius: var(--wp--custom--radius--card);
	}

	/* Desktop: the left box has no visible border (Figma: white stroke on white). */
	.rk-comparison-columns__panel--without .rk-comparison-columns__list::before {
		display: none;
	}

	.rk-comparison-columns__item {
		gap: var(--wp--preset--spacing--40);
		line-height: 1.5;
	}

	/* Browsers without subgrid: plain columns (rows do not line up across, nothing breaks). */
	@supports not (grid-template-rows: subgrid) {
		.rk-comparison-columns__panel {
			display: flex;
			flex-direction: column;
			gap: var(--wp--preset--spacing--40);
		}

		.rk-comparison-columns__list {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
		}
	}
}

@media (min-width: 1200px) {
	.rk-comparison-columns__card {
		max-inline-size: calc(100% - 2 * var(--wp--preset--spacing--80));
	}

	.rk-comparison-columns__item {
		gap: var(--wp--preset--spacing--50);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rk-comparison-columns .rk-comparison-columns__tab {
		transition: none;
	}
}