/* Sketch Suite — Booking CTA
   Closing section: flag mark, eyebrow, centred headline, supporting line and an
   inline Calendly widget in a card. Copy left, widget right. The background is
   the same pale wash the site's heroes use, or a photo / video / flat colour. */

.skbk {
	--skbk-bg: #ffffff;
	--skbk-text: #0b062b;
	--skbk-muted: #8a90a6;
	--skbk-accent: #6647ff;
	--skbk-embed-h: 700px;
	--skbk-embed-w: 680px;
	--skbk-trim-x: 60px;
	--skbk-trim-top: 65px;
	--skbk-trim-bottom: 45px;
	--skbk-tint: #ffffff;
	--skbk-tint-o: 0;
	--skbk-blur: 0px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	/* Full-bleed: break out of any centred page container. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--skbk-bg);
	color: var(--skbk-text);
	padding: clamp(56px, 6vw, 104px) clamp(20px, 5vw, 72px);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", sans-serif);
}
.skbk *, .skbk *::before, .skbk *::after { box-sizing: border-box; }

/* ── Background wash ────────────────────────────────────── */
/* The same pale blue/white gradient the /services, /our-work and /blog heroes
   sit on. The gradient itself comes from SKSHL_Plugin::wash() so there is one
   definition of it on the site; only the angle is ours. Painted on a ::before
   rather than the section's own background so the media variants can swap in
   without fighting it. */
.skbk--wash::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-image: var(--skbk-wash, linear-gradient(160deg, #ffffff 0%, #dce9f7 100%));
}

/* ── Media background (image / video) ───────────────────── */
.skbk__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}
.skbk__media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border: 0;
}
/* Blur scales the media up slightly so blurred edges don't reveal the section. */
.skbk--blur .skbk__media {
	filter: blur(var(--skbk-blur, 10px));
	transform: translate(-50%, -50%) scale(1.1);
}
.skbk__tint {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--skbk-tint);
	opacity: var(--skbk-tint-o);
}

/* ── Content ────────────────────────────────────────────── */
/* Two columns: the copy takes what's left, the booking card is pinned to the
   width Calendly actually draws at. Its card is a FIXED ~680px that centres in
   whatever width the iframe is given — so any extra width becomes white gutter
   inside the embed, not a bigger widget. Sizing the column to --skbk-embed-w is
   what keeps the frame tight around it. */
.skbk__inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--skbk-embed-w));
	align-items: center;
	gap: clamp(32px, 3.6vw, 72px);
	text-align: left;
}
.skbk__copy { min-width: 0; }
.skbk__icon {
	display: flex;
	margin: 0 0 clamp(16px, 1.8vw, 24px);
	color: var(--skbk-text);
}
.skbk__icon svg,
.skbk__icon img {
	width: clamp(26px, 2.2vw, 32px);
	height: auto;
	display: block;
}
.skbk__eyebrow {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-size: clamp(11px, 0.9vw, 13px);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--skbk-muted);
}
/* The house section-heading treatment — same size, weight and tracking as the
   home-page section headings, and the same Sketch Sweep gradient. --sk-sweep-fg
   MUST equal the heading's own colour or the handoff shows as a colour jump. */
.skbk__heading {
	--sk-sweep-fg: var(--skbk-text);
	margin: 0;
	/* The house section-heading scale, stepped down a notch because this one
	   lives in a ~450px column rather than the full content width. */
	font-size: clamp(30px, 3.4vw, 56px);
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-wrap: balance;
	color: var(--skbk-text);
}
.skbk__subtext {
	margin: clamp(16px, 1.8vw, 24px) 0 0;
	max-width: 40ch;
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: color-mix(in srgb, var(--skbk-text) 66%, transparent);
	text-wrap: pretty;
}

/* ── Booking card ───────────────────────────────────────── */
/* The card IS the widget's frame — no padding of its own, because the trim
   below already removes Calendly's. Its border and radius land right on
   Calendly's own card edge, so the two read as one panel rather than a box
   inside a box. */
.skbk__card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: clamp(14px, 1.2vw, 20px);
	background: #fff;
	border: 1px solid rgba(11, 6, 43, 0.08);
	box-shadow:
		0 1px 2px rgba(11, 6, 43, 0.04),
		0 24px 60px -20px rgba(11, 6, 43, 0.22);
}
/* Calendly writes its iframe straight in here, so this needs a definite height
   for the iframe to resolve against. JS swaps it for the height Calendly
   reports once loaded, less the trim it crops off. */
.skbk__embed {
	position: relative;
	height: var(--skbk-embed-h);
	overflow: hidden;
	background: #fff;
	transition: height 0.35s ease;
}
/* The trim. Calendly's embed page has its own white padding around the card and
   no way to switch it off from outside — so the iframe is grown past this box
   on every side and the overflow clipped, which eats that padding.

   Horizontally this is exact, not a guess: Calendly's card is a FIXED 680px
   centred in whatever width the iframe gets, so the gutter is always
   (iframeWidth - 680) / 2. With the container set to 680 the iframe becomes
   680 + 2 × trim-x, which makes the gutter equal trim-x — so the crop lands
   flush whatever the trim is. Keep trim-x at 60 or more: much below that the
   iframe drops under ~750px and Calendly swaps to its narrow "Select a Day"
   layout.

   Vertically the top is exact too — Calendly's card starts 65px down its page,
   so trim-top: 65 lands on its border. They're separate values because the
   bottom padding is a different size and wants its own number.

   The width and height MUST be stated. An iframe is a replaced element, so
   `width: auto` resolves to its intrinsic 300×150 rather than to the insets —
   the iframe collapses and Calendly renders its mobile layout in the corner. */
