/* =========================================================
   Booking Intro Solofit
   The heading and the copy side by side, then a 360°
   panorama of the gym across the whole content width.
   Fills the screen; the copy stacks below 1025px.

   Heights come from --sf-screen (snippet 10385): the screen
   height in pixels, fixed while the page is open, so a
   phone's browser bars never resize the section.
   ========================================================= */

.sf-book {
	--sf-bg: #0D0D0D;
	--sf-surface: #111111;
	--sf-text: #f2f0eb;
	--sf-accent: #F2B705;
	--sf-book-screen: var(--sf-screen, 820px);

	--sf-display: "Chakra Petch", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sf-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: none;

	/* A full screen, but min-height so tall content is never clipped. */
	min-height: var(--sf-book-screen);

	/* The same side gutters as the other sections, so the edges line up. */
	padding: clamp(3rem, calc(var(--sf-book-screen) * .07), 5.5rem) 1.15rem;
	background: var(--sf-bg);
	color: var(--sf-text);
}

.sf-book *,
.sf-book *::before,
.sf-book *::after {
	box-sizing: border-box;
}

/* The other sections' content column: 84rem less 3rem each side. */
.sf-book__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, calc(var(--sf-book-screen) * .045), 3.25rem);
	width: 100%;
	max-width: 78rem;
	margin-inline: auto;
}

/* ---------- the copy ---------- */

.sf-book__intro {
	display: grid;
	gap: clamp(.9rem, calc(var(--sf-book-screen) * .02), 1.4rem);
}

.sf-book__lead,
.sf-book__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(.9rem, calc(var(--sf-book-screen) * .02), 1.4rem);
	min-width: 0;
	text-align: left;
}

.sf-book__title {
	margin: 0;
	font-family: var(--sf-display);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 700;
	font-style: italic;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--sf-text);
	text-wrap: balance;
}

.sf-book__subtitle {
	margin: 0;
	font-family: var(--sf-body);
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--sf-accent);
}

.sf-book__text {
	margin: 0;
	max-width: 48ch;
	font-family: var(--sf-body);
	font-size: clamp(1rem, 1.1vw, 1.125rem);
	font-weight: 400;
	line-height: 1.7;
	color: rgba(242, 240, 235, .78);
}

/* The look comes from the kit's site-wide `btn-primary` class; only the
   spacing and the arrow live here. */
.sf-book__cta {
	margin-top: clamp(.2rem, calc(var(--sf-book-screen) * .008), .5rem);
	align-self: flex-start;
}

.sf-book__cta-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.sf-book__cta:hover .sf-book__cta-icon {
	transform: translateX(3px);
}

/* Desktop: the heading on the left, the copy and the button on the right,
   both starting from the top, above the panorama. */
@media (min-width: 1025px) {
	.sf-book {
		padding-inline: 3rem;
	}

	.sf-book__intro {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}

	/* The clock glyph from snippet 10288 moves top right, beside the copy:
	   the panorama now fills the bottom of the section. */
	.sf-book.sf-book {
		--sf-glyph-size: clamp(240px, 20vw, 340px) auto;
		--sf-glyph-pos: right -5rem top 2.5rem;
	}
}

@media (max-width: 767px) {
	.sf-book {
		padding-block: clamp(2.5rem, calc(var(--sf-book-screen) * .06), 4rem);
	}
}

/* Landscape phones: a full screen is only a few hundred pixels tall, so let
   the section grow past it rather than squeezing everything. */
@media (orientation: landscape) and (max-height: 560px) {
	.sf-book {
		min-height: 0;
		padding-block: 3rem;
	}
}

/* =========================================================
   The 360° panorama
   A canvas the script draws the sphere on, over a blurred
   poster that holds the place while the photo loads. The
   badge, the hint and the buttons float above it.
   ========================================================= */

/* Its own box model too: in full screen on a phone it is moved out of the
   section, to <body>. */
.sf-pano,
.sf-pano *,
.sf-pano *::before,
.sf-pano *::after {
	box-sizing: border-box;
}

.sf-pano {
	--sf-pano-ink: #f2f0eb;
	--sf-pano-accent: #f2b705;
	--sf-pano-glass: rgba(13, 13, 13, .62);
	--sf-pano-line: rgba(242, 240, 235, .16);
	--sf-pano-screen: var(--sf-screen, 820px);
	/* How much wider than the frame the poster is drawn, so it roughly
	   matches the opening view: 360° over about 110° across. */
	--sf-pano-s: 3.3;

	position: relative;
	isolation: isolate;
	width: 100%;
	height: clamp(360px, calc(var(--sf-pano-screen) * .58), 620px);
	overflow: hidden;
	border-radius: 3px;
	background: #111111;
	box-shadow:
		0 40px 80px -44px rgba(0, 0, 0, .9),
		0 8px 24px -18px rgba(0, 0, 0, .7),
		0 0 0 1px rgba(242, 240, 235, .08);
	color: var(--sf-pano-ink);
	font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
	.sf-pano {
		height: clamp(300px, calc(var(--sf-pano-screen) * .52), 520px);
	}
}

/* Phones: taller than wide, so turning around has room to show. */
@media (max-width: 767px) {
	.sf-pano {
		--sf-pano-s: 4.6;
		height: auto;
		aspect-ratio: 4 / 5;
		max-height: calc(var(--sf-pano-screen) * .72);
	}
}

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

