/* -----------------------------------------------------------------
   Bobby's Lounge slideshow on the Refreshments page.
   Self-contained: the photos are local and the crossfade is a plain
   opacity transition, so nothing here depends on an external script
   or a CSS keyframe animation to become visible. The first slide is
   in normal flow and sets the frame height; the rest are stacked on
   top of it, which keeps the layout from shifting as it cycles.
   ----------------------------------------------------------------- */

.lounge-slideshow { margin: 0; }

.lounge-slideshow-frame {
	position: relative;
	overflow: hidden;
	background: #f2f2f2;
	line-height: 0;
}

.lounge-slide {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	max-width: 100%;
}

/* Every slide after the first is stacked over it. */
.lounge-slide + .lounge-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only the active slide is visible. The first slide carries is-active
   in the markup, so the photo still shows if JavaScript never runs. */
.lounge-slide { opacity: 0; transition: opacity .8s ease-in-out; }
.lounge-slide.is-active { opacity: 1; }

.lounge-slideshow-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.lounge-slideshow-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid #b4b4b4;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.lounge-slideshow-dot.is-active { background: #777; border-color: #777; }
.lounge-slideshow-dot:focus-visible { outline: 2px solid #0370EA; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.lounge-slide { transition: none; }
}