/**
 * Group Carousel — styles
 * ------------------------------------------------------------------
 * Front-end carousel layout + controls, plus a small editor badge.
 *
 * Slides-per-view is controlled here (Embla is CSS-first). The number of
 * visible slides comes from the --bs-slides-* custom properties that view.js
 * sets from the block's data-* attributes; the gap comes from --bs-gap.
 *
 * Plain CSS on purpose: this folder has no build step, so what you see is what
 * ships. (Mirrors how the theme's JS in this area is hand-authored too.)
 */

/* ----------------------------------------------------------------
 * Front end
 * ---------------------------------------------------------------- */

/* While JS boots, hide overflow so a tall stack of slides doesn't flash. */
.is-bedstone-carousel {
	position: relative;
}

/* The stage wraps the viewport and anchors the arrows to the slide area
 * (so "bottom" arrows sit on the slides, not down by the dots). */
.is-bedstone-carousel .bs-carousel__stage {
	position: relative;
}

.is-bedstone-carousel .bs-carousel__viewport {
	width: 100%;
	/* Fallback for browsers without `overflow: clip` — clips shadows, but keeps
	 * off-screen slides hidden. The @supports block below is the real fix. */
	overflow: hidden;
}

/*
 * Shadow / outline rescue.
 * Cards inside the carousel often have a box-shadow or outline that the
 * viewport's clipping would cut off on every edge. We clip BOTH axes (so
 * off-screen slides stay hidden) and use `overflow-clip-margin` to let that
 * shadow/outline paint a little past the clip edge on all four sides.
 *
 * Why both axes: `overflow-clip-margin` is only honoured when the box is a real
 * clip container. Pairing `overflow-x: clip` with `overflow-y: visible` makes
 * browsers drop the horizontal clip-margin (the left/right edges clip flush) —
 * which is the bug this replaced.
 *
 * Keep --bs-shadow-room SMALLER than the slide gap, otherwise the neighbouring
 * slide can peek through on the left/right edges. Override it per-carousel if a
 * card has an unusually large shadow/outline.
 */
@supports (overflow: clip) {
	.is-bedstone-carousel .bs-carousel__viewport {
		overflow: clip;
		overflow-clip-margin: var(--bs-shadow-room, 1rem);
	}
}

.is-bedstone-carousel .bs-carousel__container {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--bs-gap, 24px);
	/* Embla translates this element; never let it wrap. */
	backface-visibility: hidden;
	touch-action: pan-y pinch-zoom;
}

/*
 * Drag feel.
 * Show a grab/grabbing cursor, and suppress text selection + native image
 * dragging WHILE dragging. A stray selection mid-drag steals the pointer and
 * makes Embla snap to the wrong slide, so this also fixes the awkward snapping.
 */
.is-bedstone-carousel .bs-carousel__viewport {
	cursor: grab;
}

.is-bedstone-carousel.is-bs-dragging .bs-carousel__viewport {
	cursor: grabbing;
}

.is-bedstone-carousel.is-bs-dragging,
.is-bedstone-carousel.is-bs-dragging * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.is-bedstone-carousel .bs-carousel__slide img {
	-webkit-user-drag: none;
}

/*
 * Each slide takes an equal share of the viewport minus the gaps.
 * --bs-n = how many slides are visible at the current breakpoint.
 */
.is-bedstone-carousel .bs-carousel__slide {
	--bs-n: var(--bs-slides-d, 3);
	flex: 0 0 calc((100% - (var(--bs-n) - 1) * var(--bs-gap, 24px)) / var(--bs-n));
	min-width: 0;
}

/* Make every direct child of a slide fill the slide height (nice for cards). */
.is-bedstone-carousel .bs-carousel__slide > * {
	height: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.is-bedstone-carousel .bs-carousel__slide {
		--bs-n: var(--bs-slides-t, 2);
	}
}

@media (max-width: 600px) {
	.is-bedstone-carousel .bs-carousel__slide {
		--bs-n: var(--bs-slides-m, 1);
	}
}