.sf-pano__poster {
	position: absolute;
	inset: -12px;
	z-index: 0;
	background-color: #111111;
	background-image: var(--sf-pano-poster, none);
	background-repeat: repeat-x;
	background-size: calc(var(--sf-pano-s) * 100%) auto;
	/* Centres the starting direction (--sf-pano-u, 0..1 across the photo). */
	background-position: calc((var(--sf-pano-u, .5) * var(--sf-pano-s) - .5) / (var(--sf-pano-s) - 1) * 100%) 50%;
	filter: blur(6px) brightness(.78);
	transition: opacity .6s ease;
}

.sf-pano.is-ready .sf-pano__poster {
	opacity: 0;
}

/* No WebGL, or the photo would not load: the whole panorama, flat. */
.sf-pano.is-failed .sf-pano__poster {
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	filter: none;
}

/* ---------- canvas ---------- */

.sf-pano__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	outline: none;
	cursor: grab;
	/* Vertical swipes still scroll the page; sideways ones turn the view. */
	touch-action: pan-y;
	transition: opacity .5s ease;
}

.sf-pano.is-ready .sf-pano__canvas {
	opacity: 1;
}

.sf-pano.is-dragging .sf-pano__canvas {
	cursor: grabbing;
}

/* Keyboard focus: a ring drawn over the canvas, which cannot show one. */
.sf-pano.is-focus::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border: 2px solid var(--sf-pano-accent);
	border-radius: inherit;
	pointer-events: none;
}

/* ---------- badge ---------- */

.sf-pano__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: calc(100% - 28px);
	margin: 0;
	padding: 5px 12px 5px 5px;
	border: 1px solid rgba(242, 240, 235, .12);
	border-radius: 3px;
	background: var(--sf-pano-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(242, 240, 235, .88);
	pointer-events: none;
}

.sf-pano__deg {
	flex: none;
	padding: 5px 7px;
	border-radius: 2px;
	background: var(--sf-pano-accent);
	font-family: "Chakra Petch", "Barlow", sans-serif;
	font-weight: 700;
	letter-spacing: .04em;
	color: #0d0d0d;
}

.sf-pano__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 379.98px) {
	.sf-pano__label {
		display: none;
	}
	.sf-pano__badge {
		padding-right: 5px;
	}
}

/* ---------- hint and messages ----------
   Both sit in the middle. The hint stays until the first drag,
   pinch, key or button; a message hides it while it shows.
   max-content with a cap: as wide as the text, wrapping only
   when the frame is narrower. */

.sf-pano__hint,
.sf-pano__msg {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .7rem;
	width: max-content;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: .8rem 1.15rem;
	border: 1px solid rgba(242, 240, 235, .14);
	border-radius: 3px;
	background: rgba(13, 13, 13, .72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--sf-pano-ink);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

.sf-pano__hint {
	text-align: left;
}

.sf-pano__hint svg {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--sf-pano-accent);
	animation: sf-pano-nudge 1.8s ease-in-out infinite;
}

@keyframes sf-pano-nudge {
	0%, 100% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
}

.sf-pano.is-ready:not(.is-touched):not(.has-msg) .sf-pano__hint,
.sf-pano__msg.is-on {
	opacity: 1;
}

.sf-pano__msg.is-busy::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(242, 240, 235, .25);
	border-top-color: var(--sf-pano-accent);
	border-radius: 50%;
	animation: sf-pano-spin .8s linear infinite;
}

@keyframes sf-pano-spin {
	to { transform: rotate(360deg); }
}

/* ---------- buttons ----------
   The theme paints every <button> pink on hover, focus and
   press; every state is pinned here, with enough weight to win. */

.sf-pano__controls {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: none;
	gap: 6px;
}

.sf-pano.is-ready .sf-pano__controls {
	display: flex;
}

.sf-pano .sf-pano__btn,
.sf-pano .sf-pano__btn:hover,
.sf-pano .sf-pano__btn:focus,
.sf-pano .sf-pano__btn:active {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sf-pano-line);
	border-radius: 3px;
	background: var(--sf-pano-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: none;
	color: var(--sf-pano-ink);
	text-decoration: none;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.sf-pano .sf-pano__btn:hover {
		border-color: rgba(242, 183, 5, .55);
		background: rgba(242, 183, 5, .16);
		color: var(--sf-pano-accent);
	}
}

.sf-pano .sf-pano__btn:focus-visible {
	border-color: rgba(242, 183, 5, .55);
	outline: 2px solid var(--sf-pano-accent);
	outline-offset: 2px;
}

.sf-pano__btn svg {
	display: block;
	width: 20px;
	height: 20px;
}

.sf-pano__i-exit,
.sf-pano.is-fullscreen .sf-pano__i-enter {
	display: none;
}

.sf-pano.is-fullscreen .sf-pano__i-exit {
	display: block;
}

/* ---------- full screen ----------
   The browser's own where it has one; elsewhere (iPhone) the
   script moves the panorama to <body> and pins it with is-full.
   Pinned to all four edges, it always matches what is visible,
   whatever the browser's bars are doing. */

.sf-pano:fullscreen,
.sf-pano.is-full {
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
}

.sf-pano.is-full {
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: auto;
	height: auto;
}

/* In full screen every gesture belongs to the panorama. */
.sf-pano:fullscreen .sf-pano__canvas,
.sf-pano.is-full .sf-pano__canvas {
	touch-action: none;
}

html.sf-pano-locked,
html.sf-pano-locked body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sf-book__cta-icon {
		transition: none;
	}
	.sf-pano__hint svg {
		animation: none;
	}
	.sf-pano__poster,
	.sf-pano__canvas,
	.sf-pano__hint,
	.sf-pano__msg {
		transition-duration: .01ms;
	}
}