/*
 * carousel.css — the reusable card rail (blog now, testimonials later).
 *
 * Built on CSS scroll-snap rather than a slider library: native touch swipe,
 * native keyboard scrolling, no 140KB dependency, and it still works with JS
 * off (it just scrolls). carousel.js only adds the arrow buttons' behaviour.
 */

.carousel {
	position: relative;
}

/*
 * A PAGED slider, not a peeking rail (client's call, 27.7.2026): exactly one
 * card per view on phones, two on tablets, three on desktop — never a
 * half-visible next card, and no bleeding outside the container. The arrows
 * page a full view at a time; carousel.js reads the same geometry.
 *
 * Card width must be a DEFINITE length. minmax(0, x) lets tracks shrink to fit
 * instead of overflowing, collapsing the cards into narrow, word-broken
 * columns. The calc() below resolves against the scrollport width, which is
 * definite here because the viewport spans the container exactly.
 */
.carousel__viewport {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--s-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The rail is a <ul>: undo the global list rules, especially the 65ch
	   max-width, which would squeeze the track sizes down to content width. */
	list-style: none;
	max-width: none;
	margin: 0;
	/* Room for the cards' shadow. */
	padding-block: var(--s-2);
	scrollbar-width: none;
}

.carousel__item {
	margin: 0;
}

.carousel__viewport::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	scroll-snap-align: start;
}

/* ---- Arrows ---- */
.carousel__nav {
	display: none;
	gap: var(--s-3);
}

.carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--card);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}

.carousel__btn:hover:not(:disabled) {
	border-color: var(--koivu);
	color: var(--koivu);
}

.carousel__btn:active:not(:disabled) {
	transform: translateY(1px);
}

/* At either end the button says so rather than disappearing. */
.carousel__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Shown only once JS is driving them and there is actually somewhere to go.
   The flag lives on the section, since the arrows sit in the section header
   while the rail is further down. */
[data-carousel].is-interactive .carousel__nav {
	display: flex;
}

/* Two per view on tablets. */
@media (min-width: 600px) {
	.carousel__viewport {
		grid-auto-columns: calc((100% - var(--s-6)) / 2);
	}
}

/* Three per view on desktop — the width accounts for the two gaps between
   them, so page boundaries land exactly on card edges. */
@media (min-width: 1024px) {
	.carousel__viewport {
		grid-auto-columns: calc((100% - 2 * var(--s-8)) / 3);
		gap: var(--s-8);
	}
}