/*
 * 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;
}

/* Card width must be a DEFINITE, FIXED length. Percentages resolve against an
   indefinite inline size in a scroll container, and minmax(0, x) lets tracks
   shrink to fit instead of overflowing — either way the cards collapse into
   narrow, word-broken columns instead of forming a scrollable rail. */
.carousel__viewport {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78vw;
	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, and a hanging first/last edge. */
	padding-block: var(--s-2);
	margin-inline: calc(var(--container-pad) * -1);
	padding-inline: var(--container-pad);
	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;
}

@media (min-width: 600px) {
	.carousel__viewport {
		grid-auto-columns: 44vw;
	}
}

@media (min-width: 1024px) {
	/* Exactly three cards across the full container, so nothing is clipped when
	   there are only three posts. Narrower screens overflow and get arrows. */
	.carousel__viewport {
		grid-auto-columns: min(349px, 30vw);
		gap: var(--s-8);
	}
}