/*
 * Two sheets in one file, both keyed to the booking slug.
 *
 * 1. `.mk-services` - the services page layout (PLAN §3): measure, heading,
 *    intro, category pills and rows. Cards come from mk-package-cards.css and
 *    are never re-declared here. This half loads inside the HOST THEME's page,
 *    so it styles only what it owns and inherits the theme's typography.
 *
 * 2. `.cp-bk-*` - the "nothing is bookable yet" state. All that is left of the
 *    flat picker grid the services page replaced on every theme (2026-09-16);
 *    its cards and their markup are gone.
 *
 * Same visual language as the shell and the account portal: white surface,
 * thin #e5e5e5 rules, muted grey for secondary text, near-black ink for
 * headings, no heavy shadows. Every token below is declared on :root AND
 * repeated as a var() fallback, so the app shell can override just the tokens -
 * on :root or on its own wrapper - without this file needing to load in any
 * particular order.
 *
 * --cp-bk-page is also read by the inline reset in booking-app-template.php.
 */

/* ── Services page ──────────────────────────────────────────────────── */

.mk-services,
.mk-services *,
.mk-services *::before,
.mk-services *::after {
	box-sizing: border-box;
}

/* A baseline breathing space under whatever the theme printed above us. Themes
   whose header is an overlay need more than this; booking-services.js measures
   the real overlap and tops it up. */
.mk-services {
	overflow-x: clip;
	padding-block-start: clamp(2.5rem, 6vw, 4rem);
}

/* One measure for every band. The gutter expression matches the Canvas
   standalone shell's, so whichever of the two sheets wins the cascade the
   column lands in the same place; the max-width keeps the measure even on a
   host where no Canvas tokens are printed at all. */
.mk-services > .mk-main__content > * {
	width: 100%;
	max-width: 75rem;
	margin-inline: auto;
	padding-inline: var(--mk-content-gutter, max(1.5rem, calc((100% - 75rem) / 2)));
}

