/*
 * rekos/problem-solution-cards (Figma 610:6771 desktop 1440 × 1248, 1018:20837 mobile 375 × 880).
 * Tokens only. Literal values only for breakpoints, 0, 1px lines, percentages, opacities,
 * unitless line heights, the mask colour, icon geometry (38 px circles, 24 / 18 px icons,
 * 52 / 38 px icon column) and the motion timings / scales (§ Motion).
 * Rules that override theme.json element styles (h2, h3) start with .rk-problem-solution-cards
 * so they beat the global styles whatever the load order.
 *
 * Desktop ≥1200 (1440 frame): padding 80; header centred: H2 36, intro 16/24 in a 498 measure,
 *   24 apart; 56 to the cards. 3 columns of 353 (icon column 52 | 24 | text 277), 48 apart,
 *   centred (1155 wide); card rows 56 apart. No card background. Icon column: 24 px gradient
 *   icon in a 38 px circle, 1 px white line down to a 38 px white circle with an 18 px gradient
 *   check. Text column: title 18/28 bold, challenge 14/20 8 below; 32 below, the solution 14/20
 *   level with the check circle. In each row all solutions start at the same height.
 *   Decorative line (610:6772): 1 px Edrana gradient at 30 %, a box 44 px outside the grid,
 *   from 64 px below the row top to 28 px below the row, radius 32 (Figma 30), open at the top
 *   where it turns outward to both screen edges. CTA ring button centred, 56 below.
 * Mobile ≤767 (375 frame): padding 72 / 16; header left: H2 30, intro 14/20, 16 apart; 48 to
 *   the cards: scroll-snap carousel, cards 310 of 343, 12 apart, all as tall as the tallest and
 *   the solutions (check circles) level, as on desktop (D81; Figma: each card as tall as its own
 *   content), white, radius 20, padding 16,
 *   icon column 38 | 12 | text; line #F3F9FE (surface), check circle on the section fade.
 *   Decorative line (1018:20838): a 48 high box 72 px above the cards, 4 px inside the content,
 *   radius 12 (Figma 10.7). Progress bar 2 px, 24 below; CTA full width 24 below.
 * Tablet 768–1199 (derived): desktop look in 2 columns.
 * Motion (view.js, § Motion at the end): each card's icon → line → check sequence once, the
 *   decorative line drawn from the left once.
 */

.rk-problem-solution-cards {
	container-type: inline-size;
	overflow-x: clip;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--80);
	/* Figma: transparent → #E9F4FD 90 % at 56 %, then flat: base → surface-2. */
	background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--surface-2) 56%);
	color: var(--wp--preset--color--contrast);
}

.rk-problem-solution-cards__inner {
	display: flex;
	flex-direction: column;
}

/* ---------- Header ---------- */

.rk-problem-solution-cards__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

.rk-problem-solution-cards .rk-problem-solution-cards__heading {
	margin: 0;
	color: inherit;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.rk-problem-solution-cards .rk-problem-solution-cards__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

/* ---------- Cards: phone carousel (base) ---------- */

.rk-problem-solution-cards__list {
	position: relative;
	min-width: 0;
}

/*
 * The track runs to both edges of the section (negative margins of one side gutter, measured in
 * the section's container units), so the first card lines up with the content and the next one
 * peeks in. It is a grid of two rows that each card spans (a subgrid from 768 px, see below).
 */
.rk-problem-solution-cards__track {
	--rk-psc-bleed: max(var(--wp--style--root--padding-left), calc((100cqw - var(--wp--style--global--content-size)) / 2));
	position: relative;
	display: grid;
	grid-auto-columns: calc(100% - var(--wp--preset--spacing--60));
	grid-auto-flow: column;
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0;
	margin: 0 calc(-1 * var(--rk-psc-bleed));
	padding: 0 var(--rk-psc-bleed);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rk-psc-bleed);
	-webkit-overflow-scrolling: touch;
}

.rk-problem-solution-cards__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.rk-problem-solution-cards__card {
	display: grid;
	grid-row: span 2;
	grid-template-columns: 38px minmax(0, 1fr);
	/* Fallback first; browsers with subgrid share the two rows with the other cards. */
	grid-template-rows: auto 1fr;
	grid-template-rows: subgrid;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0;
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
	scroll-snap-align: start;
}

