/*
 * rekos/posts-carousel (Figma 106:799 desktop 1440, 967:9945 mobile 375;
 * "Jus gali sudominti" 874:2266 / 874:2217 / 874:2315 share the layout).
 * Tokens only. Rules that override theme.json element or base.css styles start with
 * .rk-posts-carousel so they win whatever the load order.
 *
 * Desktop: surface background, 80 / 72 padding; heading block left (H2 + intro 24 below,
 * intro ~498 wide), ring CTA right, bottom-aligned; 56 to the cards. Cards 636 wide
 * (two per 1296 row, the third peeks into the right edge), gap 24, white, radius 32,
 * padding 16 / 16 / 24; image 604 × 326 (radius 20); body padding 0 12 16: date B16
 * muted, 16, title H20, 12, excerpt B16 muted. 32 below: arrows 40 × 40 and 4 px dots.
 * Mobile: 72 / 16 padding; heading 30, intro B14 muted 16 below; 48 to the cards; cards
 * 310 wide (gap 12, radius 20, padding 16), image 278 × 150 (radius 12), title H18 (3 lines);
 * 24 below a 2 px progress bar, 24 below it the full-width ring CTA. "Related" (1029:8255):
 * navy intro, the full-width CTA 24 under it, 48 to the cards, nothing under the bar.
 * Desktop titles are clamped to 2 lines (874:2233).
 * Tablet (768–1199, derived): desktop structure, two cards per view, fluid type.
 * Without JS: the track scrolls (scroll-snap, visible scrollbar); arrows, dots and the
 * progress bar stay hidden until view.js adds .is-ready.
 */

.rk-posts-carousel {
	/* Space from the viewport edge to the 1296 content column (= .rk-inner's side space). */
	--rk-posts-carousel-offset: max(var(--wp--style--root--padding-left), (100% - var(--wp--style--global--content-size)) / 2);
	--rk-posts-carousel-gap: var(--wp--preset--spacing--30);

	padding-block: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

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

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

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

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

.rk-posts-carousel__intro {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: calc(20 / 14);
}

/* The CTA sits in the heading row from 768 px and under the carousel below it. */
.rk-posts-carousel .rk-posts-carousel__cta--top {
	display: none;
}

/* Full width inside the 4 px ring gap + 1 px ring on both sides (base.css .rk-btn--ring). */
.rk-posts-carousel .rk-posts-carousel__cta--bottom {
	width: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
}

.rk-posts-carousel__empty {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- Track (scroll-snap; runs to the right edge of the window) ---------- */

.rk-posts-carousel__track {
	display: flex;
	gap: var(--rk-posts-carousel-gap);
	margin: 0;
	padding: 0 var(--rk-posts-carousel-offset);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rk-posts-carousel-offset);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) transparent;
}

/* With JS the arrows / progress bar replace the scrollbar. */
.rk-posts-carousel.is-ready .rk-posts-carousel__track {
	scrollbar-width: none;
}

.rk-posts-carousel.is-ready .rk-posts-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Mobile card 310 of 343: the next card peeks in by the gap + 21 px. */
.rk-posts-carousel__slide {
	display: flex;
	flex: 0 0 calc(100% - var(--wp--preset--spacing--60));
	min-width: 0;
	scroll-snap-align: start;
}

/* ---------- Card ---------- */

.rk-posts-carousel__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--base);
}

.rk-posts-carousel__media {
	aspect-ratio: 604 / 326;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--contrast);
}

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

.rk-posts-carousel__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: 0 calc(var(--wp--preset--spacing--10) / 2) var(--wp--preset--spacing--20);
}

.rk-posts-carousel__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.rk-posts-carousel__date,
.rk-posts-carousel__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--base);
	line-height: calc(20 / 14);
}

.rk-posts-carousel .rk-posts-carousel__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: calc(28 / 18);
	text-transform: none;
	overflow-wrap: break-word; /* Imported titles join words with no-break spaces. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.rk-posts-carousel__excerpt {
	display: -webkit-box;
	overflow: hidden;
	overflow-wrap: break-word;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* The title link covers the whole card (one link, one tab stop per card). */
.rk-posts-carousel .rk-posts-carousel__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-posts-carousel__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.rk-posts-carousel__card:hover .rk-posts-carousel__link {
	color: var(--wp--preset--color--primary);
}

.rk-posts-carousel .rk-posts-carousel__link:focus-visible {
	outline: none;
}

/* Inside the card: the track clips anything drawn outside it. */
.rk-posts-carousel__link:focus-visible::after {
	border-radius: var(--wp--custom--radius--media);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* ---------- Foot: arrows + dots (≥768), progress bar (<768), mobile CTA ---------- */

.rk-posts-carousel__foot {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--50);
}

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

