/* Design I: photo slideshow. */

/* Wide on a desktop, never taller than a hero; on a phone 4:3, so a
   landscape photo is shown nearly whole instead of a tall slice of it. */
.sigsl .sigsl-show {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 680px;
	overflow: hidden;
	background: var( --sigsl-ink );
	touch-action: pan-y;
}

.sigsl .sigsl-show-slides {
	position: absolute;
	inset: 0;
}

/* Only the photo shown, and the two moving while it changes, are drawn. */
.sigsl .sigsl-show-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
	transition: transform 0.75s var( --sigsl-ease );
}

.sigsl .sigsl-show-slide.is-active,
.sigsl .sigsl-show-slide.is-moving {
	visibility: visible;
}

.sigsl .sigsl-show-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* --- arrows, light on any photo --- */
.sigsl .sigsl-show > button.sigsl-arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	border-color: rgb( 255 255 255 / 0.75 );
	background: rgb( var( --sigsl-shade ) / 0.3 );
	color: #fff;
	transform: translateY( -50% );
}

.sigsl .sigsl-show > button.sigsl-arrow:hover:not( :disabled ) {
	border-color: #fff;
	background: #fff;
	color: var( --sigsl-ink );
}

.sigsl .sigsl-show > .sigsl-arrow--prev {
	left: clamp( 10px, 2.5cqi, 32px );
}

.sigsl .sigsl-show > .sigsl-arrow--next {
	right: clamp( 10px, 2.5cqi, 32px );
}

/* --- the band at the bottom: dots or a count, and the pause button --- */
.sigsl .sigsl-show-bar {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: clamp( 10px, 2.5cqi, 24px );
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	border-radius: 50px;
	background: rgb( var( --sigsl-shade ) / 0.42 );
	color: #fff;
	transform: translateX( -50% );
}

.sigsl button.sigsl-show-dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
}

.sigsl button.sigsl-show-dot:hover {
	background: none;
}

.sigsl button.sigsl-show-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgb( 255 255 255 / 0.55 );
	transition: width 0.3s, background-color 0.3s;
}

.sigsl button.sigsl-show-dot:hover::before,
.sigsl button.sigsl-show-dot[aria-current="true"]::before {
	background: #fff;
}

.sigsl button.sigsl-show-dot[aria-current="true"]::before {
	width: 20px;
}

.sigsl .sigsl-show-count {
	padding: 0 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sigsl button.sigsl-show-pause {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #fff;
}

.sigsl button.sigsl-show-pause:hover {
	background: rgb( 255 255 255 / 0.16 );
	color: #fff;
}

.sigsl .sigsl-show-pause .sigsl-icon {
	width: 14px;
	height: 14px;
}

.sigsl .sigsl-show-pause .sigsl-icon + .sigsl-icon,
.sigsl .sigsl-show.is-paused .sigsl-show-pause .sigsl-icon:first-child {
	display: none;
}

.sigsl .sigsl-show.is-paused .sigsl-show-pause .sigsl-icon + .sigsl-icon {
	display: block;
}

@container ( max-width: 640px ) {
	.sigsl .sigsl-show {
		aspect-ratio: 4 / 3;
	}

	.sigsl .sigsl-show > button.sigsl-arrow {
		width: 38px;
		height: 38px;
	}

	.sigsl .sigsl-show > button.sigsl-arrow .sigsl-icon {
		width: 18px;
		height: 18px;
	}
}