.bsg-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.bsg-track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	width: 100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: grab;
}

/* When drag/swipe is enabled, let the browser handle vertical page scroll but
   give horizontal gestures to our JS (needed especially in bleed/overflow mode
   where there is no native horizontal scroll). */
.bsg-wrapper[data-drag="1"] .bsg-track {
	touch-action: pan-y;
}

.bsg-track::-webkit-scrollbar {
	display: none;
}

.bsg-track.bsg-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
}

.bsg-wrapper[data-drag="0"] .bsg-track {
	cursor: default;
}

.bsg-tile {
	flex-shrink: 0;
	overflow: hidden;
}

.bsg-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
}

.bsg-tile--large {
	width: 320px;
	height: 320px;
}

.bsg-cluster {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
	gap: 8px;
}

.bsg-tile--small {
	width: 145px;
	height: 145px;
}

/* Arrows */
.bsg-arrow {
	flex-shrink: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: #041C3A;
	transition: color 0.2s ease;
	z-index: 2;
}

.bsg-arrow:hover {
	color: #EEBA22;
}

.bsg-empty-notice {
	padding: 20px;
	background: #f3f3f3;
	color: #2A2A2A;
	border: 1px dashed #ccc;
	text-align: center;
}

/* Right-bleed mode: the gallery row starts at the content-container left edge
   but extends to the viewport's right edge (width set via JS), bleeding past the
   container and clipped only by the screen. Native horizontal scroll is kept,
   so drag/swipe and arrows behave exactly as in normal mode. */
.bsg-wrapper.bsg-bleed-right {
	overflow: visible;
}

.bsg-wrapper.bsg-bleed-right .bsg-track {
	overflow: visible;
	will-change: transform;
	/* width is set inline by JS (viewport-right-edge minus track left).
	   Movement in this mode is via transform (set by JS), since overflow:visible
	   has no native scroll. */
}

/* Auto-size small tiles: cluster total height == large tile height.
   Each small tile height = (large height - internal gap) / 2.
   Width follows the chosen aspect ratio (width = height * aspect). */
.bsg-wrapper.bsg-autosize .bsg-tile--small {
	height: calc((var(--bsg-large-height, 320px) - var(--bsg-cluster-gap, 8px)) / 2) !important;
	width: calc(((var(--bsg-large-height, 320px) - var(--bsg-cluster-gap, 8px)) / 2) * var(--bsg-small-aspect, 1)) !important;
}

.bsg-wrapper.bsg-autosize .bsg-cluster {
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
	align-content: start;
}

/* Progress bar */
.bsg-progress {
	position: relative;
	width: 100%;
	height: 3px;
	margin-top: 20px;
	background-color: #E5E5E5;
	border-radius: 999px;
	overflow: hidden;
}

.bsg-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: #041C3A;
	border-radius: 999px;
	transition: width 0.1s linear;
}

/* Lightbox overlay (gallery mode) */
.bsg-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	padding: 40px;
}

.bsg-lightbox-overlay.bsg-lightbox-active {
	opacity: 1;
	visibility: visible;
}

.bsg-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 90vh;
}

.bsg-lightbox-overlay img {
	max-width: 86vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.bsg-lb-close {
	position: absolute;
	top: 24px;
	right: 32px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
	z-index: 2;
}

.bsg-lb-prev,
.bsg-lb-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	z-index: 2;
}

.bsg-lb-prev:hover,
.bsg-lb-next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.bsg-lb-prev { left: 24px; }
.bsg-lb-next { right: 24px; }

.bsg-lb-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.bsg-wrapper[data-lightbox="1"] .bsg-tile img {
	cursor: zoom-in;
}

@media (max-width: 767px) {
	.bsg-lb-prev,
	.bsg-lb-next {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}
	.bsg-lb-prev { left: 10px; }
	.bsg-lb-next { right: 10px; }
}


@media (max-width: 767px) {

	/* Stacked Vertical */
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-track {
		flex-direction: column;
		overflow-x: visible;
		overflow-y: visible;
		cursor: default;
	}
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-tile--large,
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-cluster {
		width: 100% !important;
		margin-top: 0 !important;
	}
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-tile--large {
		height: 280px !important;
	}
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-cluster {
		grid-template-columns: repeat(2, 1fr);
	}
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-tile--small {
		width: 100% !important;
		height: 140px !important;
	}
	.bsg-wrapper[data-mobile-layout="stacked"] .bsg-arrow {
		display: none;
	}

	/* Single Row Scroll, uniform size */
	.bsg-wrapper[data-mobile-layout="single_row"] .bsg-tile--large,
	.bsg-wrapper[data-mobile-layout="single_row"] .bsg-tile--small {
		width: 160px !important;
		height: 160px !important;
		margin-top: 0 !important;
	}
	.bsg-wrapper[data-mobile-layout="single_row"] .bsg-cluster {
		display: contents;
	}

	/* 2-Column Grid */
	.bsg-wrapper[data-mobile-layout="grid_2col"] .bsg-track {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow-x: visible;
		cursor: default;
	}
	.bsg-wrapper[data-mobile-layout="grid_2col"] .bsg-cluster {
		display: contents;
	}
	.bsg-wrapper[data-mobile-layout="grid_2col"] .bsg-tile--large,
	.bsg-wrapper[data-mobile-layout="grid_2col"] .bsg-tile--small {
		width: 100% !important;
		height: 160px !important;
		margin-top: 0 !important;
	}
	.bsg-wrapper[data-mobile-layout="grid_2col"] .bsg-arrow {
		display: none;
	}
}