/**
 * Home + cluster — mobile console overlap (same proportions as desktop).
 * Does not increase hero height or push copy down — only syncs landing/pull + rail.
 */

@media (max-width: 782px) {
	:root {
		/* Match desktop work-hero / work-console vh pairing */
		--studio-console-landing: clamp(7.5rem, 14vh, 12.5rem);
		--studio-console-pull: clamp(-12.5rem, -20vh, -8.75rem);
	}

	.studio-hero.studio-hero--work.studio-hero--video,
	.studio-hero.studio-hero--video[class*='cluster-hero--'] {
		padding-bottom: var(--studio-console-landing) !important;
	}

	.work-console-float {
		margin-top: var(--studio-console-pull) !important;
	}

	body.home .wp-block-template-part:has(> .work-console-wrap) {
		margin-top: var(--studio-console-pull);
		padding-top: var(--studio-console-landing);
	}

	/* Console rail = hero rail (not narrower content-pad on clusters) */
	body.home .work-console-float,
	.wp-block-template-part > .work-console-float:has(.work-console--cluster) {
		padding-inline: var(--studio-hero-pad-left, var(--wp--style--root--padding-left, 1.5rem))
			var(--studio-hero-pad-right, var(--wp--style--root--padding-right, 1.5rem));
	}
}

/*
 * Landscape / short viewport — hero min-height was leaving a gap above the console;
 * svh keeps overlap stable when the iOS toolbar steals height.
 */
@media (max-width: 932px) and (orientation: landscape),
	(max-width: 782px) and (max-height: 480px) {
	:root {
		--studio-console-landing: clamp(6rem, 18svh, 10rem);
		/* Pull only — more negative = console sits higher on the hero */
		--studio-console-pull: clamp(-11.5rem, -30svh, -9rem);
	}

	.studio-hero.studio-hero--work.studio-hero--video {
		min-height: min(72svh, 19rem) !important;
		padding-bottom: var(--studio-console-landing) !important;
	}

	.studio-hero.studio-hero--video[class*='cluster-hero--'] {
		min-height: min(68svh, 17.5rem) !important;
		padding-bottom: var(--studio-console-landing) !important;
	}

	.studio-hero--work .work-hero__content.cluster-hero__content,
	.wp-site-blocks > .studio-hero.studio-hero--video[class*='cluster-hero--'] .cluster-hero__content {
		padding-top: clamp(0.65rem, 2.5svh, 1.1rem) !important;
		padding-bottom: clamp(0.35rem, 1.5svh, 0.65rem) !important;
	}

	.studio-hero--work .cluster-hero__content .wp-block-heading,
	.studio-hero.studio-hero--video[class*='cluster-hero--'] .wp-block-heading {
		font-size: clamp(1.35rem, 4.5vw, 1.85rem) !important;
		line-height: 1.1 !important;
		margin-bottom: 0.2rem !important;
	}

	.studio-hero--work .cluster-hero__content > p.alignwide {
		font-size: 0.8125rem !important;
		margin-top: 0.35rem !important;
		line-height: 1.4 !important;
	}

	.work-console .hero-interactive__console {
		padding: 0.65rem 0.75rem;
		gap: 0.5rem;
	}

	.work-console .hero-interactive__door {
		padding: 0.5rem 0.45rem;
		gap: 0.15rem;
	}

	.work-console .hero-interactive__door-index {
		font-size: 1.15rem;
	}

	.work-console .hero-interactive__door-label {
		font-size: 0.72rem;
		line-height: 1.2;
	}

	.work-console .hero-interactive__door-meta {
		font-size: 0.55rem;
		letter-spacing: 0.06em;
	}
}

/* iOS Safari — safe-area top only; do not add extra space above headline */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 782px) {
		.wp-site-blocks
			> .studio-hero.studio-hero--video:has(+ .wp-block-template-part .work-console-float)
			.cluster-hero__content,
		.wp-site-blocks > .studio-hero.studio-hero--work .cluster-hero__content {
			padding-bottom: clamp(0.75rem, 2.5svh, 1.25rem) !important;
		}
	}

	@media (max-width: 932px) and (orientation: landscape),
		(max-width: 782px) and (max-height: 480px) {
		.wp-site-blocks
			> .studio-hero.studio-hero--video:has(+ .wp-block-template-part .work-console-float)
			.cluster-hero__content,
		.wp-site-blocks > .studio-hero.studio-hero--work .cluster-hero__content {
			padding-top: max(
				clamp(0.65rem, 2.5svh, 1.1rem),
				calc(var(--studio-safe-top) + 0.25rem)
			) !important;
			padding-bottom: clamp(0.35rem, 1.5svh, 0.65rem) !important;
		}
	}
}