/* ==========================================================================
   Page Builder — layout glue for flexible-content blocks.
   Only applies to builder pages (.page-builder). Reuses existing component
   styles from style.css; this file just handles wrappers, widths and rhythm.
   ========================================================================== */

.page-builder {
	position: relative;
	z-index: 1;
}

/* Shared centered column for contained content blocks
   (heading, wysiwyg, people, form). Mirrors .page-content width. */
.pb-contained {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 2rem;
}

.dark-theme .pb-contained {
	max-width: 720px;
}

/* Vertical rhythm between contained blocks */
.page-builder > .pb-wysiwyg,
.page-builder > .pb-heading,
.page-builder > .pb-people,
.page-builder > .pb-form-embed {
	margin: 2rem 0;
}

.page-builder > .pb-block:first-child {
	margin-top: 4rem;
	padding-top: 0;
}

.page-builder > .pb-block:last-child {
	margin-bottom: 4rem;
}

/* A heading sits tight against the block that follows it */
.page-builder > .pb-heading {
	margin-bottom: 0;
}

.page-builder > .pb-heading + .pb-wysiwyg,
.page-builder > .pb-heading + .pb-people,
.page-builder > .pb-heading + .pb-form-embed {
	margin-top: 0.5rem;
}

/* WYSIWYG width options */
.pb-width-narrow .pb-contained {
	max-width: 560px;
}

.pb-width-wide .pb-contained {
	max-width: 900px;
}

/* WYSIWYG headings use the site's display font (the base .page-content-body h2
   is an understated body-font heading, and has no dark-theme colour). */
.page-builder .pb-wysiwyg .page-content-body h2,
.page-builder .pb-wysiwyg .page-content-body h3,
.page-builder .pb-wysiwyg .page-content-body h4 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.page-builder .pb-wysiwyg .page-content-body h2 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.page-builder .pb-wysiwyg .page-content-body h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

/* Keep WYSIWYG headings and links legible on dark builder pages. */
body.dark-theme .page-builder .page-content-body h2,
body.dark-theme .page-builder .page-content-body h3,
body.dark-theme .page-builder .page-content-body h4 {
	color: #fefefe;
}

body.dark-theme .page-builder .page-content-body a {
	color: var(--cyan);
}

/* WYSIWYG block: full-width section divider + generous bottom gap, like the
   old homepage's section separators. */
.page-builder > .pb-wysiwyg {
	padding-bottom: 3.5rem;
	margin-bottom: 5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-theme .page-builder > .pb-wysiwyg {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Home-style blocks (hero + card grids) ──────────────────────────────
   The card/hero component styles are global in style.css; these blocks are
   intended to be used with the page's "Dark background" toggle. Here we just
   restore the section spacing that was previously scoped to
   .page-template-page-home-v2. */

.page-builder .hv2-content {
	position: relative;
	z-index: 2;
}

.page-builder > .pb-long-cards {
	padding: 2rem 0 4rem;
}

.page-builder > .pb-short-cards {
	padding-top: 1rem;
}

/* The original overview cards hid the summary; show it in the builder block. */
.page-builder .pb-short-cards .hv2-tier-card__summary {
	display: block;
	font-family: var(--body);
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	margin: 0.5rem 0 0;
}

body:not(.dark-theme) .page-builder .pb-short-cards .hv2-tier-card__summary {
	color: var(--grey-700);
}

/* Keep the hero from colliding with a following block */
.page-builder > .pb-block .pb-hero {
	margin-bottom: 0;
}