/**
 * Facility Walkthrough block.
 *
 * Loaded only on pages containing the block (declared as the block's "style"
 * in block.json).
 *
 * Chrome is deliberately quiet: the photograph is the content, and every
 * control is one step away from invisible until you need it.
 */

.sw-walkthrough {
	/*
	 * One frame per breakpoint, identical for every photo in it. Portrait on
	 * phones, landscape on desktop, because those are the shapes that suit each
	 * screen. Every image is scaled to cover the frame, so whichever axis
	 * overflows is the axis you pan along: sideways for a wide photo in the
	 * portrait frame, up and down for a tall photo in the desktop frame.
	 *
	 * Tune these two numbers to change the frame. Nothing else depends on them.
	 * 40rem = 640px matches $sw_frame_px in render.php.
	 */
	--sw-frame-aspect: 0.7;
	--sw-pano-height: clamp(20rem, 64vh, 40rem);
	/*
	 * How far past the frame's width a photo is enlarged. A floor, not a
	 * multiplier: it only applies when a photo would otherwise sit inside the
	 * frame horizontally with nothing to pan. Panoramas are already far wider
	 * than this and are untouched.
	 */
	--sw-overscan: 1;
	--sw-radius: 1.125rem;
	position: relative;
}

@media (min-width: 48rem) {
	.sw-walkthrough {
		--sw-frame-aspect: 1.6;
		/*
		 * On a landscape frame a 4:3 photo covers the width exactly and spills
		 * downward, so the only travel available is vertical, which reads badly
		 * for a walkthrough. Enlarging by a fifth buys real sideways travel at
		 * the cost of showing a little less of each photo at once.
		 */
		--sw-overscan: 1.2;
	}
}

.sw-walkthrough__heading {
	margin: 0 0 var(--wp--preset--spacing--30, 2rem);
	/* Matches the caption and room strip below the photo. */
	text-align: center;
}

.sw-walkthrough__data {
	display: none;
}

/* ---------------------------------------------------------------- stage */

.sw-walkthrough__stage {
	position: relative;
}

.sw-pano {
	margin: 0;
}

.sw-pano[hidden] {
	display: none;
}

.sw-pano__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: calc(var(--sw-pano-height) * var(--sw-frame-aspect));
	aspect-ratio: var(--sw-frame-aspect);
	max-height: var(--sw-pano-height);
	margin-inline: auto;
	border-radius: var(--sw-radius);
	background: var(--wp--preset--color--surface, #f5f5f7);
	cursor: grab;
	touch-action: pan-y; /* Vertical scroll still belongs to the page. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sw-pano.is-dragging .sw-pano__viewport {
	cursor: grabbing;
}

/* A panorama narrower than its frame has nothing to pan. */
.sw-pano.is-static .sw-pano__viewport {
	cursor: default;
	touch-action: auto;
}

/*
 * Cover the frame without using object-fit, because object-fit crops inside the
 * element and leaves nothing to pan. Sizing the element itself means the
 * overflow is real and can be dragged into view.
 *
 * When the photo is wider than the frame it fills the height and spills
 * sideways; when it is taller it fills the width and spills downward. The max()
 * picks whichever of the two applies.
 */
.sw-pano__img {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: max(
		calc(100% * var(--sw-overscan)),
		calc(100% * var(--sw-aspect, 1.5) / var(--sw-frame-aspect))
	);
	height: auto;
	max-width: none;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	-webkit-user-drag: none;
	user-select: none;
}

/* Blur the low-resolution preview so it reads as "loading" rather than "bad
   photo", and drop the blur once the real file lands. */
.sw-pano__img[data-src] {
	filter: blur(14px);
	transform-origin: center;
}


/* ----------------------------------------------------------------- hint */

.sw-pano__hint {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.28);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.005em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity 600ms ease;
}

.sw-pano.is-touched .sw-pano__hint {
	opacity: 0;
}

/* ------------------------------------------------------- on-photo nav */

.sw-pano__nav {
	position: absolute;
	inset-block: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(3.25rem, 15%, 5.5rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease;
}

.sw-pano__nav--prev {
	inset-inline-start: 0;
}

.sw-pano__nav--next {
	inset-inline-end: 0;
}

.sw-pano__nav-dot {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.45);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 1.05rem;
	line-height: 1;
	transition: background-color 200ms ease, transform 200ms ease;
}

.sw-pano__nav:hover .sw-pano__nav-dot {
	background: rgb(0 0 0 / 0.5);
	transform: scale(1.06);
}

/* Revealed on intent with a mouse, always present where there is no hover. */
.sw-pano__viewport:hover .sw-pano__nav,
.sw-pano__nav:focus-visible {
	opacity: 1;
}

@media (pointer: coarse) {
	.sw-pano__nav {
		opacity: 1;
	}
}

/* At the first or last room the corresponding edge has nowhere to go. */
.sw-pano__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

/* ----------------------------------------------------------------- rail */

