/* =========================================================================
   Carousel — shared by the social feed and the CTA action cards.

   Built on native scroll-snap rather than a transformed track. The viewport is
   an ordinary scrolling block, so it always reserves its own height, can never
   paint outside itself, and works with no JavaScript at all. Behaviour lives in
   assets/js/carousel.js and only drives scrollLeft.
   ========================================================================= */

.bb-carousel {
	--bb-slides: 4;
	--bb-gap: 20px;
	/* Overwritten inline by the widget with a literal divisor. */
	--bb-slide-w: calc((100% - 3 * var(--bb-gap)) / 4);

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
}

.bb-carousel__viewport {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Hide the native bar; the arrows are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Breathing room so the cards' hover lift and shadow are not clipped. */
	padding-block: 8px;
	margin-block: -8px;
}

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

.bb-carousel__track {
	display: flex;
	align-items: stretch;
	gap: var(--bb-gap);
	min-width: min-content;
}

.bb-carousel__slide {
	flex: 0 0 var(--bb-slide-w);
	width: var(--bb-slide-w);
	min-width: 0;
	scroll-snap-align: start;
}

.bb-carousel__slide.is-hidden {
	display: none;
}

/* Static mode simply wraps into rows. */
.bb-carousel--static .bb-carousel__viewport {
	overflow: visible;
	scroll-snap-type: none;
}

.bb-carousel--static .bb-carousel__track {
	flex-wrap: wrap;
	min-width: 0;
}

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

/* ------------------------------------------------------------------- nav */

.bb-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--bb-saffron);
	color: #fff;
	box-shadow: 0 4px 14px rgba(14, 33, 72, .2);
	transition: background-color .2s var(--bb-ease), opacity .2s var(--bb-ease);
}

.bb-carousel__nav:hover {
	background: #d4831c;
}

.bb-carousel__nav .bb-icon {
	width: 15px;
	height: 15px;
}

.bb-carousel__nav--prev {
	left: -14px;
}

.bb-carousel__nav--prev .bb-icon {
	transform: rotate(180deg);
}

.bb-carousel__nav--next {
	right: -14px;
}

.bb-carousel__nav[disabled] {
	opacity: .35;
	cursor: default;
}

/* ------------------------------------------------------------------ dots */

.bb-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.bb-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	background: var(--bb-border);
	transition: background-color .2s var(--bb-ease), width .2s var(--bb-ease);
}

.bb-carousel__dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: var(--bb-saffron);
}

@media (max-width: 1024px) {
	.bb-carousel__nav--prev {
		left: 4px;
	}

	.bb-carousel__nav--next {
		right: 4px;
	}
}