/*
 * rekos/feature-grid-icons. Figma: HR "Galimybės" 609:6191 (1440 × 832), Spec. moduliai
 * 610:6562 (9 items), Profit People 610:6639 / Profit Finance 610:6694 ("Produkto naudos");
 * mobile 1008:11240 (375 × 682).
 * Tokens only; literal values only for breakpoints, percentages, 1px hairlines, 2px bar,
 * unitless line-heights, the 0.3 outline opacity and icon geometry (24px).
 * Rules that override theme.json element styles (h2, h3) start with .rk-feature-grid-icons
 * so they beat the global styles whatever the load order.
 *
 * Desktop (≥1200): padding 80; header centred (H2, 24, intro 16/24 in a ~498px measure);
 * 56 to the items; 3 columns 1023 wide in total (78.94 % of 1296), gaps 32; item: 24px
 * gradient icon, 16, title 20/28 bold, 12, text 16/24; 56 to the CTA (pill ≥ 200).
 * Background: solution pages surface (#F4FAFE), product pages section-pp gradient.
 * Outline (show_frame): 1px Edrana-gradient line at 30 % opacity; top lines from both
 * screen edges at y 188 (header top + 108) curve (r 30) into vertical lines 24–27px inside
 * the content edges, joined by a line 16px under the first item row.
 * Mobile (≤767): padding 72; header left, gap 16, intro 14/20; 48 to the cards; scroll-snap
 * carousel bleeding to the screen edge; card 310 of 343 (90.4 %), gap 12, white, radius 20,
 * padding 16; title 18/28; text 14/20; progress bar 2px, 24 below (JS only); 24 to the
 * full-width CTA. Outline: a 48px band around the header bottom (r ≈ 11, lines 5px inside).
 * Tablet (768–1199, derived): desktop type and centred header, 2 columns.
 * Motion: the outline draws once from left to right as it scrolls in (§ Line draw at the end).
 */

.rk-feature-grid-icons {
	--rk-fgi-gutter: var(--wp--style--root--padding-left);
	--rk-fgi-frame-side: var(--wp--preset--spacing--10);
	--rk-fgi-frame-radius: var(--wp--custom--radius--input);
	--rk-fgi-rows: 1;
	position: relative;
	/* Own stacking context: the outline (z-index -1) stays above the section background. */
	isolation: isolate;
	/* 100cqw = section width, so the outline's top lines end exactly at the screen edges. */
	container-type: inline-size;
	/* Safety net for the outline; hidden is the fallback where clip is unknown. */
	overflow-x: hidden;
	overflow-x: clip;
	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.rk-feature-grid-icons--section-pp {
	background: var(--wp--preset--gradient--section-pp);
}

.rk-feature-grid-icons__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

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

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

.rk-feature-grid-icons .rk-feature-grid-icons__heading {
	margin: 0;
	color: inherit;
	text-wrap: balance;
}

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

/* ---------- Items: mobile carousel ---------- */

.rk-feature-grid-icons__track {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	margin: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40)) calc(-1 * var(--rk-fgi-gutter)) 0;
	padding: 0 var(--rk-fgi-gutter);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rk-fgi-gutter);
	-webkit-overflow-scrolling: touch;
}

.rk-feature-grid-icons--no-head .rk-feature-grid-icons__track {
	margin-block-start: 0;
}

/* The scroller has a tab stop on phones (render.php; view.js drops it where nothing scrolls); the ring sits inside. */
.rk-feature-grid-icons__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.rk-feature-grid-icons__item {
	display: flex;
	flex: 0 0 90.4%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	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;
}

/* Two classes: base.css (.rk-icon, 1em) loads after the block styles and would win a tie. */
.rk-feature-grid-icons .rk-feature-grid-icons__icon {
	inline-size: 24px;
	block-size: 24px;
}

.rk-feature-grid-icons__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	align-self: stretch;
	min-width: 0;
}

.rk-feature-grid-icons .rk-feature-grid-icons__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-feature-grid-icons__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.43;
	overflow-wrap: break-word;
}

/* ---------- Progress bar (mobile, only when view.js marks the carousel scrollable) ---------- */

