/**
 * Blog Carousel — layout only; cards use hubase-frontend. Pagination uses .sg-* from services-gallery.
 *
 * @package UPIX
 */

.upix-blog-carousel {
	--sg-text: #f5f5f5;
	--sg-muted: rgba(245, 245, 245, 0.55);
	--sg-accent: #ffffff;
	--upix-bc-gap: 1.25rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.upix-bc__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	direction: ltr;
}

.upix-bc__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--upix-bc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.45s ease;
	will-change: transform;
}

.upix-bc__cell {
	display: block;
	margin: 0;
	padding: 0;
	min-width: 0;
	box-sizing: border-box;
}

/* Card fills the flex cell; undo hubase-frontend .hubase-archive-grid .hubase-blog-card { position; width: calc(50% - 20px) } */
.upix-blog-carousel .hubase-archive-grid .hubase-blog-card {
	position: static;
	width: 100% !important;
}
.upix-bc__cell .hubase-blog-card,
.upix-bc__cell .hubase-archive-card {
	max-width: 100%;
}

@media (max-width: 768px) {
	/* One card per view: no gutter between “pages” */
	.upix-blog-carousel {
		--upix-bc-gap: 0;
	}
}