.mk-services > .mk-main__content {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.mk-services__head {
	margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

/* Inherit, never paint: the page sits on whatever the host theme painted, so a
   black-background theme's own white body ink has to flow straight through. */
.mk-services__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: inherit;
	overflow-wrap: break-word;
}

.mk-services__intro {
	margin: 0.75rem auto 0;
	max-width: 44rem;
	font-size: clamp(0.95rem, 1.4vw, 1.0625rem);
	line-height: 1.6;
	color: var(--mk-muted, #7a7a7a);
	overflow-wrap: break-word;
}

/* ── Category pills ─────────────────────────────────────────────────── */

.mk-services__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block-end: clamp(1.5rem, 4vw, 2.25rem);
}

/* Solid fills only - a selected pill is the inverse surface, an unselected one
   the card surface with a hairline border. No tone-on-tone washes. */
.mk-services__pill {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.45rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	background: var(--mk-surface-card, #ffffff);
	color: var(--mk-on-card, #1a1a1a);
	border: 1px solid var(--mk-border-strong, #e8e4df);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.mk-services__pill:hover {
	border-color: var(--mk-surface-inverse, #1a1a1a);
}

.mk-services__pill:focus-visible {
	outline: 2px solid var(--mk-surface-inverse, #1a1a1a);
	outline-offset: 2px;
}

.mk-services__pill[aria-pressed="true"],
.mk-services__pill.is-selected {
	background: var(--mk-surface-inverse, #1a1a1a);
	color: var(--mk-on-inverse, #fdfcfa);
	border-color: var(--mk-surface-inverse, #1a1a1a);
}

/* ── Rows ───────────────────────────────────────────────────────────── */

/* Only the page header is centred. Below it each category is its own
   left-aligned section, separated by air and a hairline rule. */
.mk-services__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 4.5rem);
}

.mk-services__row {
	margin: 0;
	min-width: 0;
}

/* The rule belongs BETWEEN sections, so it is drawn by any visible row that has
   a visible row above it - never orphaned at the top of a filtered view, where
   the rows before it are `hidden`. */
.mk-services__row:not([hidden]) ~ .mk-services__row:not([hidden]) {
	border-top: 1px solid var(--mk-border-hairline, #e8e4df);
	padding-top: clamp(2rem, 5vw, 3rem);
}

.mk-services__row-label {
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.25;
	color: inherit;
	overflow-wrap: break-word;
}

/* Cards line up under their heading, at the section's left edge. The card sheet
   centres a short grid because the offering page prints it as a standalone
   band; here it is one section of a list, so only the placement is overridden -
   the card's own 300-400px sizing is still the card sheet's business, and three
   or more cards still fill the measure. */
.mk-services .mk-services__rows .mk-packages__grid {
	justify-content: start;
	justify-items: start;
	margin-inline: 0;
}

/* Beats a theme rule that gives `section` or `h2` a display value; the
   attribute alone loses to a plain element selector. */
.mk-services .mk-services__row[hidden],
.mk-services .mk-services__row.is-hidden,
.mk-services .mk-services__row-label[hidden],
.mk-services .mk-services__row-label.is-hidden {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mk-services__pill {
		transition: none;
	}
}

/* ── Dark hosts ─────────────────────────────────────────────────────── */

/*
 * The card sheet and the pills read Canvas tokens whose shipped values assume a
 * light page, so on a black theme the cards stay white and the ink stays near
 * black. The inline probe printed after the container measures the real
 * background and stamps one of these two classes; everything below is a token
 * swap, so the card sheet flips without knowing any of this exists.
 *
 * Two classes deep so these beat the `.mk-scope` token block Canvas prints
 * inline in the head, whatever order the two happen to load in.
 */
.mk-services.mk-services--dark {
	/* canvas-standalone-shell.css paints the container `color: var(--mk-on-base)`,
	   and that token ships near-black, so `inherit` on the headings would inherit
	   black on a black page. Swapping the token is what lets them inherit. */
	--mk-on-base: #f5f5f5;
	--mk-surface-card: #161616;
	--mk-on-card: #f5f5f5;
	--mk-muted: #a3a3a3;
	--mk-border-hairline: #333333;
	--mk-border-strong: #333333;
	--mk-surface-sunken: #222222;
	--mk-surface-raised: #1c1c1c;
	--mk-surface-inverse: #ffffff;
	--mk-on-inverse: #111111;
}

/* An unselected pill on a dark page is an outline, not a pale chip: a card-
   coloured fill would read as a second, competing surface. */
.mk-services.mk-services--dark .mk-services__pill {
	background: transparent;
	color: inherit;
	border-color: var(--mk-border-strong, #333333);
}

.mk-services.mk-services--dark .mk-services__pill:hover {
	border-color: currentColor;
}

/* The selected pill stays the base rule's job - `--mk-surface-inverse` is white
   here, so it inverts the right way round on its own. */
.mk-services.mk-services--dark .mk-services__pill[aria-pressed="true"],
.mk-services.mk-services--dark .mk-services__pill.is-selected {
	background: var(--mk-surface-inverse, #ffffff);
	color: var(--mk-on-inverse, #111111);
	border-color: var(--mk-surface-inverse, #ffffff);
}

/* The empty state predates the token system and hardcodes a light surface. */
.mk-services .cp-bk-picker {
	background: transparent;
	color: inherit;
	max-width: none;
	padding-inline: 0;
}

.mk-services .cp-bk-empty__title {
	color: inherit;
}

.mk-services .cp-bk-empty__note {
	color: var(--mk-muted, #7a7a7a);
}

.mk-services .cp-bk-empty__link {
	color: inherit;
	border-bottom-color: var(--mk-border-strong, #e8e4df);
}

.mk-services .cp-bk-empty__link:hover,
.mk-services .cp-bk-empty__link:focus-visible {
	border-bottom-color: currentColor;
}

/* ── "Nothing is bookable yet" ──────────────────────────────────────── */

:root {
	--cp-bk-page: var(--cp-bg, #ffffff);
	--cp-bk-border: var(--cp-border, #e5e5e5);
	--cp-bk-ink: var(--cp-heading-text, #0a0a0a);
	--cp-bk-text: var(--cp-text, #262626);
	--cp-bk-muted: var(--cp-muted-62, #525252);
	--cp-bk-gutter: 28px;
	--cp-bk-font: var(--cp-font-body, Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif);
}

.cp-bk-picker,
.cp-bk-picker *,
.cp-bk-picker *::before,
.cp-bk-picker *::after {
	box-sizing: border-box;
}

.cp-bk-picker {
	background: var(--cp-bk-page, #ffffff);
	color: var(--cp-bk-text, #262626);
	font-family: var(--cp-bk-font, Montserrat, "Segoe UI", system-ui, sans-serif);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding-inline: var(--cp-bk-gutter, 28px);
	padding-block: 40px 56px;
	max-width: 1180px;
	margin-inline: auto;
	overflow-x: hidden;
}

/* ── Empty state ────────────────────────────────────────────────────── */

.cp-bk-picker--empty {
	display: flex;
	justify-content: center;
	padding-block: 72px 80px;
}

.cp-bk-empty {
	max-width: 30rem;
	text-align: center;
}

.cp-bk-empty__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cp-bk-ink, #0a0a0a);
}

.cp-bk-empty__note {
	margin: 10px 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--cp-bk-muted, #525252);
}

.cp-bk-empty__link {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cp-bk-ink, #0a0a0a);
	text-decoration: none;
	border-bottom: 1px solid var(--cp-bk-border, #e5e5e5);
	padding-bottom: 2px;
}

.cp-bk-empty__link:hover,
.cp-bk-empty__link:focus-visible {
	border-bottom-color: var(--cp-bk-ink, #0a0a0a);
}

/* ── Narrow ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	:root {
		--cp-bk-gutter: 16px;
	}

	.cp-bk-picker {
		padding-block: 24px 36px;
	}
}