/* ===========================================================
   Borromeo Gallery Slider — front-end
   =========================================================== */
.bgs-slider {
	--bgs-pv: 4;
	--bgs-pv-tablet: 2.5;
	--bgs-pv-mobile: 1.2;
	--bgs-gap: 16px;
	--bgs-radius: 8px;
	--bgs-pv-now: var(--bgs-pv);
	position: relative;
	box-sizing: border-box;
	width: 100%;
}
.bgs-slider *, .bgs-slider *::before, .bgs-slider *::after { box-sizing: border-box; }

.bgs-viewport { overflow: hidden; width: 100%; }

.bgs-track {
	display: flex;
	gap: var(--bgs-gap);
	will-change: transform;
}

/* Each slide takes a fraction of the viewport based on images-per-view. */
.bgs-slide {
	flex: 0 0 calc((100% - (var(--bgs-pv-now) - 1) * var(--bgs-gap)) / var(--bgs-pv-now));
	margin: 0;
	overflow: hidden;
	border-radius: var(--bgs-radius);
	background: #eef0f5;
}
.bgs-slide .bgs-img,
.bgs-slide img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bgs-radius);
}

/* Fixed-height mode: images crop/fit to a uniform band. */
.bgs-has-height .bgs-slide { height: var(--bgs-height); }
.bgs-has-height .bgs-slide .bgs-img,
.bgs-has-height .bgs-slide img { height: 100%; width: 100%; }
.bgs-fit-cover.bgs-has-height .bgs-slide img { object-fit: cover; }
.bgs-fit-contain.bgs-has-height .bgs-slide img { object-fit: contain; background: #f6f6f6; }

/* Continuous (marquee) mode never transitions; JS drives transform via rAF. */
.bgs-mode-continuous .bgs-track { transition: none; }
.bgs-mode-continuous .bgs-viewport { cursor: default; }

/* Slide mode transitions between positions. */
.bgs-mode-slide .bgs-track { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.bgs-mode-slide.bgs-dragging .bgs-track { transition: none; }
.bgs-mode-slide .bgs-viewport { cursor: grab; }
.bgs-mode-slide.bgs-dragging .bgs-viewport { cursor: grabbing; }

/* Arrows */
.bgs-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.94); color: #050a30; cursor: pointer;
	box-shadow: 0 3px 12px rgba(5,10,48,.22);
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, transform .15s ease;
}
.bgs-arrow:hover { background: #fff; }
.bgs-arrow svg { width: 20px; height: 20px; }
.bgs-prev { left: 10px; }
.bgs-next { right: 10px; }
.bgs-arrow[disabled] { opacity: .35; cursor: default; }

/* Dots */
.bgs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.bgs-dot {
	width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
	background: rgba(5,10,48,.22); cursor: pointer; transition: .15s ease;
}
.bgs-dot.is-active { background: #1d4ed8; transform: scale(1.25); }

.bgs-empty { padding: 16px; background: #fff5d6; border: 1px solid #e8d48a; border-radius: 6px; color: #7a5b00; }

/* Responsive images-per-view */
@media (max-width: 900px) {
	.bgs-slider { --bgs-pv-now: var(--bgs-pv-tablet); }
	.bgs-arrow { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
	.bgs-slider { --bgs-pv-now: var(--bgs-pv-mobile); }
}

/* Respect reduced-motion: stop auto animation. */
@media (prefers-reduced-motion: reduce) {
	.bgs-mode-slide .bgs-track { transition: none; }
}