.rk-posts-carousel__controls {
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.rk-posts-carousel .rk-posts-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--button--height-mobile);
	block-size: var(--wp--custom--button--height-mobile);
	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);
	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),
		opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.rk-posts-carousel__arrow .rk-icon {
	font-size: 18px;
}

.rk-posts-carousel__next .rk-icon {
	transform: rotate(180deg);
}

.rk-posts-carousel .rk-posts-carousel__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rk-posts-carousel .rk-posts-carousel__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

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

.rk-posts-carousel__dot {
	inline-size: var(--wp--preset--spacing--10);
	block-size: var(--wp--preset--spacing--10);
	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-posts-carousel__dot.is-active {
	opacity: 1;
}

/* 2 px track (navy at 20 %, Figma #C9D5E3) with the visible share of the cards in navy. */
.rk-posts-carousel__progress {
	position: relative;
	block-size: calc(var(--wp--preset--spacing--10) / 2);
	overflow: hidden;
	border-radius: calc(var(--wp--preset--spacing--10) / 2);
}

.rk-posts-carousel__progress::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--contrast);
	opacity: 0.2;
}

.rk-posts-carousel__progress-bar {
	position: relative;
	display: block;
	inline-size: var(--rk-posts-carousel-progress, 100%);
	block-size: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--contrast);
	transform: translateX(var(--rk-posts-carousel-progress-x, 0%));
}

@media (max-width: 767px) {
	.rk-posts-carousel.is-ready:not(.is-static) .rk-posts-carousel__progress {
		display: block;
	}

	/*
	 * "Jus gali sudominti" (related, 1029:8255, 1029:8469): navy intro, the full-width CTA
	 * under it (24 below, the head gap) and 48 above the cards; nothing under the progress bar.
	 */
	.rk-posts-carousel--related .rk-posts-carousel__intro {
		color: inherit;
	}

	.rk-posts-carousel--related .rk-posts-carousel__cta--top {
		display: inline-flex;
		width: calc(100% - 2 * (var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width)));
	}

	.rk-posts-carousel--related .rk-posts-carousel__cta--bottom {
		display: none;
	}

	.rk-posts-carousel--related.is-static .rk-posts-carousel__foot,
	.rk-posts-carousel--related:not(.is-ready) .rk-posts-carousel__foot {
		display: none;
	}
}

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

@media (min-width: 768px) {
	.rk-posts-carousel {
		--rk-posts-carousel-gap: var(--wp--preset--spacing--50);
	}

	.rk-posts-carousel__head {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		margin-block-end: var(--wp--preset--spacing--70);
	}

	.rk-posts-carousel__lead {
		flex: 1 1 auto;
		gap: var(--wp--preset--spacing--50);
	}

	.rk-posts-carousel__intro {
		/* Figma wraps the intro at 498 px (a measure, not a token). */
		max-inline-size: 31.25em;
		color: inherit;
		line-height: 1.5;
	}

	/* Pill 200 wide as in Figma 828:11540 (nav button width + 32), like the other heading-row CTAs. */
	.rk-posts-carousel .rk-posts-carousel__cta--top {
		display: inline-flex;
		flex: none;
		min-inline-size: calc(var(--wp--custom--button--nav-width) + var(--wp--preset--spacing--60));
	}

	.rk-posts-carousel .rk-posts-carousel__cta--bottom {
		display: none;
	}

	/* Two cards per 1296 row (636 at 1440); the third peeks into the right edge. */
	.rk-posts-carousel__slide {
		flex-basis: calc((100% - var(--rk-posts-carousel-gap)) / 2);
	}

	.rk-posts-carousel__card {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-posts-carousel__link:focus-visible::after {
		border-radius: var(--wp--custom--radius--card);
	}

	.rk-posts-carousel__media {
		border-radius: var(--wp--custom--radius--media);
	}

	.rk-posts-carousel__body {
		padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.rk-posts-carousel__date,
	.rk-posts-carousel__excerpt {
		line-height: 1.5;
	}

	/* Desktop titles stay within 2 lines (874:2233), so one long title cannot stretch every card. */
	.rk-posts-carousel .rk-posts-carousel__title {
		line-height: 1.4;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.rk-posts-carousel__foot {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.rk-posts-carousel.is-ready:not(.is-static) .rk-posts-carousel__controls {
		display: flex;
	}

	/* Nothing left in the foot: no extra space under the cards. */
	.rk-posts-carousel.is-static .rk-posts-carousel__foot,
	.rk-posts-carousel:not(.is-ready) .rk-posts-carousel__foot {
		display: none;
	}
}