/**
 * VWS Before / After Slider — carousel styles.
 * A scroller of static before/after pairs. Two columns on desktop, stacked on
 * mobile. JS drives --vwsba-index (the current slide) to translate the track.
 *
 * Colours are themeable via custom properties (set inline by PHP when the
 * admin chooses a colour or a Blocksy palette token):
 *   --vwsba-carousel-accent    arrow background + active dot
 *   --vwsba-carousel-arrow-fg  arrow icon colour
 *   --vwsba-carousel-dot       inactive dot colour
 */

.vwsba-carousel {
	--vwsba-index: 0;
	--vwsba-carousel-accent: #b1123a;
	--vwsba-carousel-arrow-fg: #fff;
	--vwsba-carousel-dot: #d0d0d5;
	position: relative;
	margin: 1.5em 0;
}

.vwsba-carousel__viewport {
	position: relative;
	overflow: hidden;
}

.vwsba-carousel__track {
	display: flex;
	transform: translateX(calc(var(--vwsba-index) * -100%));
	transition: transform 0.4s ease;
}

.vwsba-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* The before/after pair */
.vwsba-ba-pair {
	display: flex;
	gap: 12px;
}

.vwsba-ba-pair__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #f0f0f1;
	line-height: 0;
}

.vwsba-ba-pair__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Labels — top corners, matching the reference layout. */
.vwsba-ba-pair__label {
	position: absolute;
	top: 12px;
	z-index: 2;
	padding: 4px 12px;
	font-size: var(--vwsba-label-size, 13px);
	text-transform: var(--vwsba-label-transform, none);
	line-height: 1.4;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	font-family: inherit;
}

.vwsba-ba-pair__label--before {
	left: 12px;
}

.vwsba-ba-pair__label--after {
	right: 12px;
}

/* "corners" locks the labels flush into the top-left / top-right corners. */
.vwsba-carousel--labels-corners .vwsba-ba-pair__label {
	top: 0;
	border-radius: 0;
}

.vwsba-carousel--labels-corners .vwsba-ba-pair__label--before {
	left: 0;
	border-bottom-right-radius: 4px;
}

.vwsba-carousel--labels-corners .vwsba-ba-pair__label--after {
	right: 0;
	border-bottom-left-radius: 4px;
}

/* Navigation arrows (shared look) */
.vwsba-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--vwsba-carousel-arrow-fg);
	background: var(--vwsba-carousel-accent);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
	flex: 0 0 auto;
}

.vwsba-carousel__nav:hover {
	filter: brightness(1.08);
}

.vwsba-carousel__nav:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

/* Overlay mode: arrows float over the images, vertically centred. */
.vwsba-carousel--arrows-overlay .vwsba-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.vwsba-carousel--arrows-overlay .vwsba-carousel__prev {
	left: -8px;
}

.vwsba-carousel--arrows-overlay .vwsba-carousel__next {
	right: -8px;
}

/* The controls row (below the images) holds the dots, and — in "below" mode —
   the arrows on either side of them. */
.vwsba-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.vwsba-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.vwsba-carousel__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	background: var(--vwsba-carousel-dot);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.vwsba-carousel__dot.is-active {
	background: var(--vwsba-carousel-accent);
}

.vwsba-carousel__dot:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/*
 * Below-mode arrow layouts. DOM order is prev, dots, next; we rearrange with
 * flex order + auto margins. "center" is the default (controls justify-center).
 */
.vwsba-carousel--btn-split .vwsba-carousel__prev {
	margin-right: auto;
}
.vwsba-carousel--btn-split .vwsba-carousel__next {
	margin-left: auto;
}

.vwsba-carousel--btn-left .vwsba-carousel__controls {
	justify-content: flex-start;
}
.vwsba-carousel--btn-left .vwsba-carousel__dots {
	order: 1;
	margin-left: auto;
}

.vwsba-carousel--btn-right .vwsba-carousel__controls {
	justify-content: flex-end;
}
.vwsba-carousel--btn-right .vwsba-carousel__dots {
	order: 0;
	margin-right: auto;
}
.vwsba-carousel--btn-right .vwsba-carousel__prev {
	order: 1;
}
.vwsba-carousel--btn-right .vwsba-carousel__next {
	order: 2;
}

/* Mobile: stack the pair vertically. */
@media (max-width: 600px) {
	.vwsba-ba-pair {
		flex-direction: column;
	}

	/*
	 * In a column, the main axis is height, so the row's `flex: 1 1 0` would
	 * collapse each item to zero height (flex-basis:0 beats aspect-ratio).
	 * Let each item size to its aspect ratio at full width instead.
	 */
	.vwsba-ba-pair__item {
		flex: 0 0 auto;
		width: 100%;
	}

	.vwsba-carousel--arrows-overlay .vwsba-carousel__nav {
		width: 38px;
		height: 38px;
	}

	.vwsba-carousel--arrows-overlay .vwsba-carousel__prev {
		left: 4px;
	}

	.vwsba-carousel--arrows-overlay .vwsba-carousel__next {
		right: 4px;
	}
}