/*!
 * All-In-One-Coach — Coach Booking
 * Dark maroon closing panel with a calendar embed and its loading skeleton.
 */

.aioc-booking {
	--cb-page-bg: #f7f1ea;
	--cb-panel-bg: #4a0d0f;
	--cb-card-bg: #eae0d5;
	--cb-embed-bg: #f7f1ea;
	--cb-panel-radius: 32px;
	--cb-embed-h: 640px;

	/* Skeleton tones, sampled from the cream card rather than neutral greys. */
	--cb-sk-base: #e2d5c7;
	--cb-sk-high: #f4ece2;

	position: relative;
	background-color: var(--cb-page-bg);
	font-family: var(--aioc-font-body);
	/* The ambient glow behind the calendar is sized off the card, so on a
	   phone it reaches past the viewport. It is decorative, so it clips —
	   matching every other section in the pack. */
	overflow: clip;
}

.aioc-booking__inner {
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	padding: 60px var(--aioc-shell-gut) 90px;
}

.cb-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 64px;
	padding: 76px 56px 76px 52px;
	border-radius: var(--cb-panel-radius);
	background-color: var(--cb-panel-bg);
}

/* ------------------------------------------------------------- Left column */

.cb-left {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.cb-eyebrow {
	display: block;
	margin-bottom: 30px;
	color: #f3e7dc;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cb-headline {
	margin: 0 0 22px;
	color: #fbf4ec;
	font-family: var(--aioc-font-display);
	font-size: clamp(2.1rem, 3.6vw, 3.3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.022em;
}

/* The mask is transparent, never a colour of its own. On a dark panel a
   filled mask would flash a mismatched shade during the reveal; leaving it
   transparent means the panel itself is the backdrop. */
.cb-mask {
	display: block;
	overflow: hidden;
	background: none;
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}

.cb-line {
	display: block;
	will-change: transform;
}

.cb-details {
	margin: 0 0 34px;
	color: #ebdacb;
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	line-height: 1.6;
}

.cb-details p {
	margin: 0;
}

.cb-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 230px;
	padding: 15px 26px;
	border: 1px solid rgba(243, 231, 220, 0.45);
	border-radius: 999px;
	background-color: transparent;
	color: #f3e7dc;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	transition:
		border-color 0.4s var(--aioc-ease-out),
		background-color 0.4s var(--aioc-ease-out);
}

.cb-footnote {
	margin: 52px 0 0;
	color: #b08c86;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------ Right column */

.cb-right {
	position: relative;
	z-index: 2;
	min-width: 0;
}

/* Ambient warmth behind the card. Decorative only. */
.cb-glow {
	position: absolute;
	inset: -18% -12%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 190, 0.16), transparent 68%);
	filter: blur(50px);
	opacity: 0;
	pointer-events: none;
}

.cb-calendar-card {
	position: relative;
	z-index: 1;
	padding: 26px;
	border-radius: 24px;
	background-color: var(--cb-card-bg);
}

.cb-calendar-label {
	display: block;
	margin-bottom: 22px;
	color: #6b1210;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cb-embed-wrap {
	position: relative;
	min-height: var(--cb-embed-h);
	border-radius: 18px;
	background-color: var(--cb-embed-bg);
	overflow: hidden;
}

.cb-embed {
	position: relative;
	z-index: 1;
	min-height: var(--cb-embed-h);
}

.cb-embed--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: #b08c86;
	font-size: 0.98rem;
	text-align: center;
}

/* Once Calendly has reported its own height, the card is driven from that
   figure instead of the reservation above, and the embed stretches to fill it.
   The pasted Calendly snippet carries an inline height and a min-width, which
   is why these need !important — they are overriding the site owner's markup
   on purpose, not a specificity shortcut. */
.cb-embed-wrap.is-sized,
.cb-embed-wrap.is-sized .cb-embed {
	min-height: 0;
}

.cb-embed-wrap.is-sized .cb-embed {
	height: 100%;
}

.cb-embed-wrap.is-sized .calendly-inline-widget {
	height: 100% !important;
	min-height: 0 !important;
}

.cb-embed .calendly-inline-widget {
	width: 100%;
	min-width: 0 !important;
}

.cb-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* While the skeleton is showing, the embed is present and loading but unseen. */
.cb-embed-wrap[data-cb-loading] .cb-embed {
	opacity: 0;
}

/* ================================================================ Skeleton */

.cb-skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 30px 28px;
	pointer-events: none;
}

.cb-sk-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cb-sk-title {
	width: 42%;
	height: 16px;
	border-radius: 6px;
}

.cb-sk-nav {
	width: 74px;
	height: 16px;
	border-radius: 6px;
}

.cb-sk-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
}

.cb-sk-cell {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
}

.cb-sk-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}

.cb-sk-bar {
	height: 34px;
	border-radius: 10px;
}

