/*
 * Service pages: the page frame, section rhythm, eyebrow and headings
 * (VOY-975, spec KB-525).
 *
 * Loaded by voyagermark_enqueue_service_sections() on any page carrying an
 * is-style-umbrella-* group. Tokens only, no raw hex. Every component tints by
 * the practice pair --um-500 / --um-700, which the umbrella block style sets
 * in custom.css, so a hub changes colour from the Styles panel.
 *
 * RHYTHM: 136px between sections and 80px side padding at 1440 (the content
 * is 1280px wide, centred), per the spec. The page opts out of the flow
 * layout's block gap: every component sets its own spacing.
 */

/* Fallback pair for a page whose Editor cleared the umbrella style. :where()
   keeps it at zero specificity, so the umbrella rule in custom.css wins
   whatever the load order. */
:where(.vy-svc-page) {
	--um-500: var(--accent-bright);
	--um-700: var(--accent);
}

.vy-svc-page {
	--svc-pad: max(20px, calc((100% - 1280px) / 2));
	--svc-gap: 136px;
	--svc-ease: cubic-bezier(0.2, 0, 0, 1);
	color: var(--fg-2);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
}
.vy-svc-page :is(p, h1, h2, h3, ul, ol, li, figure, blockquote) { margin: 0; }
/* Groups too: a flow group's block gap lands on grid and flex children as a
   top margin, which pushed every card after the first 16px down. Sections
   set their own margin below, which wins on order at equal specificity. */
.vy-svc-page .wp-block-group { margin-block: 0; }

/* custom.css frames every .wp-block-table; service tables draw their own lines. */
.vy-svc-page .wp-block-table { padding: 0; border: 0; background: none; }
.vy-svc-page .wp-block-table :is(table, thead, tfoot) { border: 0; }

/* Sections span the page and centre their content with --svc-pad. The page
   group is alignfull with a default layout, so the parent theme's
   `.alignfull:not(.is-layout-constrained) > *` rule would cap each section
   at the wide size and centre it too. Above 1440 the two stacked and the
   content column shrank (800px at 1920, 160px at 2560), so the cap is
   lifted here. */
.vy-svc-page > .vy-svc-sec {
	max-width: none;
	margin-block: 0 var(--svc-gap);
	margin-inline: 0;
	padding-inline: var(--svc-pad);
}
.vy-svc-page > .vy-svc-sec:first-child { padding-top: 88px; }

/* ---- Eyebrow: "01 Where buyers look" ---------------------------------------- */

.vy-svc-page .vy-svc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.vy-svc-page .vy-svc-eyebrow::before {
	content: "";
	flex: none;
	width: 18px;
	height: 2px;
	background: var(--um-500);
}

/* ---- Headings --------------------------------------------------------------- */

.vy-svc-page .vy-svc-h1 {
	max-width: 14ch;
	margin-bottom: 24px;
	font-family: var(--font-display);
	font-size: 64px;
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--fg-1);
}

.vy-svc-page .vy-svc-h2 {
	max-width: 20ch;
	margin-bottom: 48px;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg-1);
}

.vy-svc-page .vy-svc-lede {
	max-width: 560px;
	margin-bottom: 36px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--fg-2);
}

.vy-svc-page a:not(.wp-block-button__link) {
	color: var(--um-500);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---- The practice lockup at the top of a hub ------------------------------------ */

.vy-svc-page .vy-svc-hero .vy-lockup {
	margin: 0 0 28px;
	font-size: var(--wp--preset--font-size--2-xl);
}

/* ---- Button rows ---------------------------------------------------------------- */

.vy-svc-page .vy-svc-actions { gap: 12px; }

/* ---- Mobile ----------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vy-svc-page { --svc-gap: 88px; font-size: 16px; }
	.vy-svc-page > .vy-svc-sec:first-child { padding-top: 40px; }
	.vy-svc-page .vy-svc-h1 { font-size: 36px; line-height: 1.06; }
	.vy-svc-page .vy-svc-h2 { font-size: 32px; margin-bottom: 32px; }
	.vy-svc-page .vy-svc-lede { font-size: 16px; }
	.vy-svc-page .vy-svc-actions { flex-direction: column; align-items: stretch; }
	.vy-svc-page .vy-svc-actions .wp-block-button,
	.vy-svc-page .vy-svc-actions .wp-block-button__link { width: 100%; }
	.vy-svc-page .vy-svc-actions .wp-block-button__link {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
}