/*
 * rekos/cards-carousel.
 * Solution cards: Figma 184:1875 desktop (1440 × 1034), 1018:15740 mobile (375 × 953).
 * Certificate cards: Figma 496:2993 desktop, 1027:4169 mobile (375 × 712).
 * Tokens only. Literal values only for breakpoints, aspect ratios, 0, 1px, percentages,
 * opacities, unitless line heights and icon / badge geometry (30 px arrow circle, 40 px nav
 * circles, 4 px dots, 2 px progress bar, 20 / 18 px icons, 140 / 120 px badges).
 * Rules that override theme.json element styles (h2, h3, links) start with
 * .rk-cards-carousel 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. Cards 416 wide, 24 apart, the 4th peeks in at the right edge;
 *   equal height (tallest card). Pager 32 below: 40 px outlined prev / next, 4 px dots 4 apart.
 *   Solution card: white, radius 32 (Figma 30), padding 16; title row 8 side padding: title
 *   24/32 bold + subtitle 14/20 at 70 % (muted) 12 below, 30 px arrow circle 32 to the right;
 *   checklist 16 below (8 side padding, rows 8 apart, 20 px gradient check, 16 gap, 14/20
 *   bold); mini UI 384 × 260 (radius 20, Figma 18) pinned to the card bottom.
 *   Certificate card: white, radius 32, padding 40 / 24 / 32, centred; badge 140 high in a
 *   220 high box; 32 below: title 20/28 bold, text 16/24 12 below.
 * Mobile ≤767 (375 frame): padding 72 / 16; header left: H2 30, intro 14/20, 16 apart; 48 to
 *   the cards; cards 310 of 343 (peek), 12 apart; all cards as tall as the tallest, mini UI at
 *   the card bottom, as on desktop (Otilija 2026-10-12; Figma 1018:15740 has each card as tall
 *   as its own content); solution card radius 20, title 18/28, title →
 *   arrow gap 16, mini UI 278 × 179 radius 12; certificate card radius 32, badge 120 in a 140
 *   box, 16 below title 18/28 and text 14/20. 2 px progress bar 24 below (track navy 15 %).
 * Tablet 768–1199 (derived): desktop header and card styles, 2 cards per view, pager.
 */

.rk-cards-carousel {
	container-type: inline-size;
	overflow-x: clip;
	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-cards-carousel__inner {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

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

.rk-cards-carousel__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.rk-cards-carousel .rk-cards-carousel__heading {
	margin: 0;
	color: inherit;
	overflow-wrap: break-word;
	text-wrap: balance;
}

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

/* ---------- Track (scroll-snap; view.js adds the pager and the progress bar) ---------- */

.rk-cards-carousel__carousel {
	min-width: 0;
}

/*
 * The track runs to both edges of the section: negative margins of one side gutter (the space
 * between .rk-inner and the section edge, in the section's container units), the same padding
 * and scroll padding, so the first card lines up with the content and later cards peek in.
 */
.rk-cards-carousel__track {
	--rk-cc-bleed: max(var(--wp--style--root--padding-left), calc((100cqw - var(--wp--style--global--content-size)) / 2));
	--rk-cc-gap: var(--wp--preset--spacing--30);
	display: flex;
	gap: var(--rk-cc-gap);
	margin: 0 calc(-1 * var(--rk-cc-bleed));
	padding: 0 var(--rk-cc-bleed);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rk-cc-bleed);
	-webkit-overflow-scrolling: touch;
}

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

/* Autoplay (view.js, motion only): no snapping while the script drifts the track; after the
   first interaction it settles on a card and snapping returns. */
.rk-cards-carousel__track.is-autoplay {
	scroll-snap-type: none;
}

/* Sub-pixel drift: browsers round scrollLeft to whole px, so view.js keeps the whole px there and
   moves the slides by the rest (--rk-cc-shift, under 1 px). Own layers keep the motion smooth.
   Uses transform, so the reveal's `translate` still adds to it. */
.rk-cards-carousel__track.is-autoplay > .rk-cards-carousel__slide {
	transform: translateX(var(--rk-cc-shift, 0px));
	will-change: transform;
}

/* With JS the pager and the progress bar replace the scrollbar; without JS it stays. */
.js .rk-cards-carousel__track {
	scrollbar-width: none;
}

.js .rk-cards-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Phone: one card (310 of 343) and a peek of the next. */
.rk-cards-carousel__slide {
	display: flex;
	flex: 0 0 calc(100% - var(--wp--preset--spacing--60));
	min-width: 0;
	scroll-snap-align: start;
}

/* ---------- Card (mobile layout is the base) ---------- */

.rk-cards-carousel__card {
	--rk-cc-card-radius: var(--wp--custom--radius--media);
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rk-cc-card-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Solution card: text block on top, illustration pinned to the bottom. */
.rk-cards-carousel__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.rk-cards-carousel__head {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--20);
}

.rk-cards-carousel__titles {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.rk-cards-carousel .rk-cards-carousel__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;
}

/* The title link covers the whole card (one tab stop, the title is its name). */
.rk-cards-carousel .rk-cards-carousel__link {
	color: inherit;
	text-decoration: none;
}

.rk-cards-carousel .rk-cards-carousel__link:hover {
	color: inherit;
}

.rk-cards-carousel .rk-cards-carousel__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--rk-cc-card-radius);
}

.rk-cards-carousel .rk-cards-carousel__subtitle {
	margin: 0;
	/* Figma: navy at 70 % = the muted token. */
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.43;
}

