/* FireBorn homepage carousel */
.fireborn-carousel {
	margin: 2.5rem 0;
	/* Width of the soft fade at each horizontal edge. */
	--carousel-fade: 3.5rem;
}

@media (max-width: 600px) {
	.fireborn-carousel {
		--carousel-fade: 1.75rem;
	}
}

/* The track lives in a viewport wrapper that clips it (auto-scroll mode) and
   carries the soft edge fades. */
.fireborn-carousel-viewport {
	position: relative;
}

/* Fade the row into the page background at the left and right edges so items
   ease in/out instead of ending on a hard line. Static overlays (not a mask on
   the moving layer) avoid any seam; rgba white with 0 alpha prevents the grey
   banding the `transparent` keyword can cause. pointer-events:none keeps drag
   working through them. */
.fireborn-carousel-viewport::before,
.fireborn-carousel-viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--carousel-fade);
	z-index: 2;
	pointer-events: none;
}

.fireborn-carousel-viewport::before {
	left: 0;
	background: linear-gradient( to right, var(--color-bg, #fff), rgba( 255, 255, 255, 0 ) );
}

.fireborn-carousel-viewport::after {
	right: 0;
	background: linear-gradient( to left, var(--color-bg, #fff), rgba( 255, 255, 255, 0 ) );
}

.fireborn-carousel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	gap: 1rem;
}

.fireborn-carousel-title {
	margin: 0;
	font-family: var(--font-carousel-title);
	font-style: var(--fstyle-carousel-title);
	font-size: var(--fs-carousel-title);
	color: var(--color-carousel-title);
}

.fireborn-carousel-track {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	cursor: grab;
}

/* While dragging: show the grabbing cursor and stop smooth/snap fighting the
   direct scroll updates. */
.fireborn-carousel-track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

/* Don't let the browser's native image drag interfere with swiping. */
.fireborn-carousel-thumb img {
	-webkit-user-drag: none;
	user-select: none;
}

.fireborn-carousel-item {
	flex: 0 0 auto;
	width: calc((100% - 2rem) / 3); /* 3 across on desktop */
	scroll-snap-align: start;
}

.fireborn-carousel-link {
	display: block;
	text-decoration: none;
	color: #222;
}

.fireborn-carousel-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow-img);
	background: #f0f0f0;
}

.fireborn-carousel-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.fireborn-carousel-link:hover .fireborn-carousel-thumb img {
	transform: scale(1.04);
}

.fireborn-carousel-caption {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-carousel-caption);
	font-style: var(--fstyle-carousel-caption);
	font-size: var(--fs-carousel-caption);
	color: var(--color-carousel-caption);
	line-height: 1.3;
}

.fireborn-carousel-link:hover .fireborn-carousel-caption {
	color: var(--color-link-hover);
}

/* Tablet: 2 across */
@media (max-width: 900px) {
	.fireborn-carousel-item {
		width: calc((100% - 1rem) / 2);
	}
}

/* Phone: ~1.2 across so the next card peeks */
@media (max-width: 600px) {
	.fireborn-carousel-item {
		width: 82%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fireborn-carousel-track {
		scroll-behavior: auto;
	}
	.fireborn-carousel-thumb img {
		transition: none;
	}
}

/* =========================================================================
   Continuous right-to-left rotation (JS-driven, draggable)
   The track holds the posts plus a duplicate set laid out in a single wide
   row. carousel.js translates the row leftward and wraps the offset by one
   set width, so the loop is seamless and never jumps back. The same row can
   be grabbed/swiped in either direction. Per-item margin (not flex gap) keeps
   the two halves exactly equal.
   ========================================================================= */
.fireborn-carousel.is-autoscroll .fireborn-carousel-viewport {
	overflow: hidden;
}

.fireborn-carousel.is-autoscroll .fireborn-carousel-track {
	width: max-content;
	flex-wrap: nowrap;
	gap: 0;
	overflow: visible;
	scroll-snap-type: none;
	scroll-behavior: auto;
	will-change: transform;
	/* Keep the moving row on one GPU layer so the images are rasterised once
	   and just composited across — prevents per-frame subpixel wobble. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* We handle horizontal dragging in JS; let the page still pan vertically. */
	touch-action: pan-y;
	user-select: none;
}

.fireborn-carousel.is-autoscroll .fireborn-carousel-item {
	width: clamp(220px, 70vw, 300px);
	margin-right: 1rem;
}

/* Reduced motion: no auto rotation. Drop the clones and restore a normal
   touch-scrollable row so the content is still reachable and swipeable. */
@media (prefers-reduced-motion: reduce) {
	.fireborn-carousel.is-autoscroll .fireborn-carousel-viewport {
		overflow: visible;
	}
	.fireborn-carousel.is-autoscroll .fireborn-carousel-track {
		width: auto;
		overflow-x: auto;
		transform: none !important;
		touch-action: auto;
	}
	.fireborn-carousel.is-autoscroll .fireborn-carousel-item[aria-hidden="true"] {
		display: none;
	}
}