/* Banner Studio — front-end */
.bs-group {
	position: relative;
	width: var(--bs-w);
	max-width: 100%;
	margin: 0 0 1em;
	line-height: 0;
}
.bs-align-center { margin-left: auto; margin-right: auto; }
.bs-align-right { margin-left: auto; }
.bs-align-left { margin-right: auto; }

.bs-banner { display: none; }
.bs-banner.is-visible { display: block; }

/* AJAX zones reserve their space while loading to avoid layout shift. */
.bs-mode-ajax { min-height: var(--bs-h); }
.bs-mode-ajax .bs-banner { display: block; position: relative; }

/* "Show all" mode stacks every banner. */
.bs-mode-all .bs-banner { display: block; margin-bottom: 10px; }

/* Carousel cross-fade. */
.bs-mode-carousel { height: var(--bs-h); }
.bs-mode-carousel .bs-banner {
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}
.bs-mode-carousel .bs-banner.is-visible { opacity: 1; pointer-events: auto; }

.bs-banner img,
.bs-banner iframe { display: block; max-width: 100%; border: 0; }

/* Responsive proportional scaling. */
.bs-responsive .bs-banner img { height: auto; }
.bs-responsive .bs-banner iframe {
	max-width: 100%;
}

/* Invisible click overlay above HTML iframes. */
.bs-click-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.bs-mode-carousel .bs-banner { transition: none; }
}