/**
 * Studio Design Kit (/studio-kit/) — hero previews inside <main>.
 * Prevents 100vw nested-hero scroll; matches production bleed + content rail.
 */

main.studio-design-kit.wp-block-group {
	overflow-x: clip;
}

/* Never use nested 100vw centering on the kit page */
main.studio-design-kit .studio-hero.studio-hero--video.alignfull,
main.studio-design-kit .is-layout-constrained .studio-hero.studio-hero--video.alignfull {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(var(--wp--style--root--padding-left, 1.5rem) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 1.5rem) * -1) !important;
	left: auto !important;
	transform: none !important;
}

/* Video hero previews — same bleed + pad as .wp-site-blocks > .studio-hero--video */
main.studio-design-kit .dk-hero-preview.studio-hero.studio-hero--video {
	--studio-hero-pad-left: calc(
		2 * var(--wp--style--root--padding-left, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-left, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
	--studio-hero-pad-right: calc(
		2 * var(--wp--style--root--padding-right, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-right, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1);
	min-height: min(40vh, 400px);
	box-sizing: border-box;
}

/* Home — hero-interactive preview (production: /) */
main.studio-design-kit .dk-hero-preview--home.hero-interactive {
	--studio-hero-pad-left: calc(
		2 * var(--wp--style--root--padding-left, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-left, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
	--studio-hero-pad-right: calc(
		2 * var(--wp--style--root--padding-right, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-right, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
	--hero-gutter-left: var(--studio-hero-pad-left);
	--hero-gutter-right: var(--studio-hero-pad-right);
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1) !important;
	min-height: min(60vh, 520px) !important;
	min-height: min(60svh, 520px) !important;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
}

main.studio-design-kit .dk-hero-preview--home .hero-interactive__inner {
	padding-bottom: var(--wp--preset--spacing--50);
}

.wp-site-blocks:has(> main.studio-design-kit) {
	overflow-x: clip;
}

/* About split hero — match /about/ (alignfull inside constrained main + wp:html markup) */
main.studio-design-kit > .wp-block-group.alignfull.studio-hero:not(.studio-hero--video) {
	box-sizing: border-box;
	width: calc(
		100% + var(--wp--style--root--padding-left, 1.5rem) + var(--wp--style--root--padding-right, 1.5rem)
	) !important;
	max-width: none !important;
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1) !important;
	overflow: hidden;
}

main.studio-design-kit > .studio-hero:not(.studio-hero--video) > .wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	width: 100% !important;
	box-sizing: border-box;
}

main.studio-design-kit > .studio-hero:not(.studio-hero--video) > .wp-block-columns > .wp-block-column[style*="flex-basis:58"] {
	flex: 0 0 58% !important;
	max-width: 58% !important;
	min-width: 0;
}

main.studio-design-kit > .studio-hero:not(.studio-hero--video) > .wp-block-columns > .about-hero-photo {
	flex: 0 0 42% !important;
	max-width: 42% !important;
	min-width: 0;
	padding: 0 !important;
}

/* Kit keeps desktop split at all widths (live /about/ stacks below 782px). */
main.studio-design-kit > .studio-hero:not(.studio-hero--video) > .wp-block-columns > .about-hero-photo figure,
main.studio-design-kit > .studio-hero:not(.studio-hero--video) > .wp-block-columns > .about-hero-photo img {
	height: 100%;
	min-height: 240px;
}

/* Hero stake — italic on dark mesh / video previews (not paper-body accent teal) */
main.studio-design-kit .studio-hero:not(.studio-hero--video) .wp-block-heading em,
main.studio-design-kit .wp-block-group.studio-hero:not(.studio-hero--video) .wp-block-heading em {
	font-style: italic;
	color: var(--studio-hero-stake);
}

main.studio-design-kit .dk-hero-preview--home .hero-interactive__title em,
main.studio-design-kit .dk-panel--dark h2 em,
main.studio-design-kit .dk-panel--dark .cs-title em {
	font-style: italic;
	color: var(--studio-hero-stake);
}

/* Site header preview */
main.studio-design-kit .dk-header-preview {
	margin-inline: calc(var(--wp--style--root--padding-left, 1.5rem) * -1);
}

main.studio-design-kit .dk-header-preview__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--studio-rail-inset-left) var(--studio-rail-inset-right);
	box-sizing: border-box;
}