.element + .element,
.element + .cookiebanner-container + .element {
	--element-spacing: var(--size-8);
	--element-spacing-desktop: var(--size-8);

	margin-block-start: var(--element-spacing);

	@media (min-width: 1280px) {
		margin-block-start: var(--element-spacing-desktop);
	}
}

/* 64px default for 2 element not .element-text */
.element:not(.element-text) + .element:not(.element-text, .element-breadcrumb),
.element:not(.element-text)
	+ .cookiebanner-container
	+ .element:not(.element-text, .element-breadcrumb) {
	--element-spacing: var(--size-12);
	--element-spacing-desktop: var(--size-16);
}

/* element with col-full  */
.element + .element:has(.col-full),
.element + .cookiebanner-container + .element:has(.col-full) {
	--element-spacing-desktop: var(--size-16);
}

/* element width max container  */
.element + .container-content-max,
.element + .cookiebanner-container + .container-content-max {
	--element-spacing: var(--size-12);
	--element-spacing-desktop: var(--size-16);
}

.container-content-max + .container-content-max {
	--element-spacing: var(--size-24);
	--element-spacing-desktop: var(--size-32);
}

/* No space between element-text elements or on element-text itself */
.element-text {
	--element-spacing: 0;
	--element-spacing-desktop: 0;
}

/* Default 16px between two text blocks */
.element-text + .element-text,
.element-text + .cookiebanner-container + .element-text {
	--element-spacing: var(--prose-flow);
	--element-spacing-desktop: var(--prose-flow);
}

/* 32px: h1 → .lead */
.element-lead:has(> :is(.col, .col-offset) > h1)
	+ .element-text:has(> :is(.col, .col-offset) > p.lead),
.element-lead:has(> :is(.col, .col-offset) > h1)
	+ .cookiebanner-container
	+ .element-text:has(> :is(.col, .col-offset) > p.lead) {
	margin-block-start: var(--prose-head-md);
}

/* 32px: H3 block → body block */
.element-text:has(> :is(.col, .col-offset) > h3:first-child) {
	--element-spacing: var(--prose-head-md);
	--element-spacing-desktop: var(--prose-head-md);
}

/* 12px: H4 block → body block */
.element-text:has(> :is(.col, .col-offset) > h4:last-child)
	+ .element-text:has(> :is(.col, .col-offset) > p:first-child) {
	--element-spacing: var(--prose-flow-sm);
	--element-spacing-desktop: var(--prose-flow-sm);
}

/* 32px desktop / 20px mobile: body → button/link, H3 → list, H1 → lead. */
.element-text:has(> :is(.col, .col-offset) > p:last-child)
	+ .element-text:has(
		> :is(.col, .col-offset)
			> :is(p:has(> .btn), p:has(> .link-box)):first-child
	),
.element-text:has(> :is(.col, .col-offset) > h1:last-child) + .element-lead,
.element-text:has(> :is(.col, .col-offset) > h1:last-child)
	+ .cookiebanner-container
	+ .element-lead {
	--element-spacing: var(--prose-head-md);
	--element-spacing-desktop: var(--prose-head-md);
}

/* 64px desktop / 32px mobile: a block starting with H2 begins a new
   top-level section. The second selector covers lead → H2 across the inline side-nav clone that JS inserts
   after .element-lead on tablet/mobile. */
.element + .element-text:has(> :is(.col, .col-offset) > h2:first-child),
.element
	+ .cookiebanner-container
	+ .element-text:has(> :is(.col, .col-offset) > h2:first-child),
.element-lead
	+ .element-side-nav-inline
	+ .element-text:has(> :is(.col, .col-offset) > h2:first-child) {
	--element-spacing: var(--prose-head-lg);
	--element-spacing-desktop: var(--prose-head-lg);
}

/* Override: H2 block followed by an H3 block is 32px */
.element-text:has(> :is(.col, .col-offset) > h2:last-child)
	+ .element-text:has(> :is(.col, .col-offset) > h3:first-child) {
	--element-spacing: var(--prose-head-md);
	--element-spacing-desktop: var(--prose-head-md);
}