/* Every skeleton piece shares one shimmer surface. */
.cb-sk-title,
.cb-sk-nav,
.cb-sk-cell,
.cb-sk-bar {
	display: block;
	background-color: var(--cb-sk-base);
	background-image: linear-gradient(
		100deg,
		var(--cb-sk-base) 30%,
		var(--cb-sk-high) 50%,
		var(--cb-sk-base) 70%
	);
	background-size: 220% 100%;
	background-position: 180% 0;
}

/* The sweep only starts once the entrance has finished revealing the panel,
   so there is no shimmer moving under a still-fading container. */
.cb-skeleton.is-shimmering .cb-sk-title,
.cb-skeleton.is-shimmering .cb-sk-nav,
.cb-skeleton.is-shimmering .cb-sk-cell,
.cb-skeleton.is-shimmering .cb-sk-bar {
	animation: cb-shimmer 1.6s linear infinite;
}

@keyframes cb-shimmer {
	from {
		background-position: 180% 0;
	}
	to {
		background-position: -80% 0;
	}
}

/* ==========================================================================
   Motion layer — initial states only.
   ========================================================================== */

.aioc-js .aioc-booking.aioc-anim:not(.cb-shown) .cb-panel,
.aioc-js .aioc-booking.aioc-anim:not(.cb-shown) [data-cb-el],
.aioc-js .aioc-booking.aioc-anim:not(.cb-shown) [data-cb-detail] {
	opacity: 0;
}

.aioc-js .aioc-booking.aioc-anim:not(.cb-shown) .cb-line {
	transform: translate3d(0, 110%, 0);
}

.aioc-booking.is-animating .cb-panel,
.aioc-booking.is-animating .cb-line,
.aioc-booking.is-animating [data-cb-el] {
	will-change: transform, opacity;
}

/* ------------------------------------------------------------------ Hover */

@media (hover: hover) and (pointer: fine) {
	.cb-pill:hover {
		border-color: rgba(243, 231, 220, 0.8);
		background-color: rgba(243, 231, 220, 0.08);
	}
}

/* ------------------------------------------------------------ Breakpoints */

@media (max-width: 1024px) {
	.cb-panel {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 56px 36px;
	}

	.aioc-booking__inner {
		padding: 40px 24px 70px;
	}

	.aioc-booking {
		--cb-embed-h: 560px;
	}

	.cb-footnote {
		margin-top: 34px;
	}
}

@media (max-width: 767px) {
	/* On a phone the maroon panel becomes the section itself. Nesting a
	   rounded box inside a padded section inside a padded container left the
	   calendar a sliver of the screen wide; with the box gone, the embed gets
	   everything inside the 10px gutter. */
	.aioc-booking {
		background-color: var(--cb-panel-bg);
	}

	.aioc-booking__inner {
		padding: 10px;
	}

	/* The card is the only box left, so it carries the rounding the panel
	   used to. */
	.cb-calendar-card {
		margin-inline: 0;
	}

	.cb-panel {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.cb-right {
		margin-inline: 0;
	}

	.aioc-booking {
		--cb-embed-h: 520px;
	}

	.cb-calendar-card {
		padding: 0.5em;
		border-radius: 16px;
	}

	/* On a phone Calendly switches to its own stacked layout and scrolls
	   inside its frame, exactly as its stock embed does, so the wrapper does
	   not follow the page_height it reports — that figure is far taller than
	   the visible content. The reservation only holds space for the skeleton;
	   once the embed is up the wrapper hugs it, or the card keeps a strip of
	   empty cream under the calendar. */
	.cb-embed-wrap {
		height: auto;
		min-height: var(--cb-embed-h);
		overflow: hidden;
	}

	.cb-embed-wrap:not([data-cb-loading]) {
		min-height: 0;
	}

	/* The label loses the card padding it used to sit inside. */
	.cb-calendar-label {
		margin-inline-start: 6px;
	}

	.cb-pill {
		min-width: 0;
		width: 100%;
	}

	.cb-skeleton {
		padding: 18px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-booking .cb-panel,
	.aioc-js .aioc-booking [data-cb-el],
	.aioc-js .aioc-booking [data-cb-detail] {
		opacity: 1;
	}

	.aioc-js .aioc-booking .cb-line {
		transform: none;
	}

	.cb-mask {
		padding-block-end: 0;
		margin-block-end: 0;
	}

	/* Static muted fill rather than a moving sweep. */
	.cb-skeleton.is-shimmering .cb-sk-title,
	.cb-skeleton.is-shimmering .cb-sk-nav,
	.cb-skeleton.is-shimmering .cb-sk-cell,
	.cb-skeleton.is-shimmering .cb-sk-bar {
		animation: none;
		background-image: none;
		background-color: var(--cb-sk-base);
	}

	.cb-pill {
		transition-duration: 0.01ms !important;
	}
}