/*
 * Bæks Byg slider.
 * Nothing is hidden until slider.js adds .bb-slider--ready, so with JavaScript
 * disabled every review simply stacks and stays readable.
 */

.bb-slider {
	position: relative;
}

/*
 * All slides share one grid cell, so the track is always as tall as the tallest
 * slide. This is what stops the page jumping when reviews differ in length.
 */
.bb-slider--ready .bb-slider__track {
	display: grid;
	align-items: start;
}

.bb-slider--ready .bb-slider__track > .bb-slide {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.bb-slider--ready .bb-slider__track > .bb-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.bb-slide__title {
	margin-top: 0;
	margin-bottom: 10px; /* matches the original's spacing under the heading */
}

.bb-slide__author {
	margin-top: 0.75rem;
}

.bb-slider__nav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.bb-slider__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-slider__dot:hover,
.bb-slider__dot:focus-visible {
	opacity: 0.6;
}

.bb-slider__dot.is-active {
	opacity: 1;
	transform: scale(1.15);
	background: var(--wp--preset--color--roed, #d40c25);
}

.bb-slider__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--roed, #d40c25);
	outline-offset: 3px;
}

/* The fade is decorative motion - drop it for people who ask for less. */
@media (prefers-reduced-motion: reduce) {
	.bb-slider--ready .bb-slider__track > .bb-slide {
		transition: none;
	}
}