.sw-pano__rail {
	position: relative;
	height: 2px;
	width: 100%;
	max-width: 8rem;
	margin: 0.9rem auto 0;
	border-radius: 999px;
	background: var(--wp--preset--color--hairline, #d2d2d7);
	overflow: hidden;
}

/* The rail describes sideways travel, so it goes away when there is none. */
.sw-pano.is-static .sw-pano__rail,
.sw-pano.has-no-rail .sw-pano__rail {
	visibility: hidden;
}

.sw-pano__rail-thumb {
	display: block;
	height: 100%;
	width: 30%;
	border-radius: 999px;
	background: var(--wp--preset--color--muted, #6e6e73);
}

/* -------------------------------------------------------------- caption */

.sw-pano__caption {
	margin-block-start: var(--wp--preset--spacing--30, 2rem);
	text-align: center;
}

.sw-pano__title {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.018em;
}

.sw-pano__text {
	margin: 0 auto;
	color: var(--wp--preset--color--muted, #6e6e73);
	max-width: 34rem;
}

/* ------------------------------------------------------ thumbnail strip */

.sw-walkthrough__rooms {
	margin-block-start: var(--wp--preset--spacing--30, 2rem);
}

/*
 * width:fit-content plus auto margins centres the strip when there are only a
 * few photos, and lets it scroll from the left once there are many. Using
 * justify-content for that would push the overflow out of reach on the left.
 */
.sw-walkthrough__strip {
	display: flex;
	gap: 0.5rem;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 0.25rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.sw-walkthrough__strip::-webkit-scrollbar {
	display: none;
}

.sw-walkthrough__strip > li {
	margin: 0;
	flex: none;
	scroll-snap-align: center;
}

.sw-walkthrough__thumb {
	/*
	 * Load-bearing. Each thumbnail holds a visually hidden room name that is
	 * position:absolute. Without a positioned ancestor here its containing block
	 * becomes .sw-walkthrough, which is outside the scrolling strip, so it
	 * escapes the strip's clipping and sits at the static position of its
	 * button. For a thumbnail scrolled off to the right that is hundreds of
	 * pixels out, and a 1px hidden span is enough to make the whole page scroll
	 * sideways.
	 */
	position: relative;
	display: block;
	width: clamp(3rem, 9vw, 4rem);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--surface, #f5f5f7);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 200ms ease, transform 200ms ease;
}

.sw-walkthrough__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sw-walkthrough__thumb:hover {
	opacity: 0.8;
}

.sw-walkthrough__thumb.is-current {
	opacity: 1;
	outline: 2px solid var(--wp--preset--color--contrast, #1d1d1f);
	outline-offset: 2px;
}

/* --------------------------------------------------------- poster mode */

.sw-walkthrough.is-mode-poster .sw-walkthrough__stage,
.sw-walkthrough.is-mode-poster .sw-walkthrough__rooms {
	display: none;
}

.sw-walkthrough.is-mode-poster.is-started .sw-walkthrough__stage {
	display: block;
}

.sw-walkthrough.is-mode-poster.is-started .sw-walkthrough__rooms {
	display: flex;
}

.sw-walkthrough.is-mode-poster.is-started .sw-walkthrough__start {
	display: none;
}

.sw-walkthrough__start {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--sw-pano-height);
	padding: 0;
	border: 0;
	border-radius: var(--sw-radius);
	background: var(--wp--preset--color--surface, #f5f5f7);
	color: var(--wp--preset--color--contrast, #1d1d1f);
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
}

.sw-walkthrough__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The preview is a fraction of full width, so it arrives heavily upscaled.
	   Leaning into that with blur and a scrim makes it read as intentional. */
	filter: blur(18px) saturate(1.05);
	transform: scale(1.1);
	z-index: -1;
}

.sw-walkthrough__start::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.3);
	z-index: -1;
}

.sw-walkthrough__start-label {
	padding: 0.9rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1d1d1f);
	font-weight: 500;
	transition: transform 200ms ease;
}

.sw-walkthrough__start:hover .sw-walkthrough__start-label {
	transform: scale(1.03);
}

/* ------------------------------------------------------------- noscript */

.sw-walkthrough__noscript figure {
	margin: 0 0 var(--wp--preset--spacing--40, 4rem);
}

.sw-walkthrough__noscript img {
	width: 100%;
	height: auto;
	border-radius: var(--sw-radius);
}

.sw-walkthrough__noscript figcaption {
	margin-block-start: 1rem;
	text-align: center;
}

.sw-walkthrough__noscript figcaption span {
	display: block;
	color: var(--wp--preset--color--muted, #6e6e73);
}

/* --------------------------------------------------------------- misc */

.sw-walkthrough__empty {
	padding: 1rem;
	border: 1px dashed currentColor;
	border-radius: var(--sw-radius);
	opacity: 0.7;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sw-pano__img,
	.sw-pano__hint,
	.sw-walkthrough__room,
	.sw-walkthrough__step {
		transition: none;
	}
}