/* 30 px navy circle with an 18 px arrow (Figma 184:2370); 0-2-0, after the link rules. */
.rk-cards-carousel .rk-cards-carousel__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	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-cards-carousel .rk-cards-carousel__arrow:hover {
	color: var(--wp--preset--color--base);
}

.rk-cards-carousel__arrow .rk-icon {
	inline-size: 18px;
	block-size: 18px;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

/* Hover and keyboard focus (derived states, not drawn in Figma). */
.rk-cards-carousel__card--link:hover .rk-cards-carousel__arrow,
.rk-cards-carousel__card--link:focus-within .rk-cards-carousel__arrow {
	background: var(--wp--preset--color--primary);
}

.rk-cards-carousel__card--link:hover .rk-cards-carousel__arrow .rk-icon {
	transform: translate(1px, -1px);
}

@supports selector(:has(*)) {
	.rk-cards-carousel .rk-cards-carousel__link:focus-visible {
		outline: none;
	}

	/* The scroller clips anything outside it, so the focus ring sits inside the card. */
	.rk-cards-carousel__card:has(.rk-cards-carousel__link:focus-visible) {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: -2px;
	}
}

/* Checklist: 20 px gradient check, 16 gap, 14/20 bold, rows 8 apart (Figma 297:7224). */
.rk-cards-carousel .rk-cards-carousel__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--20);
	list-style: none;
}

.rk-cards-carousel .rk-cards-carousel__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.43;
}

.rk-cards-carousel__item .rk-icon {
	inline-size: 20px;
	block-size: 20px;
}

.rk-cards-carousel__item-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

/* Illustration frame: fixed ratio, any image is cropped to it; sits at the card bottom. */
.rk-cards-carousel__media {
	flex: none;
	aspect-ratio: 278 / 179;
	margin: auto 0 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--surface-2);
}

.rk-cards-carousel .rk-cards-carousel__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Certificate card: badge, then centred title and text (Figma 1028:5219 / 791:7932). */
.rk-cards-carousel__card--certificate {
	--rk-cc-card-radius: var(--wp--custom--radius--card);
	align-items: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	padding-block-start: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--20));
	text-align: center;
}

.rk-cards-carousel__badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	block-size: 140px;
	max-inline-size: 100%;
}

.rk-cards-carousel .rk-cards-carousel__badge-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 120px;
	object-fit: contain;
}

.rk-cards-carousel__cert-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
}

.rk-cards-carousel .rk-cards-carousel__cert-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-cards-carousel .rk-cards-carousel__cert-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

/* ---------- Pager and progress bar (shown by view.js) ---------- */

.rk-cards-carousel__controls,
.rk-cards-carousel__progress {
	display: none;
}

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

/* 40 px outlined circles with an 18 px chevron (Figma 192:3343, 192:3347 next mirrored). */
.rk-cards-carousel .rk-cards-carousel__nav {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	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-cards-carousel .rk-cards-carousel__nav:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rk-cards-carousel .rk-cards-carousel__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.rk-cards-carousel__nav--next .rk-icon {
	transform: rotate(180deg);
}

.rk-cards-carousel__dots {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.rk-cards-carousel__dot {
	display: block;
	inline-size: 4px;
	block-size: 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--contrast);
	opacity: 0.4;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-cards-carousel__dot.is-active {
	opacity: 1;
}

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

@media (max-width: 767px) {
	/* Figma 1018:15906: 2 px bar, track #C9D5E3 (navy 15 % over the section), thumb navy. */
	.rk-cards-carousel__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 ---------- */

@media (min-width: 768px) {
	.rk-cards-carousel__inner {
		gap: var(--wp--preset--spacing--70);
	}

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

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

	.rk-cards-carousel__track {
		--rk-cc-gap: var(--wp--preset--spacing--50);
	}

	.rk-cards-carousel__slide {
		flex-basis: calc((100% - var(--rk-cc-gap)) / 2);
	}

	.rk-cards-carousel__card {
		--rk-cc-card-radius: var(--wp--custom--radius--card);
	}

	.rk-cards-carousel__head {
		gap: var(--wp--preset--spacing--60);
	}

	.rk-cards-carousel .rk-cards-carousel__title {
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1.333;
	}

	.rk-cards-carousel__media {
		aspect-ratio: 384 / 260;
		border-radius: var(--wp--custom--radius--media);
	}

	.rk-cards-carousel__card--certificate {
		gap: var(--wp--preset--spacing--60);
	}

	.rk-cards-carousel__badge {
		block-size: 220px;
	}

	.rk-cards-carousel .rk-cards-carousel__badge-img {
		height: 140px;
	}

	.rk-cards-carousel .rk-cards-carousel__cert-title {
		line-height: 1.4;
	}

	.rk-cards-carousel .rk-cards-carousel__cert-text {
		line-height: 1.5;
	}

	.rk-cards-carousel__controls:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		margin-block-start: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 1200px) {
	.rk-cards-carousel__slide {
		flex-basis: calc((100% - 2 * var(--rk-cc-gap)) / 3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rk-cards-carousel__arrow,
	.rk-cards-carousel__arrow .rk-icon,
	.rk-cards-carousel__nav,
	.rk-cards-carousel__dot {
		transition: none;
	}

	.rk-cards-carousel__card--link:hover .rk-cards-carousel__arrow .rk-icon {
		transform: none;
	}
}

@media (forced-colors: active) {
	.rk-cards-carousel__item .rk-icon {
		background: CanvasText;
	}
}