/* ==========================================================================
   BB Scroll Grid
   Desktop (> 1024px): the section PINS in place while the visitor scrolls;
   the left column travels up and the right column travels down through the
   whole sequence, then the page releases.
   Tablet / mobile (<= 1024px): a Swiper slider with pagination dots.
   All sizing uses em / rem so it scales with the theme's root & local fonts.
   ========================================================================== */

.bb-scroll-grid {
	--bb-col-gap: 3rem;
	--bb-row-gap: 3rem;
	--bb-card-width: 78%;
	--bb-card-radius: 1rem;
	--bb-media-gap: 1rem;
	--bb-media-radius: 1rem;
	--bb-arrow-box: 2.75em;
	--bb-pin-top: 0px;
	--bb-pin-height: 100vh;
	display: block;
	position: relative;
}

/* ---- Pinned viewport (desktop) ------------------------------------------ */
.bb-scroll-grid__pin {
	position: sticky;
	top: var(--bb-pin-top);
	height: var(--bb-pin-height);
	overflow: hidden;
	display: flex;
	align-items: flex-start;
}

.bb-scroll-grid__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--bb-col-gap);
	width: 100%;
}

.bb-scroll-grid__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bb-row-gap);
	will-change: transform;
}

/* ---- Card --------------------------------------------------------------- */
.bb-scroll-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--bb-media-gap);
	border-radius: var(--bb-card-radius);
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.bb-scroll-grid__media {
	display: block;
	overflow: hidden;
	border-radius: var(--bb-media-radius);
	line-height: 0;
}

.bb-scroll-grid__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bb-scroll-grid--zoom .bb-scroll-grid__item:hover .bb-scroll-grid__img {
	transform: scale(1.05);
}

.bb-scroll-grid__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
}

.bb-scroll-grid__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bb-scroll-grid__heading {
	margin: 0 0 0.35em;
	font-size: 1.5rem;
	line-height: 1.2;
}

.bb-scroll-grid__subtext {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
}

/* ---- Arrow button ------------------------------------------------------- */
.bb-scroll-grid__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bb-arrow-box);
	height: var(--bb-arrow-box);
	border-radius: 9999em;
	font-size: 1em;
	color: #ffffff;
	background-color: #142630;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.bb-scroll-grid__arrow svg,
.bb-scroll-grid__arrow i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.bb-scroll-grid__arrow svg {
	fill: currentColor;
}

.bb-scroll-grid__item:hover .bb-scroll-grid__arrow {
	transform: translateX(0.15em);
}

/* ---- Fit-to-viewport (desktop pinned mode, set by JS) ------------------- */
/* Cards are sized so a whole number fill the pinned viewport exactly, so the
   sequence always starts and ends on complete cards at any screen size. */
.bb-scroll-grid--fit .bb-scroll-grid__item {
	height: var(--bb-card-h);
}

.bb-scroll-grid--fit .bb-scroll-grid__media {
	flex: 1 1 auto;
	min-height: 0;
}

.bb-scroll-grid--fit .bb-scroll-grid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Tablet & mobile: no pin, collapse to a Swiper slider with pagination dots
   ========================================================================== */
/* The slider markup is a duplicate of the cards, hidden on desktop. */
.bb-scroll-grid__swiper {
	display: none;
}

@media (max-width: 1024px) {
	/* JS clears the inline height, but guard in case JS is unavailable. */
	.bb-scroll-grid {
		height: auto !important;
	}

	.bb-scroll-grid__pin {
		display: none;
	}

	.bb-scroll-grid__swiper {
		display: block;
		position: relative;
		overflow: hidden;
		padding-bottom: 2.5rem;
	}

	/* Base Swiper layout (self-contained, no swiper.css needed). */
	.bb-scroll-grid__swiper .swiper-wrapper {
		display: flex;
		box-sizing: content-box;
	}

	.bb-scroll-grid__swiper .swiper-slide {
		flex-shrink: 0;
		width: var(--bb-card-width);
		margin-right: var(--bb-col-gap);
		height: auto;
	}

	.bb-scroll-grid__swiper .swiper-slide:last-child {
		margin-right: 0;
	}

	/* Fallback if Swiper's JS never initialises: plain horizontal scroll. */
	.bb-scroll-grid__swiper:not(.swiper-initialized) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Pagination dots. */
	.bb-scroll-grid__dots {
		position: absolute;
		bottom: 0.5rem;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 0.5rem;
	}

	.bb-scroll-grid__dots .swiper-pagination-bullet {
		width: 0.5rem;
		height: 0.5rem;
		padding: 0;
		border: 0;
		border-radius: 9999em;
		background: #142630;
		opacity: 0.25;
		cursor: pointer;
		transition: opacity 0.3s ease;
	}

	.bb-scroll-grid__dots .swiper-pagination-bullet-active {
		opacity: 1;
	}
}

/* Honour users who prefer less motion: no pin, no column travel. */
@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {
	.bb-scroll-grid {
		height: auto !important;
	}

	.bb-scroll-grid__pin {
		position: static;
		height: auto !important;
		overflow: visible;
	}

	.bb-scroll-grid__col {
		transform: none !important;
	}
}