.rk-feature-grid-icons__progress {
	display: none;
	height: 2px;
	margin-block-start: var(--wp--preset--spacing--50);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	/* Figma #C9D5E3 = navy at ~15 % over the section background. */
	background: var(--wp--preset--color--border);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.rk-feature-grid-icons__progress-thumb {
	display: block;
	width: calc(100% / var(--rk-fgi-count, 6));
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--contrast);
	transform: translateX(calc(var(--rk-progress, 0) * (var(--rk-fgi-count, 6) - 1) * 100%));
}

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

.rk-feature-grid-icons__cta-wrap {
	display: flex;
	justify-content: center;
	min-width: 0;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Mobile: full width; the ring sits outside the pill, so the pill leaves room for it. */
.rk-feature-grid-icons .rk-feature-grid-icons__cta {
	width: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
}

/* ---------- Decorative outline (show_frame) ---------- */

.rk-feature-grid-icons__frame {
	display: none;
}

/*
 * Mobile: a 48px band centred on the header's bottom edge (Figma 1008:11241). Its grid area
 * is the header row, so it follows any heading or intro length. (An absolutely positioned
 * grid child needs both lines: "grid-row: 1" alone would end at the grid's padding edge.)
 */
.rk-feature-grid-icons--framed .rk-feature-grid-icons__frame {
	position: absolute;
	z-index: -1;
	display: block;
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	top: calc(100% - var(--wp--preset--spacing--50));
	right: 0;
	left: 0;
	height: calc(2 * var(--wp--preset--spacing--50));
	opacity: 0.3;
	pointer-events: none;
}

/* 1px strokes drawn as the border area of a masked box (the .rk-btn--ring technique). */
.rk-feature-grid-icons__frame > span {
	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;
}

/* Top line from the left screen edge, curving down into the left vertical line. */
.rk-feature-grid-icons__frame-start {
	top: 0;
	right: calc(100% - var(--rk-fgi-frame-side) - 1px);
	left: calc(-1 * var(--rk-fgi-gutter));
	left: calc(50% - 50cqw);
	height: var(--rk-fgi-frame-radius);
	padding: 1px 1px 0 0;
	border-top-right-radius: var(--rk-fgi-frame-radius);
	background: var(--wp--preset--color--accent);
}

/* The U: both vertical lines and the bottom line, rounded at the bottom. */
.rk-feature-grid-icons__frame-mid {
	top: var(--rk-fgi-frame-radius);
	right: var(--rk-fgi-frame-side);
	bottom: 0;
	left: var(--rk-fgi-frame-side);
	padding: 0 1px 1px;
	border-radius: 0 0 var(--rk-fgi-frame-radius) var(--rk-fgi-frame-radius);
	background: var(--wp--preset--gradient--edrana);
}

/* Right vertical line curving up into the top line to the right screen edge. */
.rk-feature-grid-icons__frame-end {
	top: 0;
	right: calc(-1 * var(--rk-fgi-gutter));
	right: calc(50% - 50cqw);
	left: calc(100% - var(--rk-fgi-frame-side) - 1px);
	height: var(--rk-fgi-frame-radius);
	padding: 1px 0 0 1px;
	border-top-left-radius: var(--rk-fgi-frame-radius);
	background: var(--wp--preset--color--primary);
}

.rk-feature-grid-icons__empty {
	padding: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 767px) {
	.rk-feature-grid-icons.is-scrollable .rk-feature-grid-icons__progress {
		display: block;
	}

	/* With JS the bar replaces the native scrollbar; without JS the scrollbar stays. */
	.rk-feature-grid-icons.is-scrollable .rk-feature-grid-icons__track {
		scrollbar-width: none;
	}

	.rk-feature-grid-icons.is-scrollable .rk-feature-grid-icons__track::-webkit-scrollbar {
		display: none;
	}
}

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

@media (min-width: 768px) {
	.rk-feature-grid-icons {
		--rk-fgi-frame-side: var(--wp--preset--spacing--50);
		--rk-fgi-frame-radius: var(--wp--custom--radius--card);
		--rk-fgi-rows: var(--rk-fgi-rows-2, 1);
	}

	.rk-feature-grid-icons__inner {
		row-gap: var(--wp--preset--spacing--70);
	}

	.rk-feature-grid-icons__header {
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		text-align: center;
	}

	.rk-feature-grid-icons__intro {
		max-width: 55ch;
		line-height: 1.5;
	}

	/* Narrower than the content, so the outline's vertical lines stay clear of the text. */
	.rk-feature-grid-icons__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60);
		justify-self: center;
		width: min(100% - 2 * var(--wp--preset--spacing--70), var(--wp--style--global--content-size) * 0.7894);
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.rk-feature-grid-icons__item {
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.rk-feature-grid-icons .rk-feature-grid-icons__title {
		line-height: 1.4;
	}

	.rk-feature-grid-icons__text {
		font-size: var(--wp--preset--font-size--base);
		line-height: 1.5;
	}

	.rk-feature-grid-icons__cta-wrap {
		margin: 0;
	}

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

	/* Without subgrid the outline cannot find the first item row: it is left out. */
	.rk-feature-grid-icons--framed .rk-feature-grid-icons__frame {
		display: none;
	}
}

@media (min-width: 1200px) {
	.rk-feature-grid-icons {
		--rk-fgi-rows: var(--rk-fgi-rows-3, 1);
	}

	.rk-feature-grid-icons__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Outline from 768 px: the items share the section grid's rows (subgrid), so the outline's
 * grid area can run from the header (row 1) to the end of the first item row (row 2).
 * --rk-fgi-rows is the number of item rows (set per breakpoint from render.php's counts).
 * The section grid uses the items' own 32px row gap: with a different gap, the subgrid
 * moves half the difference into its edge rows and the outline's bottom would shift.
 * The header and CTA margins add the rest of the 56px (40 on tablet) spacing.
 */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 768px) {
		.rk-feature-grid-icons--framed .rk-feature-grid-icons__inner {
			row-gap: var(--wp--preset--spacing--60);
			grid-template-rows: auto repeat(var(--rk-fgi-rows), auto);
		}

		.rk-feature-grid-icons--framed .rk-feature-grid-icons__header {
			margin-block-end: calc(var(--wp--preset--spacing--70) - var(--wp--preset--spacing--60));
		}

		.rk-feature-grid-icons--framed .rk-feature-grid-icons__cta-wrap {
			margin-block-start: calc(var(--wp--preset--spacing--70) - var(--wp--preset--spacing--60));
		}

		.rk-feature-grid-icons--framed .rk-feature-grid-icons__track {
			grid-row: 2 / span var(--rk-fgi-rows);
			grid-template-rows: subgrid;
		}

		/* Top: header top + 108 (Figma y 188 = 80 + 108); bottom: 16 under the first item row. */
		.rk-feature-grid-icons--framed .rk-feature-grid-icons__frame {
			display: block;
			grid-row: 1 / 3;
			top: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--50) + var(--wp--preset--spacing--10));
			bottom: calc(-1 * var(--wp--preset--spacing--40));
			height: auto;
		}
	}
}