.skbk__embed iframe {
	position: absolute;
	top: calc(var(--skbk-trim-top) * -1);
	left: calc(var(--skbk-trim-x) * -1);
	display: block;
	width: calc(100% + var(--skbk-trim-x) * 2) !important;
	height: calc(100% + var(--skbk-trim-top) + var(--skbk-trim-bottom)) !important;
	max-width: none !important;
	border: 0;
}
/* Calendly's own wrapper carries an inline min-width that overflows narrow
   phones — this is the one place we have to override it. */
.skbk__embed .calendly-inline-widget,
.skbk__embed .calendly-spinner { min-width: 0 !important; width: 100% !important; }

/* Placeholder while Calendly loads — its script, then the iframe, is a good
   couple of seconds. Sits above the embed and fades out once the widget has
   actually reported itself ready, rather than the moment it is mounted. */
.skbk__loading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #fff;
	transition: opacity 0.3s ease;
}
.skbk__loading-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--skbk-muted);
}
.skbk__loading-bar {
	position: relative;
	display: block;
	width: min(180px, 50%);
	height: 3px;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in srgb, var(--skbk-accent) 14%, transparent);
}
.skbk__loading-bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	border-radius: inherit;
	background: var(--skbk-accent);
}
@media (prefers-reduced-motion: no-preference) {
	.skbk__loading-bar > span { animation: skbk-load 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
	@keyframes skbk-load {
		0%   { left: -40%; }
		100% { left: 100%; }
	}
}
/* Reduced motion gets a static half-filled bar rather than a travelling one. */
@media (prefers-reduced-motion: reduce) {
	.skbk__loading-bar > span { width: 50%; }
}
.skbk__embed.is-ready .skbk__loading {
	opacity: 0;
	pointer-events: none;
}

/* ── Fallback button (no Calendly link set / no JS) ─────── */
.skbk__actions { margin-top: clamp(28px, 3.4vw, 44px); }
.skbk__btn,
.skbk__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border-radius: 999px;
	background: var(--skbk-accent);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.18s ease;
}
.skbk__fallback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.skbk__btn:hover,
.skbk__fallback:hover {
	filter: brightness(1.1);
	box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--skbk-accent) 55%, transparent);
}
.skbk__btn:hover { transform: translateY(-1px); }

/* ── Responsive ─────────────────────────────────────────── */
/* Once the copy column would be squeezed under ~380px there is nothing left to
   gain from two columns — stack and centre it above the widget. */
@media (max-width: 1140px) {
	.skbk__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 44px);
		max-width: var(--skbk-embed-w);
		text-align: center;
	}
	.skbk__icon { justify-content: center; }
	.skbk__heading { max-width: 18ch; margin-inline: auto; }
	.skbk__subtext { max-width: 48ch; margin-inline: auto; }
}
/* Narrower than its own card width, Calendly reflows to a taller stacked
   layout — hold more room for it before it reports its own height. */
@media (max-width: 740px) {
	.skbk__embed { height: calc(var(--skbk-embed-h) + 260px); }
}
@media (max-width: 600px) {
	.skbk__card { border-radius: 14px; }
}

/* ---------------------------------------------------------------------------
   Calendar only — [sketch_booking layout="embed"]

   For a page that already has its own hero above the calendar: no copy column,
   no band background, just the widget centred at its natural width.
--------------------------------------------------------------------------- */
.skbk--embed-only {
	background: transparent;
	padding-top: clamp(8px, 1.5vw, 24px);
}
.skbk--embed-only .skbk__inner {
	grid-template-columns: minmax(0, var(--skbk-embed-w));
	justify-content: center;
	text-align: center;
}

/* Fitting the card to the widget.
 *
 * Calendly's card is a fixed 680px whatever is in it, and the month view only
 * fills about half of that — the rest is its own empty gutter, which reads as
 * the heading sitting off-centre in a too-wide box. The times column appears
 * beside the calendar as soon as a date is picked and then the full width IS
 * needed, so this cannot be a single narrower number: booking-cta.js watches
 * Calendly's own events and toggles `is-compact` for the month view only.
 *
 * The crop grows by exactly as much as the box shrinks, which keeps the
 * iframe at 760px — above the ~750px floor where Calendly swaps to its narrow
 * phone layout — and keeps the content centred, since it is centred in the
 * card and both sides are cropped equally.
 *
 * Desktop only: on a phone the box is already narrower than Calendly's card,
 * so the widget is in its narrow layout and there is no gutter to reclaim. */
@media (min-width: 900px) {
	.skbk--embed-only {
		--skbk-fit-w: 470px;
		--skbk-fit-trim-x: 145px;
	}
	.skbk--embed-only .skbk__card {
		width: 100%;
		margin-inline: auto;
		transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.skbk--embed-only.is-compact .skbk__card {
		max-width: var(--skbk-fit-w);
	}
	/* Re-declared here rather than on the section, whose inline style would
	   otherwise win for its own box. */
	.skbk--embed-only.is-compact .skbk__embed {
		--skbk-trim-x: var(--skbk-fit-trim-x);
	}
}
@media (prefers-reduced-motion: reduce) {
	.skbk--embed-only .skbk__card { transition: none; }
}