/* Icon column: icon circle, then the line that runs down to the check circle. */
.rk-problem-solution-cards__rail {
	display: flex;
	grid-row: 1;
	grid-column: 1;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

.rk-problem-solution-cards__card--has-solution .rk-problem-solution-cards__rail::after {
	content: "";
	flex: 1 1 auto;
	inline-size: 1px;
	/* Figma #F3F9FE on the white card. */
	background: var(--wp--preset--color--surface);
}

.rk-problem-solution-cards__icon,
.rk-problem-solution-cards__check {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: var(--wp--custom--radius--pill);
}

.rk-problem-solution-cards__icon .rk-icon {
	inline-size: 24px;
	block-size: 24px;
}

.rk-problem-solution-cards__check {
	grid-row: 2;
	grid-column: 1;
	align-self: start;
	justify-self: center;
	/* Figma: the section fade (transparent → #E9F4FD) inside the white card. */
	background: var(--wp--preset--gradient--section-fade);
}

.rk-problem-solution-cards__check .rk-icon {
	inline-size: 18px;
	block-size: 18px;
}

.rk-problem-solution-cards__problem {
	display: flex;
	grid-row: 1;
	grid-column: 2;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.rk-problem-solution-cards__card--has-solution .rk-problem-solution-cards__problem {
	padding-block-end: var(--wp--preset--spacing--60);
}

.rk-problem-solution-cards .rk-problem-solution-cards__title {
	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-transform: none;
	overflow-wrap: break-word;
}

.rk-problem-solution-cards .rk-problem-solution-cards__text,
.rk-problem-solution-cards .rk-problem-solution-cards__solution {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.43;
	overflow-wrap: break-word;
}

.rk-problem-solution-cards .rk-problem-solution-cards__solution {
	grid-row: 2;
	grid-column: 2;
	min-width: 0;
}

/* ---------- Decorative line (Figma 610:6772 desktop, 1018:20838 phone) ---------- */

/*
 * A 1 px Edrana-gradient line at 30 %: a box open at the top (::before draws the sides and the
 * rounded bottom) whose top corners turn outward into two "wings" that run to the section
 * edges (the section clips them). Each part is a gradient background masked down to its
 * 1 px border (the technique of .rk-btn--ring). The opacity sits on the group, so the
 * 1 px overlaps where the parts meet do not darken.
 */
.rk-problem-solution-cards__line {
	--rk-psc-line-r: var(--wp--custom--radius--input);
	position: absolute;
	z-index: -1;
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0.3;
	pointer-events: none;
}

.rk-problem-solution-cards__line::before,
.rk-problem-solution-cards__wing {
	content: "";
	position: absolute;
	-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;
}

.rk-problem-solution-cards__line::before {
	inset: var(--rk-psc-line-r) 0 0;
	padding: 0 1px 1px;
	border-radius: 0 0 var(--rk-psc-line-r) var(--rk-psc-line-r);
	background: var(--wp--preset--gradient--edrana);
}

.rk-problem-solution-cards__wing {
	inset-block-start: 0;
	inline-size: 100vw;
	block-size: calc(var(--rk-psc-line-r) + 1px);
}

/* Left wing: the gradient's first colour (the gradient stretched so wide that only its start shows). */
.rk-problem-solution-cards__wing--start {
	inset-inline-end: calc(100% - 1px);
	padding: 1px 1px 0 0;
	border-start-end-radius: var(--rk-psc-line-r);
	background: var(--wp--preset--gradient--edrana) 0 0 / 100000% 100% no-repeat;
}

/* Right wing: the gradient's last colour. */
.rk-problem-solution-cards__wing--end {
	inset-inline-start: calc(100% - 1px);
	padding: 1px 0 0 1px;
	border-start-start-radius: var(--rk-psc-line-r);
	background: var(--wp--preset--gradient--edrana) 100% 0 / 100000% 100% no-repeat;
}

/* Phone: a 48 px high box 72 px above the cards (it sits under the end of the intro). */
.rk-problem-solution-cards__line--bracket {
	display: block;
	inset-block-start: calc(-1 * (var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40) + var(--wp--preset--spacing--50)));
	inset-inline: var(--wp--preset--spacing--10);
	block-size: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

/* ---------- Progress bar (phone, shown by view.js) and CTA ---------- */

.rk-problem-solution-cards__progress {
	display: none;
}

.rk-problem-solution-cards__progress-bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--rk-psc-progress-start, 0%);
	inline-size: var(--rk-psc-progress-size, 100%);
	border-radius: inherit;
	background: var(--wp--preset--color--contrast);
}

.rk-problem-solution-cards__cta-wrap {
	margin-block-start: var(--wp--preset--spacing--50);
}

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