/*
 * ---------- Line draw (view.js, second part) ----------
 * The decorative outline draws itself once from left to right when it scrolls in (its top
 * past 90 % of the window, as motion.js): a clip-path inset() wipe over the whole outline (top
 * lines, U and corners) from the section's left edge to its right edge, 2400 ms, ease-in-out;
 * the vertical lines appear as the wipe passes them. The section is the inline-size query
 * container and the outline is centred in it, so 50cqw is half the section and the wipe runs
 * exactly from edge to edge (the phone band and the tablet / desktop frame alike). Same
 * technique and timing as every background line of the theme (problem-solution-cards
 * § Motion).
 * 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 when it takes over, .is-drawn when
 * the wipe starts and .is-done at the end; it never removes a class. Before .is-armed a hold
 * keeps the outline hidden 2 s and then shows it (script missing, late or failed). The wipe
 * ends on the whole section, then the outline's own value (no clip): the static design. Only
 * clip-path and visibility change: no layout shift.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	html.has-motion .rk-feature-grid-icons__frame:not(.is-armed) {
		animation: rk-fgi-line-hold 2600ms;
	}

	html.has-motion .rk-feature-grid-icons__frame.is-armed:not(.is-drawn):not(.is-done) {
		clip-path: inset(-1px calc(50% + 50cqw) -1px calc(50% - 50cqw));
	}

	html.has-motion .rk-feature-grid-icons__frame.is-drawn:not(.is-done) {
		animation: rk-fgi-draw 2400ms cubic-bezier(0.45, 0, 0.55, 1) backwards; /* Otilija 2026-10-08: slower, even draw (was 2400 ms, ease-in-out) */
	}
}

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

/* From the section's left edge to its right edge; then the outline's own value (no clip). */
@keyframes rk-fgi-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));
	}
}