/**
 * KOG · Book page
 * -----------------------------------------------------------------------------
 * Scoped to the booking flow: hero → scheduler → one testimonial. Everything is
 * namespaced `.kog-book-*`.
 *
 * Colour, type and spacing come from theme.json presets. Entrance animation is
 * the shared `.kog-fade dN` stagger from blocks.css, which already carries the
 * prefers-reduced-motion override.
 *
 * The page carries a third-party iframe, so the rules below stop at the edge of
 * the embed: its own interior is Calendly's and is not reachable from here.
 */

.kog-book-hero,
.kog-book-scheduler,
.kog-book-inquiry {
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.kog-book-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(62vh, 560px);
	/* Shorter than the contact hero on purpose. The calendar is the job of this
	   page, and every pixel of hero is a pixel the scheduler is below the fold.
	   Dark at the top so the overlay header's light nav stays legible, deepest
	   at the bottom-left where the copy sits. */
	/* Two scrims. The horizontal one gives the copy a quiet ground on the left
	   while the room stays readable on the right; the vertical one keeps the
	   overlay header's light nav legible at the top. Khaliah is centre-right in
	   the plate, so the copy never lands on her. */
	background-image:
		linear-gradient(
			90deg,
			rgba(12, 26, 18, 0.9) 0%,
			rgba(12, 26, 18, 0.72) 38%,
			rgba(12, 26, 18, 0.34) 68%,
			rgba(12, 26, 18, 0.42) 100%
		),
		linear-gradient(
			180deg,
			rgba(12, 26, 18, 0.72) 0%,
			rgba(12, 26, 18, 0.3) 32%,
			rgba(12, 26, 18, 0.55) 100%
		),
		url('../images/keynote-ivy-towler.jpg');
	background-size: cover;
	background-position: center 45%;
	padding-top: calc(var(--wp--preset--spacing--80) + clamp(3rem, 6vw, 5rem));
	padding-bottom: var(--wp--preset--spacing--70);
}

.kog-book-hero__inner {
	width: 100%;
}

.kog-book-hero__eyebrow {
	color: var(--wp--preset--color--gold-light) !important;
	margin: 0 !important;
}

.kog-book-hero__headline {
	font-size: clamp(2.5rem, 5.2vw, 4.25rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 1rem 0 0 !important;
	/* Held short so the last line stops before Khaliah, who sits centre-right in
	   the plate. Wider and the headline runs across her face. */
	max-width: 15ch;
	text-wrap: balance;
}

.kog-book-hero__lead {
	font-size: 1.0625rem !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--cream) !important;
	margin: 1.5rem 0 0 !important;
	max-width: 58ch;
}

/* ==========================================================================
   2. Scheduler
   ========================================================================== */

.kog-book-scheduler {
	background: var(--wp--preset--color--warm-white);
	padding-block: var(--wp--preset--spacing--80);
}

.kog-book-scheduler__intro {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
}

.kog-book-scheduler__title {
	font-size: clamp(1.875rem, 3.4vw, 2.75rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
	margin: 0 !important;
	text-wrap: balance;
}

.kog-book-scheduler__body {
	font-size: 1.0625rem !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--warm-gray) !important;
	margin: 1.25rem 0 0 !important;
}

/* The one instruction on the page. Set apart from the paragraph above it so it
   reads as the handoff to the calendar rather than more prose. */
.kog-book-scheduler__cue {
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 2rem 0 0 !important;
}

/* ==========================================================================
   3. Calendly embed
   ========================================================================== */

/* No min-height here on purpose. The widget div carries an inline height that
   reserves space until Calendly's script runs, and from then on `data-resize`
   drives the iframe — it settles near 660px and grows once a date is picked.
   A floor on this container would just strand whitespace under the shorter
   states, and a fixed height would fight the resize outright. */
.kog-book-calendly {
	max-width: 1000px;
	margin: 2.5rem auto 0;
}

.kog-book-calendly .calendly-inline-widget {
	width: 100%;
}

.kog-book-calendly__fallback {
	font-size: 1rem;
	line-height: 1.7;
	text-align: center;
	color: var(--wp--preset--color--charcoal);
}

.kog-book-calendly__fallback a {
	color: var(--kg-gold-text, var(--wp--preset--color--gold));
	font-weight: 600;
}

@media (max-width: 781px) {
	.kog-book-hero {
		min-height: min(58vh, 460px);
		/* The narrow frame crops the room away either side, so hold on her. */
		background-position: 58% 45%;
	}

	.kog-book-calendly {
		margin-top: 2rem;
	}
}

/* ==========================================================================
   4. Not ready to schedule
   ========================================================================== */

/* Sits directly under the calendar for anyone the calendar does not suit, so it
   is pitched quieter than everything above it: cream rather than another white
   band, a smaller heading than the scheduler's, and the ghost button rather
   than a second gold one competing with the calendar's own CTAs. */
.kog-book-inquiry {
	background: var(--wp--preset--color--cream);
	padding-block: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--gold-border);
}

.kog-book-inquiry__inner {
	text-align: center;
	max-width: 52ch;
	margin-inline: auto;
}

.kog-book-inquiry__title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem) !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	color: var(--wp--preset--color--charcoal) !important;
}

.kog-book-inquiry__body {
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--warm-gray) !important;
	margin: 0.75rem 0 0 !important;
}

.kog-book-inquiry__actions {
	margin-top: 1.75rem !important;
}