/*
 * Full-bleed: the viewport overflows the container out to the screen edges.
 * It's 100vw wide and centered (works when the block sits in a centered content
 * column, which is the usual case). view.js measures the side "gutter" and pads
 * the viewport so the first slide still lines up with the container at rest,
 * while neighbours bleed off both edges.
 */
.is-bedstone-carousel.is-bs-carousel-bleed .bs-carousel__viewport {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ---- Arrows ---- */
.is-bedstone-carousel .bs-carousel__arrows {
	position: absolute;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
	pointer-events: none; /* let clicks fall through the wrapper... */
}

.is-bedstone-carousel .bs-carousel__arrows .bs-carousel__arrow {
	pointer-events: auto; /* ...but not the buttons themselves */
}

/* Sides: span the full width and push the arrows to each edge, vertically centered. */
.is-bedstone-carousel .bs-carousel__arrows.is-pos-sides {
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	justify-content: space-between;
	padding-inline: 0.5rem;
}

/*
 * Top / bottom: push the arrows fully OUTSIDE the carousel (above the top edge
 * or below the bottom edge), absolutely positioned so they don't take layout
 * space. --bs-arrows-offset (set from the block control) is the gap between the
 * carousel edge and the arrows.
 */
.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-left,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-center,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-right {
	bottom: calc(100% + var(--bs-arrows-offset, 1rem));
	top: auto;
}

.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-left,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-center,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-right {
	top: calc(100% + var(--bs-arrows-offset, 1rem));
	bottom: auto;
}

.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-left,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-left {
	left: 0.75rem;
}

.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-right,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-right {
	right: 0.75rem;
}

.is-bedstone-carousel .bs-carousel__arrows.is-pos-top-center,
.is-bedstone-carousel .bs-carousel__arrows.is-pos-bottom-center {
	left: 50%;
	transform: translateX(-50%);
}

/*
 * Arrows are intentionally UNSTYLED — just a minimal button reset so the
 * browser's default chrome doesn't get in your way. Style them in your own CSS
 * via .bs-carousel__arrow (and .bs-carousel__arrow:disabled for the disabled
 * state at the start/end when looping is off).
 *
 * When there are no more slides in a direction, the arrow gets the native
 * `disabled` attribute (set in view.js) — it stays visible, just disabled.
 */

.is-bedstone-carousel .bs-carousel__arrow:disabled {
	cursor: default;
}

/* ---- Dots ---- */
.is-bedstone-carousel .bs-carousel__dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.is-bedstone-carousel .bs-carousel__dot {
	width: 0.625rem;
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(1, 41, 115, 0.25);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.is-bedstone-carousel .bs-carousel__dot:hover {
	background: rgba(1, 41, 115, 0.5);
}

.is-bedstone-carousel .bs-carousel__dot.is-selected {
	background: #2d65de;
	transform: scale(1.25);
}

.is-bedstone-carousel .bs-carousel__dot:focus-visible {
	outline: 2px solid #2d65de;
	outline-offset: 2px;
}

/*
 * Progressive enhancement guard:
 * Before JS runs, the original Group children are still laid out by the theme.
 * Once .is-bs-carousel-ready is added we know the structure is in place.
 */

/* ----------------------------------------------------------------
 * Editor
 * ---------------------------------------------------------------- */
.is-bedstone-carousel-editor {
	position: relative;
	outline: 1px dashed rgba(45, 101, 222, 0.6);
	outline-offset: 4px;
}

.is-bedstone-carousel-editor::before {
	content: "\f233  Carousel";
	font-family: dashicons, sans-serif;
	position: absolute;
	top: -0.75rem;
	left: 0.5rem;
	z-index: 5;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: #2d65de;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.is-bedstone-carousel .bs-carousel__arrow{
	width:3em;
	height:3em;
	color: var(--bedstone-palette-text-alt);
	border: 1px solid var(--bedstone-palette-text-alt);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.15s ease;
	font-weight: 100;

	&:not(:disabled):hover,
	&:not(:disabled):focus-visible{
		color: var(--bedstone-palette-bg);
		background-color: var(--bedstone-palette-text-alt);
	}

	&:disabled{
		opacity: 0.3;
	}
}