.rk-problem-solution-cards__empty {
	padding: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 767px) {
	/*
	 * Phones use the same shared subgrid rows as desktop (Otilija 2026-10-12, D81): every card as
	 * tall as the tallest, every solution and check circle starting at the same height, spare
	 * space under the shorter texts. Figma 1018:20748 had each card as tall as its own content.
	 */

	/* With JS the progress bar replaces the scrollbar; without JS the scrollbar stays. */
	.js .rk-problem-solution-cards__track {
		scrollbar-width: none;
	}

	.js .rk-problem-solution-cards__track::-webkit-scrollbar {
		display: none;
	}

	/* Figma 1018:20883: 2 px bar, track #C9D5E3 (navy 15 % over the section), thumb navy. */
	.rk-problem-solution-cards__progress:not([hidden]) {
		position: relative;
		display: block;
		block-size: 2px;
		margin-block-start: var(--wp--preset--spacing--50);
		overflow: hidden;
		border-radius: 2px;
		background: var(--wp--preset--color--border);
		background: color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	}
}

/* ---------- Tablet (derived) and desktop: grid ---------- */

@media (min-width: 768px) {
	.rk-problem-solution-cards__header {
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		margin-block-end: var(--wp--preset--spacing--70);
		text-align: center;
	}

	/* 498 px measure at 1440 (content 1296 × 0.385). */
	.rk-problem-solution-cards .rk-problem-solution-cards__intro {
		max-inline-size: calc(var(--wp--style--global--content-size) * 0.385);
		line-height: 1.5;
	}

	/*
	 * Grid of 2 columns (3 from 1200). The space between card rows is the solution's bottom
	 * padding, so the subgrid rows hold no gap of their own; the negative bottom margin takes
	 * the last row's padding back.
	 */
	.rk-problem-solution-cards__track {
		--rk-psc-row-gap: var(--wp--preset--spacing--70);
		--rk-psc-grid-w: calc(100cqw - 2 * var(--wp--style--root--padding-left));
		/* Decorative box: 44 px outside the grid, less where the side space is narrow. */
		--rk-psc-frame-x: min(calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--30)), calc((100cqw - var(--rk-psc-grid-w)) / 4));
		grid-auto-columns: auto;
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		column-gap: var(--wp--preset--spacing--60);
		margin: 0 0 calc(-1 * var(--rk-psc-row-gap));
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.rk-problem-solution-cards__card {
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.rk-problem-solution-cards__card--has-solution .rk-problem-solution-cards__rail::after {
		background: var(--wp--preset--color--base);
	}

	.rk-problem-solution-cards__check {
		background: var(--wp--preset--color--base);
	}

	.rk-problem-solution-cards .rk-problem-solution-cards__solution {
		padding-block-end: var(--rk-psc-row-gap);
	}

	/* Desktop box around the first card row (an absolutely placed grid item: it takes no cell). */
	.rk-problem-solution-cards__line--bracket {
		display: none;
	}

	.rk-problem-solution-cards__line--frame {
		--rk-psc-line-r: var(--wp--custom--radius--card);
		display: block;
		grid-row: 1 / span 2;
		grid-column: 1 / -1;
		inset-block: calc(2 * var(--wp--preset--spacing--60)) calc(var(--rk-psc-row-gap) / 2);
		inset-inline: calc(-1 * var(--rk-psc-frame-x));
	}

	.rk-problem-solution-cards__cta-wrap {
		display: flex;
		justify-content: center;
		margin-block-start: var(--wp--preset--spacing--70);
	}

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

@media (min-width: 1200px) {
	.rk-problem-solution-cards__track {
		/* Figma column 353 = 52 + 24 + 277 (content 1296 × 0.2724), 48 apart, centred. */
		--rk-psc-col: calc(var(--wp--style--global--content-size) * 0.2724);
		--rk-psc-gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
		--rk-psc-grid-w: min(calc(3 * var(--rk-psc-col) + 2 * var(--rk-psc-gap)), calc(100cqw - 2 * var(--wp--style--root--padding-left)));
		grid-template-columns: repeat(3, minmax(0, var(--rk-psc-col)));
		justify-content: center;
		column-gap: var(--rk-psc-gap);
	}

	.rk-problem-solution-cards .rk-problem-solution-cards__title {
		font-size: var(--wp--preset--font-size--md);
	}
}

/*
 * ---------- Motion (view.js) ----------
 * Each card plays once as its row scrolls in: the icon pops in with the challenge text, the rail
 * line draws down to the check, the check circle pops in (a slight overshoot) and its tick draws
 * from the left (a clip wipe over the mask icon), the solution text fades in with it. Card
 * timeline (ms from the card's start, --rk-psc-at = its stagger in the row, 0 / 120 / 240):
 *   icon 0 + 450 · challenge 100 + 600 · line 300 + 550 · circle 800 + 400 · tick 950 + 400 ·
 *   solution 900 + 600 → 1.5 s per card.
 * Phones: the white card box fades in over the first 450 ms.
 * The decorative line draws from left to right once, with the first cards that play: a
 * clip-path inset() wipe over the whole line (wings included) from the section's left edge to
 * its right edge (the section is the query container, so 50cqw is half its width and the line
 * is centred in it), 2400 ms, ease-in-out. Vertical parts appear as the wipe passes them.
 *
 * Same contract as base.css § Motion: everything needs html.has-motion (head.js: JS and no
 * prefers-reduced-motion) on screen. view.js sets .is-armed on the list when it takes over,
 * .is-playing (cards) / .is-drawn (lines) when they start and .is-done at the end; it never
 * removes a class, so a passed start state can never match again. Before view.js arms the list,
 * a hold keeps it hidden 2 s and then shows it (script missing, late or failed). The keyframes
 * have no "to" (except the line's wipe, which ends on the whole section), so every animation
 * ends on the element's own, static value. Only opacity, scale, translate and clip-path
 * change: no layout shift. Without JS or with reduced motion: the static design.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	html.has-motion [data-rk-psc-sequence]:not(.is-armed) {
		animation: rk-psc-hold 2600ms;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__rail::after {
		transform-origin: 50% 0;
	}

	/* Start states: armed, not started yet. */
	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card:not(.is-playing):not(.is-done) :is(.rk-problem-solution-cards__icon, .rk-problem-solution-cards__problem, .rk-problem-solution-cards__check, .rk-problem-solution-cards__solution) {
		opacity: 0;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card:not(.is-playing):not(.is-done) .rk-problem-solution-cards__rail::after {
		scale: 1 0;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__line:not(.is-drawn):not(.is-done) {
		clip-path: inset(-1px calc(50% + 50cqw) -1px calc(50% - 50cqw));
	}

	/* The sequence. */
	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__icon {
		animation: rk-psc-pop 450ms var(--wp--custom--motion--ease) var(--rk-psc-at, 0ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__problem {
		animation: rk-psc-text var(--rk-reveal-duration, 600ms) var(--wp--custom--motion--ease) calc(var(--rk-psc-at, 0ms) + 100ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__rail::after {
		animation: rk-psc-rail 550ms var(--wp--custom--motion--ease) calc(var(--rk-psc-at, 0ms) + 300ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__check {
		animation: rk-psc-check 400ms var(--wp--custom--motion--ease) calc(var(--rk-psc-at, 0ms) + 800ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__check .rk-icon {
		animation: rk-psc-tick 400ms var(--wp--custom--motion--ease) calc(var(--rk-psc-at, 0ms) + 950ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) .rk-problem-solution-cards__solution {
		animation: rk-psc-text var(--rk-reveal-duration, 600ms) var(--wp--custom--motion--ease) calc(var(--rk-psc-at, 0ms) + 900ms) backwards;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__line.is-drawn:not(.is-done) {
		animation: rk-psc-draw 2400ms cubic-bezier(0.45, 0, 0.55, 1) backwards; /* Otilija 2026-10-08: slower, even draw (was 2400 ms, ease-in-out) */
	}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	/* Phones: the white card box itself. */
	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card:not(.is-playing):not(.is-done) {
		opacity: 0;
	}

	html.has-motion [data-rk-psc-sequence].is-armed .rk-problem-solution-cards__card.is-playing:not(.is-done) {
		animation: rk-psc-fade 450ms var(--wp--custom--motion--ease) var(--rk-psc-at, 0ms) backwards;
	}
}

/* No 100 % keyframe: it ends on the list's own value (visible), at 2 s. */
@keyframes rk-psc-hold {
	0%,
	77% {
		visibility: hidden;
	}
}

@keyframes rk-psc-fade {
	from {
		opacity: 0;
	}
}

@keyframes rk-psc-pop {
	from {
		opacity: 0;
		scale: 0.6;
	}
}

@keyframes rk-psc-text {
	from {
		opacity: 0;
		translate: 0 var(--wp--preset--spacing--20);
	}
}

@keyframes rk-psc-rail {
	from {
		scale: 1 0;
	}
}

/* The circle: in, a touch past full size, back (subtle). */
@keyframes rk-psc-check {
	0% {
		opacity: 0;
		scale: 0.6;
	}

	60% {
		opacity: 1;
		scale: 1.06;
	}
}

/* The tick (a mask icon): drawn from the left, the way the stroke runs. */
@keyframes rk-psc-tick {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

/* From the section's left edge to its right edge; then the line's own value (no clip). */
@keyframes rk-psc-draw {
	from {
		clip-path: inset(-1px calc(50% + 50cqw) -1px calc(50% - 50cqw));
	}

	to {
		clip-path: inset(-1px calc(50% - 50cqw) -1px calc(50% - 50cqw));
	}
}

@media (forced-colors: active) {
	.rk-problem-solution-cards__icon .rk-icon,
	.rk-problem-solution-cards__check .rk-icon {
		background: CanvasText;
	}
}