/**
 * Console landing overlap — cluster hubs + home work hub + /projects/.
 * Band height — hero-band.css + cluster-hero.css (.studio-hero--console-landing).
 * Home uses body.studio-page-cluster (same as cluster landing pages).
 */

body.studio-page-cluster :where(.wp-site-blocks) > *:not(header) {
	background-color: #ffffff;
	margin-block-start: 0;
	margin-block-end: 0;
}

body.studio-page-cluster .wp-site-blocks > .studio-hero.studio-hero--video {
	position: relative;
	z-index: 1;
}

body.studio-page-cluster .wp-site-blocks > .wp-block-template-part:has(> .work-console-wrap),
body.studio-page-cluster .wp-site-blocks > .wp-block-template-part:has(> .work-console-float),
body.page-work:not(.home) .wp-site-blocks > .wp-block-template-part:has(> .work-console-wrap) {
	position: relative;
	z-index: 5;
}

body.studio-page-cluster .work-console-float {
	position: relative;
	z-index: 10;
	margin-top: calc(-1 * var(--studio-console-landing, clamp(120px, 14vh, 200px)));
	margin-bottom: 0;
}

body.studio-page-cluster main.wp-block-group {
	position: relative;
	z-index: 4;
	background-color: #ffffff;
}

/* Projects — wrap pulls cards up; main stays below hero */
body.studio-projects-hub-page .projects-hub-wrap {
	position: relative;
	z-index: 5;
	margin-top: var(--studio-console-wrap-pull, clamp(-96px, -10vh, -64px));
	padding-top: var(--studio-console-wrap-pad, clamp(96px, 10vh, 64px));
	background: transparent;
	box-sizing: border-box;
}

body.studio-projects-hub-page #projects-hub.projects-hub {
	position: relative;
	z-index: 10;
	margin-top: var(--studio-console-pull, clamp(-200px, -20vh, -140px));
	margin-bottom: 0;
	padding-top: 0;
	box-sizing: border-box;
	overflow-x: clip;
}

body.studio-projects-hub-page main.wp-block-group {
	position: relative;
	z-index: 4;
	background-color: #ffffff;
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 782px) {
	:root {
		--studio-console-landing: clamp(7.5rem, 14vh, 12.5rem);
		--studio-console-pull: clamp(-12.5rem, -20vh, -8.75rem);
	}

	body.studio-page-cluster .work-console-float {
		margin-top: calc(-1 * var(--studio-console-landing)) !important;
	}

	body.studio-projects-hub-page .projects-hub-wrap {
		margin-top: var(--studio-console-pull);
		padding-top: var(--studio-console-landing);
	}

	body.studio-projects-hub-page #projects-hub.projects-hub {
		margin-top: 0;
	}
}

@media (max-width: 932px) and (orientation: landscape),
	(max-width: 782px) and (max-height: 480px) {
	body.studio-projects-hub-page #projects-hub.projects-hub {
		margin-top: var(--studio-console-pull);
	}
}