/* Image Slideshow block — front end + editor. */

.image-slideshow {
	--image-slideshow-accent: var(--blue, #2350c4);
	--image-slideshow-radius: .5rem;
	--image-slideshow-duration: 600ms;
	--image-slideshow-ratio: 16/9;
	--image-slideshow-button: 1.75rem;
	--image-slideshow-inset: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	--image-slideshow-padding: 0px;
	position: relative;
	padding: var(--image-slideshow-padding);
}

/* With a background color, the block becomes a padded, rounded panel. */
.image-slideshow.has-background {
	--image-slideshow-padding: 1rem;
	border-radius: calc(var(--image-slideshow-radius) + .25rem);
	box-shadow: 0 0.5em 2em rgb(0 0 0 / 0.15);
}

/* Slides are stacked in one grid cell, so the block always takes the height of the tallest slide. */
.image-slideshow__viewport {
	display: grid;
	overflow: hidden;
	touch-action: pan-y;
}

.image-slideshow__slide.image-slideshow__slide {
	position: relative;
	grid-area: 1 / 1;
	margin: 0;
	margin-bottom: 0 !important;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--image-slideshow-duration) ease,
		visibility 0s linear var(--image-slideshow-duration);
}

.image-slideshow__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--image-slideshow-duration) ease,
		visibility 0s;
}

/* Slide transition: JS sets --image-slideshow-pos (-1 left, 0 on stage, 1 right) on the incoming/outgoing slides. */
.image-slideshow[data-transition="slide"] .image-slideshow__slide {
	opacity: 1;
	transform: translateX(calc(var(--image-slideshow-pos, 0) * 100%));
	transition:
		transform var(--image-slideshow-duration) cubic-bezier(0.65, 0, 0.35, 1),
		visibility 0s linear var(--image-slideshow-duration);
}

.image-slideshow[data-transition="slide"] .image-slideshow__slide.is-active {
	transform: translateX(calc(var(--image-slideshow-pos, 0) * 100%));
	transition:
		transform var(--image-slideshow-duration) cubic-bezier(0.65, 0, 0.35, 1),
		visibility 0s;
}

.image-slideshow .image-slideshow__slide.is-instant {
	transition: none !important;
}

.image-slideshow__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--image-slideshow-ratio);
	object-fit: cover;
	border-radius: var(--image-slideshow-radius);
	user-select: none;
	-webkit-user-drag: none;
}

.image-slideshow__caption {
	margin-top: 1rem;
	padding-inline: 1rem;
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: center;
}

/* Number badge in the image's top-left corner. */
.image-slideshow__number {
	position: absolute;
	top: clamp(0.5rem, 0.25rem + 1vw, 1rem);
	left: clamp(0.5rem, 0.25rem + 1vw, 1rem);
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--image-slideshow-accent);
	color: #fff;
	font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Controls — overlaid on the bottom-right corner of the image. */
.image-slideshow__overlay {
	position: absolute;
	inset: var(--image-slideshow-padding) var(--image-slideshow-padding) auto var(--image-slideshow-padding);
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	aspect-ratio: var(--image-slideshow-ratio);
	padding: var(--image-slideshow-inset);
	pointer-events: none; /* Clicks and swipes pass through to the image. */
}

/* "Original" ratio: view.js sets the overlay height to the active image's height. */
.image-slideshow.has-original-ratio .image-slideshow__overlay {
	aspect-ratio: auto;
	height: var(--image-slideshow-image-h, 0px);
}

.image-slideshow__controls {
	display: flex;
	gap: 0.6rem;
	pointer-events: auto;
}

.image-slideshow__button {
	appearance: none;
	display: grid;
	place-items: center;
	width: var(--image-slideshow-button);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: color-mix(in srgb, #fff 65%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--image-slideshow-accent);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.image-slideshow__button:hover {
	background: color-mix(in srgb, #fff 90%, transparent);
}

.image-slideshow__button:focus-visible {
	outline: 1px solid var(--image-slideshow-accent);
	outline-offset: 3px;
}

.image-slideshow__button svg {
	display: block;
	width: 80%;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.image-slideshow__toggle svg { width: 75%; stroke-width: 2; }
.image-slideshow__toggle .image-slideshow__icon-play { fill: currentColor; stroke-width: 1.5; }
.image-slideshow__toggle[data-state="playing"] .image-slideshow__icon-play,
.image-slideshow__toggle[data-state="paused"] .image-slideshow__icon-pause { display: none; }

.image-slideshow__placeholder {
	margin: 0;
	padding: 2rem;
	border: 1px dashed currentColor;
	border-radius: var(--image-slideshow-radius);
	text-align: center;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.image-slideshow { --image-slideshow-duration: 1ms; }
	.image-slideshow__button { transition: none; }
}