/* Override: H2 or H3 block followed by an accordion block is 16px */
.element-text:has(> :is(.col, .col-offset) > h2:last-child)
	+ .element-accordion,
.element-text:has(> :is(.col, .col-offset) > h3:last-child)
	+ .element-accordion  {
	--element-spacing: var(--size-4);
	--element-spacing-desktop: var(--size-4);
}

/* Override: accordion block followed by an text block with h3 or h3 is 64px */
.element-accordion
	+ .element-text:has(> :is(.col, .col-offset) > h2:first-child),
.element-accordion
	+ .element-text:has(> :is(.col, .col-offset) > h3:first-child){
	--element-spacing: var(--size-16);
	--element-spacing-desktop: var(--size-16);
}

.element-breadcrumb {
	--element-spacing: var(--size-8);
	margin-block-start: var(--element-spacing);
}

/* .element-stage has inherent margin */
.element-stage + .element,
.element-stage + .cookiebanner-container + .element {
	--element-spacing: 0;
	--element-spacing-desktop: 0;
}

/* Tablet element-testimonial-single has specific width */
.element-frame,
.element-testimonial-single {
	--container-width-md: 736px;
}

/* Multiple testimonial-single has reduced spacing */
.element.element-testimonial-single + .element.element-testimonial-single {
	--element-spacing: var(--size-10);
	--element-spacing-desktop: var(--size-10);
}

/* Multiple .element-contact has reduced spacing */
.element.element-contact + .element.element-contact {
	--element-spacing: var(--size-8);
	--element-spacing-desktop: var(--size-8);
}
.element.element-text + .element.element-contact {
	--element-spacing: var(--size-8);
	--element-spacing-desktop: var(--size-8);
}

/*
WIP: remove 24px not allowed NEW: 32px?
.element.element-text + .element.element-link-overlay {
    --element-spacing: var(--size-6);
    --element-spacing-desktop: var(--size-6);
}

.element.element-text + .element.element-accordion {
    --element-spacing: var(--size-6);
    --element-spacing-desktop: var(--size-6);
}
*/

/* element breadcrumb visible only on desktop */
.element.element-stage + .element.element-breadcrumb,
.element.element-stage
	+ .cookiebanner-container
	+ .element.element-breadcrumb {
	--element-spacing-desktop: var(--size-8);
}

/* Side-nav anchor offset: mirrors the desktop margin-block-start the element
   following .element-side-nav receives from the rules above, so the sticky nav
   starts flush with that element's content. Keep in sync with those rules. */
.element-side-nav:has(+ .element),
.element-side-nav:has(+ .cookiebanner-container + .element) {
	--side-nav-anchor-offset: var(--size-8);
}

.element-side-nav:has(+ .container-content-max),
.element-side-nav:has(+ .cookiebanner-container + .container-content-max) {
	--side-nav-anchor-offset: var(--size-32);
}

.element-side-nav:has(+ .element:not(.element-text, .element-breadcrumb)),
.element-side-nav:has(
		+ .cookiebanner-container
		+ .element:not(.element-text, .element-breadcrumb)
	) {
	--side-nav-anchor-offset: var(--size-16);
}

.element-side-nav:has(
		+ .element-text:has(> :is(.col, .col-offset) > h3:first-child)
	),
.element-side-nav:has(
		+ .cookiebanner-container
		+ .element-text:has(> :is(.col, .col-offset) > h3:first-child)
	) {
	--side-nav-anchor-offset: var(--size-8);
}

.element-side-nav:has(
		+ .element-text:has(> :is(.col, .col-offset) > h2:first-child)
	),
.element-side-nav:has(
		+ .cookiebanner-container
		+ .element-text:has(> :is(.col, .col-offset) > h2:first-child)
	) {
	--side-nav-anchor-offset: var(--size-16);
}