/**
 * CFUL 2026 — Card carousel (homepage "Upcoming Events")
 *
 * Generic, dependency-free horizontal card carousel, progressively
 * enhanced by assets/js/carousel.js (prev/next buttons, keyboard arrows,
 * drag-to-scroll). Without JS the viewport still scrolls horizontally via
 * CSS scroll-snap.
 *
 * The `--bleed` variant runs the track out to the right viewport edge and
 * clips it, so the trailing card peeks in (Figma node 421:1679). The
 * horizontal overflow is contained on the viewport (overflow-x: auto) —
 * it never widens the page. Colors/spacing/type come from tokens.css.
 */

/* -------------------------------------------------------------------- */
/* Carousel shell                                                       */
/* -------------------------------------------------------------------- */

.cful-carousel {
	position: relative;
}

/* -------------------------------------------------------------------- */
/* Scrolling viewport                                                   */
/* -------------------------------------------------------------------- */

.cful-carousel__viewport {
	-ms-overflow-style: none;
	cursor: grab;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cful-carousel__viewport::-webkit-scrollbar {
	display: none;
	height: 0;
}

.cful-carousel__viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/*
 * Bleed the scroll track to BOTH viewport edges so cards clip at the
 * right and can travel to the left edge when scrolled — while the first
 * card still rests aligned to the container's inner margin.
 *
 * --cful-bleed is the distance from the container's inner edge out to the
 * viewport edge: the container's own padding, plus (on screens wider than
 * --container-max) the centered gutter beyond the container. Below
 * --container-max the max() term is 0, so no vw is used and there's no
 * scrollbar overshoot; the overflow stays contained on the viewport
 * (overflow-x: auto) and never widens the page.
 *
 * margin-inline pulls both edges out to the viewport; padding-left then
 * insets the resting start so the first card lines up with the inner
 * margin. That inset scrolls away, letting cards reach the left edge.
 * scroll-padding-left keeps snap points aligned to the inner margin.
 */
.cful-carousel--bleed .cful-carousel__viewport {
	--cful-bleed: calc(
		var(--container-pad) + max(0px, (100vw - var(--container-max)) / 2)
	);

	margin-inline: calc(var(--cful-bleed) * -1);
	padding-left: var(--cful-bleed);
	scroll-padding-left: var(--cful-bleed);
}

/* -------------------------------------------------------------------- */
/* Track + slides                                                       */
/* -------------------------------------------------------------------- */

.cful-carousel__track {
	display: flex;
	gap: var(--grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cful-carousel__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	/* Wide enough that three placeholder cards overflow a typical desktop
	   viewport, so the third clips against the bleeding right edge. */
	width: clamp(280px, 31vw, 460px);
}

/* -------------------------------------------------------------------- */
/* Controls (light section — sits below the track, right-aligned)        */
/* -------------------------------------------------------------------- */

.cful-carousel__controls {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	margin-block: var(--space-5);
}

.cful-carousel__btn {
	align-items: center;
	background: transparent;
	border: none;
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	font-size: var(--text-3xl);
	aspect-ratio: 1/1;
	justify-content: center;
	line-height: 1;
	transition: color 0.15s ease;
}

.cful-carousel__btn:hover,
.cful-carousel__btn:focus-visible {
	color: var(--color-primary);
}

.cful-carousel__btn:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

.cful-carousel__btn:disabled {
	cursor: default;
	opacity: 0.4;
}

.cful-carousel__btn:disabled:hover {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cful-carousel__viewport {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive slide sizing                                              */
/* -------------------------------------------------------------------- */

@media (max-width: 599px) {
	.cful-carousel__slide {
		width: clamp(240px, 80vw, 300px);
	}
}